Tabs 標(biāo)簽頁又稱選項卡（以下簡稱標(biāo)簽頁），它是一種高效的屏幕空間利用手段，映射非常接近卡片的目錄索引，用戶可以基于索引標(biāo)簽，快速定位到目標(biāo)中內(nèi)容中去，這也是大多數(shù)用戶來自現(xiàn)實世界的經(jīng)驗。

在 Web 頁面中，它的使用場景也較為簡單，當(dāng)頁面的內(nèi)容信息量較多，用標(biāo)簽頁可以對其分類，一方面可以提升查找信息的效率，另一方面可以精簡用戶單次獲取到的信息量，用戶更能夠?qū)Ｗ⒂诋?dāng)前已顯示的內(nèi)容。

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

由于 Tabs 標(biāo)簽頁涉及到的端設(shè)備及內(nèi)容較多，本文只討論 Web 端內(nèi)標(biāo)簽頁的使用情況，不討論瀏覽器級別的標(biāo)簽和導(dǎo)航標(biāo)簽設(shè)計等。

基本原則

1. 標(biāo)簽的文案應(yīng)當(dāng)是簡短且高效的

標(biāo)簽的文案應(yīng)當(dāng)簡短，做到讓用戶快速識別

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

標(biāo)簽的文案應(yīng)當(dāng)做到高效展示

標(biāo)簽的信息展示傳達應(yīng)當(dāng)高效，比如不要讓標(biāo)簽文案分開展示，如下圖的標(biāo)簽頁的狀態(tài)和數(shù)量兩組信息較為割裂，用戶會做短暫思考關(guān)聯(lián)下方內(nèi)容的是狀態(tài)還是數(shù)量。如果設(shè)計的樣式與常規(guī)標(biāo)準(zhǔn)差異較大，用戶就會產(chǎn)生疑惑，所以對于用戶已形成的行為習(xí)慣，盡可能避免改變。

2. 已選中的標(biāo)簽應(yīng)當(dāng)是唯一的且足夠突出

已選中的標(biāo)簽應(yīng)當(dāng)是唯一的

標(biāo)簽頁之間是相互獨立且互斥的，一次只顯示一個標(biāo)簽的內(nèi)容信息，不會出現(xiàn)點擊一個標(biāo)簽頁，出現(xiàn)兩個甚至更多標(biāo)簽的詳細信息。一般默認(rèn)選項為第一個標(biāo)簽頁，而如果沒有給到用戶預(yù)選擇的情況，也會讓用戶感覺困惑。同時關(guān)聯(lián)的詳細內(nèi)容區(qū)域?qū)挾葢?yīng)該是等同的，切換不同的標(biāo)簽，不要改變其內(nèi)容寬度的大小。

已選中的標(biāo)簽應(yīng)當(dāng)是足夠突出

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

3. 標(biāo)簽頁版面延伸到內(nèi)容區(qū)域，可加強標(biāo)簽與內(nèi)容的關(guān)聯(lián)性

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

4. 標(biāo)簽頁的位置和排序，應(yīng)當(dāng)基于人的閱讀習(xí)慣

位置：強調(diào)或需要引起用戶的注意，請把它放至頂部

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

排序：重要的、使用頻率高的標(biāo)簽應(yīng)當(dāng)放至前面

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

使用避免

1. 避免使用圖標(biāo)作為標(biāo)簽頁文案

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

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

避免截斷標(biāo)簽左側(cè)的文案，減少的文本會阻礙用戶對于信息的識別和理解

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

標(biāo)簽頁應(yīng)當(dāng)有足夠的面積，避免讓它們進入緊湊模式

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

3. 避免數(shù)據(jù)為空，就不顯示這個標(biāo)簽頁

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

4. 避免標(biāo)簽頁，在內(nèi)容較少或者作為比較時使用

避免將標(biāo)簽頁用于很少的內(nèi)容分類，因為會降低信息的展示效率

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

避免將標(biāo)簽頁用于比較不同類別的信息，因為它會增加用戶的記憶負擔(dān)

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

5. 避免嵌套標(biāo)簽頁，如果使用請加大他們的層級關(guān)系

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

6. 避免復(fù)雜內(nèi)容標(biāo)簽頁，用戶直接刪除

在表單中，如果刪除該標(biāo)簽頁后，會給用戶造成工作負擔(dān)，甚至?xí)G失一些數(shù)據(jù)，這時的刪除操作需要給用戶反饋提醒，給到用戶二次確認(rèn)是否刪除；如果刪除該頁簽后，對于用戶幾乎沒有任何負擔(dān)，或者再次輸入的成本較小時，不建議使用二次確認(rèn)，因為這時給用戶帶來的操作干擾遠大于誤操作成本。比如下圖 Microsoft Excel，當(dāng)標(biāo)簽頁簽有內(nèi)容輸入時，刪除會需要用戶二次確認(rèn)，而當(dāng)頁面內(nèi)容為空時刪除不會給用戶任何提醒。

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

總結(jié)

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

以上舉例覆蓋的場景不一定全面，不過我們最終的目的還是通過標(biāo)簽頁這個組件，去引導(dǎo)用戶將視覺聚焦于頁面內(nèi)容。

參考文獻：

張亮《細節(jié)決定交互設(shè)計的成敗》

尼爾森諾曼，《Nielsen Norman Group》

作者：小高雜談