［譯］安卓介面導航初識

horizon13th發表於2017-08-15

原文地址：A Primer on Android navigation
原文作者：Liam Spradlin
譯文出自：掘金翻譯計劃
本文永久連結：github.com/xitu/gold-m…
譯者：horizon13th
校對者：SumiMakito, laiyun90

安卓介面導航初識

介面中任何引領使用者跳轉於頁面之間的媒介 —— 這便是導航

當你的應用中的兩個不同頁面產生聯絡時，導航便由此而生。跳轉連結（不論從哪跳到哪）便是頁面間傳遞使用者的媒介。建立導航相對容易，但想要把導航做好並不總是那麼簡單。這篇博文裡，我們探討一下安卓系統下最常見的導航模式，看看它們是怎樣影響系統佈局，以及如何為你的應用介面，使用者量身打造導航欄。

✏️ 定義導航

在深入探索導航模式前，讓我們先退後一步回到起點，做一個小練習，回想一下你的應用中的導航。

在 Material Design 網站中有許多優秀設計規範介紹瞭如何著手定義導航結構。但本文中我們把所有的理論歸結為簡單的兩點：

基於任務和內容構建導航
基於使用者構建導航

基於任務和內容構建導航意味著，將任務分步驟拆分。設想使用者在完成任務的過程中應該做什麼看到什麼，怎樣處理步驟之間的關係，決定哪一步更重要，哪些步驟是並列關係，哪些步驟是包含關係，哪些步驟常見或不常見。

至於基於使用者構建導航，只有真正使用過你設計的介面的使用者才能告訴你這適不適合他們。你所設計的導航最好能幫助他們更好地使用應用，帶給他們最大化的便利。

當你搞清楚在你的應用中，多個任務怎樣協同工作的，便可以著手設計。使用者在完成任務的過程中可以看到什麼內容，在什麼時候，以什麼方式來呈現。這個小練習能夠讓你從根本上思考什麼樣的設計模式能更好地服務於你的 app 體驗。

? 分解任務行為以設計導航更多內容，詳見 Material Design。

? 標籤頁（Tabs）

定義

標籤頁提供了在相同父頁面場景下，同級頁面間的快速導航。所有的選項卡是位於同一平面的，這意味著，他們可以放置在同一可擴充套件的狀態列上，也可以相互改變位置。

標籤頁是很好的頁面內容過濾、分段、分級工具。但是對於毫無關聯的內容，或是層級化結構內容，也許其它的導航模式會更合適。

? 設計標籤頁的更多細節參考此處，更多實現參考此處。

標籤頁例項

Play Music 應用，Google+ 應用，Play Newsstand 應用

Play Music 應用（左）使用標籤頁增加音樂庫的探索深度，以不同的方式組織大致相同的內容，為使用者定製不同的探索方法。

Google+ 應用（中）使用標籤頁將收藏列表分塊，每個類別下都是深層異構的內容。

Play Newsstand 應用（右）在媒體庫頁面使用標籤頁來呈現相同資訊的不同集合－其中一個選項卡呈現一個整體的多層次的集合，另一個選項卡顯示濃縮集合的大標題。

訪問記錄

標籤頁一般為同一級別，因此它們的佈局在相同的父級頁面下。兩個標籤頁間的切換不需要為系統後退鍵或應用的返回鍵新建歷史記錄。

? 側邊欄／抽屜式導航欄（Nav drawers）

定義

側邊欄（抽屜式導航欄）可以理解為附於頁面左部邊緣的垂直皮膚。設計者可以將側邊欄設計在螢幕外或螢幕內可見，持續存在或者不用時隱藏，但這些不同的設計往往有相同的特點。

通常側邊欄會列出一些同級的父級頁面們，尤其用於放置較重要的頁面，又例如一些“設定”，“幫助”這類特殊頁面。

如果你將側邊欄和另一個導航控制元件相組合——底部導航欄，那麼側邊欄可以放置一些二級連結，或者底部導航不能直接到達的重要連結。

當使用側邊欄時，要注意連結類別——放過多的連結，或展示過多不同級別的連結，都會讓應用的層次結構顯得混亂。

還有需要注意的一點是介面的可視性。側邊欄可以很好的幫助應用減少可視性，壓縮與主要內容無關的導航區。但是，這也可能成為應用的不足，取決於導航欄的目標連結在具體場景中如何呈現和被訪問。

? 設計側邊欄的更多細節參考此處，更多實現參考此處。

側邊欄例項

Play Store 應用，Google Camera 應用，Inbox 應用

Play Store 應用（左上）使用側邊欄展示應用商店的不同區域，每一欄都連結到不同區域的內容。

Google Camera（中上）使用側邊欄列出其它支援功能——大部分是提升照相體驗的其他應用外鏈，當然了還有相機設定。

Inbox（右上）郵箱應用使用了伸長版的側邊欄。頂端是電子郵箱的主要功能連結，用於展示不同類別的郵件，側邊欄的下方則為一些支援工具和擴充套件包。由於電子郵箱的側邊欄非常的長，“設定”和“幫助反饋”按鈕固定在側邊欄底端，方便使用者隨時訪問。

訪問記錄

當應用程式有明顯的“返回首頁”功能時，側邊欄應當為系統建立“返回首頁”的功能。例如，在 Play Store 應用商店中，點選“返回首頁”按鈕回到頁面“應用程式及遊戲”，展示給使用者的是所有類別的精選應用。因而 Play Store 應用建立了從其它頁面到主頁面的返回功能。

同樣的，在使用 Google Camera 相機應用時，當使用者點選返回鍵時，返回到相機的預設拍攝介面。

“開始導航” 圓形按鈕增強主地圖功能。

谷歌地圖（如上）也用了相同的方案，側邊欄的選項要麼是在地圖上加層，要麼增強主地圖提供輔助功能。所以當使用者點選“返回”按鈕時回到的也是預設地圖介面。

你可能會注意到，隨著你進入其他頁面，Play Store 谷歌商店（上圖）工具欄中的側邊欄圖示並未改變。這是因為側邊欄的按鈕在應用的層級結構中為同一級別。由於使用者並沒有深入到子級頁面（例如，點選“音樂與視訊”），因而側邊欄的圖示並不會改變成返回上一級的樣式。使用者始終在最頂級的頁面，只不過是在同級頁面中切換而已。

? 底部導航（Bottom nav）

定義

在安卓系統中，底部導航控制元件通常由三到五個目的地按鈕構成。重要的一點是，“更多”按鈕並不能看作一個目的地，更不是選單或對話方塊。

當你的應用只有有限個數的頂級頁面需要被訪問時，使用底部導航欄最合適（底部導航千萬不能滾動）。底欄最主要的優點在於，可以從子頁面迅速跳入毫無關聯的頂級頁面，而無需先導航到當前頁面的父頁面。

值得注意的是，儘管底部導航的連結應當在應用中有相同的層級結構，但是他們和標籤頁截然不同，也絕不能以標籤頁的形式展現。

切換底部欄，暗示著兩個皮膚是毫無關係的。每個皮膚是孤立的父節點，而不是其它皮膚的兄弟節點。如果你的應用中，兩個皮膚有相同內容或者相同的父節點，也許用標籤頁是更好的選擇。

? 設計底部導航的更多細節參考此處，更多實現參考此處。

底部導航例項

Google Photos 相簿應用

除了底部導航的基本定義，還有一些有意思的點值得考慮。也許最複雜的問題就是：底部導航欄是否要持續存在？答案和許多設計決策一樣，那就是：“看情況”。

通常底部導航在整個應用中是持續存在的，但在某些情況下，導航欄是隱藏的狀態。例如使用者使用的應用只有很淺的層次結構，像收發簡訊這類單一功能的頁面，又或者應用想給使用者更深刻的使用者體驗，那底部導航或許隱藏起來更好。

在 Google Photos 相簿應用中（上圖），底部導航在相簿中是隱藏的。相簿在整個層級結構中處於第二層，比相簿更深一層只有檢視相片，開啟它時從相簿頁面頂部展現。這種實現方式滿足了隱藏底邊導航以達到“唯一目的”的規則。當使用者進入程式最頂層時，為其創造沉浸式體驗。

其它考慮

如果底部導航在整個應用中持續存在，那麼下一個需要考慮的問題便是底部導航的跳轉邏輯。假設一個使用者在深層層級結構中進行跳轉，從一個子頁面切換到另一個子頁面，再點選返回跳轉到前一個子頁面，那他到底應該看到哪一個頁面呢？父級頁面？還是他停留過的子級頁面？

這個功能應該取決於應用的使用者。一般來說，點選底部按鈕應該直接跳轉到關聯頁面，而不是更深層的頁面。不過話說回來還是老問題，看情況。

訪問記錄

底部導航欄的點按不應該為系統“返回鍵”建立歷史記錄。不過層級結構中進入深層級可以為系統“返回鍵”創造系統歷史記錄，為應用建立“返回上級”訪問記錄，但是底部欄其本身便是一種具有記錄歷史特性的導航結構。

點按底部導航按鈕，應當直接跳轉到關聯頁面。使用者再次點選按鈕應當跳轉到該欄的父頁面，或者當使用者以及在父級頁面時重新整理頁面。

? 上下文導航（In-context navigation）

定義

上下文導航由所有非上述導航控制元件間的互動組成。這些控制元件包括像按鈕、方塊、卡片，還有其它應用內跳轉的內容。

通常，上下文導航和常用導航形式相比，更多是非線性操作 —— 互動行為使使用者在層級結構，離散型結構之間任意跳轉，甚至跳轉到應用之外。

? 設計上下文導航的更多細節參考此處。

上下文導航例項

時鐘應用，Google 搜尋應用，Google 日曆應用

時鐘應用（左上）設計的很巧妙，有一個浮動操作按鈕；Google 搜尋應用（中上）主要靠下部卡片維護資訊；Google 日曆（右上）給每一個日曆時間建立塊狀條目。

在時鐘應用裡（左上）通過點選浮動按鈕，即刻檢視世界時鐘；在 Google 搜尋應用（中上）裡點選天氣卡片，搜尋引擎立馬為你展示“天氣”的搜尋結果；Google 日曆（右上）點選塊狀條目進入事件詳情頁。

我們也能看出來，這些截圖展現了上下文導航給使用者帶來不一樣的跳轉體驗。時鐘應用裡，使用者進入應用的子級頁面；Google 搜尋應用使用卡片以增強主螢幕，而 Google 日曆是點選開啟全屏視窗。

訪問記錄

對於上下文導航，並沒有對訪問記錄的硬性規定。訪問記錄的建立與否完全取決於使用什麼形式的上下文導航，還有使用者通過導航要去哪裡。為了以防萬一，在某些情況裡應用建立什麼型別的歷史記錄並不明確，設計者最好了解下，在通常情況點選返回鍵和向上鍵設定會產生什麼操作。

↖️ 向上鍵、返回鍵、關閉鍵（Up, back, and close buttons）

返回鍵，向上鍵，關閉鍵這三個按鍵在安卓使用者介面裡都非常重要，但卻常常被理解錯誤。實際上，從使用者體驗的角度，三個按鈕都很簡單，只要熟記下面的幾條規則，保證再也不會陷入困惑。

向上鍵往往是當使用者沿著應用層級結構返回上級選單時使用到，常出現於應用工具欄。點選向上鍵，視窗延時間先後順序後退直到使用者到達最頂級父頁面。由於頂級父頁面無法再往上跳出應用，向上鍵不應該出現在頂極父頁面中。
返回鍵存在於系統底部導航欄。它的導航作用是沿時間順序後退，而非應用頁面的層級關係，哪怕前一個時間節點是在其它應用中。它還用於關閉臨時頁面元素，比如對話方塊，底部表單等層疊皮膚。
關閉鍵通常用於關閉介面臨時層，或者放棄修改全屏對話方塊。例如 Google 日曆事件詳情頁（下圖）。全屏日曆事件詳情頁面屬於很明顯是臨時頁，設計時使用關閉鍵。Google 郵箱應用（下圖）中，從收件箱到郵件正文的漸進效果顯示，郵件正文是收件箱頁面的疊加層，因此使用關閉鍵較合適。而 Gmail 應用中（下圖）郵件正文是作為一個獨立層存在於應用中的，因此返回鍵更合適。