編輯導語：Tabs標簽頁又稱選項卡（以下簡稱標簽頁），它是一種高效的屏幕空間利用手段，映射非常接近卡片的目錄索引，用戶可以基于索引標簽，快速定位到目標內容中去，這也是大多數用戶來自現實世界的經驗。本文總結了10個Tabs標簽頁怎么使用的方法，一起來看看。

在Web頁面中，它的使用場景也較為簡單，當頁面的內容信息量較多，用標簽頁可以對其分類，一方面可以提升查找信息的效率，另一方面可以精簡用戶單次獲取到的信息量，用戶更能夠專注于當前已顯示的內容。

本文從標簽頁的「基本原則」和「使用避免」兩個維度，總結10個我們所要注意的一些規則和方法，如果遵循這些原則，它不僅能夠快速、高效幫助用戶完成任務，也會讓我們設計的體驗更好。

由于Tabs標簽頁涉及到的端設備及內容較多，本文只討論Web端內標簽頁的使用情況，不討論瀏覽器級別的標簽和導航標簽設計等。

一、基本原則

1. 標簽的文案應當是簡短且高效的

1）標簽的文案應當簡短，做到讓用戶快速識別

標簽的文案需要盡可能使用簡短的、概括性強的關鍵詞，如果使用較長的文案，那么對于用戶閱讀和區分這些信息都是一個不小的挑戰。標簽文案需要有明顯的區分，避免用戶產生歧義；在詞語上優先使用名詞而不是動詞，因為動詞讓用戶誤以為這是可以行動的按鈕。

2）標簽的文案應當做到高效展示

標簽的信息展示傳達應當高效，比如不要讓標簽文案分展示，如下圖的標簽頁的狀態和數量兩組信息較為割裂，用戶會做短暫思考關聯下方內容的是狀態還是數量。如果設計的樣式與常規標準差異較大，用戶就會產生疑惑，所以對于用戶已形成的行為習慣，盡可能避免改變。

2. 已選中的標簽應當是唯一的且足夠突出

1）已選中的標簽應當是唯一的

標簽頁之間是相互獨立且互斥的，一次只顯示一個標簽的內容信息，不會出現點擊一個標簽頁，出現兩個甚至更多標簽的詳細信息。一般默認選項為第一個標簽頁，而如果沒有給到用戶預選擇的情況，也會讓用戶感覺困惑。同時關聯的詳細內容區域寬度應該是等同的，切換不同的標簽，不要改變其內容寬度的大小。

2）已選中的標簽應當是足夠突出

確保已選中的標簽頁足夠突出，讓用戶一眼就知道了當前選中了哪個選項卡，特別是當只有兩個標簽頁的時候?？梢酝ㄟ^字體大小、顏色、粗體等在增加已選中的視覺權重。

3. 標簽頁版面延伸到內容區域，可加強標簽與內容的關聯性

如果將選中卡片式標簽頁背景顏色和內容面板背景保持一致，就能夠做到增強選項卡與內容之間的聯系感。

4. 標簽頁的位置和排序，應當基于人的閱讀習慣

1）位置：強調或需要引起用戶的注意，請把它放至頂部

因為人的閱讀習慣是從左至右、從上到下的順序瀏覽，所以相較于底部或左側的標簽頁，頂部的標簽頁具有更強的視覺引導并引起用戶的注意。相反如果用戶不太關心，甚至很少切換這些標簽頁，可以考慮將它們放至底部。

2）排序：重要的、使用頻率高的標簽應當放至前面

如上所說，人的閱讀視線從左到右，所以應當將重要的、使用頻率高的或者按照邏輯順序往前排，通常默認選項（一般為左側第一個）是用戶進入頁面看到的第一個標簽頁，因此它的信息應當是最重要的、或者應當是用戶使用頻率最高的。以下是以京東關于商品詳情的一個排序，用戶看到的第一個標簽頁是關于商品的介紹，第二個標簽頁是商品的規格包裝，第三個是該商品提供了哪些售后保障等等。

二、使用避免

1. 避免使用圖標作為標簽頁文案

在一些場景下，圖標有時反而會用戶誤解標簽的信息，如果要用請全部添加，不要只針對部分標簽選擇使用圖標。使用時仍需注意，將圖標放至tab標簽的左側。

2. 避免截斷標簽文案，并且讓它們有足夠的點擊面積

1）避免截斷標簽左側的文案，減少的文本會阻礙用戶對于信息的識別和理解

完整的標簽信息，可以幫助用戶快速識別當前的位置。如圖左側標簽內容的減少，會妨礙用戶用戶對于信息的理解，反而會降低標簽的可識別度和操作切換的決策成本。

2）標簽頁應當有足夠的面積，避免讓它們進入緊湊模式

每個標簽頁都有層級引導的作用，需有一定面積來展示標簽信息。比如像瀏覽器的標簽頁特別多時，會給用戶使用帶來兩個問題，一是可點擊區域非常小，精準點擊較為困難；二是標簽獲取到的可用信息非常少，甚至有時只是一個圖標，當然對于瀏覽器，我們完全可以重新打開一個新窗口，來解決這個問題。

3. 避免數據為空，就不顯示這個標簽頁

一般情況下，如果將標簽頁作為數據信息分類展示時，即使該標簽下沒有數據，該標簽也是需要顯示的，否則用戶就永遠不會知道有這個標簽頁的存在。

4. 避免標簽頁，在內容較少或者作為比較時使用

1）避免將標簽頁用于很少的內容分類，因為會降低信息的展示效率

標簽頁本就為過多內容信息，而采用的一種分類方式，如果一個tab下只有幾段文字或者幾組錄入數據信息，可以考慮在一個頁面內展示這些內容，不僅可以提高屏效，還可以減少操作上的切換成本。如下圖，簡單的三組數據信息，我們就可以將它們在一個頁面，通過卡片來區分它們。

2）避免將標簽頁用于比較不同類別的信息，因為它會增加用戶的記憶負擔

因為用戶通過切換標簽頁去比較這些信息時，短暫記住這些內容是一件非常困難的事情。所以對比不同類別之間的內容，可以考慮在一個頁面展示，如下圖就是蘋果官網在一個頁面顯示的Mac機型比較，可以同時對比三款機型的信息。

5. 避免嵌套標簽頁，如果使用請加大他們的層級關系

避免在web頁面中嵌套標簽頁，因為嵌套后層級較為復雜，可能會造成信息的混亂，用戶記不住已訪問過哪些標簽頁。如果有嵌套tab，請在視覺上加大他們的層級關系，并且盡可能減少一級tab的數量。

6. 避免復雜內容標簽頁，用戶直接刪除

在表單中，如果刪除該標簽頁后，會給用戶造成工作負擔，甚至會丟失一些數據，這時的刪除操作需要給用戶反饋提醒，給到用戶二次確認是否刪除；

如果刪除該頁簽后，對于用戶幾乎沒有任何負擔，或者再次輸入的成本較小時，不建議使用二次確認，因為這時給用戶帶來的操作干擾遠大于誤操作成本。比如下圖Microsoft Excel，當標簽頁簽有內容輸入時，刪除會需要用戶二次確認，而當頁面內容為空時刪除不會給到用戶任何提醒。

在具體的業務場景中，我們需要結合用戶的刪除頻率、誤操作成本以及刪除組件的干擾三者之間找到一個相對平衡點。

三、總結

以上就是標簽頁在設計中我們所注意的一些事項，如果遵循這些用法，不但解決信息的堆積問題，也能夠大幅提升頁面的清晰和可用性。而如果我們發現用戶很少去點擊這些標簽頁、或者使用經常出錯，就需要考慮這些標簽頁是否使用得當，或者違反了上述所說的一些基本用法。

舉例覆蓋的場景不一定全面，不過我們最終的目的還是通過標簽頁這個組件，去引導用戶將視覺聚焦于頁面內容。

參考文獻：

張亮《細節決定交互設計的成敗》

尼爾森諾曼，《Nielsen Norman Grou》

本文由 @小高雜談 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議