因為昆明網(wǎng)站建設(shè)小編目前還沒有詳細講解【母版】的使用，所以這個案例就使用動態(tài)面板來扮演APP的內(nèi)容部分。在此以TripAdvisor應(yīng)用為例來進行演示，見圖246。啟動APP后，顯示的是【看點評】，所以標(biāo)簽欄中【看點評】這個標(biāo)簽是被選中的（我們只需要給標(biāo)簽欄的每一個標(biāo)簽添加【選中時】的交互樣式即可）。當(dāng)用戶單擊其他標(biāo)簽時，動態(tài)面板的狀態(tài)轉(zhuǎn)換至與標(biāo)簽相應(yīng)的內(nèi)容，并且設(shè)置當(dāng)前單擊的標(biāo)簽為選中狀態(tài)（圖標(biāo)為綠色），其他標(biāo)簽未選中（圖標(biāo)為灰色）。

第一步：準(zhǔn)備好所需的圖像素材，如圖247。

（圖246）

（圖247）

第二步：在【部件】面板中拖放一個動態(tài)面板到設(shè)計區(qū)域，給其命名為【content】，雙擊該動態(tài)面板并添加4個狀態(tài)，分別命名為tab1、tab2、tab3和tab4，然后將圖像素材中對應(yīng)的4張圖片按名稱導(dǎo)入對應(yīng)的面板中，如圖248。

第三步：將圖像素材中的tabbar_bg.png和4個灰色的標(biāo)簽欄圖標(biāo)導(dǎo)入到Axure中并添加文本標(biāo)簽【在學(xué)習(xí)的過程中要養(yǎng)成給每個部件命名的好習(xí)慣】，見圖249。

第三步：參考『案例2』中介紹的知識點，分別給4個標(biāo)簽欄圖標(biāo)添加選中時的交互樣式，并將圖像素材中對應(yīng)的綠色圖標(biāo)導(dǎo)入，見圖250。導(dǎo)入完畢后選中【看點評】圖標(biāo)，在右側(cè)部件【屬性】面板中勾選【選中】，見圖251。

（圖248）

（圖249）

（圖250）

（圖251）

第四步：同樣的道理和操作方法，給圖標(biāo)下面的4個文本標(biāo)簽分別設(shè)置選中時的交互樣式，讓其選中時字體顏色改變?yōu)?589442，見圖252。同第三步操作一樣，選中時的交互樣式設(shè)置完畢后，選中第一個文本標(biāo)簽【看點評】，在右側(cè)部件【屬性】面板中勾選【選中】。

（圖252）

第五步：同時選中（按住Shift鍵多選）第一個標(biāo)簽欄圖標(biāo)和文本標(biāo)簽，單擊右鍵，在彈出的關(guān)聯(lián)菜單中選擇【轉(zhuǎn)換為動態(tài)面板】，見圖253，并給其命名為tab1。同樣的操作，分別將另外三組圖標(biāo)和文本標(biāo)簽轉(zhuǎn)換為動態(tài)面板，并分別命名為tab2、tab3和tab4，然后選中動態(tài)面板tab1，在右側(cè)部件【屬性】面板中勾選【選中】。最后，同時選中這四個動態(tài)面板單擊右鍵，在彈出的關(guān)聯(lián)菜單中選擇【指定選項組】，設(shè)置組名稱為tabs，見圖254。

到這里，所有的準(zhǔn)備工作都已完畢，同時選中4個動態(tài)面板和tabbar_bg.png圖像，并將其移動到content動態(tài)面板下面，見圖255。單擊工具欄中的快速預(yù)覽按鈕，在瀏覽器中可以看到第一個標(biāo)簽是綠色的（選中狀態(tài)），見圖256。

（圖253）

（圖254）

（圖255）

（圖256）

第六步：接下來我們要給標(biāo)簽分別添加交互，通過對TripAdvisor應(yīng)用的操作觀察，我們得出結(jié)果，使用適用于Axure的語言描述如下，當(dāng)單擊不同的標(biāo)簽時會同時發(fā)生以下兩個變化。

被點擊的標(biāo)簽變?yōu)檫x中（綠色），其他標(biāo)簽都變?yōu)槲催x中（灰色）。

單擊不同的標(biāo)簽時，content動態(tài)面板中的狀態(tài)要與標(biāo)簽對應(yīng)切換。

通過上面的分析以及前五步準(zhǔn)備工作，我們只需給每個標(biāo)簽添加兩個簡單的動作即可實現(xiàn)目標(biāo)交互效果。

首先選中tab1，在右側(cè)部件【屬性】面板中雙擊【鼠標(biāo)單擊時】事件，在彈出的【用例編輯器】中新增【選中】動作，在右側(cè)的配置動作中勾選【當(dāng)前部件】（當(dāng)前部件是指當(dāng)前所選中的部件，也就是我們正在添加事件的這個部件，很多情況下勾選該項都可以幫助我們節(jié)省大量操作，在后面的講解中昆明網(wǎng)站制作小編還會多次提及這個知識點）并設(shè)置【選中狀態(tài)值】為true，見圖257。

（圖257）

繼續(xù)添加【設(shè)置面板狀態(tài)】動作，在右側(cè)【配置動作】中勾選【content】動態(tài)面板，設(shè)置選擇狀態(tài)為tab1，見圖258，單擊【確定】按鈕關(guān)閉【用例編輯器】。

同樣的操作方法，給剩余三個標(biāo)簽動態(tài)面板添加相同的交互，但要注意【設(shè)置面板狀態(tài)】動作中，content動態(tài)面板的選擇狀態(tài)要與當(dāng)前標(biāo)簽相對應(yīng)。在Axure中可以復(fù)制已經(jīng)添加的交互到其他部件上再進行適當(dāng)修改即可，不必在每個部件上重復(fù)添加。

選中tab1，在右側(cè)的部件【屬性】面板中選中【鼠標(biāo)單擊時】事件，單擊右鍵，在彈出的關(guān)聯(lián)菜單中選擇【復(fù)制】，或者使用常規(guī)快捷鍵Ctrl/Command+C，復(fù)制用例，見圖259。然后選中tab2，按下快捷鍵Ctrl/Command+V，或者右鍵單擊【鼠標(biāo)單擊時】事件，在彈出的關(guān)聯(lián)菜單中選擇【粘貼】，見圖260。

（圖258）

（圖259）

（圖260）

粘貼用例后需要仔細檢查用例中的動作是否需要修改，避免出錯，如圖261，【設(shè)置content為tab1】這個動作需要修改為【設(shè)置content為tab2】，然后對剩余兩個標(biāo)簽進行同樣的操作即可。

（圖261）

4個標(biāo)簽添加交互后如圖262所示，至此 iOS標(biāo)簽欄視圖切換案例就制作完畢了。

（圖262）

在制作原型的過程中，隨著使用部件數(shù)量的增加，原型的管理會變得更加棘手，所以在初學(xué)階段，要使用Group（組合）工具讓原型結(jié)構(gòu)變得更加扁平化，這樣利于后期對原型的維護管理。比如在這個案例中，我們可以同時選中4個動態(tài)面板標(biāo)簽，單擊工具欄中的【組合】，或者使用快捷鍵Ctrl/Command+G，然后在右側(cè)的【Outline：頁面】面板中給這個組合命名為dp_tabs，見圖263。然后同時選中dp_tabs和tab_bg，再次單擊工具欄中的【組合】按鈕，并在【Outline：頁面】面板將這個組合命名為tabs，見圖264，此時部件的層級關(guān)系就變得非常清晰了。

（圖263）

（圖264）

第七步：在頂部的工具欄中單擊【預(yù)覽】按鈕，或者按下快捷鍵F5/Shift+Command+P，快速預(yù)覽交互效果。