每一次頁面跳轉，轉化率可能會減少10%。

什么是Tab

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

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

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

Tab的優(yōu)勢

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

如PC端的標簽頁導航、模塊選項卡等設計形式。

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

Tab的組成部分

Tab Menu（標簽區(qū)）

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

Tab Box（內容區(qū)）

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

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

Tab的使用場景

頁面空間有限

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

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

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

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

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

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

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

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

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

Tab用于展現(xiàn)標準化和易于理解的信息?；诖?，Tab應該只用于顯示信息摘要和內容要點，例如列表、數(shù)據(jù)圖表。

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

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

右圖不可取，Tab不應該應用于一個產品內部不同的功能之間導航切換。

Tab的設計原則

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

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

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

選中的標簽應該高亮顯示

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

保持標簽在一行內顯示

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

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

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

內容區(qū)之間的切換，應該沒有延遲

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

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

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

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

Tab標簽用ICON還是ICON+文字

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

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

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

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

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

有一個小技巧：

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

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

總結

信息架構

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

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

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

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

作者：UXXX

來源：微信公眾號【UXXX】

版權聲明：人人都是產品經理尊重行業(yè)規(guī)范，所轉載的文章都注明作者和來源，若標注有誤，請聯(lián)系主編QQ：419297645更改。