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

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

　　1、Tab的作用
 

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

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

　　2、Tab的分類
 

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

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

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

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

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

 

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

　　以下內(nèi)容都是針對(duì)頂部欄Tab來(lái)說(shuō)的。
 

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

 

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

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

　　加短線的tab樣式
 

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

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

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

 

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

 

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

 

　　接下來(lái)是小短線長(zhǎng)度可變的情況：
 

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

 

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

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

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

　　不過(guò)有時(shí)候簡(jiǎn)單的頁(yè)面也會(huì)選擇讓小短線很短，使整個(gè)頁(yè)面更加簡(jiǎn)潔清爽 ，所以很多時(shí)候并沒(méi)有那么絕對(duì)，有合理的說(shuō)法就行了。
 

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

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

　　兩級(jí)tab樣式
 

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

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

 

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

　　特殊樣式Tab
 

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

 

　　4、tab的使用舉例
 

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

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

 

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

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

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

 

　　5、總結(jié)
 

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

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

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