本文分享如何用Axure做移動(dòng)端常見的頁內(nèi)tab設(shè)計(jì)，一起來看看~

先看看效果

為什么要用tab

（1）用于區(qū)分不同類別

將不同類別的內(nèi)容劃分的不同的版塊，使用戶可以只關(guān)注想要關(guān)注的部分，對(duì)于不關(guān)注的部分隱藏起來，避免對(duì)用戶造成干擾。

（2）用于分類并列類別

將同一大類下的多個(gè)并列小類分開展示，避免頁面呈現(xiàn)內(nèi)容過多，也方便用戶快速找到想要查看的內(nèi)容。

先看看優(yōu)秀的參考，這是抖音首頁上的tab切換，簡(jiǎn)潔、無任何多余的東西，現(xiàn)在來看下用Axure如何實(shí)現(xiàn)。

步驟

第一步

將APP截圖拖到Axure作為參考，這樣能讓你看到尺寸大小，并且可以參考原圖要素的位置來設(shè)置設(shè)計(jì)圖要素的位置。

1. 拖入“矩形2”，調(diào)整尺寸360*612，填充#434343；
2. 拖入“標(biāo)題三”，修改內(nèi)容為推薦，調(diào)整字體大小18，顏色#FFFFFF；復(fù)制一份修改內(nèi)容為同城，字體大小16，顏色#D7D7D7；
3. 拖入垂直線，長度8px，顏色#D7D7D7；
4. 拖入狀態(tài)欄素材statebar（自行找素材）；
5. 調(diào)整好位置，調(diào)整位置有個(gè)技巧，可以使用分布中的水平分布功能。

完成后的樣子：

第二步

（1）選中推薦、同城右鍵選中組合、再次選中設(shè)置選項(xiàng)組，名字為tab，然后右鍵轉(zhuǎn)換為動(dòng)態(tài)面板。

（2）將矩形也轉(zhuǎn)換為動(dòng)態(tài)面板，點(diǎn)擊動(dòng)態(tài)面板后的+添加state2，將state1中的? 矩形復(fù)制粘貼到state2，為了區(qū)分分別在state1、state2的矩形中輸入1、2。

（3）選中推薦，右鍵選擇交互樣式，設(shè)置選中下字體大小18，顏色#FFFFFF，也將同城做相同操作。

（4）然后將推薦字體大小16，顏色#D7D7D7；在屬性中將選中打鉤，表示默認(rèn)? 選中。

第三步

（1）選中推薦，在屬性中雙擊單擊事件，彈出框中選擇添加條件，設(shè)置選中狀態(tài)，值為false。

（2）然后設(shè)置選中狀態(tài)，選擇推薦值為true。

（3）選擇設(shè)置面板狀態(tài)，在配置動(dòng)作中選中動(dòng)態(tài)面板，狀態(tài)選擇state1。

（4）對(duì)同城做同樣的操作，將向左滑動(dòng)改為向右滑動(dòng)。

OK神功已成。

最后展示一個(gè)更復(fù)雜一點(diǎn)tab原型圖，小紅書的高保真原型設(shè)計(jì)，雖復(fù)雜一些但原理都是一樣的。

如有更好的方法和建議，歡迎在下方留言討論。

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

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