什么是Tab

Tabs 可用于將有關(guān)的內(nèi)容分組，重疊放置在某一布局區(qū)塊內(nèi)，重疊的內(nèi)容區(qū)里的每次只有其中一層是可見的。

用戶通過鼠標點擊或移到內(nèi)容區(qū)所對應(yīng)的標簽上，來請求顯示該層內(nèi)容區(qū)。

Tab屬于扁平信息結(jié)構(gòu)，可以讓用戶在分類之間隨意切換，而不用在意當前所處的位置。

Tab的優(yōu)勢

Tab將大量關(guān)聯(lián)的數(shù)據(jù)或者選項劃分成更易理解的分組，提供簡單的頁面展示形式，即在不需要切換出上下文，頁面跳轉(zhuǎn)的情況下，有效的進行內(nèi)容組織的扁平化導(dǎo)航設(shè)計。

如PC端的標簽頁導(dǎo)航、模塊選項卡等設(shè)計形式。

可以將產(chǎn)品包含的所有內(nèi)容進行清晰分類，一目了然地呈現(xiàn)應(yīng)用的內(nèi)容范圍，方便概覽與跳轉(zhuǎn)。

Tab的組成部分

 

Tab Menu（標簽區(qū)）

用戶導(dǎo)航和控制切換內(nèi)容區(qū)的操作區(qū)域。

Tab Box（內(nèi)容區(qū)）

 

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

 

Tab標簽與Tab內(nèi)容是一一對應(yīng)的，標簽與當前顯示的內(nèi)容區(qū)對應(yīng)選中狀態(tài)的標簽，當前隱藏的內(nèi)容區(qū)對應(yīng)未選中狀態(tài)的標簽。

Tab的使用場景頁面空間有限

當希望節(jié)省頁面空間，布局緊湊，且需要組合的幾種信息之間具有關(guān)聯(lián)性時，可以選擇Tab。

Tab的使用，令頁面結(jié)構(gòu)緊湊，可以縮短頁面屏長，降低信息的顯示密度，但同時又不犧牲可視的信息量。

把有效的信息以最少的布局顯示，能有效減少頁面的占用空間。

信息之間具有某種關(guān)聯(lián)特征，且是并列關(guān)系，內(nèi)容不交叉

構(gòu)成一個整體的每個元素之間都應(yīng)該具有邏輯上的關(guān)聯(lián)性。所以同一組Tab中的每個Tab項，應(yīng)該具有關(guān)聯(lián)特征，內(nèi)容也不相重疊，這樣用戶才能將整個Tab區(qū)域視為一個整體。例如：

PS顏色與色板是一組Tab組合。

信息之間不應(yīng)該存在對比或并行的關(guān)系

Tab元素中，同一時刻，只能顯示一層內(nèi)容區(qū)。當用戶需要對位于不同內(nèi)容區(qū)上的信息進行對比，或者這幾種信息，同時顯示會更便于用戶閱讀時，就不應(yīng)該使用Tab，否則會導(dǎo)致用戶為了對比所需的信息，而不停在標簽之間進行切換。

Tab應(yīng)該用于展示精煉的內(nèi)容

Tab用于展現(xiàn)標準化和易于理解的信息。基于此，Tab應(yīng)該只用于顯示信息摘要和內(nèi)容要點，例如列表、數(shù)據(jù)圖表。

Tab不能濫用于內(nèi)容切換與內(nèi)容分頁，如單個產(chǎn)品中頁面之間的切換

Tab強調(diào)的是信息的分類屬性（同類并列），即它一般用于最小單元的組合，而非最小單元的拆分。

右圖不可取，Tab不應(yīng)該應(yīng)用于一個產(chǎn)品內(nèi)部不同的功能之間導(dǎo)航切換。

Tab的設(shè)計原則

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

Tab元素的標簽區(qū)寬度是有限的，所有標簽區(qū)的文字應(yīng)該簡潔扼要，具有代表性，長度控制在6個文字以內(nèi)。以便可以在一行內(nèi)，容納盡可能多的標簽。

用精煉的方式展示信息，除了保持設(shè)計樣式一致外，還可以讓用戶更快速地處理文字信息，用以預(yù)測隱藏區(qū)域上所包含的內(nèi)容。

選中的標簽應(yīng)該高亮顯示

選中狀態(tài)的標簽應(yīng)該設(shè)計地顯眼，讓用戶容易區(qū)分當前顯示的內(nèi)容區(qū)是對應(yīng)哪個標簽。通用的做法是為未選中狀態(tài)使用與背景色對比度低的顏色，為處于選中狀態(tài)的標簽上，使用高亮且與背景色對比度高的顏色。

保持標簽在一行內(nèi)顯示

Tab的標簽通常是水平方向排列的（當然，也可以設(shè)計成垂直方向排列），標簽如果分布在多行上，會導(dǎo)致用戶在使用中產(chǎn)生疑惑。

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

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

內(nèi)容區(qū)之間的切換，應(yīng)該沒有延遲

使用Tab來控制內(nèi)容切換的特性之一是快速和互動。為此，應(yīng)該在設(shè)計實現(xiàn)上，提前加載所有Tab下的內(nèi)容，而不是等用戶切換到某一個標簽后再去加載內(nèi)容。

不要在內(nèi)容區(qū)使用滾動條

在Tab的內(nèi)容區(qū)里使用滾動條（不是指瀏覽器自帶的頁面滾動提示條）會增加用戶負擔，用戶查找信息在哪個內(nèi)容區(qū)時，不僅需要切換標簽，還需要加上移動滾動條的操作。

內(nèi)容區(qū)里容納的信息太多或設(shè)計Tab時，設(shè)定的高度不夠，會導(dǎo)致滾動條出現(xiàn)。所以需要考慮精簡內(nèi)容、增加高度值，或把選中狀態(tài)的內(nèi)容區(qū)處理為高度自適應(yīng)。

Tab標簽用ICON還是ICON+文字

避免在Tab標簽上僅使用ICON，尤其是專業(yè)領(lǐng)域。

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

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

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

位置和順序會帶給用戶重要程度不同的感知，因屏幕資源有限，即使是內(nèi)容并列的Tab，也存在默認展示與排序差異。用戶對位置與重要程度的關(guān)系有潛在的認識，如果非默認標簽的文字或內(nèi)容刺激度和新鮮度不足，那么操作動力也就不夠了。同時Tab點擊遞減也是一個常見的問題。

有一個小技巧：

將產(chǎn)品需要推廣或優(yōu)先展示的內(nèi)容放在默認Tab，用戶感興趣、無法忽略的Tab靠后，因為用戶愿意為值得的內(nèi)容多付出一次滑動操作。

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

總結(jié)

信息架構(gòu)

 

在交互范疇內(nèi)，如上圖所示即信息的結(jié)構(gòu)：在樹形結(jié)構(gòu)中，Z軸即表示信息的深度，即鏈接的信息層數(shù)；X軸表示一個層級包含的頁面總數(shù)（可以理解為此文的Tab數(shù)），即鏈接的廣度；Y軸表示該層級頁面的滑動的最長距離，即頁面的長度。

用戶的瀏覽成本從高至低：

逐級跳轉(zhuǎn) > 不同Tab切換 > 單頁滑屏瀏覽

在交互過程中，盡量減少信息層級，用戶通過較少的頁面跳轉(zhuǎn)就能找到想要的信息，每一次頁面跳轉(zhuǎn)，轉(zhuǎn)化率可能會減少10%。Tab可以為用戶減少一級頁面跳轉(zhuǎn)，使信息趨向扁平。但位移的成本，比重疊還低。把關(guān)系緊密的信息放在一個區(qū)域內(nèi)，增加頁面利用率，用戶在一個頁面滑動瀏覽，比切換Tab，帶來的信息負擔更輕，更容易讓用戶接受更多信息。