編輯導讀：瀏覽網頁的時候，我們常常都能看到右上角有“漢堡菜單”，它們通常是三行堆積在一起，形狀類似于一個漢堡。而標簽欄則是直接把具體的導航分類列出來，讓用戶根據目的做出選擇。本質上來說，這兩種導航方式截然不同，但是有些時候標簽欄只是一種新的漢堡菜單。本文作者對此展開了說明，與大家分享。

在本文中，我們來討論一種失策的導航模式。

通常，我不想只抱怨糟糕的UX設計，也不想只指出問題。相反，我總是嘗試提出解決方案。這次是另一回事了：解決方案很明顯-它的標簽欄-但該解決方案的初衷在最近幾年迷失了，導致了同樣的老問題。在我們開始討論解決方案之前，是時候再次討論問題了。

01 回顧

2014年，蘋果在移動導航應如何工作方面引發(fā)了根本性的轉變。在此之前，“漢堡菜單”或“導航抽屜”（官方的Material Design命名）是最常見的移動導航解決方案。在2014年WWDC演講“ 設計直觀的用戶體驗 ”中，Apple基本上否定了此設計元素，并建議使用不同類型的導航（例如標簽欄）。

WWDC演講“設計直觀的用戶體驗”

WWDC的討論廣為流傳，全世界的UX和UI設計師開始談論漢堡菜單的弊端：

從那時起，漢堡菜單開始消失，標簽欄將其替換為解決方案。2015年，甚至是導航抽屜之父的Google也開始在自己的Android應用程序和《材料設計指南》中引入“底部導航”（即iOS“標簽欄”）。它似乎是滿足直觀移動導航目標的最佳解決方案，設計師開始考慮他們想要再次實現(xiàn)的目標。

底部導航，Material Design設計指南導航目標

快速回顧：「導航」必須告訴用戶的三件事：

1. 我在哪里？
2. 我還能去哪里？
3. 我到那里會發(fā)現(xiàn)什么？

標簽欄滿足所有3個要求。它在每個屏幕上都是可見的，因此始終為你提供視覺定向。它顯示了你在信息體系結構中的位置（活動標簽突出顯示），可以去的地方（其他標簽）以及在那里可以找到的內容（圖標和描述性標簽）。你可以訪問更深的內容（從父屏幕導航到子屏幕），而不會丟失上下文和您在應用中的位置。

換句話說：標簽欄是一個完美的移動導航解決方案。至少是這樣-直到設計師開始使用它們而沒有考慮“為什么？”。在考慮實際問題之前先考慮解決方案時，他們忘記了標簽欄最初試圖實現(xiàn)的目標。如今，標簽欄的使用方式與2014年之前使用漢堡包菜單的方式相同。

02 標簽欄的問題

查看以下UI，你最喜歡的Medium iOS應用，并嘗試找出問題所在：

屏幕截圖：Medium 應用

一旦用戶從頂層視圖導航到子視圖（例如，文章），該子視圖就會覆蓋整個屏幕，包括標簽欄。

屏幕截圖：Medium（個人設置）

現(xiàn)在，讓我們再次看一下三個導航目標：

1. 我在哪里？通過將導航隱藏在子視圖中，用戶將不再知道他/她所在的應用程序的哪個頂級頁面。用戶在你的整體信息架構中迷失了位置。
2. 我還能去哪里？通過隱藏其他頂級頁面，用戶將無法直接導航到應用程序的其他區(qū)域。相反，他們首先必須導航回到信息體系結構的頂層。
3. 我到那里會發(fā)現(xiàn)什么？子屏幕中唯一的導航元素是一個小的左箭頭，沒有標簽或描述。它不會通過單擊來告訴用戶他/她要去哪里。

Medium包含選項卡導航時可能有最好的意圖。數以千計的其他iOS和Android應用程序也是如此。它可以完美地在頂級視圖上運行，但是它們的執(zhí)行無法滿足子視圖中導航的每個目標。

子視圖通過覆蓋整個導航（選項卡欄）而表現(xiàn)為模態(tài)視圖（彈窗），但它的動畫效果類似于子視圖（從右到左），并顯示反向鏈接（箭頭），類似于子視圖。模態(tài)根本不是一件壞事?！澳B(tài)通過阻止人們在完成任務或關閉消息或視圖之前執(zhí)行其他操作”（Apple）。

但是模態(tài)還需要使用模態(tài)動畫（iOS：從底部到屏幕動畫），并包括完成和取消按鈕以退出模態(tài)視圖。模態(tài)視圖僅用于獨立任務的短期任務并且可以完成或取消，例如寫郵件，在日歷中添加事件，取消通知等……它們不打算用作詳細視圖或替換子視圖。這些子視圖不是一個自包含的過程，不能被取消或保存。

有人可能會爭辯說，這種限制性使用模態(tài)是有例外的，例如對于全屏細節(jié)視圖（如單張照片）。隱藏應用程序的整體用戶界面（如標簽欄）可創(chuàng)建焦點并最大程度地減少干擾。在這種情況下，通常使用自定義過渡來解釋模態(tài)的不常見用法。

雖然“Medium”文章可以被視為缺少自定義過渡和關閉功能的全屏詳細視圖，但應用程序的設置視圖絕對不能。

沉浸式內容的過渡

03 谷歌和蘋果的策略

蘋果和谷歌只有在極少數情況下才同意某個觀點。這是那些罕見的情況之一。Apple和Google的準則均鼓勵設計人員在應用程序的每個屏幕上一致使用標簽欄（底部導航）：

“使用時，底部導航欄出現(xiàn)在每個屏幕的底部” – Google Material Design

“顯示鍵盤時，[僅]隱藏標簽欄[…]” — Apple人機界面指南

Apple通過將標簽欄添加到其應用程序的每個子屏幕（例如Apple Music，Photos，Podcast，Health或Files）中，非常嚴格地遵循其自身規(guī)范。

Google相冊和Apple相冊的標簽欄

另一方面，Google經常通過隱藏子視圖的底部導航來打破自己的規(guī)則。盡管Google提供的Youtube始終保持底部導航的可見性，但Google相冊和Google+會將其隱藏在子視圖（如相冊和群組）中。《Material Design 設計規(guī)范》從不明確要求設計者將底部導航添加到子視圖，但他們要求他們將其添加到“每個屏幕”而不指定信息體系結構中的級別。

Apple始終按應用程序使用標簽欄，而Google似乎經常按屏幕使用底部導航*。這樣，Google創(chuàng)建的子屏幕既不是真實的子視圖（因為沒有可見的主導航），也不是模態(tài)視圖（因為這不是具有取消和保存按鈕的獨立過程）–在兩者之間。

這些中間的屏幕是一個日益嚴重的問題。從理論上講，Google確實引入了等同于標簽欄的標簽，但實際上，他們可能只是引入了下一個漢堡菜單。后來，許多iOS開發(fā)人員改編了使用標簽欄的“ Google之路”。這樣一來，他們就忘記了標簽欄最初取代漢堡包菜單的原因。

04 結論

Google為什么以這種方式使用底部導航？他們希望設計師如何使用這些中間的，模態(tài)的子視圖？我不知道。這些是我的建議：

• 在模態(tài)視圖和子視圖之間劃清界限，并知道何時使用哪個
• 只用 自包含過程的模態(tài)視圖 （以及極少數情況下的全屏詳細視圖）
• 將子視圖用于其他所有內容
• 在每個視圖（包括子視圖）上顯示標簽欄/底部導航
• 如果要創(chuàng)建焦點并最大化屏幕空間（例如，用于文章等），則在向下滾動時隱藏導航欄（位于屏幕頂部）和標簽欄（位于屏幕底部）。

標簽欄是新的漢堡菜單嗎？從某種意義上講，它們是。如果使用正確，它們都是強大的導航元素。但是一旦為了使用標簽欄而開始使用標簽欄（因為每個人都這樣做），你將失去對每次導航的最重要目標的關注，同樣的事情發(fā)生在4年前的漢堡菜單上。因此，不要停止思考“為什么？”。

原作者：Fabian Sebastian

本文由 @Fyin印跡 翻譯發(fā)布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協(xié)議。