王M爭 ：今天這篇文章來給大家分析一下Tab。其實(shí)它隸屬于產(chǎn)品導(dǎo)航體系的一部分，所以你要了解Tab，必須要它放在導(dǎo)航體系中來分析。希望這篇文章可以幫助大家以后更合理的去使用Tab。

看完本文你會學(xué)到：

1. Tab有哪三種類型

2. 怎樣設(shè)計(jì)Tab

3. Tab的適用場景有哪些

Tab的分類

為了更好的了解Tab，我們首先要對Tab做一個(gè)分類，這里我所分類的依據(jù)是位置。那么根據(jù)Tab在界面中所處的位置我們可以把Tab分為三類：

• 頂部欄Tab
• 側(cè)邊欄Tab
• 底部欄Tab

當(dāng)然在導(dǎo)航體系中我們會說成頂部欄菜單、側(cè)邊欄菜單和底部欄菜單，都是一個(gè)意思。

虎撲的這個(gè)界面非常具有代表性，因?yàn)槿NTab樣式出現(xiàn)在同一個(gè)界面里，方便我們進(jìn)行分析。從導(dǎo)航體系的層級來說，底部欄屬于一級導(dǎo)航，頂部欄屬于二級導(dǎo)航，而側(cè)邊欄屬于三級導(dǎo)航。這種劃分標(biāo)準(zhǔn)的其實(shí)是跟用戶的拇指活動范圍來決定的，或者說是拇指法則。

「拇指法則」是資深交互設(shè)計(jì)大神Steven Hoober在2013年對1300名手機(jī)用戶的調(diào)查研究后提出來一個(gè)新名詞。

他通過研究發(fā)現(xiàn)，49%的用戶都是單手拿著手機(jī)，使用拇指進(jìn)行操作。甚至某些大屏手機(jī)使我們不得不進(jìn)行雙手持握的時(shí)候，多數(shù)人也還是傾向于使用自己的拇指。Josh Clark在另一項(xiàng)研究中也得出了類似的結(jié)論，他指出：75%的手機(jī)交互都是由拇指完成的。因此我們也可以說，對觸摸屏手機(jī)進(jìn)行交互設(shè)計(jì)，用戶主要使用的就是拇指。

拇指設(shè)計(jì)法則：《經(jīng)典好文！如何為拇指做設(shè)計(jì)？》

一級導(dǎo)航用戶使用最頻繁，所以用戶的拇指必須很容易就能操作，而側(cè)邊欄和頂部欄相對來說都屬于「邊陲地區(qū)」，用戶拇指很難夠得著，手小的用戶甚至要借用左手或改變握持姿勢。這肯定不是一個(gè)令用戶滿意的體驗(yàn)了。

其實(shí)這個(gè)也給了我們一個(gè)啟發(fā)，在給移動端產(chǎn)品設(shè)計(jì)界面的時(shí)候，你一定要把圖放在手機(jī)上看，自己嘗試「操作」來測試易用性。你的產(chǎn)品必須要讓用戶的手指操作起來很舒服，或者可以解放用戶的手指，讓用戶可以單手很方便的完成操作。

我可以給大家舉一個(gè)例子，我之前聽到一個(gè)朋友抱怨說，微信發(fā)語音不方便，因?yàn)橛沂謫问治粘植僮鞯臅r(shí)候拇指很難夠得著。我嘗試著把語音和表情的圖標(biāo)對調(diào)了位置，發(fā)現(xiàn)并不理想。

雖然發(fā)語音更方便了，但是斗圖就很困難了。現(xiàn)在這個(gè)全民斗圖的時(shí)代，用戶發(fā)表情包的頻率肯定要比發(fā)語音的要高得多。所以微信這里語音功能放在左邊雖然難點(diǎn)擊，但是我覺得沒有毛病。

對于側(cè)邊欄Tab，我們一般習(xí)慣于出現(xiàn)在界面的左邊，但是也有放在右邊的，QQ空間的月份Tab就是這么做的，這樣做的一個(gè)好處就是用戶(右手單手握持)更容易操作了。

既然側(cè)邊欄Tab在右邊更方便操作，為什么大部分界面設(shè)計(jì)中側(cè)邊欄還放在左邊呢？在我看來，側(cè)邊欄Tab放在界面左邊還是右邊取決于Tab標(biāo)簽與內(nèi)容的關(guān)聯(lián)性。

舉個(gè)例子，如果你想在虎撲里找到金州勇士隊(duì)的專區(qū)，那么你得先找到NBA論壇，再去找勇士專區(qū)。從上往下，從左到右，符合Z型瀏覽習(xí)慣。

如果你把側(cè)邊欄Tab放在左邊，那么用戶的瀏覽方向是反Z字的。而QQ空間的話，用戶不用看左邊的Tab項(xiàng)也能知道這條動態(tài)的發(fā)布時(shí)間，所以放在右邊更加合適。

Tab的兩種狀態(tài)

上面主要說位置對于Tab的重要性，接下來我們主要說Tab的設(shè)計(jì)。在設(shè)計(jì)Tab之前，我們可以進(jìn)行一個(gè)解構(gòu)，任何一個(gè)Tab項(xiàng)其實(shí)都可以由文字和icon組成，其中icon是非必需的。從信息傳遞的角度來說，再牛逼的icon也比不上文字。

Tab可以分為選中狀態(tài)和非選中狀態(tài)，一般來說為了凸顯選中狀態(tài)，我們主要有三種方法：字色，線條和背景色，其中線條的位置可以在文字上方也可以在下方。

我看了一下目前手機(jī)的應(yīng)用，發(fā)現(xiàn)使用線條的頻率要遠(yuǎn)遠(yuǎn)的大于背景色。在我看來，導(dǎo)致這種現(xiàn)象的原因有兩個(gè)。

其一：加線的tab的樣式都是全貫通的，比較適合用于展示層級較高的導(dǎo)航。而導(dǎo)航都是由上而下的，所以設(shè)計(jì)師會優(yōu)先考慮使用線條，然后層級較低的導(dǎo)航為了區(qū)分會使用背景色來區(qū)分。

其二：色塊的視覺權(quán)重更大一點(diǎn)，會分散用戶的注意力。而Tab屬于導(dǎo)航體系，是為了讓用戶更方便找到自己期望使用的功能，所以Tab做的太顯眼沒有必要。這也是設(shè)計(jì)師優(yōu)先考慮線條的原因。

例如，下圖中的Tab可以放大、居中，但是會侵占內(nèi)容區(qū)域，所以還是舍棄。

以上就是我自己所總結(jié)出來的兩個(gè)原因，其中第二的原因涉及到信息的優(yōu)先級。這里我覺得我需要再延伸一點(diǎn)其他的內(nèi)容。

設(shè)計(jì)師在日常工作的時(shí)候，最討厭的一件事情莫過于甲方臨時(shí)改需求。一個(gè)稿子來回反復(fù)的改，那么設(shè)計(jì)師如何避免這種情況呢？

在我看來，設(shè)計(jì)師在拿到需求之后一定要跟甲方進(jìn)行充分的溝通，確認(rèn)好需求。當(dāng)然這里的確認(rèn)需求，不僅僅是跟對方核對字段是否出錯(cuò)這么簡單。而是要弄懂甲方這份需求中的信息層級和設(shè)計(jì)風(fēng)格，說白了就是這個(gè)界面/banner風(fēng)格你想走什么風(fēng)格，你要突出哪些內(nèi)容。

很多時(shí)候，甲方雖然給你需求了，但是他們自己根本不知道自己想要什么？他們的期望是讓設(shè)計(jì)師先做出一稿，他們在這個(gè)稿子上進(jìn)行反復(fù)的修改最后達(dá)到他們心中所期望的效果。這種做法無異損害了設(shè)計(jì)師的利益，因?yàn)楫?dāng)甲方都不知道自己想要什么的情況下，你的初稿是根本沒有任何通過的可能性。所以通過詢問信息層級和設(shè)計(jì)風(fēng)格這兩個(gè)問題，促使甲方具象化自己的需求，這樣也省的設(shè)計(jì)師來回的返工。

Tab的使用場景

任何一個(gè)設(shè)計(jì)組件/元素我們進(jìn)行分析的最終目的都是為了更好的使用。「更好的使用」不僅僅是知道如何使用，也意味著要明白使用的場景，知道什么時(shí)候該用什么時(shí)候不該用。

文章開頭就說了Tab屬于導(dǎo)航體系，而它在導(dǎo)航體系中是屬于萬金油，基本都能用，但是也有用不了的時(shí)候。例如QQ郵箱，這是少數(shù)沒有使用底部欄菜單的產(chǎn)品。這里使用的是列表式菜單，這是因?yàn)镼Q郵箱是核心功能流程比較單一的產(chǎn)品，主界面就可以滿足用戶核心場景下的需求，不需要通過底部欄菜單來在幾個(gè)功能模塊之間來回切換。

簡單的用不了Tabab，也不意味著復(fù)雜就一定可以用。

我再舉一個(gè)例子，Tab項(xiàng)過多情況下用戶可以滑動，但是有的情況下tab選項(xiàng)實(shí)在是太多了，這時(shí)候Tab就不太合適。企鵝直播這里可以切換成彈框進(jìn)行選擇，這個(gè)解決方法就很棒。

所以說Tab的使用場景還是很復(fù)雜，一篇文章的篇幅肯定說不了，這里我也只是給大家開了一個(gè)頭，更多的還是要大家多下App去分析。

歡迎關(guān)注作者的微信公眾號：「王M爭」

優(yōu)設(shè)人氣專題

解析導(dǎo)航欄設(shè)計(jì) |?iPhone X 學(xué)習(xí)指南丨優(yōu)設(shè)獨(dú)家專訪丨在線摳圖神器丨靈感大全

Sketch神器?|?免費(fèi)圖庫丨配色神器丨讀書計(jì)劃丨PPT 神器丨魯班設(shè)計(jì)

iOS 11 學(xué)習(xí)指南丨人工智能丨PS 教程丨AI 教程丨C4D 教程

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com