我之前在設(shè)計(jì)首頁(yè)的時(shí)候，對(duì)于是否要用tab式導(dǎo)航的設(shè)計(jì)真的有些拿不準(zhǔn)，雖然我是找了很多參考以及分析工作，但是對(duì)于目前的方案好還是不好，心里總是拿不定注意，總覺(jué)得看到的參考都很好，但是要怎么做到吸取有點(diǎn)融入進(jìn)去，就十分的腦殼疼。。。

tab式導(dǎo)航的參考其實(shí)很普遍，作為一個(gè)基礎(chǔ)功能模塊幾乎大部分的主流產(chǎn)品里都能看到，如下圖所示:

今天跟大家講的tab式導(dǎo)航的設(shè)計(jì)，我將通過(guò)下面內(nèi)容進(jìn)行說(shuō)明：

一、tab式導(dǎo)航的作用

二、tab式導(dǎo)航的類型

三、tab式導(dǎo)航的優(yōu)缺點(diǎn)

四、劃重點(diǎn)

tab式導(dǎo)航的作用

為什么我們需要使用這樣的表現(xiàn)形式呢，因?yàn)閷?duì)于一二級(jí)頁(yè)面上需要在有限的空間里承載更多的產(chǎn)品信息，一屏屏滑下去找內(nèi)容效率很低，因?yàn)槭褂眠@樣形式的導(dǎo)航，能夠快速幫助用戶找到感興趣的信息。如下圖所示：

比如說(shuō)騰訊動(dòng)漫，愛(ài)奇藝，都將首頁(yè)分成了很多類型，但兩者的分類耶有所不同，騰訊動(dòng)漫分成了少女心、少年魂、兄弟情等這種故事情節(jié)的劃分，愛(ài)奇藝則直接按照電視劇、電影、兒童、綜藝、動(dòng)漫等，很多信息屬于同一緯度但是類型上是互斥的。

但是不同類型的產(chǎn)品會(huì)根據(jù)產(chǎn)品的特性來(lái)進(jìn)行劃分，也是為了能夠讓用戶快速有效的找到信息，就是通過(guò)tab對(duì)信息結(jié)果進(jìn)行分類，提升用戶定位信息的效率。

tab式導(dǎo)航的類型

1、標(biāo)準(zhǔn)

標(biāo)準(zhǔn)模式的導(dǎo)航是在界面的上方顯示，作為服務(wù)的頂層導(dǎo)航，標(biāo)簽隔斷界面內(nèi)容，這種導(dǎo)航主要用于不同頁(yè)面之間的切換，如下圖所示：

蘋果的地圖就是使用的標(biāo)準(zhǔn)模式，這種模式目前已經(jīng)比較少見(jiàn)了，在目前流行扁平化的視覺(jué)上來(lái)說(shuō)，標(biāo)準(zhǔn)模式的導(dǎo)航視覺(jué)不強(qiáng)，根據(jù)標(biāo)簽的個(gè)數(shù)將屏幕等分，做出選中的區(qū)分。

2、下劃線

下劃線模式與標(biāo)準(zhǔn)模式一樣，在界面的上方，但是還是有所區(qū)別的，該模式的特征是通過(guò)文本標(biāo)簽下劃線來(lái)表示當(dāng)前選中狀態(tài)，如下圖所示：

這種模式的導(dǎo)航keep&叭噠使用的就是下劃線，一般使用這種模式的界面都比較簡(jiǎn)潔，標(biāo)簽數(shù)量不是很多，而且下面大多是列表形式。

表現(xiàn)形式上，下劃線的分為以下幾種：

有屏幕等分的，有居左排列的，間隔大多在45px-70px之間，這兩種情況首頁(yè)都有出現(xiàn)過(guò)，比較適合標(biāo)簽數(shù)目比較少的情況，每個(gè)標(biāo)簽都有固定的位置，有利于對(duì)用戶的記憶。

設(shè)計(jì)時(shí)這種固定的分類最好不超過(guò)5個(gè)（其實(shí)5就挺多的了），因?yàn)橄旅嬗邢聞澗€了，因此文字可以放大或者改變顏色來(lái)與其他的做出區(qū)分，也可以兩種情況都有，因?yàn)榉诸惒皇呛芨撸虼艘曈X(jué)層級(jí)也不是很高，大多出現(xiàn)在不重要的一級(jí)頁(yè)面或者二級(jí)頁(yè)面上。在首頁(yè)上可以根據(jù)產(chǎn)品的基因給單調(diào)的tab導(dǎo)航做一些特別的處理。

3、滾動(dòng)

滾動(dòng)模式將在用戶選擇左右兩側(cè)標(biāo)簽時(shí)，滾動(dòng)整個(gè)導(dǎo)航控件，以顯示原本處于界面之外的條目。如下圖所示：

設(shè)計(jì)師在使用這種模式時(shí)，能夠設(shè)置任意的標(biāo)簽，不必像傳統(tǒng)的標(biāo)簽式考慮導(dǎo)航控件的數(shù)量，目前來(lái)說(shuō)這種模式是運(yùn)用范圍最廣的，同時(shí)在界面邊緣露出其他的標(biāo)簽，讓用戶知道后面還有別的菜單，避免用戶發(fā)現(xiàn)不了界面之外的菜單。

如果為了讓界面變得更有趣味性和識(shí)別度，因此下劃線可以做一些有趣的動(dòng)效：

馬蜂窩的下劃線就有個(gè)小細(xì)節(jié)的動(dòng)效，讓它的滑動(dòng)整體感覺(jué)很生動(dòng)，可滑動(dòng)標(biāo)簽的寬度可以長(zhǎng)短不一，也可以完全一致，也可以長(zhǎng)短不一，根據(jù)標(biāo)題長(zhǎng)短來(lái)決定。這種設(shè)計(jì)出現(xiàn)最多的就是在首頁(yè)上，可以有下劃線也可以沒(méi)有下劃線，最重的視覺(jué)層面是字體大小的變化，而且與未選中的字體差異大，間隔也大多是45px-70px之間。

tab式導(dǎo)航的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

1、簡(jiǎn)單高效、操作方便，除了底部的導(dǎo)航外，再搭配頂部的分類導(dǎo)航切換，能夠讓用戶簡(jiǎn)單清晰的找到自己想要的產(chǎn)品，層級(jí)明確；

2、學(xué)習(xí)成本低，用戶在第一次使用產(chǎn)品的時(shí)候，都會(huì)看產(chǎn)品有沒(méi)有自己感興趣的內(nèi)容，而標(biāo)簽式導(dǎo)航將產(chǎn)品的吸引點(diǎn)都展開(kāi)在一個(gè)頁(yè)面里，用戶掃一眼就能大致了解如果操作以及有沒(méi)有自己想要的。

缺點(diǎn)：

1、標(biāo)簽欄入口很多，會(huì)分散用戶的注意力；

2、占據(jù)屏幕空間，屏幕可展示的內(nèi)容變少。

劃重點(diǎn)

目前大部分的產(chǎn)品都是用的tab式導(dǎo)航，當(dāng)然肯定是因?yàn)槟軌蚪鉀Q不少問(wèn)題，但是在選擇這種表現(xiàn)形式之前，一定要注意規(guī)劃，理清產(chǎn)品框架，看看自己的產(chǎn)品是否適合tab式導(dǎo)航再下手，如果自己的產(chǎn)品是在主要功能情況下，次要功能很多，就可以用這類導(dǎo)航來(lái)解決問(wèn)題，如果不是的話，就可以采用別的形式，這個(gè)我們下次繼續(xù)討論。

作者：潘團(tuán)子  公眾號(hào)：海鹽社