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

此案例里的一些重點(diǎn)如下：

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

一、畫Tab標(biāo)簽

1. 拖入一個(gè)矩形

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

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

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

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

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

4. 添加基本交互動(dòng)作

【動(dòng)作】

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

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

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

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

二、畫Tab頁面

1. 拖入一個(gè)矩形

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

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

給動(dòng)態(tài)面板起個(gè)名字，便于識(shí)別Tab-box。

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

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

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

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

?

三、設(shè)置動(dòng)作

1. 添加點(diǎn)擊切換聯(lián)動(dòng)

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

【動(dòng)作1】

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

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

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

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

【動(dòng)作2】

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

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

復(fù)制用例組：

粘貼用例組：

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

動(dòng)畫向右：

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

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

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

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