移動導航的基本設計模式

這是一篇谷兜翻譯的文章，原文來自Nick Babich。

▍導航是我們在設計時最容易忽略，又非常重要的一個組件。在本文中，UX設計紅人Nick Babich試著為我們從不同角度分析了目前比較常見的三種導航 ── 漢堡導航（也叫抽屜式導航）、Tab Bar導航和手勢導航。谷兜順著Nick的思路，又為大家整理了一些我們認為值得一看的文章，一併呈上。

對於App來說，貫穿整個產品的導航設計都應該是直觀和可預期的。藉助導航，新老用戶都應該能平滑順暢地跳轉到App的任意位置。但是受制於珍貴的屏幕空間和不同的內容優先順序，設計一個可見性和易用性都不錯的導航並不是一件容易的事。當然，不同的導航設計模式可以從不同的角度來提供解決方案，但它們都會面臨各種各樣的可用性問題。

在本文中，我將會分析三種基本移動導航模式的優缺點 ── 漢堡導航，Tab Bar導航，以及手勢導航。

▍漢堡導航

移動設備的屏幕空間非常珍貴。這個時候，漢堡導航可以很好地節省屏幕空間 ── 這也是為什麼漢堡導航一度在產品設計中頗受歡迎的原因。你可以把導航收在屏幕之外，當用戶點擊後再推出來。如果你希望用戶更好地把注意力集中在主要內容上的話，漢堡導航會是一個不錯的選擇。

▍例如

優點

• 漢堡菜單里可以包含的選項數量比較靈活。漢堡菜單有一個很大的優點是可以用很小的空間排布很多選項，空間使用率很高。
• 簡潔高效的設計。將更多的區域留給核心內容，利用按鈕進行切換。

缺點

• 隱藏導航的可見性更低。無法看到，便無法感知。用戶相對不太可能會去使用一個被隱藏起來的導航欄。儘管漢堡導航的設計已經逐漸具有一致性，用戶還是不太習慣去使用它。
• 與系統導航設計原則相悖。漢堡導航符合安卓平台的設計原則（在Material Design中其被命名為Navigation drawer（導航抽屜），卻與iOS的設計原則相悖『谷兜：iOS的設計原則中，Navigation Bar位於屏幕頂端，左上角一般是返回按鈕的位置』，它佔據了導航欄的位置。

• 漢堡標藏住了前後內容。用戶不能從中感知到自己當前所處的App中的位置，只有點擊漢堡標之後才能看到具體信息。也需要更多的操作才能到達目的頁面，通常到達目的頁面需要至少兩次點擊（一次點擊漢堡標按鈕，一次點擊目標頁面）。

忠告

• 導航永遠應該被最優先考慮。如果你的導航層級比較複雜，對於移動設備來說，隱藏並不會讓界面更友好。無數例子證明，露出式菜單選項是一種能提升用戶參與感和滿意度的視覺方案。問問自己：在移動端，什麼元素最應該被露出？當然，回答問題的前提是，你真的可以確定你的用戶需要什麼。

• 如果你有為數不多，但使用頻率又很高的導航選項，應該考慮使用tabs或者tab bar。

• 評估你的信息架構。好的應用，核心功能非常明確。所以如果你的產品功能很複雜，不妨嘗試將他們拆分成兩個（或者更多）簡單的應用。例如Facebook就把Messenger拆分成了一個單獨的App，來解決功能太過複雜的問題。功能的減少帶來了層級的簡潔，也就同時降低了使用漢堡菜單的必要性。

▍Tab Bar

Tab Bar的設計模式實際上是從桌面端繼承過來的。它通常包含了幾個為數不多，但相關性較強，優先順序也相近的選項。同時，這些選項又都很重要，需要可以從App中的任意頁面直接跳轉到達。

▍例如

優點

• Tab Bar導航可以為用戶帶來有效、準確的溝通和交互。輔以適當的視覺引導（圖標，標籤和顏色）將帶來清晰明確的含義傳達，幾乎不需要更多的解釋。
• Tab Bar導航是永駐的。導航會始終駐持在屏幕上，用戶對於導航下的各個頁面和路徑都有非常清晰的視覺感知。

缺點

• 導航選項數量有限。如果你的App有五個以上的導航選項，很難將它們塞到Tab Bar的導航中，且保持理想的觸摸尺寸

• iOS和Android有著不同的Tab Bar設計邏輯。不同的平台有著不同的手冊來規範UI的使用，因此在針對不同平台設計Tab Bar時，你也必須考慮到這些設計規範。例如，在iOS上Tab Bar通常位於屏幕下方，而在Android上則通常位於屏幕上方。所以在iOS上，通常會使用吸底的Tab Bar導航進行應用中的頁面切換；Android平台則在屏幕頂端顯示導航欄。此外，Android應用可能會使用底部的位置來放置額外的操作。

正確的位置和邏輯將有助於和平台上的其他應用保持一致的體驗，同時防止切換應用時在操作和視圖上產生的混淆。

忠告

• 為可點擊目標設計足夠的尺寸。為點擊和點按操作預留足夠的尺寸。依據按鈕數量的不同進行寬度分割並據此計算Tab Bar的寬度，或者直接選用可能的最大寬度。

• 對你的圖標進行可用性測試。使用5秒法則：如果用戶花費超過5秒的時間去思考你的圖標代表什麼含義，那麼這個圖標可能並沒有明確的傳達它所代表的信息。
• 始終考慮使用標籤來配合圖標。因為目前並沒有一個統一的圖標設計規範，使用文本標籤來傳達信息對於減少歧義是十分必要的。用戶需要知道他們點擊圖標後究竟會發生什麼。

▍手勢導航

2007年7月29號是一個改變遊戲規則的日子。當蘋果發布了其第一代觸屏手機的時候，移動設備進入了觸屏交互的時代。

手勢操作迅速受到設計師的青睞，許多應用都開始引入手勢交互。

如今，用手勢交互來實現優秀的用戶體驗甚至已經成為了判斷一款App是否成功的重要因素

▍例如

Tinder的滑動手勢操作改變了這(yue)個(pao)行業。這種滑動操作幾乎成為了這款App的標誌性交互。

優勢

• 去掉冗餘的UI。更好地把手勢融合到你的設計中，可以為你節省更多的界面空間，把更多的可能性留給有價值的內容。
• 自然的界面。在Luke Worblewski的一項相關研究中，來自九個國家的40名測試用戶被要求為28個不同的任務創建手勢，包括刪除、滾動和縮放等等。值得注意的是，不同文化和經驗背景的人做出的手勢是相似的。比如：當要做出刪除操作時，大部分人都選擇嘗試將對象拖出屏幕。『谷兜：Donald Norman(2013, pp. 54-56) 把這一特性論述為「符合生活經驗和常識」，即「陳述性知識(declarative knowledge)」,David Hoekman在《About Face》一書中也有相關論述』

缺點

• 低可見性的導航。UI設計的一項重要原則是保證可見性：所有可能的操作都應該能被用戶通過菜單看到，從而做出進一步的操作決策。一個即使非常精緻，但是不能保證可見性的界面，會引發可用性的麻煩：由於手勢是不可見的，用戶必須先找到對應的手勢。這就像漢堡菜單一樣，如果你隱藏一個選項，那麼用戶就會更少地使用這個選項。
• 更大的使用和學習成本。大部分的手勢既不自然也不容易學習或者記憶。當設計基於手勢的導航時，切記：每次調整UI，應用的學習曲線都會上升。如果沒有恰當的視覺提示和引導，用戶就可能對產品的交互十分迷惑。

忠告

• 確保你不需要教你的用戶以一種全新的交互方式使用你的App。基於用戶已經熟悉的經驗設計。想設計一個友好的手勢導航，你必須先觀察目前移動端已有的手勢和使用場景。例如,如果你設計一個郵箱應用，可以選擇使用一個輕掃的手勢，因為大部分用戶已經熟悉了這種手勢。

• 使用漸進式的內容呈現和適當的視覺引導告訴用戶如何與你的界面交互。記住，你只需要傳達與當前場景相關的信息，就像在遊戲中你一點點的融入到場景中一樣。『谷兜：關於漸進式呈現，在這篇文章中我們做了更詳細的論述』

▍結論

協助用戶完成導航，是每一個App中最需要被優先考慮的事情。時刻去考慮、揣摩和推測『谷兜：必要的時候，測試』用戶畫像和用例目標。通過你的導航幫他們達成這些目標。產品易用性越強，用戶才會越喜歡用。

?谷兜討論

移動端導航模式

導航是每一個產品在設計之初就需要優先考慮的問題，這篇文章介紹了三種導航方式的優劣，以及使用的建議。

從大的概念上，導航可劃分為主導航和次級導航，其中主導航包含全局導航和瞬時導航。另一種劃分方式可以從產品層級結構上劃分為：分層式導航、扁平式導航、內容或體驗驅動式導航。本文中所討論的導航屬於全局導航的範疇，同時它們也是使用率最高的幾種導航模式。除此之外，還有舵式導航（也稱點聚式導航，是tab bar的一種變形），宮格式導航等等。

總的來說每一種導航模式都有優劣，需要結合具體的產品來設計。以及，同一款產品並不限於只使用一種導航模式，亦有很多優秀的產品是兩種或以上的導航模式相結合。

基於手勢的導航

實際上此類文章很少把「手勢」當做一種導航的方式一起進行討論，但原文作者一起進行了比較，實際上也是有道理的：隨著移動端屏幕的變大，物理按鍵的減少，拇指區域也發生著微妙的變化，多年的手勢交互積累，使得大部分移動端用戶都可以靠直覺進行某些手勢的交互行為。一些常見的手勢也已經被標準化，如：點擊、拖拽、滑動、雙擊、捏合、長按以及搖晃。觸控界面性能的提升給了這些交互動作更多的可能性，從用戶角度考慮，依然是越簡單，越直覺化的手勢越可以獲得好的體驗。在設計過程中，盡量避免給予標準的手勢以不同的含義，也應當避免創建與標準手勢功能類似的手勢。手勢的目的在於更簡單的操作，讓用戶集中於當前的體驗和內容，而不是交互行為本身。

為漢堡菜單多說幾句

有人說，現在選擇使用漢堡導航的設計師，都不是好設計師。確實，隨著移動設備屏幕尺寸的變化，抽屜式導航已經不再是主流，但谷兜認為這並不能說明漢堡導航就一無是處，原因有二：

• 即使主流屏幕尺寸變化，在iOS的官方設計規範中，並沒有明確要求設計師（優先）考慮Tab Bar導航，甚至並沒有建議改動「返回」Button的位置（保持在屏幕左上方）；
• 以谷歌地圖為代表的大部分單任務式App還是選擇了把導航入口放在屏幕左上方（在這裡我們認為所有類似漢堡導航式的把導航入口收納在一個icon里的設計模式都歸結在本文討論的漢堡導航的範疇中）。

?大神怎麼看

包括漢堡式菜單在內的隱藏式菜單，確實對內容露出產生了一些消極影響。NN/G注意到了這個問題，並曾經對此進行過一系列的用戶測試。他們把測試報告發布在了官網上。由於篇幅有限，本文中谷兜只摘錄了一部分報告中的內容，供各位參考。

『谷兜：發布機構NN/Group由Jakob Nielsen和Don Norman在1998年創辦，這兩位大神都是交互設計的泰斗。NN/G主要致力於證據導向（Evidence-Based）的用戶體驗研究、培訓和諮詢。而證據導向（Evidence-Based）也是谷兜一直推崇的用戶研究和產品設計理念，基於同理心、實際調研、觀察和相關研究報告來推敲目標用戶、使用場景和產品，而不是靠估計和猜測。』n

對於移動端設計，（導航設計）並沒有什麼萬金油的設計規則。但是總的來說，我們推薦：

• 如果你的產品（尤其是web-based頁面）有4個或以下的頂級導航，使用漏出式導航；
• 如果你的產品有更多的頂級導航，隱藏它們中的一部分或許是一個明智的選擇。我們發現隱藏式導航雖然也會對移動端可用性造成一些影響，但是這種影響比桌面端要小一些。所以我們推薦選擇一種折中的設計。因為逐級呈現式設計（見谷兜的另一篇文章）的體驗要比多選式設計（谷兜：把所有選項展開就是多選式設計）要好得多。
• 通過頁內鏈接來強調內容，或者使用其他方法作為麵包按鈕菜單的補充。

記住，「移動端優先」設計不是「移動端限定」設計。在必要的時候請同時參照其他的設計指南來實現你的創意。

以上結論來自於與NN/G合作的K. Pernice, R. Budiu與一家遠程可用性測試公司WhatUsersDo的包闊179個測試對象的合作用戶研究項目。這個龐大的用研報告被發表在額外的文章中。

──轉載說明──

如果你覺得這篇文章不錯，需要把這篇文章分享到其它地方。

請註明本文鏈接地址及「來自谷兜」字樣。