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

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

（圖246）

（圖247）

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

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

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

（圖248）

（圖249）

（圖250）

（圖251）

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

（圖252）

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

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

（圖253）

（圖254）

（圖255）

（圖256）

第六步：接下來(lái)我們要給標簽分別添加交互，通過(guò)對TripAdvisor應用的操作觀(guān)察，我們得出結果，使用適用于A(yíng)xure的語(yǔ)言描述如下，當單擊不同的標簽時(shí)會(huì )同時(shí)發(fā)生以下兩個(gè)變化。

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

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

通過(guò)上面的分析以及前五步準備工作，我們只需給每個(gè)標簽添加兩個(gè)簡(jiǎn)單的動(dòng)作即可實(shí)現目標交互效果。

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

（圖257）

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

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

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

（圖258）

（圖259）

（圖260）

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

（圖261）

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

（圖262）

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

（圖263）

（圖264）

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