因?yàn)?a href="http://www.ww44088.com" target="_self">昆明網(wǎng)站建設(shè)小編目前還沒有詳細(xì)講解【母版】的使用，所以這個(gè)案例就使用動(dòng)態(tài)面板來扮演APP的內(nèi)容部分。在此以TripAdvisor應(yīng)用為例來進(jìn)行演示，見圖246。啟動(dòng)APP后，顯示的是【看點(diǎn)評(píng)】，所以標(biāo)簽欄中【看點(diǎn)評(píng)】這個(gè)標(biāo)簽是被選中的（我們只需要給標(biāo)簽欄的每一個(gè)標(biāo)簽添加【選中時(shí)】的交互樣式即可）。當(dāng)用戶單擊其他標(biāo)簽時(shí)，動(dòng)態(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）

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

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

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

（圖248）

（圖249）

（圖250）

（圖251）

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

（圖252）

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

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

（圖253）

（圖254）

（圖255）

（圖256）

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

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

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

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

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

（圖257）

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

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

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

（圖258）

（圖259）

（圖260）

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

（圖261）

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

（圖262）

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

（圖263）

（圖264）

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