編輯導語：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協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部