中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

一、畫Tab標簽

1. 拖入一個矩形

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

2. 交互樣式設置

設置了鼠標懸停樣式及選定樣式，此處可根據你的需求自行調整樣式。

3. 設置選項組名稱

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

4. 添加基本交互動作

【動作】

“鼠標點擊時”，設置“選中狀態”，當前元件（This），設置選中狀態為“值”、true。

5. 復制多個Tab標簽

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

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

二、畫Tab頁面

1. 拖入一個矩形

設置一下尺寸300×191（根據你的需求來可以），簡單調下演示，輸入文字，便于效果區別。

2. 將矩形轉換為動態面板

給動態面板起個名字，便于識別Tab-box。

3. 復制動態面板狀態

通過復制狀態，一共三個狀態State1 – State3

4. 編輯狀態內容

簡單編輯下各狀態內容，演示的時候，效果更好。

?

三、設置動作

1. 添加點擊切換聯動

分別給剛剛畫的三個tab切換按鈕，添加動態面板聯動動作。

【動作1】

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

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

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

不同的tab對應不同的動態面板狀態，另外注意進入和退出動畫的方向。

【動作2】

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

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

復制用例組：

粘貼用例組：

設置用例組條件，當面板當前狀態為State3時。

動畫向右：

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

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

本文由 @吳長建先生 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議