選項卡式導航：何時使用它以及如何優化它

我最喜歡的 UX 名言之一來自Google 工作室和設計系統主管 Chikezie Ejiasi。

他寫道：“生活就是對話。 網頁設計也應如此。 在網絡上，您正在與一個您可能從未見過面的人交談，因此清晰準確非常重要。 因此，結構良好的導航和內容組織與良好的對話密切相關。”

標籤式導航能否清晰準確？ 當然可以，這使它成為一種有效的導航和內容組織形式。

與大多數與用戶體驗相關的事情一樣，重要的是你如何實施它以及如何優化它。

什麼是標籤式導航？

選項卡式導航是一種導航和 UI 樣式，其中信息組織在選項卡中，將內容分成不同的部分。

通常，在查看選項卡式導航時，您會注意到一些共同特徵：

1. 圓角標籤；
2. 製表符的分隔，無論是空格還是單行；
3. 選項卡上的懸停效果；
4. 為選項卡添加深度和尺寸的漸變。

選項卡式導航基於文件夾隱喻，任何在辦公室工作或看電視的人都應該熟悉它。 就像 UsabilityGeek 的 Mifsud 解釋的那樣……

賈斯汀·米夫蘇德，UsabilityGeek ：

“在 UI 術語中，隱喻是用於促進用戶和應用程序之間的熟悉度的想法或對象。

在 UI 中使用選項卡是一個很好的比喻，因為它們看起來像真實世界中文件中的選項卡分隔符或文件抽屜中文件夾中的選項卡。

因此，用戶更直觀地知道這些選項卡將內容分成幾個部分，就像在現實生活中一樣，觸及選項卡（通過單擊選項卡在網絡上模擬）將顯示相應的內容。” （來自 UsabilityGeek）

因為這個比喻很常見，所以小心實施很重要。 選項卡式導航具有強大的原型，因此它們的外觀和工作方式必須完全符合預期。

與任何優秀的導航系統一樣，選項卡允許您：

• 有意義地將內容分成不同的部分；
• 向人們展示他們可以獲得哪些內容以及他們如何獲得該內容；
• 直觀地向人們展示他們在您網站中的位置。

什麼時候使用選項卡式導航是個好主意？

通常，在以下情況下使用選項卡式導航是個好主意：

• 您有兩到九種不同類別的內容。
• 類別名稱相對較短且可預測，無論是在位置還是在副本方面（即它們與原型匹配）。
• 類別數量不太可能定期更改。
• 這些類別在性質上是相似的； 將它們標記在一起是合乎邏輯的。
• 這些類別適合一行。

正如 Nielsen Norman Group 的 Jakob Nielsen 所解釋的那樣，當選項卡式導航變得如此復雜以至於需要多行時，問題就開始出現了……

Jakob Nielsen，尼爾森諾曼集團：

“多行會創建跳躍的 UI 元素，這會破壞空間記憶，從而使用戶無法記住他們已經訪問過哪些選項卡。

此外，多行肯定是過度複雜的徵兆：如果您需要的選項卡多於一行無法容納的選項卡，則必須簡化您的設計。” （通過 NN/g）

多行也會產生視覺層次問題。 當有第二行時，它可能會向用戶發出信號，表明第二行中的選項卡是子類別，或者至少不如第一行中的選項卡重要。

通常，在以下情況下使用選項卡式導航不是一個好主意：

• 您希望人們同時比較內容。 這會使記憶力緊張並大大增加認知負荷。
• 您發現自己正在考慮添加“更多...”樣式的鏈接。

當然，這些只是基本準則。 您可能會匹配所有“您應該使用它”的規則，但發現它對您的受眾不起作用。 它最終是你需要測試的東西。

請記住，您可以使用數字分析來確定您的選項卡式導航是否給訪問者帶來了問題。 從那裡，您可以進行更改以解決問題或嘗試新型導航。

爭議

雖然現代設計實踐有很多網站看起來像這樣……

…有些人確實使用選項卡式導航作為他們的主要導航。

正如穀歌的 Luke Wroblewski 多年前所記載的那樣，亞馬遜確實引領了這一趨勢……

盧克·弗羅布萊夫斯基，谷歌：

“1998 年，該網站有​​兩個頂級類別：書籍和音樂。

隨著其他類別的添加（例如視頻和禮品），水平標籤系統擴展得很好，並為通過顏色區分產品類別創造了一個很好的機會。” （通過 LukeW）

下面讓我們看看亞馬遜在早期是如何使用標籤式導航的……

隨著網站越來越受歡迎，亞馬遜需要的標籤數量也越來越多……

1999 年，Jakob 稱這是“糟糕的設計和對標籤隱喻的濫用”：

我認為選項卡最好用於在備選（但相關）視圖之間切換，而不是導航到不相關的位置。

您應該使用選項卡在同一上下文中的視圖之間切換，而不是導航到不同的區域。 這是最重要的一點，因為在交替視圖時保持原位是我們首先使用選項卡的原因

雅各布·尼爾森

儘管如此，許多網站還是效仿亞馬遜，標籤式導航的定義開始從 Nielsen 的“在不同視圖之間切換”轉變。

雖然使用選項卡式導航作為主要導航系統有點過時，但它可以工作。 與大多數事情一樣，您最關心的不應該是 Nielsen 對選項卡式導航的看法，而是您的聽眾所說的。

他們覺得很難使用嗎？ 他們是否正確瀏覽您的網站？ 他們能找到您網站中最重要的元素嗎？ 進行可用性測試以確保。

如何實現標籤式導航

加拿大航空公司以及大多數主要航空公司都很好地使用了標籤式導航……

自己實現選項卡式導航（在任何級別）時，請記住以下幾點：

• 首先，設計站點的信息架構 (IA)，以便您可以做出更明智的選項卡相關決策。
• 整個選項卡應該是可點擊的，而不僅僅是類別名稱（文本）。
• 不要使用“主頁”選項卡，即使您正在為整個站點使用選項卡式導航。 相反，讓您的徽標將訪問者帶到主頁。
• 選項卡應該連接到它控制的內容區域，以便選項卡的範圍清晰。
• 類別名稱應為一兩個詞長，並以通俗易懂的英語書寫。 避免使用全部大寫，因為這會使標籤更難閱讀。
• 不要堆疊多行標籤。 如果必須，請改用子類別（即選項卡下方的第二個水平條）。 如果您確實使用子類別，請確保所選選項卡和下面的子類別欄之間存在視覺連接。 確保您使用的子類別數量不會太多； 濃縮和簡化。
• 所選選項卡應突出標記以指示當前位置。 但是，未選擇的選項卡不應靜音以至於被遺忘或忽略。
• 頁面之間應保持一致的選項卡順序，以便用戶完全理解選項卡之間的關係。

Jakob 解釋了為什麼這種一致性很重要……

1. 可識別性。 當某樣東西看起來總是一樣時，您就會知道要尋找什麼，並且當您找到它時就知道它是什麼。

2. 可預測性。 當某件事總是以同樣的方式運作時，你知道當你對它採取行動時會發生什麼。

3. 授權。 當您可以依靠過去對所有可用功能的了解時，您可以輕鬆地編寫一組操作來實現您的目標。

4.效率。 無需花時間學習新東西或擔心不一致功能的影響。

雅各布·尼爾森

正確完成選項卡式導航的示例

了解選項卡式導航的最佳方法是查看一些示例，尤其是因為它可以以多種不同方式使用。

1.專輯藝術收藏

專輯藝術收藏是標籤式導航的一個相當流行的例子......

這裡有兩件事很有趣……

1. 導航是垂直的，而不是水平的。
2. 導航包括圖標。

通常，您會發現標籤式導航是水平顯示的。 這部分是由於設計原型。 由於它很常見，人們傾向於在徽標下方的水平空間中尋找導航。

當然，這並不意味著您只能使用該空間進行導航。 請務必使用用戶測試。 您不希望出於風格原因移動導航以影響站點的易用性。

請注意，雖然 Album Art Collection 使用導航圖標，但它們並沒有放棄基於文本的描述。 圖標可用性測試本身就是一篇文章，但通常情況下，基於文本的描述比單獨的圖標更有用。 Six Revisions 的 Jacob Gube 解釋了……

Jacob Gube，六次修訂：

“避免使用圖標代替選項卡控製文本，因為符號對不同的人可能意味著不同的東西——最安全的做法是使用純文本來描述窗格信息。” （來自 Smashing 雜誌）

2.發票機

Invoice Machine 是您作為主要導航示例的基本選項卡式導航……

但是，它們確實包含一個“主頁”選項卡，這是多餘的。 請注意所選選項卡是如何向前顯示的，以及選項卡是如何連接到內容區域的。

3.緩衝區

Buffer 是我最喜歡的選項卡式導航示例之一。 過去，他們有針對個人的產品和針對企業的產品，因此他們使用選項卡將其內容分隔在首屏下方。

這是個人內容的開始……

這是企業內容的開始……

這使他們能夠與兩個不同的聽眾交談，而無需創建完全獨立的站點或體驗。

後來，Buffer 的產品頁面經歷了深刻的變化，發布、回復和分析等產品（都是不言自明的）。 這是他們用於頁面的選項卡導航：

除了不同的定價計劃外，這些基於產品的選項卡還顯示了與選項卡上的產品相關的不同推薦：

正如 UX Booth 的 David Leggett 解釋的那樣，選項卡式導航的相關性超出了一級和二級導航級別。 它們甚至可以在非首屏使用，就像 Buffer 的情況一樣……

大衛萊格特，用戶體驗展台：

“選項卡不需要局限於一級和二級導航。 如果它們為用戶提供了在相同內容區域之間切換的能力，那麼它們將非常有用。

結合無需重新加載頁面即可切換內容的技術，可以為瀏覽頁面的最終用戶灌輸一種有形的感覺。” （通過用戶體驗展台）

要記住的 3 個最佳實踐

在您嘗試選項卡式導航或決定它不適合您之前，請考慮以下三個因素：可訪問性、分塊和速度。

1. 可訪問性很重要

您希望殘障人士或行動不便的人可以訪問您的網站。 為了使用選項卡式導航來做到這一點，您必須……

• 允許人們使用鍵盤上的“Tab”鍵導航選項卡。
• 允許人們使用鍵盤上的“Enter”鍵選擇一個選項卡。
• 使用替代方法指示選擇了哪個選項卡。 例如，您可以在標題屬性中包含“活動”一詞。

讓更多人更容易使用您的網站永遠不會影響轉化率。

2.分塊問題

使用選項卡式導航，您決定如何組織和分塊內容非常重要。 這就是為什麼我上面的第一個實施建議與您網站的信息架構有關。

賈斯汀解釋了為什麼適當的組織至關重要……

賈斯汀·米夫蘇德，UsabilityGeek ：

“選項卡將內容分成有意義的部分，佔用更少的屏幕空間。 在這方面，用戶可以輕鬆訪問他們感興趣的內容（而不是段落中的所有內容）。” （來自 UsabilityGeek）

考慮您希望網站上出現的所有內容。 然後，將該內容分組為四到五個桶。 很可能，您將能夠重複此練習並最終得到兩個或三個不同的桶。 那挺好的。 進行用戶測試，看看哪些人的響應和導航更好。

最重要的是，您需要確保……

1. 您的內容以一種合乎邏輯、預期且對訪問者清晰的方式進行分塊。
2. 選項卡的順序是有意義且合乎邏輯的。
3. 您的選項卡遵循現有原型。 例如，SaaS 網站通常以特定方式分塊，而電子商務網站通常以另一種方式分塊。

3.速度很重要

我們已經多次寫到速度的重要性。 因此，速度在選項卡式導航的有效性中也發揮作用也就不足為奇了。

雅各布解釋得很好……

Jacob Gube，六次修訂：

“使用模塊選項卡的一個目的是允許快速和交互式地呈現內容。 為此，您應該嘗試在 HTML 文檔中內聯寫入非活動窗格的內容，然後使用 CSS 和 JavaScript 設置樣式並可視化地隱藏窗格，這比需要重新加載頁面或請求遠程源數據更快。

在窗格之間切換時避免重新加載頁面，因為這會顯著延遲窗格之間的導航。 使用 Ajax 的遠程加載內容可以成為動態和遠程定位窗格信息的一個選項，但對可能不知道文檔樹中異步插入 DOM 節點的屏幕閱讀器用戶來說是一個挑戰。” （來自 Smashing 雜誌）

此建議不適用於那些使用選項卡式導航作為主要導航的用戶，但那些像加航和 Buffer 那樣使用選項卡式導航的用戶應該注意。

結論

選項卡式導航絕對可以與您的訪問者進行“良好的對話”。 如果實施得當，它會足夠清楚和準確地告訴您的訪問者：他們的確切位置、他們可以使用的內容以及他們如何訪問他們可以使用的內容。

在可用性測試和優化的幫助下，這種對話得到了進一步改善。

然而，與任何事情一樣，一定要進行你的研究（在這種情況下，你的信息架構研究）和測試，測試，測試。

總之…

1. 選項卡式導航可以用作主要導航系統，也可以超出主要或次要導航級別。
2. 當您有兩到九個固定的、相似的類別且短名稱可以放在一行中時，請嘗試使用選項卡式導航。
3. 當您希望人們比較內容或發現自己正在考慮添加“更多...”鏈接時，請不要嘗試選項卡式導航。
4. 您可以遵循實施最佳實踐，但是……
5. 重要的是您的數據。 您的訪問者是否發現使用選項卡式導航難以瀏覽您的網站？ 進行可用性測試以找出答案。
6. 修復彈出的問題。 或者，如果存在許多代價高昂的問題，請考慮使用另一個導航系統。
7. 當涉及到選項卡式導航時，可訪問性、分塊和速度都很重要，因此請密切注意。

正在做與此相關的事情嗎？ 在CXL 社區發表評論！