設(shè)計(jì)無小事：Android 導(dǎo)航
“ 什么是導(dǎo)航?用來在各個(gè)場景之間切換的工具，這就是導(dǎo)航。”
只要您試圖在 App 中 “串聯(lián)” 兩個(gè)場景，那么就需要 “導(dǎo)航”。這種串聯(lián) —— 無論是什么形式 —— 其實(shí)就是讓用戶得以在各個(gè)場景之間切換的工具。盡管創(chuàng)建導(dǎo)航本身來說并不復(fù)雜，但是創(chuàng)建 “正確的” 導(dǎo)航卻并不是一件容易的事。今天，我們一起來看看在 Android 中最常見的一些設(shè)計(jì)模式，聊聊它們在系統(tǒng)中所起到的作用，并且您該如何合理搭配這些模式來使其適用于您的界面及用戶。
一、導(dǎo)航的定義
在一股腦地扎進(jìn)去研究常見的導(dǎo)航模式之前，不妨重新思考一下您的應(yīng)用導(dǎo)航規(guī)劃的出發(fā)點(diǎn)。在 Material Design 中我們其實(shí)已經(jīng)給出了詳細(xì)的指導(dǎo)方針，用來幫助您規(guī)劃整個(gè)導(dǎo)航架構(gòu)，但是本文中我們可以將所有的這些歸納成兩個(gè)非常簡單的點(diǎn)：
- 基于任務(wù)及內(nèi)容來創(chuàng)建導(dǎo)航;
- 基于用戶來創(chuàng)建導(dǎo)航。
基于任務(wù)和內(nèi)容創(chuàng)建導(dǎo)航，其實(shí)就是分解用戶可能發(fā)生的操作，以及在這過程中所觸及到的內(nèi)容，并試圖描繪出這二者之間的關(guān)系網(wǎng)絡(luò)。與此同時(shí)，您還需要確定這些操作之間的關(guān)系 —— 哪些操作更為重要，哪些操作之間互相關(guān)聯(lián)，哪些操作相互嵌套，以及哪些操作將會被更多地使用。
明白了第一點(diǎn)之后，第二點(diǎn) —— 基于用戶來創(chuàng)建導(dǎo)航 —— 就理所當(dāng)然了。畢竟用戶都是帶著目的在使用您的 App，他們自然可以分辨您的設(shè)計(jì)是否合理，畢竟導(dǎo)航創(chuàng)建的目的就是為了讓他們順利抵達(dá)自己想要到達(dá)的頁面(目的地)。
只要您弄明白了應(yīng)用中的多個(gè)操作如何協(xié)同運(yùn)作，就可以順勢決定每個(gè)步驟所需要呈現(xiàn)的內(nèi)容以及其呈現(xiàn)形式 —— 如此便可以很好地確定哪些模式最適合您的應(yīng)用體驗(yàn)。
1. 標(biāo)簽導(dǎo)航
(1) 定義
標(biāo)簽可以為同一層級下的子畫面提供快速導(dǎo)航，因?yàn)樗鼈兪枪裁娴?—— 這意味著它們處于同一個(gè)展開的標(biāo)簽欄中，可隨時(shí)相互切換。
標(biāo)簽非常適合用來過濾、分割或者提供不同的展示維度。如果您要展示的內(nèi)容彼此毫不相關(guān)，或者是深度層級明顯不同的內(nèi)容的話，可以考慮使用其他的導(dǎo)航模式。
(2) 實(shí)例說明
△ 從左到右分別是 Play Music，Google Plus 及 Play Newsstand
Play Music(上左)使用標(biāo)簽來劃分瀏覽維度。通過用不同的方式組織相同的基本內(nèi)容來適應(yīng)不同的探索方式。
Google Plus (上中)使用標(biāo)簽分割不同來源的收藏集，這就使得這一單一的導(dǎo)航樣式足以承載非常異構(gòu)的內(nèi)容。
Play Newsstand(上右)在圖庫屏幕上使用標(biāo)簽來提供相同信息的不同呈現(xiàn)形式 —— 一個(gè)標(biāo)簽展示出整體、多層次的集合，而另一個(gè)則顯示出一套扼要的標(biāo)題。
(3) 歷史(返回)記錄
標(biāo)簽在同一個(gè)父屏幕中共同存在于一個(gè)層面上。因此，在標(biāo)簽之間的導(dǎo)航行為不應(yīng)該為系統(tǒng)返回按鈕或應(yīng)用的后退按鈕創(chuàng)建歷史記錄。
2. 抽屜式導(dǎo)航
(1) 定義
抽屜式導(dǎo)航通常指畫布左邊緣的垂直面板(入口一般都很像一個(gè)漢堡包或者中文的 “三” 字)。抽屜可以是可見的或者隱藏的，持續(xù)存在的或者不持續(xù)存在的，但它們都保有一些共同特征。
通常，抽屜式導(dǎo)航可以列出同層級的視圖，所以常被用于擁有多個(gè)頂級視圖的情況下，但也可以在里面直接增加 “設(shè)置”、“幫助” 等特殊功能視圖的入口。
如果您將抽屜與另一個(gè)主導(dǎo)航控件(例如，底部導(dǎo)航)組合使用，那么抽屜中可以包含次級視圖，或不完全遵循底部導(dǎo)航層級結(jié)構(gòu)的重要入口。
當(dāng)使用抽屜式導(dǎo)航時(shí)，要注意您想要呈現(xiàn)什么樣的視圖 —— 如果加入過多的、或者不同層次的視圖，很容易會讓用戶感到困惑。
此外，您還要注意可視性 —— 抽屜本來就是用來減弱對 UI 可視區(qū)域的影響的，但這同時(shí)也可能讓您的抽屜難以被用戶發(fā)現(xiàn)，所以如何設(shè)計(jì)還是得取決于您的 App 中的視圖究竟應(yīng)該如何呈現(xiàn)并訪問。
(2) 實(shí)例說明
△ 從左到右分別是 Play Store，Google Camera 及 Inbox
Play Store(上左)使用抽屜導(dǎo)航來導(dǎo)向商店的不同部分，每個(gè)部分都是不同類型的內(nèi)容。
Google Camera(上中)使用抽屜來展現(xiàn)不同的功能 —— 旨在提升拍攝體驗(yàn)。同時(shí)也將 “設(shè)置” 的入口放了進(jìn)來。
Inbox(上右)有一個(gè)非常長的、可擴(kuò)展的抽屜導(dǎo)航。頂部是展示電子郵件中的頂級功能視圖，下方則是其擴(kuò)展功能。此外，由于 Inbox 中的導(dǎo)航欄相當(dāng)長，所以 “設(shè)置” 及 “幫助與反饋” 的條目永遠(yuǎn)錨定在屏幕區(qū)域的底部，就算導(dǎo)航欄上下滾動，您也可以隨時(shí)訪問這兩個(gè)功能。
(3) 歷史(返回)記錄
通常，當(dāng)應(yīng)用擁有明確的 “Home” 視圖時(shí)，點(diǎn)擊抽屜導(dǎo)航通常會給系統(tǒng)返回(Back)按鈕創(chuàng)建歷史記錄。舉例說明一下：在 Play Store 中，home 視圖是 “Apps&Games”，它主要使用了標(biāo)簽導(dǎo)航以便用戶查看各類型的推薦應(yīng)用或游戲，所以當(dāng)用戶使用抽屜導(dǎo)航離開這里之后，點(diǎn)擊手機(jī)的 Back 按鈕即可迅速返回。
同樣的，Google Camera 也會使用 Back 按鈕將用戶帶回到默認(rèn)拍攝模式。
△ “開始駕駛” 是主視圖的擴(kuò)展
Google Maps(上圖)也是如此 —— 抽屜中的任何一個(gè)視圖基本上都是在 “您的位置” 上疊加一些額外的信息，所以點(diǎn)擊 Back 按鈕會直接帶您回到最干凈的視圖里。
再給一個(gè)例子。如上所示，即使您用標(biāo)簽導(dǎo)航進(jìn)入到了新的視圖， Play Store 中的抽屜導(dǎo)航圖標(biāo)也沒有更改為 “返回上一層” 的字樣 —— 這是因?yàn)槌閷现械捻敿壱晥D處于整個(gè)導(dǎo)航架構(gòu)中的同一層級，您并沒有更深入地進(jìn)入應(yīng)用，仍然處于同一層級當(dāng)中。
3. 底部導(dǎo)航
(1) 定義
在 Android 上，底部導(dǎo)航控件通常包含 3 到 5 個(gè)頂級視圖。需要注意的是，“更多” 不算頂級視圖。
要想底部導(dǎo)航運(yùn)作良好，您需要控制頂級視圖的數(shù)量 —— 畢竟底部導(dǎo)航不允許滾動。擁有底部導(dǎo)航的主要優(yōu)點(diǎn)之一在于，您可以當(dāng)即從任意子視圖跳轉(zhuǎn)到與其并不相關(guān)的父級視圖，而不需要先返回到其對應(yīng)的父級視圖。
不過，您要注意的是，盡管底部欄中的各個(gè)視圖在整個(gè)應(yīng)用的導(dǎo)航層級中是相互平等的，但它并不像標(biāo)簽導(dǎo)航中的內(nèi)容那樣存在邏輯上的關(guān)系 —— 底部欄中的各個(gè)視圖之間毫無關(guān)聯(lián)，每個(gè)視圖是作為獨(dú)立的、相互不關(guān)聯(lián)的父級存在，而不是互相關(guān)聯(lián)的兄弟項(xiàng)。如果兩個(gè)視圖之間的內(nèi)容是相關(guān)聯(lián)的，那么最好使用標(biāo)簽導(dǎo)航來呈現(xiàn)。
(2) 實(shí)例說明
△ Google Photos，注意諸如助手、照片和分享這樣完全獨(dú)立的視圖就適合使用底部導(dǎo)航。
在其定義之外，底部導(dǎo)航有一些有趣的地方需要注意。其中最為復(fù)雜的，可能是底部導(dǎo)航是否需要永久展現(xiàn)。但根據(jù)我們的經(jīng)驗(yàn)，我們只能回答 “視情況而定” —— 與其他很多設(shè)計(jì)決策類似，設(shè)計(jì)模式最終還是會需要滿足實(shí)際業(yè)務(wù)的需求，沒必要過于刻板。
通常，底部導(dǎo)航貫徹于整個(gè)應(yīng)用的所有場景，但是有些情況下可以選擇性地隱藏底部欄。如果用戶處在非常次級的視圖 —— 例如消息編寫等用途單一的視圖，或者是呈現(xiàn)更為沉浸式的體驗(yàn)，那么底部欄隱藏起來能帶來的收益會更高。
在 Google Photos(上圖)中，底部導(dǎo)航在用戶進(jìn)入相冊這個(gè)視圖時(shí)就消失了。相冊在整個(gè)層級架構(gòu)中屬于次級視圖，唯一的進(jìn)一步操作是打開一張照片。這種情況滿足了隱藏底部導(dǎo)航的 “功能單一” 的條件，同時(shí)又能夠?yàn)橛脩籼峁┍葞У撞繉?dǎo)航的頂級視圖更好的體驗(yàn)。用戶用著開心，何樂而不為呢?
(3) 再想深一點(diǎn)
如果您決定讓底部導(dǎo)航欄在整個(gè)應(yīng)用中永久展現(xiàn)，那么下一個(gè)需要考慮的則是利用導(dǎo)航欄在各個(gè)視圖之間切換的操作設(shè)計(jì)邏輯。當(dāng)一個(gè)用戶處在一個(gè)頂級視圖的子視圖中，然后他們跳轉(zhuǎn)到另外一個(gè)視圖，隨后又切換回最初的視圖，那么這個(gè)時(shí)候他們看到應(yīng)該是哪個(gè)視圖?是最初的頂級視圖，還是他們離開時(shí)的那個(gè)子視圖呢?
我們的回答依然是 “視情況而定”。這其實(shí)是由使用您的應(yīng)用的用戶來決定 —— 一般來說，點(diǎn)擊底部導(dǎo)航中的條目應(yīng)該會進(jìn)入該頂級視圖，而不是之前停留的子視圖，但這并不是絕對的，這同樣要根據(jù)實(shí)際情況及目的來決定。
(4) 歷史(返回)記錄
底部導(dǎo)航不應(yīng)該為系統(tǒng)返回按鈕創(chuàng)建歷史記錄。但是訪問底部導(dǎo)航的頂級視圖中的更深層的子視圖可以創(chuàng)建歷史記錄，底部欄也可以作為歷史導(dǎo)航用來直接返回它所代表的頂級視圖。
4. 上下文結(jié)合式導(dǎo)航
(1) 定義
上下文導(dǎo)航是由除去以上所講的所有導(dǎo)航控件之外的導(dǎo)航交互所組成的導(dǎo)航模式。包括按鈕、方塊、卡片以及其他所有可以將用戶導(dǎo)向其他頁面的一切工具。
一般來說，上下文導(dǎo)航相比之前介紹的那些顯式導(dǎo)航，更不具備線性規(guī)律 —— 它可以讓用戶在不同層級間乃至不同層級間的不同操作之間切換，甚至可以跳轉(zhuǎn)離開這個(gè) App。
(2) 實(shí)例說明
△ 從左到右分別是 Clock，Google 和 Google Calendar
在 Clock 應(yīng)用(上左)的屏幕底部有一個(gè)很大的懸浮按鈕(FAB);Google 應(yīng)用(上中)主要提供卡片內(nèi)的資訊; 而 Google Calendar(上右)則為事件創(chuàng)建瓷貼式(Tile)窗口。
在 Clock 中點(diǎn)擊懸浮按鈕，您會進(jìn)入世界時(shí)鐘選擇屏幕;點(diǎn)擊 Google 應(yīng)用中的天氣卡，將您帶入 “天氣” 的搜索結(jié)果頁面，在 Calendar 中點(diǎn)擊事件窗口，將會看到詳細(xì)的活動信息。
我們還在這些 UI 中看到，上下文導(dǎo)航可以用不同的方式來引導(dǎo)用戶。在 Clock 應(yīng)用中，我們來到了時(shí)鐘的下一個(gè)層級;在 Google 應(yīng)用中，本質(zhì)上講，我們來到了主視圖的功能擴(kuò)展頁面;而在 Calendar 中，我們則打開了一個(gè)全屏對話框。
(3) 歷史(返回)記錄
在上下文導(dǎo)航中，對于是否生成歷史記錄并沒有硬性規(guī)定，這完全取決于您用了什么樣類型的上下文導(dǎo)航以及在哪使用了它。如果不清楚應(yīng)該創(chuàng)建什么樣的歷史記錄，參考一下 “返回上一級” 按鈕和 “返回” 按鈕的一般設(shè)定也可以。
二、向上、向后和關(guān)閉按鈕
這三個(gè)按鈕對于 Android UI 的導(dǎo)航非常重要，但它們的使用通常模糊不清。從 UX 的角度來看，這三個(gè)按鈕的行為實(shí)際上非常簡單，記住以下規(guī)則可以幫助您擺脫任何令人困惑的情況。
- “向上” 按鈕：當(dāng)用戶已經(jīng)深入到較深的層級時(shí)，操作提示會顯示 “向上”。它按照時(shí)間順序在層級結(jié)構(gòu)中進(jìn)行回溯導(dǎo)航過程，直到用戶到達(dá)父級視圖。由于向上按鈕不會顯示在頂級視圖上，所以它并不會把用戶引導(dǎo)出應(yīng)用。
- “返回” 按鈕：“返回” 按鈕始終存在于系統(tǒng)導(dǎo)航欄中。即使用戶的上一個(gè)屏幕在另一個(gè)應(yīng)用中，它也會按從后向前的時(shí)間順序排列，不管應(yīng)用的層次結(jié)構(gòu)如何。它還會關(guān)閉臨時(shí)元素，如對話框、底部選項(xiàng)和彈出窗口。
- “關(guān)閉” 按鈕：“關(guān)閉” 通常用于關(guān)閉界面的臨時(shí)層級或是在全屏對話框中放棄更改。比如 Google Calendar 中的事件詳情屏幕(如下左所示)，使用臨時(shí)的全屏視圖來展現(xiàn)詳情能夠使其更加清晰。在 Inbox(如下中所示)中，從收件箱到郵件的轉(zhuǎn)換表明，郵件的 UI 是 “疊加” 在收件箱上的，因此關(guān)閉按鈕用在這里是合理的。Gmail (如下右所示)將郵件詳情定位為應(yīng)用中的特定級別，并使用向上按鈕。
△ 從左到右分別是 Calendar，Inbox 和 Gmail
三、組合模式
我們已經(jīng)分析了 App 中可用的各種導(dǎo)航模式，現(xiàn)在我們來看看一些案例，了解他們是如何將這些不同的導(dǎo)航模式加以組合，來形成適用于用戶的導(dǎo)航架構(gòu)。
△ Google Plus
也許最明顯的例子就是 Google Plus(上圖)了，它融合了我們以上討論的所有模式 —— 標(biāo)簽導(dǎo)航、抽屜式導(dǎo)航、底部導(dǎo)航以及上下文導(dǎo)航。拆解來看，我們會發(fā)現(xiàn)底部導(dǎo)航欄是 G+ 的關(guān)鍵所在。它提供了四個(gè)頂級視圖的訪問通道。通過標(biāo)簽導(dǎo)航將其內(nèi)容分割到各個(gè)主要類別并加以呈現(xiàn)。然后在抽屜導(dǎo)航中涵蓋其他訪問較少的頂級及次級視圖。
△ Play Store
Play Store(上圖)為了更多展示應(yīng)用信息，選擇了抽屜導(dǎo)航來承載頂級視圖入口，然后經(jīng)常使用上下文導(dǎo)航來輔助，偶爾使用標(biāo)簽導(dǎo)航。在上面的圖片中，我們看到了通過抽屜導(dǎo)航訪問的頂級視圖(從 “應(yīng)用與游戲” 切換到了 “電影與電視”)。這時(shí)在抽屜的下方我們可以看到使用了上下文導(dǎo)航來過濾內(nèi)容。而在最右邊的應(yīng)用排行榜中，標(biāo)簽導(dǎo)航用于將整個(gè)排行榜分割成不同維度的榜單。
△ Google Calendar
Google Calendar(上圖)則使用來抽屜導(dǎo)航和上下文導(dǎo)航，并且方式非常有趣。注意 Calendar 中的抽屜并沒有遵循通常的規(guī)范用法，而是主要用于擴(kuò)展日歷功能。日歷本身由擴(kuò)展的工具欄面板控制，彩色的瓷貼式窗口會將用戶引導(dǎo)到活時(shí)間詳情頁中。
【本文是51CTO專欄機(jī)構(gòu)“谷歌開發(fā)者”的原創(chuàng)稿件，轉(zhuǎn)載請聯(lián)系原作者(微信公眾號：Google_Developers)】
