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

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

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

01 回顧

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

WWDC演講“設(shè)計直觀的用戶體驗”

WWDC的討論廣為流傳，全世界的UX和UI設(shè)計師開始談?wù)摑h堡菜單的弊端：

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

底部導(dǎo)航，Material Design設(shè)計指南導(dǎo)航目標(biāo)

快速回顧：「導(dǎo)航」必須告訴用戶的三件事：

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

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

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

02 標(biāo)簽欄的問題

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

屏幕截圖：Medium 應(yīng)用

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

屏幕截圖：Medium（個人設(shè)置）

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

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

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

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

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

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

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

沉浸式內(nèi)容的過渡

03 谷歌和蘋果的策略

蘋果和谷歌只有在極少數(shù)情況下才同意某個觀點。這是那些罕見的情況之一。Apple和Google的準(zhǔn)則均鼓勵設(shè)計人員在應(yīng)用程序的每個屏幕上一致使用標(biāo)簽欄（底部導(dǎo)航）：

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

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

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

Google相冊和Apple相冊的標(biāo)簽欄

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

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

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

04 結(jié)論

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

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

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

原作者：Fabian Sebastian

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

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