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

第一步：準備好所需的圖像素材，如圖247。

（圖246）

（圖247）

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

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

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

（圖248）

（圖249）

（圖250）

（圖251）

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

（圖252）

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

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

（圖253）

（圖254）

（圖255）

（圖256）

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

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

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

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

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

（圖257）

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

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

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

（圖258）

（圖259）

（圖260）

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

（圖261）

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

（圖262）

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

（圖263）

（圖264）

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