起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure：巧用交互樣式實現多tab切換效果
本文分享了在Axure中巧用交互樣式實現多tab切換效果的方法，希望對大家有幫助。
先看效果:
步驟:
第1步，先準備三個矩形。
- 1個內容（結果）展示區域
- 2個tab緊挨著內容區域
第2步設置默認樣式。
（1）設置內容與兩個背景的顏色一致 —— 選中時溶為一體。
（2）設置內容區域的邊框顏色為0099FF —— 后期設置tab選中樣式時要用到。
（3）設置tab的邊框線寬為3、線段顏色為全透明（不透明度：0） —— 與后面設置的tab選中樣式形成對比，視覺上選中之后變大了。
設置好之后的效果是這樣：
第3步設置tab的交互效果。
（1）右鍵元件，菜單中選擇“交互樣式”。
（2）進入交互樣式設置，設置選中后的效果。
- 線段顏色，設置為0099FF —— 與內容區域一樣。
- 線寬，設置為1 —— 選中后放大效果（原來被透明邊框占去了3像素，現在只占1像素（還不透明），視覺上變大了）。
- 邊框可見線設置為最下邊不顯示邊框 —— 目的與內容區域溶合。
第4步，設置層級，及位置。
（1）內容區域置于最低層 —— 不然內容區域的邊線一直可見，不能溶為一體——這也是要把tab的邊線（默認）設置為透明的原因之一。
（2）將tab下移1像素 ——（選中時）正好可以蓋在內容區域的邊線上，從而實現溶為一體。
第5步，設置動作。
點擊tab時，完成以下動作：
（1）設置點擊tab位于頂層 —— 再次保證不是其他元件蓋著。
（2）設置內容區域文字 —— 從內容上體現選中了這一塊。注：2個tab要設置不同的文字（進階方案：使用this.text實現）。
（3）設置當前元件為選中狀態 —— 用到前面設置的交互樣式了。
第6步，設置選項組、設置默認選中項。
（1）tab之間是只能選中一個的，所以需要將這兩個tab設置為同一個選項組（實現單選效果）。
注：先項組的名稱可隨意取。
（2）設置默認選中項 —— 因為內容區域顯示的內容是由tab來決定的，如果兩個都是未選中的，則內容區域什么都不顯示，固需要有一個默認選中項。這里設置的是左邊為默認選中項。
OK，全部完成，伸伸懶腰，點擊F5，就可以看到效果了。
原型鏈接：多tab切換效果?，歡迎下載交流。
本文由 @牧逸 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Pexels ，基于 CC0 協議
太麻煩了 。。
正好要用。
動態面板就能解決的事，何必這么麻煩
這只是一個簡單的示例，真正用起來肯定還要加其他東西的。特別是這里提到的下面的內容區域，真實原型制作時，肯定是使用用動態面板的。但是，如果全用動態面板，有點浪費了
一般我也會優先選擇用動態面板，不過這也算是另一種實現方法，可以借鑒
對
動態面包不簡潔。