什么(me)是Tab

Tabs 可(ke)用于將有(you)關的(de)(de)內(nei)容(rong)分(fen)組，重(zhong)疊(die)放置在某一布局(ju)區塊內(nei)，重(zhong)疊(die)的(de)(de)內(nei)容(rong)區里的(de)(de)每次(ci)只有(you)其(qi)中一層是(shi)可(ke)見的(de)(de)。

 用(yong)戶(hu)通過(guo)鼠標點擊(ji)或移到(dao)內容區所(suo)對(dui)應的標簽上(shang)，來請求顯示該層內容區。

Tab屬于扁平信息結(jie)構(gou)，可以讓用戶在分類之間隨意切換(huan)，而不用在意當前(qian)所處的(de)位置(zhi)。

Tab的優勢(shi)

Tab將大量關聯的(de)數(shu)據或者選項(xiang)劃(hua)分成更易理解的(de)分組，提供簡單的(de)頁面展示形式，即在不(bu)需要切(qie)換出(chu)上下(xia)(xia)文，頁面跳轉的(de)情(qing)況下(xia)(xia)，有效的(de)進行內(nei)容組織的(de)扁平化導航(hang)設計(ji)。

如PC端(duan)的標簽(qian)頁導航(hang)、模塊選項卡等設計(ji)形式。

可以將產(chan)品包含的所有(you)內(nei)容進行清晰分類，一目了(le)然地呈現應用(yong)的內(nei)容范圍，方便(bian)概覽與跳轉。

Tab的組成部分

 

Tab Menu（標簽區）

用戶導航和控制切換內容區的操作區域。

Tab Box（內容區）

 

• Tab內容中重疊的區塊，用于顯示信息內容。
• Tab Menu（標簽區）有選中、未選中兩種狀態，且只有一個Tab為選中狀態。
• 頁面載入時，一般默認第一個Tab為選中態。

 

Tab標簽(qian)(qian)與Tab內容是一(yi)一(yi)對(dui)應的(de)，標簽(qian)(qian)與當(dang)前顯示(shi)的(de)內容區對(dui)應選中狀態(tai)(tai)的(de)標簽(qian)(qian)，當(dang)前隱藏的(de)內容區對(dui)應未選中狀態(tai)(tai)的(de)標簽(qian)(qian)。

Tab的使(shi)用場景頁面空間(jian)有限

當希(xi)望節(jie)省頁(ye)面空(kong)間(jian)，布局緊湊，且需要組(zu)合的幾種信息之(zhi)間(jian)具有關(guan)聯(lian)性(xing)時，可以選擇(ze)Tab。

Tab的(de)使用，令頁(ye)面結構緊湊，可(ke)以縮(suo)短頁(ye)面屏(ping)長(chang)，降低信息(xi)的(de)顯示密度，但同時又不(bu)犧牲可(ke)視的(de)信息(xi)量。

 把有(you)效的(de)信(xin)息以(yi)最少的(de)布(bu)局顯示，能有(you)效減少頁(ye)面的(de)占用(yong)空間。

信息之間具有某種關聯特征，且是并列關系，內容不交叉

構成一(yi)個(ge)(ge)(ge)整體的每個(ge)(ge)(ge)元素(su)之間都應(ying)該具有(you)邏(luo)輯上的關(guan)聯性(xing)。所以同(tong)一(yi)組(zu)Tab中的每個(ge)(ge)(ge)Tab項，應(ying)該具有(you)關(guan)聯特征，內容也不相(xiang)重疊(die)，這樣用戶才能將(jiang)整個(ge)(ge)(ge)Tab區(qu)域視(shi)為一(yi)個(ge)(ge)(ge)整體。例如(ru)：

PS顏色與色板是一組(zu)Tab組(zu)合。

信息之間不應該存在對比或并行的關系

Tab元素(su)中，同(tong)(tong)一時刻，只能(neng)顯(xian)示一層內容(rong)區。當(dang)用(yong)戶(hu)需要對位于(yu)不(bu)(bu)同(tong)(tong)內容(rong)區上的信(xin)(xin)息(xi)(xi)進(jin)行(xing)對比，或者這幾種(zhong)信(xin)(xin)息(xi)(xi)，同(tong)(tong)時顯(xian)示會更(geng)便(bian)于(yu)用(yong)戶(hu)閱讀時，就不(bu)(bu)應該使用(yong)Tab，否則會導致用(yong)戶(hu)為(wei)了對比所需的信(xin)(xin)息(xi)(xi)，而不(bu)(bu)停在(zai)標簽之間(jian)進(jin)行(xing)切換。

Tab應該用于展示精煉的內容

Tab用(yong)于(yu)(yu)展現(xian)標準(zhun)化(hua)和易于(yu)(yu)理(li)解的信息。基(ji)于(yu)(yu)此，Tab應該只用(yong)于(yu)(yu)顯示信息摘要和內容(rong)要點(dian)，例如(ru)列表、數(shu)據圖表。

Tab不能濫用于內容切換與內容分頁，如單個產品中頁面之間的切換

Tab強調的(de)是(shi)信(xin)息的(de)分類屬性（同類并列），即它(ta)一般用(yong)于最小(xiao)單(dan)元的(de)組合(he)，而非最小(xiao)單(dan)元的(de)拆(chai)分。

右(you)圖不(bu)可取，Tab不(bu)應該應用于一個(ge)產品內部(bu)不(bu)同的(de)功(gong)能之(zhi)間導航切換(huan)。

Tab的設計原則(ze)

標簽上使用簡短和有邏輯的文字

Tab元(yuan)素的(de)標(biao)簽區寬度(du)是有限的(de)，所有標(biao)簽區的(de)文字應該簡潔扼要，具(ju)有代表性，長(chang)度(du)控制在6個文字以(yi)內。以(yi)便可以(yi)在一(yi)行(xing)內，容納盡可能多的(de)標(biao)簽。

用(yong)精(jing)煉(lian)的方式(shi)展示信息，除了(le)保持設計樣(yang)式(shi)一致外，還可以讓(rang)用(yong)戶更快速地處理(li)文字信息，用(yong)以預測(ce)隱藏(zang)區域(yu)上所包含的內容(rong)。

選中的標簽應該高亮顯示

選中(zhong)狀態的(de)標(biao)簽(qian)應(ying)該設計地(di)顯(xian)(xian)眼，讓用(yong)戶容易(yi)區分當前顯(xian)(xian)示的(de)內容區是對應(ying)哪個標(biao)簽(qian)。通用(yong)的(de)做(zuo)法是為未選中(zhong)狀態使用(yong)與(yu)背(bei)景色(se)(se)(se)(se)對比度(du)低(di)的(de)顏(yan)色(se)(se)(se)(se)，為處于選中(zhong)狀態的(de)標(biao)簽(qian)上(shang)，使用(yong)高亮且(qie)與(yu)背(bei)景色(se)(se)(se)(se)對比度(du)高的(de)顏(yan)色(se)(se)(se)(se)。

保持標簽在一行內顯示

Tab的(de)標(biao)簽通常是水平(ping)方向(xiang)排列(lie)的(de)（當然，也可以設計成垂(chui)直方向(xiang)排列(lie)），標(biao)簽如果分布在多行上(shang)，會導(dao)致用(yong)(yong)戶在使(shi)用(yong)(yong)中產生疑惑。

這是(shi)由于在水平方向上，多行分布(bu)標簽(qian)，隱含(han)一種等級關系，可能(neng)讓用戶誤(wu)以(yi)為第二行是(shi)第一行的子級。

如果Tab數(shu)目過多，可以參(can)考google搜索頁面，Tab的處(chu)理方式，將更(geng)多Tab內容收納于(yu)更(geng)多中，當用戶點擊(ji)更(geng)多中的菜單時，將其顯示在主Tab上。

內容區之間的切換，應該沒有延遲

使用Tab來控制內(nei)容(rong)切換的(de)特性之一是(shi)(shi)快速和互動。為此，應該在設(she)計實現上，提前(qian)加載所有Tab下的(de)內(nei)容(rong)，而不是(shi)(shi)等(deng)用戶切換到某一個標簽(qian)后(hou)再去(qu)加載內(nei)容(rong)。

不要在內容區使用滾動條

在(zai)Tab的內(nei)容(rong)區里使用滾動條（不(bu)是(shi)指瀏(liu)覽器自帶的頁面滾動提示(shi)條）會(hui)增加用戶負擔，用戶查找(zhao)信息(xi)在(zai)哪個(ge)內(nei)容(rong)區時，不(bu)僅需(xu)要(yao)切換標簽，還需(xu)要(yao)加上移(yi)動滾動條的操作。

 內容(rong)區里(li)容(rong)納的信息太多或(huo)設計Tab時(shi)，設定的高(gao)度不夠，會導致滾動條出現。所以需要考慮精簡內容(rong)、增加高(gao)度值，或(huo)把選中狀(zhuang)態的內容(rong)區處理為高(gao)度自(zi)適(shi)應(ying)。

Tab標簽用ICON還是ICON+文字

避免在Tab標簽上僅使用ICON，尤其是專業領域。

1.Tab數目(mu)不多，不超過四個，且新手用(yong)(yong)戶可以接受認(ren)知和試錯成本，可以考慮只使用(yong)(yong)圖標，且應是大家約(yue)定俗(su)成的通用(yong)(yong)圖標，如搜(sou)索用(yong)(yong)放大鏡表示。

2.Tab數目超過四個，慎用ICON，不同(tong)人對一個圖(tu)形，有(you)不同(tong)的(de)解讀，ICON+文字是比較(jiao)易于接受的(de)方案(an)。

如果你希望用戶看到什么，就將他放置在默認Tab上

位置(zhi)和順序(xu)會帶給用戶重要(yao)程度(du)不(bu)同的(de)感知，因屏幕資源有限(xian)，即(ji)使是(shi)內(nei)容并列的(de)Tab，也存(cun)在默認(ren)展示(shi)與(yu)排序(xu)差(cha)異。用戶對位置(zhi)與(yu)重要(yao)程度(du)的(de)關系有潛在的(de)認(ren)識，如果非默認(ren)標簽的(de)文字或(huo)內(nei)容刺激度(du)和新鮮度(du)不(bu)足，那(nei)么操作動力也就不(bu)夠了。同時Tab點擊遞減也是(shi)一個(ge)常見(jian)的(de)問題。

有(you)一(yi)個小技(ji)巧：

將產品需要推廣或優先展示的(de)內容(rong)放在默認(ren)Tab，用(yong)戶(hu)感興趣、無(wu)法(fa)忽略(lve)的(de)Tab靠后，因為用(yong)戶(hu)愿(yuan)意為值得(de)的(de)內容(rong)多付(fu)出一(yi)次(ci)滑動(dong)操作。

具體可參考App Store-排行榜中，【付費】、【免費】、【暢銷排行】三個Tab的順序。

總(zong)結

信息架構

 

在(zai)交互范疇內，如上圖所示即信(xin)(xin)息的(de)(de)(de)結構：在(zai)樹形結構中(zhong)，Z軸即表(biao)示信(xin)(xin)息的(de)(de)(de)深(shen)度，即鏈接(jie)(jie)的(de)(de)(de)信(xin)(xin)息層(ceng)數(shu)；X軸表(biao)示一個層(ceng)級包含的(de)(de)(de)頁面(mian)總數(shu)（可以理解為此文的(de)(de)(de)Tab數(shu)），即鏈接(jie)(jie)的(de)(de)(de)廣度；Y軸表(biao)示該層(ceng)級頁面(mian)的(de)(de)(de)滑動的(de)(de)(de)最長距離，即頁面(mian)的(de)(de)(de)長度。

用(yong)戶的瀏覽成本從高至(zhi)低：

逐級跳轉 > 不同Tab切換 > 單頁滑屏瀏覽

在(zai)交互過程(cheng)中，盡量(liang)減少(shao)(shao)信(xin)(xin)(xin)息(xi)(xi)(xi)(xi)層(ceng)級，用(yong)戶通(tong)過較(jiao)少(shao)(shao)的(de)頁(ye)面跳轉就能找到想要的(de)信(xin)(xin)(xin)息(xi)(xi)(xi)(xi)，每一(yi)(yi)(yi)次頁(ye)面跳轉，轉化率可(ke)能會減少(shao)(shao)10%。Tab可(ke)以為用(yong)戶減少(shao)(shao)一(yi)(yi)(yi)級頁(ye)面跳轉，使信(xin)(xin)(xin)息(xi)(xi)(xi)(xi)趨向扁平。但(dan)位移的(de)成本，比(bi)重疊還低。把關系緊密(mi)的(de)信(xin)(xin)(xin)息(xi)(xi)(xi)(xi)放(fang)在(zai)一(yi)(yi)(yi)個(ge)區域內(nei)，增加頁(ye)面利用(yong)率，用(yong)戶在(zai)一(yi)(yi)(yi)個(ge)頁(ye)面滑(hua)動瀏覽，比(bi)切換Tab，帶(dai)來的(de)信(xin)(xin)(xin)息(xi)(xi)(xi)(xi)負擔(dan)更輕(qing)，更容易讓用(yong)戶接受更多信(xin)(xin)(xin)息(xi)(xi)(xi)(xi)。