APP頁(yè)面的Android導(dǎo)航設(shè)計(jì)

今天，我們一起來(lái)看看在 Android 中最常見(jiàn)的一些設(shè)計(jì)模式，聊聊它們?cè)谙到y(tǒng)中所起到的作用，并且您該如何合理搭配這些模式來(lái)使其適用于您的界面及用戶(hù)。

“ 什么是導(dǎo)航?用來(lái)在各個(gè)場(chǎng)景之間切換的工具，這就是導(dǎo)航?！?/p>

只要您試圖在 App 中 “串聯(lián)” 兩個(gè)場(chǎng)景，那么就需要 “導(dǎo)航”。這種串聯(lián) —— 無(wú)論是什么形式 —— 其實(shí)就是讓用戶(hù)得以在各個(gè)場(chǎng)景之間切換的工具。盡管創(chuàng)建導(dǎo)航本身來(lái)說(shuō)并不復(fù)雜，但是創(chuàng)建 “正確的” 導(dǎo)航卻并不是一件容易的事。今天，我們一起來(lái)看看在 Android 中最常見(jiàn)的一些設(shè)計(jì)模式，聊聊它們?cè)谙到y(tǒng)中所起到的作用，并且您該如何合理搭配這些模式來(lái)使其適用于您的界面及用戶(hù)。

一、導(dǎo)航的定義

在一股腦地扎進(jìn)去研究常見(jiàn)的導(dǎo)航模式之前，不妨重新思考一下您的應(yīng)用導(dǎo)航規(guī)劃的出發(fā)點(diǎn)。在 Material Design 中我們其實(shí)已經(jīng)給出了詳細(xì)的指導(dǎo)方針，用來(lái)幫助您規(guī)劃整個(gè)導(dǎo)航架構(gòu)，但是本文中我們可以將所有的這些歸納成兩個(gè)非常簡(jiǎn)單的點(diǎn)：

基于任務(wù)及內(nèi)容來(lái)創(chuàng)建導(dǎo)航;

基于用戶(hù)來(lái)創(chuàng)建導(dǎo)航。

基于任務(wù)和內(nèi)容創(chuàng)建導(dǎo)航，其實(shí)就是分解用戶(hù)可能發(fā)生的操作，以及在這過(guò)程中所觸及到的內(nèi)容，并試圖描繪出這二者之間的關(guān)系網(wǎng)絡(luò)。與此同時(shí)，您還需要確定這些操作之間的關(guān)系 —— 哪些操作更為重要，哪些操作之間互相關(guān)聯(lián)，哪些操作相互嵌套，以及哪些操作將會(huì)被更多地使用。

明白了第一點(diǎn)之后，第二點(diǎn) —— 基于用戶(hù)來(lái)創(chuàng)建導(dǎo)航 —— 就理所當(dāng)然了。畢竟用戶(hù)都是帶著目的在使用您的 App，他們自然可以分辨您的設(shè)計(jì)是否合理，畢竟導(dǎo)航創(chuàng)建的目的就是為了讓他們順利抵達(dá)自己想要到達(dá)的頁(yè)面(目的地)。

只要您弄明白了應(yīng)用中的多個(gè)操作如何協(xié)同運(yùn)作，就可以順勢(shì)決定每個(gè)步驟所需要呈現(xiàn)的內(nèi)容以及其呈現(xiàn)形式 —— 如此便可以很好地確定哪些模式最適合您的應(yīng)用體驗(yàn)。

1. 標(biāo)簽導(dǎo)航

(1) 定義

標(biāo)簽可以為同一層級(jí)下的子畫(huà)面提供快速導(dǎo)航，因?yàn)樗鼈兪枪裁娴?—— 這意味著它們處于同一個(gè)展開(kāi)的標(biāo)簽欄中，可隨時(shí)相互切換。

標(biāo)簽非常適合用來(lái)過(guò)濾、分割或者提供不同的展示維度。如果您要展示的內(nèi)容彼此毫不相關(guān)，或者是深度層級(jí)明顯不同的內(nèi)容的話，可以考慮使用其他的導(dǎo)航模式。

(2) 實(shí)例說(shuō)明

△ 從左到右分別是 Play Music，Google Plus 及 Play Newsstand

Play Music(上左)使用標(biāo)簽來(lái)劃分瀏覽維度。通過(guò)用不同的方式組織相同的基本內(nèi)容來(lái)適應(yīng)不同的探索方式。

Google Plus (上中)使用標(biāo)簽分割不同來(lái)源的收藏集，這就使得這一單一的導(dǎo)航樣式足以承載非常異構(gòu)的內(nèi)容。

Play Newsstand(上右)在圖庫(kù)屏幕上使用標(biāo)簽來(lái)提供相同信息的不同呈現(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)航通常指畫(huà)布左邊緣的垂直面板(入口一般都很像一個(gè)漢堡包或者中文的 “三” 字)。抽屜可以是可見(jiàn)的或者隱藏的，持續(xù)存在的或者不持續(xù)存在的，但它們都保有一些共同特征。

通常，抽屜式導(dǎo)航可以列出同層級(jí)的視圖，所以常被用于擁有多個(gè)頂級(jí)視圖的情況下，但也可以在里面直接增加 “設(shè)置”、“幫助” 等特殊功能視圖的入口。

如果您將抽屜與另一個(gè)主導(dǎo)航控件(例如，底部導(dǎo)航)組合使用，那么抽屜中可以包含次級(jí)視圖，或不完全遵循底部導(dǎo)航層級(jí)結(jié)構(gòu)的重要入口。

當(dāng)使用抽屜式導(dǎo)航時(shí)，要注意您想要呈現(xiàn)什么樣的視圖 —— 如果加入過(guò)多的、或者不同層次的視圖，很容易會(huì)讓用戶(hù)感到困惑。

此外，您還要注意可視性 —— 抽屜本來(lái)就是用來(lái)減弱對(duì) UI 可視區(qū)域的影響的，但這同時(shí)也可能讓您的抽屜難以被用戶(hù)發(fā)現(xiàn)，所以如何設(shè)計(jì)還是得取決于您的 App 中的視圖究竟應(yīng)該如何呈現(xiàn)并訪問(wèn)。

(2) 實(shí)例說(shuō)明

△ 從左到右分別是 Play Store，Google Camera 及 Inbox

Play Store(上左)使用抽屜導(dǎo)航來(lái)導(dǎo)向商店的不同部分，每個(gè)部分都是不同類(lèi)型的內(nèi)容。

Google Camera(上中)使用抽屜來(lái)展現(xiàn)不同的功能 —— 旨在提升拍攝體驗(yàn)。同時(shí)也將 “設(shè)置” 的入口放了進(jìn)來(lái)。

Inbox(上右)有一個(gè)非常長(zhǎng)的、可擴(kuò)展的抽屜導(dǎo)航。頂部是展示電子郵件中的頂級(jí)功能視圖，下方則是其擴(kuò)展功能。此外，由于 Inbox 中的導(dǎo)航欄相當(dāng)長(zhǎng)，所以 “設(shè)置” 及 “幫助與反饋” 的條目永遠(yuǎn)錨定在屏幕區(qū)域的底部，就算導(dǎo)航欄上下滾動(dòng)，您也可以隨時(shí)訪問(wèn)這兩個(gè)功能。

(3) 歷史(返回)記錄

通常，當(dāng)應(yīng)用擁有明確的 “Home” 視圖時(shí)，點(diǎn)擊抽屜導(dǎo)航通常會(huì)給系統(tǒng)返回(Back)按鈕創(chuàng)建歷史記錄。舉例說(shuō)明一下：在 Play Store 中，home 視圖是 “Apps&Games”，它主要使用了標(biāo)簽導(dǎo)航以便用戶(hù)查看各類(lèi)型的推薦應(yīng)用或游戲，所以當(dāng)用戶(hù)使用抽屜導(dǎo)航離開(kāi)這里之后，點(diǎn)擊手機(jī)的 Back 按鈕即可迅速返回。

同樣的，Google Camera 也會(huì)使用 Back 按鈕將用戶(hù)帶回到默認(rèn)拍攝模式。

△ “開(kāi)始駕駛” 是主視圖的擴(kuò)展

Google Maps(上圖)也是如此 —— 抽屜中的任何一個(gè)視圖基本上都是在 “您的位置” 上疊加一些額外的信息，所以點(diǎn)擊 Back 按鈕會(huì)直接帶您回到最干凈的視圖里。

再給一個(gè)例子。如上所示，即使您用標(biāo)簽導(dǎo)航進(jìn)入到了新的視圖， Play Store 中的抽屜導(dǎo)航圖標(biāo)也沒(méi)有更改為 “返回上一層” 的字樣 —— 這是因?yàn)槌閷现械捻敿?jí)視圖處于整個(gè)導(dǎo)航架構(gòu)中的同一層級(jí)，您并沒(méi)有更深入地進(jìn)入應(yīng)用，仍然處于同一層級(jí)當(dāng)中。

3. 底部導(dǎo)航

(1) 定義

在 Android 上，底部導(dǎo)航控件通常包含 3 到 5 個(gè)頂級(jí)視圖。需要注意的是，“更多” 不算頂級(jí)視圖。

要想底部導(dǎo)航運(yùn)作良好，您需要控制頂級(jí)視圖的數(shù)量 —— 畢竟底部導(dǎo)航不允許滾動(dòng)。擁有底部導(dǎo)航的主要優(yōu)點(diǎn)之一在于，您可以當(dāng)即從任意子視圖跳轉(zhuǎn)到與其并不相關(guān)的父級(jí)視圖，而不需要先返回到其對(duì)應(yīng)的父級(jí)視圖。

不過(guò)，您要注意的是，盡管底部欄中的各個(gè)視圖在整個(gè)應(yīng)用的導(dǎo)航層級(jí)中是相互平等的，但它并不像標(biāo)簽導(dǎo)航中的內(nèi)容那樣存在邏輯上的關(guān)系 —— 底部欄中的各個(gè)視圖之間毫無(wú)關(guān)聯(lián)，每個(gè)視圖是作為獨(dú)立的、相互不關(guān)聯(lián)的父級(jí)存在，而不是互相關(guān)聯(lián)的兄弟項(xiàng)。如果兩個(gè)視圖之間的內(nèi)容是相關(guān)聯(lián)的，那么最好使用標(biāo)簽導(dǎo)航來(lái)呈現(xiàn)。

(2) 實(shí)例說(shuō)明

△ Google Photos，注意諸如助手、照片和分享這樣完全獨(dú)立的視圖就適合使用底部導(dǎo)航。

在其定義之外，底部導(dǎo)航有一些有趣的地方需要注意。其中最為復(fù)雜的，可能是底部導(dǎo)航是否需要永久展現(xiàn)。但根據(jù)我們的經(jīng)驗(yàn)，我們只能回答 “視情況而定” —— 與其他很多設(shè)計(jì)決策類(lèi)似，設(shè)計(jì)模式最終還是會(huì)需要滿(mǎn)足實(shí)際業(yè)務(wù)的需求，沒(méi)必要過(guò)于刻板。

通常，底部導(dǎo)航貫徹于整個(gè)應(yīng)用的所有場(chǎng)景，但是有些情況下可以選擇性地隱藏底部欄。如果用戶(hù)處在非常次級(jí)的視圖 —— 例如消息編寫(xiě)等用途單一的視圖，或者是呈現(xiàn)更為沉浸式的體驗(yàn)，那么底部欄隱藏起來(lái)能帶來(lái)的收益會(huì)更高。

在 Google Photos(上圖)中，底部導(dǎo)航在用戶(hù)進(jìn)入相冊(cè)這個(gè)視圖時(shí)就消失了。相冊(cè)在整個(gè)層級(jí)架構(gòu)中屬于次級(jí)視圖，唯一的進(jìn)一步操作是打開(kāi)一張照片。這種情況滿(mǎn)足了隱藏底部導(dǎo)航的 “功能單一” 的條件，同時(shí)又能夠?yàn)橛脩?hù)提供比帶底部導(dǎo)航的頂級(jí)視圖更好的體驗(yàn)。用戶(hù)用著開(kāi)心，何樂(lè)而不為呢?

(3) 再想深一點(diǎn)

如果您決定讓底部導(dǎo)航欄在整個(gè)應(yīng)用中永久展現(xiàn)，那么下一個(gè)需要考慮的則是利用導(dǎo)航欄在各個(gè)視圖之間切換的操作設(shè)計(jì)邏輯。當(dāng)一個(gè)用戶(hù)處在一個(gè)頂級(jí)視圖的子視圖中，然后他們跳轉(zhuǎn)到另外一個(gè)視圖，隨后又切換回最初的視圖，那么這個(gè)時(shí)候他們看到應(yīng)該是哪個(gè)視圖?是最初的頂級(jí)視圖，還是他們離開(kāi)時(shí)的那個(gè)子視圖呢?

我們的回答依然是 “視情況而定”。這其實(shí)是由使用您的應(yīng)用的用戶(hù)來(lái)決定 —— 一般來(lái)說(shuō)，點(diǎn)擊底部導(dǎo)航中的條目應(yīng)該會(huì)進(jìn)入該頂級(jí)視圖，而不是之前停留的子視圖，但這并不是絕對(duì)的，這同樣要根據(jù)實(shí)際情況及目的來(lái)決定。

(4) 歷史(返回)記錄

底部導(dǎo)航不應(yīng)該為系統(tǒng)返回按鈕創(chuàng)建歷史記錄。但是訪問(wèn)底部導(dǎo)航的頂級(jí)視圖中的更深層的子視圖可以創(chuàng)建歷史記錄，底部欄也可以作為歷史導(dǎo)航用來(lái)直接返回它所代表的頂級(jí)視圖。

4. 上下文結(jié)合式導(dǎo)航

(1) 定義

上下文導(dǎo)航是由除去以上所講的所有導(dǎo)航控件之外的導(dǎo)航交互所組成的導(dǎo)航模式。包括按鈕、方塊、卡片以及其他所有可以將用戶(hù)導(dǎo)向其他頁(yè)面的一切工具。

一般來(lái)說(shuō)，上下文導(dǎo)航相比之前介紹的那些顯式導(dǎo)航，更不具備線性規(guī)律 —— 它可以讓用戶(hù)在不同層級(jí)間乃至不同層級(jí)間的不同操作之間切換，甚至可以跳轉(zhuǎn)離開(kāi)這個(gè) App。

(2) 實(shí)例說(shuō)明

△ 從左到右分別是 Clock，Google 和 Google Calendar

在 Clock 應(yīng)用(上左)的屏幕底部有一個(gè)很大的懸浮按鈕(FAB);Google 應(yīng)用(上中)主要提供卡片內(nèi)的資訊; 而 Google Calendar(上右)則為事件創(chuàng)建瓷貼式(Tile)窗口。

在 Clock 中點(diǎn)擊懸浮按鈕，您會(huì)進(jìn)入世界時(shí)鐘選擇屏幕;點(diǎn)擊 Google 應(yīng)用中的天氣卡，將您帶入 “天氣” 的搜索結(jié)果頁(yè)面，在 Calendar 中點(diǎn)擊事件窗口，將會(huì)看到詳細(xì)的活動(dòng)信息。

我們還在這些 UI 中看到，上下文導(dǎo)航可以用不同的方式來(lái)引導(dǎo)用戶(hù)。在 Clock 應(yīng)用中，我們來(lái)到了時(shí)鐘的下一個(gè)層級(jí);在 Google 應(yīng)用中，本質(zhì)上講，我們來(lái)到了主視圖的功能擴(kuò)展頁(yè)面;而在 Calendar 中，我們則打開(kāi)了一個(gè)全屏對(duì)話框。

(3) 歷史(返回)記錄

在上下文導(dǎo)航中，對(duì)于是否生成歷史記錄并沒(méi)有硬性規(guī)定，這完全取決于您用了什么樣類(lèi)型的上下文導(dǎo)航以及在哪使用了它。如果不清楚應(yīng)該創(chuàng)建什么樣的歷史記錄，參考一下 “返回上一級(jí)” 按鈕和 “返回” 按鈕的一般設(shè)定也可以。

二、向上、向后和關(guān)閉按鈕

這三個(gè)按鈕對(duì)于 Android UI 的導(dǎo)航非常重要，但它們的使用通常模糊不清。從 UX 的角度來(lái)看，這三個(gè)按鈕的行為實(shí)際上非常簡(jiǎn)單，記住以下規(guī)則可以幫助您擺脫任何令人困惑的情況。

“向上” 按鈕：當(dāng)用戶(hù)已經(jīng)深入到較深的層級(jí)時(shí)，操作提示會(huì)顯示 “向上”。它按照時(shí)間順序在層級(jí)結(jié)構(gòu)中進(jìn)行回溯導(dǎo)航過(guò)程，直到用戶(hù)到達(dá)父級(jí)視圖。由于向上按鈕不會(huì)顯示在頂級(jí)視圖上，所以它并不會(huì)把用戶(hù)引導(dǎo)出應(yīng)用。

“返回” 按鈕：“返回” 按鈕始終存在于系統(tǒng)導(dǎo)航欄中。即使用戶(hù)的上一個(gè)屏幕在另一個(gè)應(yīng)用中，它也會(huì)按從后向前的時(shí)間順序排列，不管應(yīng)用的層次結(jié)構(gòu)如何。它還會(huì)關(guān)閉臨時(shí)元素，如對(duì)話框、底部選項(xiàng)和彈出窗口。

“關(guān)閉” 按鈕：“關(guān)閉” 通常用于關(guān)閉界面的臨時(shí)層級(jí)或是在全屏對(duì)話框中放棄更改。比如 Google Calendar 中的事件詳情屏幕(如下左所示)，使用臨時(shí)的全屏視圖來(lái)展現(xiàn)詳情能夠使其更加清晰。在 Inbox(如下中所示)中，從收件箱到郵件的轉(zhuǎn)換表明，郵件的 UI 是 “疊加” 在收件箱上的，因此關(guān)閉按鈕用在這里是合理的。Gmail (如下右所示)將郵件詳情定位為應(yīng)用中的特定級(jí)別，并使用向上按鈕。

△ 從左到右分別是 Calendar，Inbox 和 Gmail

三、組合模式

我們已經(jīng)分析了 App 中可用的各種導(dǎo)航模式，現(xiàn)在我們來(lái)看看一些案例，了解他們是如何將這些不同的導(dǎo)航模式加以組合，來(lái)形成適用于用戶(hù)的導(dǎo)航架構(gòu)。

△ Google Plus

也許最明顯的例子就是 Google Plus(上圖)了，它融合了我們以上討論的所有模式 —— 標(biāo)簽導(dǎo)航、抽屜式導(dǎo)航、底部導(dǎo)航以及上下文導(dǎo)航。拆解來(lái)看，我們會(huì)發(fā)現(xiàn)底部導(dǎo)航欄是 G+ 的關(guān)鍵所在。它提供了四個(gè)頂級(jí)視圖的訪問(wèn)通道。通過(guò)標(biāo)簽導(dǎo)航將其內(nèi)容分割到各個(gè)主要類(lèi)別并加以呈現(xiàn)。然后在抽屜導(dǎo)航中涵蓋其他訪問(wèn)較少的頂級(jí)及次級(jí)視圖。

△ Play Store

Play Store(上圖)為了更多展示應(yīng)用信息，選擇了抽屜導(dǎo)航來(lái)承載頂級(jí)視圖入口，然后經(jīng)常使用上下文導(dǎo)航來(lái)輔助，偶爾使用標(biāo)簽導(dǎo)航。在上面的圖片中，我們看到了通過(guò)抽屜導(dǎo)航訪問(wèn)的頂級(jí)視圖(從 “應(yīng)用與游戲” 切換到了 “電影與電視”)。這時(shí)在抽屜的下方我們可以看到使用了上下文導(dǎo)航來(lái)過(guò)濾內(nèi)容。而在最右邊的應(yīng)用排行榜中，標(biāo)簽導(dǎo)航用于將整個(gè)排行榜分割成不同維度的榜單。

△ Google Calendar

Google Calendar(上圖)則使用來(lái)抽屜導(dǎo)航和上下文導(dǎo)航，并且方式非常有趣。注意 Calendar 中的抽屜并沒(méi)有遵循通常的規(guī)范用法，而是主要用于擴(kuò)展日歷功能。日歷本身由擴(kuò)展的工具欄面板控制，彩色的瓷貼式窗口會(huì)將用戶(hù)引導(dǎo)到活時(shí)間詳情頁(yè)中。

當(dāng)前文章：APP頁(yè)面的Android導(dǎo)航設(shè)計(jì)
網(wǎng)頁(yè)路徑：http://www.muchs.cn/news13/163513.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷(xiāo)推廣、響應(yīng)式網(wǎng)站、Google、網(wǎng)頁(yè)設(shè)計(jì)公司、小程序開(kāi)發(fā)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)