首發 | 你平時用的 App，用了哪種導航模式？ #013

App 導航要直觀，同時要有預見性，讓新老用戶都能便捷操作。因為手機屏幕並不大，還要考慮界面各元素重要性，因此，要讓導航易於發現、操作簡單還是有挑戰的。針對這些困難，不同導航模式有不同解決方案，但整體上都與「可用性」相關。

本文將介紹 3 種基本的移動導航模式——漢堡包菜單導航，標籤導航和手勢導航，並分析各種模式的優缺點。

一、漢堡包菜單導航

屏幕空間在移動端異常珍貴，漢堡包菜單（或側抽屜）可以節省屏幕空間，它是目前最流行的移動導航模式之一。抽屜面板可將導航隱藏在屏幕左邊緣，僅在用戶操作後顯示。要想用戶聚焦頁面主要內容，這種模式最合適不過。

在默認狀態下，漢堡包菜單導航及其所有內容都是隱藏的。

舉例

下圖中，菜單隱藏在漢堡包圖標後面。

優點

• 大量導航選項。其主要優點，是可以在極小界面中包含大量導航選項。
• 簡潔設計。將導航選項隱藏在屏幕側端，可以節省界面空間。

缺點

• 隱藏後的導航可發現性降低。用戶看不到導航，心裡也就沒了導航。雖然這類導航已成為一種標準模式，而且大多用戶也非常熟悉，但仍有很多人不會去點開它。
• 和平台導航規則產生衝突。漢堡包菜單導航在 Android 客戶端幾乎是標準模式。但在 iOS 客戶端，因為會與基本導航元素產生衝突、繼而使導航欄負荷過重，這種模式就有點雞肋。

• 漢堡包圖標隱藏了內容。用戶僅僅瞅一眼，是很難知道當前位置的。用戶想了解當前位置相關信息更加困難，因為位置信息只有在用戶點擊漢堡包菜單圖標後才會顯示。
• 轉向目標頁面，需要額外操作。轉向特定的頁面，通常需要點擊至少 2 次——第 1 次點擊菜單圖標，第 2 次點擊轉向目標頁面的另一個圖標。

小提示

• 按重要性排列導航選項。若導航設計太複雜，隱藏起來並不會讓用戶體驗更加友好。大量實際案例告訴我們，要吸引用戶交互，提升用戶體驗，最好不要隱藏導航菜單選項。試問自己：「在移動端，有哪些足夠重要的元素必須在界面中顯示？」回答這個問題，首先要了解用戶需求，了解用戶認為最重要的元素是什麼。

• 如果導航選項不多，各個選項都非常重要的話，可以考慮使用標籤或標籤欄。

• 回顧信息架構。一個好用的 app，其信息架構都是高度集中的。因此，如果信息架構太複雜，不妨試試將其功能進行拆分，通過兩個（或更多）簡單的 app 來呈現。Facebook 推出 Messenger 這款 app，即將複雜問題簡單化。簡化功能後，菜單選項也會簡單很多，對漢堡包菜單導航的依賴也會減少。

二、標籤欄導航

標籤欄導航模式是從桌面設計演變而來的。它通常包含幾個可以轉至目標頁面的圖標，這幾個圖標通常數量不多，但同等重要。通過這些導航圖標，你在 app 任何界面都可以直接點擊它轉至目標頁面。

舉例

用戶可以通過 Twitter 頁面底端的標籤直接導航至相應目標頁面。

優點

• 標籤欄可以清晰地顯示用戶當前位置。因為恰當使用了視覺線索（比如圖標、標籤以及顏色等），不需要多做解釋，一切都顯而易見。

• 標籤欄隨時可見。用戶隨時都可以在屏幕上看到所有導航選項，因此可以清晰地了解 app 的主要界面內容，通過單擊也可以直接轉至相應目標頁面。

缺點

• 導航選項數量受限。如果 app 導航選項超過 5 個，在保證圖標最佳尺寸的前提下，很難將所有選項全部羅列在標籤欄或導航欄。

• 在 iOS 和 Android 客戶端，標籤欄導航選項的位置和背後的邏輯不盡相同。針對不同平台，界面設計和可用性有不同規則。在設計某特定平台的標籤欄導航時，就必須考慮這些因素。比如，標籤欄在 Android 客戶端一般在界面頂端，而在 iOS 客戶端則一般在界面底端。

小提示

• 觸擊圖標要足夠大，這樣用戶才能輕易觸擊或點擊。要計算界面底端每個標籤導航圖標的寬度，可以用總寬度除以導航標籤數量。當然，也可以將底端導航標籤圖標寬度設置為最大操作圖標的寬度（俊鐵註：即下圖中被公認為最舒適的圖標大小，也有人稱之為「手指友好型」圖標）。

• 應提前測試圖標可用性。遵循 5 秒原則：如果需要超過 5 秒的時間來確定某操作的恰當圖標，那這個圖標是否能有效傳達其含義，就值得打個問號。
• 同時使用圖標和文本標籤。由於大多數圖標並無標準使用規則，文本標籤的必要性就顯得更為重要。其可以傳達圖標含義，同時也減少出現模凌兩可的可能性。要讓用戶知道其觸擊界面某元素時，界面會有什麼交互反饋。

三、手勢導航

2007 年 6 月 29 日，是具有歷史意義的一天—— Apple 正式推出第 1 款全觸屏智能手機。從那時起，觸屏交互就成了移動設備端的主要交互方式。

在設計圈，手勢也立即成為「新寵」，很多 app 都圍繞手勢操作來設計。

在當今世界，移動 app 的成功極大程度取決於良好的手勢操作體驗。

舉例

Tinder 通過滑動手勢改變了整個行業，滑動手勢幾乎成為眾多 app 設計必不可少的手勢。用戶在 Tinder 上操作，主要是「向左滑動」及「向右滑動」 2 個手勢。

優點

• 減少界面雜亂元素。加入手勢操作，可以設計出更多的微交互方式，節省屏幕空間，從而為更有價值的內容提供屏幕空間。
• 在盧克·羅博烏斯基（Luke Wroblewski）原創文章「自然用戶界面（Natural User Interface）」中，他公布了一項實驗數據。參與這個實驗的 40 名對象來自 9 個不同國家，實驗要求她們自創 28 個日常任務的手勢，比如刪除、滾動、縮放等等。
• 值得一提的是，儘管實驗對象來自不同文化背景，各種經歷也不盡相同，但他們創造出的手勢則大同小異。比如，大多數人設計的刪除手勢，其實質都試圖將某物從屏幕中拽離。

缺點

• 導航可見性不高。可見性在界面設計中不容忽視：通過菜單，所有可操作按鈕都應是可見狀態，所以，導航也非常便利。可見性不高的用戶界面，看起來雖然「秀色可餐」，但由於不可見性，可能會導致許多實用方面的問題。由於手勢通常都處於隱藏狀態，用戶首先需要發現它們。這就好比漢堡包菜單，導航隱藏後，使用它的人就相對較少。
• 給用戶交互帶來不便。在學習使用大多數手勢時，整個過程既不自然、又不簡單。設計手勢導航時，若為了界面簡潔刪去某些元素，用戶對 app 的學習曲線會存在上升的可能性。缺乏恰當的視覺指引和線索，用戶對如何與 app 交互就會感到困惑。

小提示

• 最好不要「自作聰明」設計全新的交互界面，設計還是要結合用戶熟悉的交互模式。要設計好的手勢導航，可以從移動界面現有手勢著手。比如，設計郵箱 app 時，可以在郵件列表加入滑動手勢，畢竟滑動手勢是大眾熟知的手勢之一。

• 可以加入少量逐步顯示的視覺線索，使用戶明白如何與界面進行交互。請記住，只需顯示和用戶當前活動相關的信息，就跟遊戲 app 中一步一步帶你認識和了解遊戲類似。

結束語

幫助用戶精準導航，是設計每個 app 都應考慮的設計重點。隨時都要回想用戶角色，想想他們使用 app 時的需求，這樣設計出來的導航才更有價值，也更適用於用戶。使用越方便的 app，越容易被用戶接受和喜愛。

作者 | Nick Babich，軟體工程師，關注 UI 和 UX。

譯者 | 俊鐵

題圖 | Pexels

原文授權譯自 Basic Patterns for Mobile Navigation

本文首發於知乎專欄產品視角新靈感。商業轉載請聯繫獲得授權，非商業轉載請註明出處。