用 Axure 做 步驟列 / 頁籤 效果

上一篇說了共用的 Header 但其實還有 2 個東西很類似，都會是需要會在不同的畫面，顯示出同樣的文字，也會有同樣的一改文字每個頁面都要改的問題，那就是頁籤和步驟列，那我們來看看要怎麼用吧～

1. 畫出步驟列/頁籤：每個步驟樣式全部都畫成沒有被選擇的樣子

    （記得幫每個步驟 / 頁籤命名，方便之後查找）

↑目標

↑畫成這樣

2. 設定被選擇狀態的步驟/頁籤

    a. 把每個步驟/頁籤圈選起來，方便一次設定樣式

    b. 在 PROPERTIES 項目下找到 Interaction Styles 設定，

        將其中 Selected 的狀態設定成你心目中的樣式

    基本的設定比如顏色、框線、字體粗細等都可以在這裡設定
    若勾選 Preview 選項的話，你設定的樣式會即時顯示在左邊的繪圖區

3. 各步驟 / 頁籤 設定點擊動作

    a. 選擇要設定動作的項目
    b. 在 PROPERTIES 項目 Interactions 下，雙擊 OnClick 項目

    c. 動作選擇 Set Selected/Checked

    d. 標的選擇 This Wideget to "true"

        （也可以選剛剛命名好的步驟 / 頁籤，只是選這個比較方便複製 XD）

    e. 在這裡右鍵選擇複製（可用Ctrl + C）

    f. 選擇其他步驟的圖，在同樣位置貼上

4. 把本畫面其他內容畫完

    期間樣式、文字等都能調整

5. 確認無誤之後將本 步驟列 / 頁籤 加入Master

   將本 步驟列 / 頁籤 整個選取起來，點選右鍵加入 Master

6. 使用時在每個需要這個 步驟列 / 頁籤 的頁面，使用 Master

    （將要使用的 Master拖曳進入畫面中）

7. 設定一進入畫面時的動作

    a. focus離開繪圖區中的物件（點擊繪圖區空白位置）

    b. 在 PROPERTIES 項目 Interactions 下，雙擊 OnPageLoad 項目

        （設定一進入畫面時的動作）

    c. 選擇 Set Selected/Checked

    d. 動作標的選擇目前 步驟 / 頁籤

        （現在在畫步驟一的話，這邊步驟標的就選擇步驟二，以此類推）

8. 回 Master 設定每個 步驟 / 頁籤 的連結

    每個頁面都完成之後，記得回 Master 設定點選 步驟 / 頁籤時的動作（換頁）

9. 完成了！

    記得用 F5 或 F6 發佈看看效果、連結是否正確喔