UI設(shè)計(jì)中Tab設(shè)計(jì)指南

　　UI設(shè)計(jì)創(chuàng)新技能層出不窮，UI設(shè)計(jì)滿足著形形色色各種垂直化的需求,在設(shè)計(jì)方面大家也是想方設(shè)法去做一些創(chuàng)新,希望自己能夠在各種應(yīng)用中脫穎而出,今天AAA教育郭老師就針對UI設(shè)計(jì)中Tab設(shè)計(jì)指南進(jìn)行簡單的說明。
 

　　1、Tab的作用
 

　　tab的作用是為了做好內(nèi)容分類，節(jié)省屏幕空間，等需要的時候更容易被人找到!
 

　　試想一下，如果沒有tab 給內(nèi)容分類，所有的功能全部平鋪展開，找起來多麻煩呀，就像衣柜的衣服沒有分類，一堆亂糟糟的，是不是很影響出門速度呢!
 

　　2、Tab的分類
 

　　根據(jù)tab在界面中所處的位置我們可以把tab分為頂部欄tab、側(cè)邊欄tab和底部欄tab。
 

　　底部欄tab在前面文章中已經(jīng)講過了，感興趣的小伙伴可以去UI底部Tab 欄設(shè)計(jì)總結(jié) 這篇文章看看。
 

　　側(cè)邊欄tab：側(cè)邊欄tab放在界面左邊還是右邊取決于tab標(biāo)簽與內(nèi)容的關(guān)聯(lián)性。
 

　　常見的是放在界面左邊，如叮咚買菜， 你想找西紅柿那么你得先找到蔬菜欄目，再去找西紅柿。從上往下，從左到右，符合用戶瀏覽習(xí)慣。
 

　　但也有放在右邊的，如QQ空間的日期tab，因?yàn)榉旁谧筮叺脑挄踝“l(fā)布時間和部分信息，影響閱讀。而這個功能的使用場景就是用戶想要看朋友某個月的動態(tài)內(nèi)容，所以放在右側(cè)更合適。

 

　　3、Tab的兩種狀態(tài)
 

　　以下內(nèi)容都是針對頂部欄Tab來說的。
 

　　Tab可以分為選中狀態(tài)和非選中狀態(tài)，一般來說為了凸顯選中狀態(tài)，我們主要處理方法有改變字色、放大色號、添加線條、增加背景色等。如下圖所示：攜程是用改變字色+添加色塊的方式使選中狀態(tài)更突出。美團(tuán)外賣是通過改變字色+短線的方式來突出。

 

　　具體使用什么方式還要根據(jù)自己產(chǎn)品的特點(diǎn)來設(shè)計(jì)，沒有統(tǒng)一的標(biāo)準(zhǔn)。那么可能有小伙伴就會問了，既然沒有統(tǒng)一標(biāo)準(zhǔn)那就可以根據(jù)自己喜好來設(shè)計(jì)了?NO NO NO!!
 

　　下面總結(jié)了幾種tab設(shè)計(jì)套路供大家參考，我們一一來看：
 

　　加短線的tab樣式
 

　　你們做設(shè)計(jì)時會不會糾結(jié)tab選中狀態(tài)時小短線做多長合適呢?
 

　　短線有固定長度跟可變長度，我們先說固定長度的吧，這里總結(jié)了3種方式：
 

　　(1).小短線非常短，占一個字左右寬的尺寸，如下圖所示：

 

　　(2).小短線稍長一些，一般會比兩個字寬幾個像素，如下圖所示：

 

　　(3).根據(jù)屏幕等分，這種樣式可用于內(nèi)容比較簡潔的頁面。

 

　　接下來是小短線長度可變的情況：
 

　　下圖是豆瓣的書影音頁面，短線的長度會隨文字的多少而變化，一般小短線的長度會比文字稍微寬幾像素，具體看情況而定。

 

　　為什么同樣都是tab，而短線有長有短，該怎么選擇使用呢?這里提供一個思路供大家參考。
 

　　當(dāng)頁面內(nèi)容比較多，可能會伴有其他圖標(biāo)等，小短線太長會使整個導(dǎo)航看著太滿太擠。所以會選短一點(diǎn)的長度。
 

　　頁面內(nèi)容比較簡潔，沒有多余的信息和圖標(biāo)，小短線用長一點(diǎn)也沒關(guān)系，可以讓頁面更飽滿，層級更清晰。
 

　　不過有時候簡單的頁面也會選擇讓小短線很短，使整個頁面更加簡潔清爽 ，所以很多時候并沒有那么絕對，有合理的說法就行了。
 

　　說完了短線的長度我們來說說短線的粗細(xì)，小短線如果很短，一般就會稍微粗一點(diǎn)，因?yàn)楸緛砭投?，如果還那么細(xì)，是不是沒有什么存在感。
 

　　小短線如果很長，一般就會稍微細(xì)一點(diǎn)，因?yàn)楸緛砭烷L，如果還那么粗，是不是會讓頁面很臃腫。
 

　　兩級tab樣式
 

　　兩級tab樣式指有一個主導(dǎo)航，一個副導(dǎo)航。主導(dǎo)航一般會用線條樣式，副導(dǎo)航會用色塊樣式。
 

　　因?yàn)榫€具有貫通整體的作用，比較適合用于展示層級較高的導(dǎo)航。而導(dǎo)航都是由上而下的，所以會優(yōu)先考慮使用線條。然后層級較低的導(dǎo)航為了區(qū)分會使用背景色。因?yàn)樯珘K的視覺權(quán)重比線條大一些，容易分散用戶的注意力。而tab的作用是為了讓用戶更方便的找到自己想要使用的功能，所以沒有必要做的太顯眼。如下圖所示：

 

　　酷狗音樂的一級導(dǎo)航用了小短線的樣式，二級導(dǎo)航用了色塊標(biāo)簽，層次對比明顯。馬蜂窩一級導(dǎo)航小短線結(jié)合自身產(chǎn)品品牌特色進(jìn)行了設(shè)計(jì)，二級導(dǎo)航選中狀態(tài)使用圖標(biāo)加文字顏色變化，同時下面線條樣式也有變化，比較有新意。
 

　　特殊樣式Tab
 

　　還有一種tab類似網(wǎng)頁的樣式，用于功能性比較強(qiáng)的頁面。

 

　　4、tab的使用舉例
 

　　1、tab 可以分為固定和滑動2種樣式，一般會根據(jù)內(nèi)容多少決定使用什么樣式。
 

　　tab項(xiàng)過多情況下用戶可以滑動，但是有的情況下tab選項(xiàng)實(shí)在是太多了，這時候可以做成彈框切換的樣式進(jìn)行選擇。如騰訊視頻的處理方式：

 

　　2、tab的用色處理，一般會根據(jù)使用目的做不同區(qū)分。
 

　　如拉勾首頁頂部tab并不是想引導(dǎo)用戶去點(diǎn)擊，而是讓用戶根據(jù)自己的需要去切換選擇，在頁面優(yōu)先級和重要程度上沒有那么高，因此使用無彩色系的淺灰色和黑色來展現(xiàn)。
 

　　如下面右圖我把顏色改為品牌色后，視覺上明顯了很多，這樣反倒對頁面其他元素產(chǎn)生了很多干擾，所以tab用色還是要根據(jù)使用場景來確定。

 

　　5、總結(jié)
 

　　最開始做tab時， 我覺得樣式隨便設(shè)計(jì)一個就好了，哪需要考慮這么多呢，但當(dāng)別人問為什么這樣設(shè)計(jì)的時候，我就懵逼了!
 

　　我們分析任何一個設(shè)計(jì)元素的最終目的都是為了更好的使用它。遇到問題，如果你沒有十足的把握，就先分析競品，把所有能找的方案羅列出來進(jìn)行歸類總結(jié)，最后找到適合我們產(chǎn)品的方案，這樣在說設(shè)計(jì)思路的時候也有理有據(jù)了，不會被問的一臉懵。
 

　　好了，今天的分享就到這里了，歡迎大家留言討論。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。