本文分享了在Axure中巧用交互樣式實(shí)現(xiàn)多tab切換效果的方法，希望對大家有幫助。

先看效果:

步驟:

第1步，先準(zhǔn)備三個(gè)矩形。

• 1個(gè)內(nèi)容（結(jié)果）展示區(qū)域
• 2個(gè)tab緊挨著內(nèi)容區(qū)域

第2步設(shè)置默認(rèn)樣式。

（1）設(shè)置內(nèi)容與兩個(gè)背景的顏色一致 —— 選中時(shí)溶為一體。

（2）設(shè)置內(nèi)容區(qū)域的邊框顏色為0099FF —— 后期設(shè)置tab選中樣式時(shí)要用到。

（3）設(shè)置tab的邊框線寬為3、線段顏色為全透明（不透明度：0） —— 與后面設(shè)置的tab選中樣式形成對比，視覺上選中之后變大了。

設(shè)置好之后的效果是這樣：

第3步設(shè)置tab的交互效果。

（1）右鍵元件，菜單中選擇“交互樣式”。

（2）進(jìn)入交互樣式設(shè)置，設(shè)置選中后的效果。

• 線段顏色，設(shè)置為0099FF —— 與內(nèi)容區(qū)域一樣。
• 線寬，設(shè)置為1 —— 選中后放大效果（原來被透明邊框占去了3像素，現(xiàn)在只占1像素（還不透明），視覺上變大了）。
• 邊框可見線設(shè)置為最下邊不顯示邊框 —— 目的與內(nèi)容區(qū)域溶合。

第4步，設(shè)置層級，及位置。

（1）內(nèi)容區(qū)域置于最低層 —— 不然內(nèi)容區(qū)域的邊線一直可見，不能溶為一體——這也是要把tab的邊線（默認(rèn)）設(shè)置為透明的原因之一。

（2）將tab下移1像素 ——（選中時(shí)）正好可以蓋在內(nèi)容區(qū)域的邊線上，從而實(shí)現(xiàn)溶為一體。

第5步，設(shè)置動作。

點(diǎn)擊tab時(shí)，完成以下動作：

（1）設(shè)置點(diǎn)擊tab位于頂層 —— 再次保證不是其他元件蓋著。

（2）設(shè)置內(nèi)容區(qū)域文字 —— 從內(nèi)容上體現(xiàn)選中了這一塊。注：2個(gè)tab要設(shè)置不同的文字（進(jìn)階方案：使用this.text實(shí)現(xiàn)）。

（3）設(shè)置當(dāng)前元件為選中狀態(tài) —— 用到前面設(shè)置的交互樣式了。

第6步，設(shè)置選項(xiàng)組、設(shè)置默認(rèn)選中項(xiàng)。

（1）tab之間是只能選中一個(gè)的，所以需要將這兩個(gè)tab設(shè)置為同一個(gè)選項(xiàng)組（實(shí)現(xiàn)單選效果）。

注：先項(xiàng)組的名稱可隨意取。

（2）設(shè)置默認(rèn)選中項(xiàng) —— 因?yàn)閮?nèi)容區(qū)域顯示的內(nèi)容是由tab來決定的，如果兩個(gè)都是未選中的，則內(nèi)容區(qū)域什么都不顯示，固需要有一個(gè)默認(rèn)選中項(xiàng)。這里設(shè)置的是左邊為默認(rèn)選中項(xiàng)。

OK，全部完成，伸伸懶腰，點(diǎn)擊F5，就可以看到效果了。

原型鏈接：多tab切換效果?，歡迎下載交流。

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

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