標簽本身是毫無意義的，但是當它們本身能夠在不打擾用戶的同時還能指引用戶前往正確的內容和特性時，你便不得不承認它也是可以做到耀眼的。

這里是關于標簽選項卡的12個設計準則：

1、使用標簽選項卡在相同容器不同內容下的視圖間切換，而不是作為導航將用戶帶到不同的區域。這是最重要的一點，因為在不同的標簽視圖下切換時保持內容容器的一致是我們在開始使用標簽選項卡時最主要的原因。

2、每一個標簽背后的內容要合乎邏輯，好讓用戶能夠輕而易舉的預見到選擇一項后會發現些什么。 (卡片分類是研究這類“微型信息架構”問題的方法之一。 如果你找不出有明顯不同的歸類性信息，那么使用標簽選項卡就可能是管理你頁面內容的錯誤方法）

3、只有當用戶不需要同時看到多個選項卡的內容時，再考慮使用標簽選項卡。如果人們確實需要比較不同標簽頁的信息，那么相比于把所有信息都放在一個頁面顯示，多標簽的做法會因為用戶需要在不同標簽間來回切換，無疑增加了用戶的閱讀負擔和操作成本，進而降低網站的可用性。

4、所有的標簽在本質上應該是平行的（類似的），如果標簽跟標簽之間顯著不同，用戶將會把他們視作網站的導航。

Workday 的主頁主要使用標簽控件指向它的服務和應用，而第一個標簽卻是提供公司的概覽，跟其他標簽并不處在平行關系，因此最好將其移除才對

5、突出強調當前選中的標簽，確保其表現形式足夠讓用戶意識到究竟是哪個標簽選中了。

Ticketmaster 的標簽控件通過無色的處理標示出當前選中的選項卡，然而這種做法更適用于至少有3個標簽時。圖中只有2個標簽的時候，你很難告訴我究竟哪個才是選中的標簽

除了高亮顯示的方法，你也可以通過尺寸、標簽、圖標上的變化或者位置上的調整來標識出當前選項。如上圖中所示，在只有兩個標簽時這種額外的標識尤其重要。

6、對于那些未被選中的標簽，其應該保持清晰可見的狀態且易于讀取，提醒用戶還有其他選項可供選擇。而如果這些標簽在背景下隱藏過深時，就會存在一定的風險，即用戶可能永遠不會點擊到它們甚至發現不了這些選項。

7、當前的標簽要關聯到指定的內容區域，就好比你是在拖動不同標簽對應的實體卡片一樣。這樣的話，就能突出顯示對應的內容面板，同時也能夠在只有兩個標簽的時候依然明確的告訴用戶當前選中的是哪個標簽。

Travelers 的標簽控件將選中的標簽和內容面板置于相同的顏色，強化了兩者之間的關聯性

8、使用簡單明了的標簽語言，而不是代辦專業性的描述。每個選項卡對應的文本標簽應該在1-2個單詞，保證用戶易于閱讀。如果你真的需要更長的標簽語言，那就意味著你的標簽控件設計的過于復雜了。

9、不要針對標簽語言采用全部大寫的做法，這絕不是一個好的主意，因為會增加閱讀的難度。雖然可讀性對單一的，簡短的詞組不成問題，但是正如網站可用性指南中描述， 你應該選擇一個大小寫格式（無論是針對句子還是標題樣式）并堅持使用。

10、要堅持所有的標簽選項卡只采用單行排列。如果放置在多行的話，就會引起元素間的跳躍性，破壞用戶在空間上的記憶，使他們不可能記住自己已經訪問過的標簽。另外，這種做法也是設計過渡復雜的一個表征，這個時候你必須要考慮簡化你的設計。

11、將標簽選項卡布置在頁面頂部的一個面板上，不要放在用戶常常會忽略的邊欄或底部位置。

每個標簽對應的內容區域在視覺上應該有明確的界限。從喻意上來說，使用標簽就像在老式的抽屜式卡片目錄下翻閱索引卡片一樣，因此用戶必須在第一眼就能明白什么組成了“索引卡片”（即選項卡面板)。

Reuter 主頁下的市場選區內，使用邊框來從視覺上表現出標簽對應的內容區域

12、所有的標簽選項卡在視覺和作用方式上應該一致，因為這種一致性的做法能夠幫助用戶在幾個方面建立起對他們對用戶界面的把控度：

• 可識別性：當一些東西看起來總是一致時，你能夠知道要去找哪一個以及找到的那個又是什么。
• 可預見性：當一些東西總是以一致的方式作用時，你能夠預見到當你作用于它時將會發生什么。
• 自主性：?當你可以依賴你過去的所有可用的知識特性，您可以很容易地構建起一連串的動作來達成你的目標。
• 高效性：你不需要花費額外的時間來學習新東西，也不必擔心不一致的功能會帶來的影響。

結論

在圖形化的用戶界面設計中，標簽選項卡看上去簡陋而無趣。但是就像本文提到的，在創建作用優良，容易使用，提升體驗的標簽時，仍然有一些需要我們注意的具體問題。

標簽選項卡的設計問題只是我們在分析UX的優良性時遇到的一個普通的問題。如果你在追蹤用戶在頁面內的行為操作，如果發現用戶在某些頁面中很少使用到標簽，請嘗試檢查你的設計是不是違背了本文中提到的一些指導原則。如果確實違背了，那可能就出自你的設計問題，不過你也有可能通過重新設計后再來做個快速的A/B測試來彌補自己的過錯。

如果你遵循了本文中的指導原則進行設計，用戶就能夠不需要花費額外的探索或猜測來搞清楚如何使用你的標簽。這就意味著他們可以把所有的時間和腦力用來理解在這些標簽背后的內容和特性。

作者：三達不留點gpj

譯自：https://www.nngroup.com/articles/tabs-used-right/

本文由 @三達不留點gpj 翻譯發布于人人都是產品經理。未經許可，禁止轉載。