為什么設(shè)計(jì)師在網(wǎng)站和APP上都愛用tab式導(dǎo)航

一、tab式導(dǎo)航的作用
為什么我們需要使用這樣的表現(xiàn)形式呢，因?yàn)閷τ谝欢夗撁嫔闲枰谟邢薜目臻g里承載更多的產(chǎn)品信息，一屏屏滑下去找內(nèi)容效率很低，因?yàn)槭褂眠@樣形式的導(dǎo)航，能夠快速幫助用戶找到感興趣的信息。如下圖所示：

tab式導(dǎo)航設(shè)計(jì)

比如說騰訊動漫，愛奇藝，都將首頁分成了很多類型，但兩者的分類耶有所不同，騰訊動漫分成了少女心、少年魂、兄弟情等這種故事情節(jié)的劃分，愛奇藝則直接按照電視劇、電影、兒童、綜藝、動漫等，很多信息屬于同一緯度但是類型上是互斥的。
但是不同類型的產(chǎn)品會根據(jù)產(chǎn)品的特性來進(jìn)行劃分，也是為了能夠讓用戶快速有效的找到信息，就是通過tab對信息結(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)航主要用于不同頁面之間的切換，如下圖所示：

tab式導(dǎo)航設(shè)計(jì)

蘋果的地圖就是使用的標(biāo)準(zhǔn)模式，這種模式目前已經(jīng)比較少見了，在目前流行扁平化的視覺上來說，標(biāo)準(zhǔn)模式的導(dǎo)航視覺不強(qiáng)，根據(jù)標(biāo)簽的個數(shù)將屏幕等分，做出選中的區(qū)分。
2.下劃線
下劃線模式與標(biāo)準(zhǔn)模式一樣，在界面的上方，但是還是有所區(qū)別的，該模式的特征是通過文本標(biāo)簽下劃線來表示當(dāng)前選中狀態(tài)，如下圖所示：

tab式導(dǎo)航設(shè)計(jì)

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

tab式導(dǎo)航設(shè)計(jì)

有屏幕等分的，有居左排列的，間隔大多在45px-70px之間，這兩種情況首頁都有出現(xiàn)過，比較適合標(biāo)簽數(shù)目比較少的情況，每個標(biāo)簽都有固定的位置，有利于對用戶的記憶，
設(shè)計(jì)時這種固定的分類最好不超過5個（其實(shí)5就挺多的了），因?yàn)橄旅嬗邢聞澗€了，因此文字可以放大或者改變顏色來與其他的做出區(qū)分，也可以兩種情況都有，因?yàn)榉诸惒皇呛芨撸虼艘曈X層級也不是很高，大多出現(xiàn)在不重要的一級頁面或者二級頁面上。在首頁上可以根據(jù)產(chǎn)品的基因給單調(diào)的tab導(dǎo)航做一些特別的處理。

tab式導(dǎo)航設(shè)計(jì)

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

tab式導(dǎo)航設(shè)計(jì)

設(shè)計(jì)師在使用這種模式時，能夠設(shè)置任意的標(biāo)簽，不必像傳統(tǒng)的標(biāo)簽式考慮導(dǎo)航控件的數(shù)量，目前來說這種模式是運(yùn)用范圍最廣的，同時在界面邊緣露出其他的標(biāo)簽，讓用戶知道后面還有別的菜單，避免用戶發(fā)現(xiàn)不了界面之外的菜單。
如果為了讓界面變得更有趣味性和識別度，因此下劃線可以做一些有趣的動效：

tab式導(dǎo)航設(shè)計(jì)

馬蜂窩的下劃線就有個小細(xì)節(jié)的動效，讓它的滑動整體感覺很生動，可滑動標(biāo)簽的寬度可以長短不一，也可以完全一致，也可以長短不一，根據(jù)標(biāo)題長短來決定。這種設(shè)計(jì)出現(xiàn)最多的就是在首頁上，可以有下劃線也可以沒有下劃線，最重的視覺層面是字體大小的變化，而且與未選中的字體差異大，間隔也大多是45px-70px之間。
三、tab式導(dǎo)航的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：
1、簡單高效、操作方便，除了底部的導(dǎo)航外，再搭配頂部的分類導(dǎo)航切換，能夠讓用戶簡單清晰的找到自己想要的產(chǎn)品，層級明確；
2、學(xué)習(xí)成本低，用戶在第一次使用產(chǎn)品的時候，都會看產(chǎn)品有沒有自己感興趣的內(nèi)容，而標(biāo)簽式導(dǎo)航將產(chǎn)品的吸引點(diǎn)都展開在一個頁面里，用戶掃一眼就能大致了解如果操作以及有沒有自己想要的。
缺點(diǎn)：
1、標(biāo)簽欄入口很多，會分散用戶的注意力；
2、占據(jù)屏幕空間，屏幕可展示的內(nèi)容變少。
（鄭重聲明：本文版權(quán)歸海鹽社潘團(tuán)子所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如有侵權(quán)，請聯(lián)系我們刪除；如作者信息標(biāo)記有誤，請聯(lián)系我們修改。）

網(wǎng)頁標(biāo)題：為什么設(shè)計(jì)師在網(wǎng)站和APP上都愛用tab式導(dǎo)航
文章鏈接：http://www.bm7419.com/news45/116345.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、外貿(mào)建站、面包屑導(dǎo)航、網(wǎng)站維護(hù)、虛擬主機(jī)、網(wǎng)頁設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)