雖然樣例中的App 在中國都用不到矛缨，Material design在中國設計師也不一定采用，但是我覺得好東西還是應該分享出來。
“ 什么是導航？
用來在各個場景之間切換的工具安拟，這就是導航⊙渖荩”
只要您試圖在 App 中 “串聯(lián)” 兩個場景矿卑，那么就需要 “導航”。這種串聯(lián) —— 無論是什么形式 —— 其實就是讓用戶得以在各個場景之間切換的工具悄但。盡管創(chuàng)建導航本身來說并不復雜棠隐，但是創(chuàng)建 “正確的” 導航卻并不是一件容易的事。今天檐嚣，我們一起來看看在 Android 中最常見的一些設計模式助泽，聊聊它們在系統(tǒng)中所起到的作用，并且您該如何合理搭配這些模式來使其適用于您的界面及用戶嚎京。
? 導航的定義
在一股腦地扎進去研究常見的導航模式之前嗡贺，不妨重新思考一下您的應用導航規(guī)劃的出發(fā)點。在 Material Design 中我們其實已經(jīng)給出了詳細的指導方針鞍帝，用來幫助您規(guī)劃整個導航架構诫睬，但是本文中我們可以將所有的這些歸納成兩個非常簡單的點：
基于任務及內容來創(chuàng)建導航；
**基于用戶來創(chuàng)建導航帕涌。 **
基于任務和內容創(chuàng)建導航摄凡，其實就是分解用戶可能發(fā)生的操作续徽，以及在這過程中所觸及到的內容，并試圖描繪出這二者之間的關系網(wǎng)絡架谎。與此同時炸宵，您還需要確定這些操作之間的關系 —— 哪些操作更為重要，哪些操作之間互相關聯(lián)谷扣，哪些操作相互嵌套土全，以及哪些操作將會被更多地使用。
明白了第一點之后会涎，第二點 —— 基于用戶來創(chuàng)建導航 —— 就理所當然了裹匙。畢竟用戶都是帶著目的在使用您的 App，他們自然可以分辨您的設計是否合理末秃，畢竟導航創(chuàng)建的目的就是為了讓他們順利抵達自己想要到達的頁面（目的地）概页。
只要您弄明白了應用中的多個操作如何協(xié)同運作，就可以順勢決定每個步驟所需要呈現(xiàn)的內容以及其呈現(xiàn)形式 —— 如此便可以很好地確定哪些模式最適合您的應用體驗练慕。
** 標簽導航**
1. 定義
標簽可以為同一層級下的子畫面提供快速導航惰匙，因為它們是共面的 —— 這意味著它們處于同一個展開的標簽欄中，可隨時相互切換铃将。
標簽非常適合用來過濾项鬼、分割或者提供不同的展示維度。如果您要展示的內容彼此毫不相關劲阎，或者是深度層級明顯不同的內容的話绘盟，可以考慮使用其他的導航模式。
2. 實例說明
- 從左到右分別是 Play Music悯仙，Google Plus 及 Play Newsstand*
Play Music（上左）使用標簽來劃分瀏覽維度龄毡。通過用不同的方式組織相同的基本內容來適應不同的探索方式。
Google Plus （上中）使用標簽分割不同來源的收藏集锡垄，這就使得這一單一的導航樣式足以承載非常異構的內容沦零。
Play Newsstand（上右）在圖庫屏幕上使用標簽來提供相同信息的不同呈現(xiàn)形式 —— 一個標簽展示出整體、多層次的集合货岭，而另一個則顯示出一套扼要的標題蠢终。
3. 歷史（返回）記錄
標簽在同一個父屏幕中共同存在于一個層面上。因此茴她，在標簽之間的導航行為不應該為系統(tǒng)返回按鈕或應用的后退按鈕創(chuàng)建歷史記錄。
** 抽屜式導航**
**1. 定義******
抽屜式導航通常指畫布左邊緣的垂直面板（入口一般都很像一個漢堡包或者中文的 “三” 字）程奠。抽屜可以是可見的或者隱藏的丈牢，持續(xù)存在的或者不持續(xù)存在的，但它們都保有一些共同特征瞄沙。
通常己沛，抽屜式導航可以列出同層級的視圖慌核，所以常被用于擁有多個頂級視圖的情況下，但也可以在里面直接增加 “設置”申尼、“幫助” 等特殊功能視圖的入口垮卓。
如果您將抽屜與另一個主導航控件（例如，底部導航）組合使用师幕，那么抽屜中可以包含次級視圖粟按，或不完全遵循底部導航層級結構的重要入口。
當使用抽屜式導航時霹粥，要注意您想要呈現(xiàn)什么樣的視圖 —— 如果加入過多的灭将、或者不同層次的視圖，很容易會讓用戶感到困惑后控。
此外庙曙，您還要注意可視性 —— 抽屜本來就是用來減弱對 UI 可視區(qū)域的影響的，但這同時也可能讓您的抽屜難以被用戶發(fā)現(xiàn)浩淘，所以如何設計還是得取決于您的 App 中的視圖究竟應該如何呈現(xiàn)并訪問捌朴。
2. 實例說明
Play Store（上左）使用抽屜導航來導向商店的不同部分张抄，每個部分都是不同類型的內容砂蔽。
Google Camera（上中）使用抽屜來展現(xiàn)不同的功能 —— 旨在提升拍攝體驗。同時也將 “設置” 的入口放了進來欣鳖。
Inbox（上右）有一個非常長的察皇、可擴展的抽屜導航。頂部是展示電子郵件中的頂級功能視圖泽台，下方則是其擴展功能什荣。此外，由于 Inbox 中的導航欄相當長怀酷，所以 “設置” 及 “幫助與反饋” 的條目永遠錨定在屏幕區(qū)域的底部稻爬，就算導航欄上下滾動，您也可以隨時訪問這兩個功能蜕依。
3. 歷史（返回）記錄
通常桅锄，當應用擁有明確的 “Home” 視圖時，點擊抽屜導航通常會給系統(tǒng)返回（Back）按鈕創(chuàng)建歷史記錄样眠。舉例說明一下：在 Play Store 中友瘤，home 視圖是 “Apps＆Games”，它主要使用了標簽導航以便用戶查看各類型的推薦應用或游戲檐束，所以當用戶使用抽屜導航離開這里之后辫秧，點擊手機的 Back 按鈕即可迅速返回。
同樣的被丧，Google Camera 也會使用 Back 按鈕將用戶帶回到默認拍攝模式盟戏。
- “開始駕駛” 是主視圖的擴展*
Google Maps（上圖）也是如此 —— 抽屜中的任何一個視圖基本上都是在 “您的位置” 上疊加一些額外的信息绪妹，所以點擊 Back 按鈕會直接帶您回到最干凈的視圖里。
再給一個例子柿究。如上所示邮旷，即使您用標簽導航進入到了新的視圖， Play Store 中的抽屜導航圖標也沒有更改為 “返回上一層” 的字樣 —— 這是因為抽屜中的頂級視圖處于整個導航架構中的同一層級蝇摸，您并沒有更深入地進入應用婶肩，仍然處于同一層級當中。
** 底部導航**
**1. 定義******
在 Android 上探入，底部導航控件通常包含 3 到 5 個頂級視圖狡孔。需要注意的是，“更多” 不算頂級視圖蜂嗽。
要想底部導航運作良好苗膝，您需要控制頂級視圖的數(shù)量 —— 畢竟底部導航不允許滾動。擁有底部導航的主要優(yōu)點之一在于植旧，您可以當即從任意子視圖跳轉到與其并不相關的父級視圖辱揭，而不需要先返回到其對應的父級視圖。
不過病附，您要注意的是问窃，盡管底部欄中的各個視圖在整個應用的導航層級中是相互平等的，但它并不像標簽導航中的內容那樣存在邏輯上的關系 —— 底部欄中的各個視圖之間毫無關聯(lián)完沪，每個視圖是作為獨立的域庇、相互不關聯(lián)的父級存在，而不是互相關聯(lián)的兄弟項覆积。如果兩個視圖之間的內容是相關聯(lián)的听皿，那么最好使用標簽導航來呈現(xiàn)。
2. 實例說明
- Google Photos宽档，注意諸如助手尉姨、照片和分享這樣完全獨立的視圖就適合使用底部導航。*
在其定義之外吗冤，底部導航有一些有趣的地方需要注意又厉。其中最為復雜的，可能是底部導航是否需要永久展現(xiàn)椎瘟。但根據(jù)我們的經(jīng)驗覆致，我們只能回答 “視情況而定” —— 與其他很多設計決策類似，設計模式最終還是會需要滿足實際業(yè)務的需求肺蔚，沒必要過于刻板篷朵。
通常，底部導航貫徹于整個應用的所有場景，但是有些情況下可以選擇性地隱藏底部欄声旺。如果用戶處在非常次級的視圖 —— 例如消息編寫等用途單一的視圖，或者是呈現(xiàn)更為沉浸式的體驗段只，那么底部欄隱藏起來能帶來的收益會更高腮猖。
在 Google Photos（上圖）中，底部導航在用戶進入相冊這個視圖時就消失了赞枕。相冊在整個層級架構中屬于次級視圖澈缺，唯一的進一步操作是打開一張照片。這種情況滿足了隱藏底部導航的 “功能單一” 的條件炕婶，同時又能夠為用戶提供比帶底部導航的頂級視圖更好的體驗姐赡。用戶用著開心，何樂而不為呢柠掂？
3. 再想深一點
如果您決定讓底部導航欄在整個應用中永久展現(xiàn)项滑，那么下一個需要考慮的則是利用導航欄在各個視圖之間切換的操作設計邏輯。當一個用戶處在一個頂級視圖的子視圖中涯贞，然后他們跳轉到另外一個視圖枪狂，隨后又切換回最初的視圖，那么這個時候他們看到應該是哪個視圖宋渔？是最初的頂級視圖州疾，還是他們離開時的那個子視圖呢？
我們的回答依然是 “視情況而定”皇拣。這其實是由使用您的應用的用戶來決定 —— 一般來說严蓖，點擊底部導航中的條目應該會進入該頂級視圖，而不是之前停留的子視圖氧急，但這并不是絕對的颗胡，這同樣要根據(jù)實際情況及目的來決定。
4. 歷史（返回）記錄
底部導航不應該為系統(tǒng)返回按鈕創(chuàng)建歷史記錄态蒂。但是訪問底部導航的頂級視圖中的更深層的子視圖可以創(chuàng)建歷史記錄杭措，底部欄也可以作為歷史導航用來直接返回它所代表的頂級視圖。
** 上下文結合式導航**
1. 定義
上下文導航是由除去以上所講的所有導航控件之外的導航交互所組成的導航模式钾恢。包括按鈕手素、方塊、卡片以及其他所有可以將用戶導向其他頁面的一切工具瘩蚪。
一般來說泉懦，上下文導航相比之前介紹的那些顯式導航，更不具備線性規(guī)律 —— 它可以讓用戶在不同層級間乃至不同層級間的不同操作之間切換疹瘦，甚至可以跳轉離開這個 App崩哩。
2. 實例說明
- 從左到右分別是 Clock，Google 和 Google Calendar*
在 Clock 應用（上左）的屏幕底部有一個很大的懸浮按鈕（FAB）；Google 應用（上中）主要提供卡片內的資訊; 而 Google Calendar（上右）則為事件創(chuàng)建瓷貼式（Tile）窗口邓嘹。
在 Clock 中點擊懸浮按鈕酣栈，您會進入世界時鐘選擇屏幕；點擊 Google 應用中的天氣卡汹押，將您帶入 “天氣” 的搜索結果頁面矿筝，在 Calendar 中點擊事件窗口，將會看到詳細的活動信息棚贾。
我們還在這些 UI 中看到窖维，上下文導航可以用不同的方式來引導用戶。在 Clock 應用中妙痹，我們來到了時鐘的下一個層級铸史；在 Google 應用中，本質上講怯伊，我們來到了主視圖的功能擴展頁面琳轿；而在 Calendar 中，我們則打開了一個全屏對話框震贵。
3. 歷史（返回）記錄
在上下文導航中利赋，對于是否生成歷史記錄并沒有硬性規(guī)定，這完全取決于您用了什么樣類型的上下文導航以及在哪使用了它猩系。如果不清楚應該創(chuàng)建什么樣的歷史記錄媚送，參考一下 “返回上一級” 按鈕和 “返回” 按鈕的一般設定也可以。
****** 向上寇甸，向后和關閉按鈕**
這三個按鈕對于 Android UI 的導航非常重要塘偎，但它們的使用通常模糊不清。從 UX 的角度來看拿霉，這三個按鈕的行為實際上非常簡單吟秩，記住以下規(guī)則可以幫助您擺脫任何令人困惑的情況。
“向上” 按鈕：當用戶已經(jīng)深入到較深的層級時绽淘，操作提示會顯示 “向上”涵防。它按照時間順序在層級結構中進行回溯導航過程，直到用戶到達父級視圖沪铭。由于向上按鈕不會顯示在頂級視圖上壮池，所以它并不會把用戶引導出應用。
“返回” 按鈕：“返回” 按鈕始終存在于系統(tǒng)導航欄中杀怠。即使用戶的上一個屏幕在另一個應用中椰憋，它也會按從后向前的時間順序排列，不管應用的層次結構如何赔退。它還會關閉臨時元素橙依，如對話框证舟、底部選項和彈出窗口。
“關閉” 按鈕：“關閉” 通常用于關閉界面的臨時層級或是在全屏對話框中放棄更改窗骑。比如 Google Calendar 中的事件詳情屏幕（如下左所示）女责，使用臨時的全屏視圖來展現(xiàn)詳情能夠使其更加清晰。在 Inbox（如下中所示）中慧域，從收件箱到郵件的轉換表明鲤竹，郵件的 UI 是 “疊加” 在收件箱上的，因此關閉按鈕用在這里是合理的昔榴。Gmail （如下右所示）將郵件詳情定位為應用中的特定級別，并使用向上按鈕碘橘。
- 從左到右分別是 Calendar互订，Inbox 和 Gmail*
** 組合模式**
我們已經(jīng)分析了 App 中可用的各種導航模式，現(xiàn)在我們來看看一些案例痘拆，了解他們是如何將這些不同的導航模式加以組合仰禽，來形成適用于用戶的導航架構。
- Google Plus*
也許最明顯的例子就是 Google Plus（上圖）了纺蛆，它融合了我們以上討論的所有模式 —— 標簽導航吐葵、抽屜式導航、底部導航以及上下文導航桥氏。拆解來看温峭，我們會發(fā)現(xiàn)底部導航欄是 G+ 的關鍵所在。它提供了四個頂級視圖的訪問通道字支。通過標簽導航將其內容分割到各個主要類別并加以呈現(xiàn)凤藏。然后在抽屜導航中涵蓋其他訪問較少的頂級及次級視圖。
- Play Store*
Play Store（上圖）為了更多展示應用信息堕伪，選擇了抽屜導航來承載頂級視圖入口揖庄，然后經(jīng)常使用上下文導航來輔助，偶爾使用標簽導航欠雌。在上面的圖片中蹄梢，我們看到了通過抽屜導航訪問的頂級視圖（從 “應用與游戲” 切換到了 “電影與電視”）。這時在抽屜的下方我們可以看到使用了上下文導航來過濾內容富俄。而在最右邊的應用排行榜中禁炒，標簽導航用于將整個排行榜分割成不同維度的榜單。
- Google Calendar*
Google Calendar（上圖）則使用來抽屜導航和上下文導航蛙酪，并且方式非常有趣齐苛。注意 Calendar 中的抽屜并沒有遵循通常的規(guī)范用法，而是主要用于擴展日歷功能桂塞。日歷本身由擴展的工具欄面板控制凹蜂，彩色的瓷貼式窗口會將用戶引導到活時間詳情頁中。
?? 還有更多問題？
之所以會寫這么長一篇文章玛痊，是因為我們在觀察 Play Store 中的應用時意識到不少開發(fā)者總是 “小瞧” 了導航的復雜度汰瘫。但其實導航的設計是一個非常復雜的話題，希望借著這篇文章能夠讓大家意識到這一點擂煞，并且主動探索關于導航的更多細節(jié)和邊界問題混弥。
如果有更多問題，大家可以點擊 “閱讀原文” 查看 Material Design 中關于導航架構設計的更多規(guī)范及實例对省，也歡迎大家積極留言與我們分享好的導航設計做法蝗拿。
****推薦閱讀：****
Android Wear 2.0 - 連接未來
原創(chuàng) 2017-08-08 Google Play 谷歌開發(fā)者
