每天進步一點，離大神的目標(biāo)又近了一些。小教程小經(jīng)驗，只是為了提高你的技能水平，把學(xué)到的經(jīng)驗靈活的運用到你的交互設(shè)計上，才是邁入大神圈子的第一步。動態(tài)面板是一個非常有用組件，不但具有多頁面屬性，還具有絕對定位，溢出滾動等多種超強屬性，所以動態(tài)面板的運用是必須要掌握的axure 技巧。

此案例里的一些重點如下：

1. 原件多種交互樣式的運用
2. 原件選項組的運用
3. 動態(tài)面板多狀態(tài)的運用

一、畫Tab標(biāo)簽

1. 拖入一個矩形

去掉3個邊，只留下下單邊，如果你用的我的《快速原型組件庫》，可以直接拖入“下單邊矩形”，設(shè)置一下尺寸為100×40（尺寸這種東西，可以按自己需求來，下同），起個名字Tab1（給原件起名字這個習(xí)慣一定要養(yǎng)成，方便自己，也方便別人）。

2. 交互樣式設(shè)置

設(shè)置了鼠標(biāo)懸停樣式及選定樣式，此處可根據(jù)你的需求自行調(diào)整樣式。

3. 設(shè)置選項組名稱

選項組的功能，一般用在表單的單選框上，相同的選項組，可以聯(lián)動單選。此處，我們可以將普通元件編組，同樣讓其具有單選框的效果。

4. 添加基本交互動作

【動作】

“鼠標(biāo)點擊時”，設(shè)置“選中狀態(tài)”，當(dāng)前元件（This），設(shè)置選中狀態(tài)為“值”、true。

5. 復(fù)制多個Tab標(biāo)簽

復(fù)制多個Tab標(biāo)簽，一字排開，分別改下名稱，便于識別，Tab1、Tab2、Tab3；把Tab1的選中勾上 ，Tab2和Tab3的選中都去掉。

做完這一步，就可以看到初步的效果了。

二、畫Tab頁面

1. 拖入一個矩形

設(shè)置一下尺寸300×191（根據(jù)你的需求來可以），簡單調(diào)下演示，輸入文字，便于效果區(qū)別。

2. 將矩形轉(zhuǎn)換為動態(tài)面板

給動態(tài)面板起個名字，便于識別Tab-box。

3. 復(fù)制動態(tài)面板狀態(tài)

通過復(fù)制狀態(tài)，一共三個狀態(tài)State1 – State3

4. 編輯狀態(tài)內(nèi)容

簡單編輯下各狀態(tài)內(nèi)容，演示的時候，效果更好。

?

三、設(shè)置動作

1. 添加點擊切換聯(lián)動

分別給剛剛畫的三個tab切換按鈕，添加動態(tài)面板聯(lián)動動作。

【動作1】

設(shè)置面板狀態(tài)“Tab-box”選擇狀態(tài)“State1”（Tab1對應(yīng)State1,、Tab2對應(yīng)State2、Tab3對應(yīng)State3），進入和退出動畫Tab1為“向右滑動”時間“500”毫秒，Tab2和Tab3為“向左滑動”時間“500”毫秒。

右單擊動作“復(fù)制”，或選中“Ctrl+c”復(fù)制動作。

右單擊用例組粘貼，或選中直接“Ctrl+v”粘貼動作。

不同的tab對應(yīng)不同的動態(tài)面板狀態(tài)，另外注意進入和退出動畫的方向。

【動作2】

效果是有了，但從Tab3切換到Tab2的運動邏輯似乎不大合理，接下來我們添加判斷條件讓動畫看起來更符合邏輯。

復(fù)制Tab2按鈕的動作用例組，并給上面一組添加條件。

復(fù)制用例組：

粘貼用例組：

設(shè)置用例組條件，當(dāng)面板當(dāng)前狀態(tài)為State3時。

動畫向右：

都添加完以后，最終的效果完美了！

原型演示地址：https://xb067e.axshare.com/

本文由 @吳長建先生 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議