Android 應(yīng)用中十大導(dǎo)航設(shè)計(jì)錯(cuò)誤

轉(zhuǎn)載贊2 收藏2 評(píng)論1

舉報(bào) 2014-04-04

掃描,分享朋友圈

來源：GeekPark

這一次，我們就這個(gè)話題展開，指出一些大家在設(shè)計(jì)應(yīng)用導(dǎo)航時(shí)經(jīng)常被犯下的錯(cuò)誤以便更好的避免他們。

1. 將導(dǎo)航項(xiàng)放在 Action Overflow 里

我應(yīng)該已經(jīng)不止一次在各種 App 上看到有人把導(dǎo)航項(xiàng)放在 Action Overflow 中了。經(jīng)常被放進(jìn) Action Overflow 的導(dǎo)航有"主頁"，"商店"，"我的信息 (微信，twitter 中槍)"，甚至一些分類。但是 Action Overflow 真的不是導(dǎo)航項(xiàng)該去的地方，別忘了這地方是 Action Overflow，是用來放操作的。還有另一個(gè)很重要的原因是，在很多有著 Menu 按鈕的手機(jī)上，應(yīng)用中是不會(huì)顯示 Action Overflow 的，他們得被 Menu 鍵喚出，可見性太低了，而且關(guān)于 Menu 鍵還有一大堆問題 (這里就不展開了)。

還有一點(diǎn)很重要的就是，在現(xiàn)在的 Android 上，界面 UI 已經(jīng)逐漸形成了一個(gè)規(guī)律 —— 導(dǎo)航靠左，操作靠右。如果你硬是要把導(dǎo)航放進(jìn) Action Overflow，無形中也會(huì)違背這個(gè)規(guī)律。

2. 錯(cuò)誤的導(dǎo)航層級(jí)

這個(gè)錯(cuò)誤也是頗為常見的。在 Android 中我們有很多常見的導(dǎo)航方式，比如 Tabs，Spinners 和 Drawer。這些導(dǎo)航方式當(dāng)然是可以搭配著使用的，但是當(dāng)你搭配使用這些導(dǎo)航方式的時(shí)候，請(qǐng)注意他們之間的層級(jí)關(guān)系。當(dāng)你規(guī)劃你的導(dǎo)航層級(jí)的時(shí)候，一般情況下是要構(gòu)造一個(gè)樹狀結(jié)構(gòu)，在一個(gè)層級(jí)下有其他的子層級(jí)，以此類推。在 Android 中，不同層級(jí)一般對(duì)應(yīng)著不同的導(dǎo)航方式。而錯(cuò)誤的用法是，比如上圖中那樣的，用 Tab 作為最高導(dǎo)航層，Spinners 作為次層，而 Drawer 作為最次層。在 Android 上，這三個(gè)導(dǎo)航方式對(duì)應(yīng)的層級(jí)是遵循著比較嚴(yán)格的規(guī)定的。

上圖呢才是一般情況下的正確做法。通常情況下，Drawer (如果有的話) 代表著最高的導(dǎo)航層級(jí)，然后則是 Spinners，再次是 Tabs。如果你有超過三級(jí)的導(dǎo)航層級(jí)，我們強(qiáng)烈建議你把最頂端的幾個(gè)都放在 Drawer 中 (只有 Drawer 能容納超過一個(gè)導(dǎo)航層級(jí)，因?yàn)?Drawer 中的項(xiàng)目能夠以合理的方式展開)，然后把剩下兩個(gè)層級(jí)分配各 Spinners 和 Tabs。當(dāng)然，實(shí)際上作為一個(gè)移動(dòng)應(yīng)用，簡化層級(jí)也是非常重要的，我們強(qiáng)烈的不推薦你在應(yīng)用中采用非常深的導(dǎo)航層級(jí)，這只會(huì)讓用戶感到困惑。

還有一點(diǎn)需要注意的是，雖然在上面的示意圖中 Spinner 和 Drawer 共存而且看起來 Spinner 在 Action Bar 上 (Drawer 實(shí)際上在 Action Bar 之下)，但是在實(shí)際應(yīng)用中，當(dāng)用戶劃出 Drawer 的時(shí)候，你應(yīng)該讓 Drawer 漸變成另一副模樣 —— 只留下在應(yīng)用中全局通用的操作，比如搜索，隱去其他的東西，比如 Spinners，換成 App 的名字。這樣的話就不會(huì)產(chǎn)生導(dǎo)航層級(jí)上的困惑了。

另外，關(guān)于 Drawer，我們還有另一期專門介紹它的 ADiA: Android Design 趨勢(shì)——Navigation Drawer。

3. 不能滑動(dòng)切換的 Tabs。

在 Android 中，Tab 幾乎是綁定了橫向滑動(dòng)的操作。用戶對(duì) Tabs 的期望就是他們可以被滑動(dòng)。如果你在頁面上采用了 paginate (ViewPager) 內(nèi)容，那么內(nèi)容上的滑動(dòng)操作就會(huì)和 Tabs 的全局滑動(dòng)產(chǎn)生混淆。當(dāng)然，如果頁面中只有一小部分是可以滑動(dòng)的內(nèi)容 —— 比如一個(gè)非全屏的圖片瀏覽，那么這么做是完全沒問題的，只要不與 Tabs 本身的滑動(dòng)手勢(shì)沖突即可。

正確的做法很簡單，只要把橫向的 ViewPager 給改為縱向就行了。當(dāng)然，如果你有其他的解決方案也很好，只要規(guī)避與導(dǎo)航的手勢(shì)沖突就可以了。

4. 深層/頑固的 Tabs

什么叫做"深層"的 Tabs? 要解釋深層，一般來講我們用"淺層"來做對(duì)比。在 Android 上，Tabs 應(yīng)該是淺的。你用 Tabs 來作為試圖更變，或者分類切換之用，而不應(yīng)該在 Tabs 之內(nèi)再有層級(jí)和歷史。通常情況下，Tabs 只應(yīng)該在導(dǎo)航界面出現(xiàn)。在上圖的例子中，用戶點(diǎn)擊一個(gè)項(xiàng)目，理應(yīng)打開一個(gè)全新的頁面，而不是刷新 Tabs 下的內(nèi)容。這種持續(xù)出現(xiàn)的 Tab 就是我們所說的深層 Tabs，或者說在 Tabs 之內(nèi)有歷史。

之所以不這么做的原因是，當(dāng)你離開了這個(gè) Tab，比如說滑動(dòng)到了另一個(gè) Tab 上的時(shí)候，你就把這個(gè) Tab 置于了一種尷尬的境地 —— 現(xiàn)在這個(gè) Tab (對(duì)于用戶而言不可見) 應(yīng)該顯示什么呢? 當(dāng)用戶從另一個(gè) Tab 回到這個(gè) Tab (無論是點(diǎn)擊還是滑動(dòng)) 時(shí)，他應(yīng)該保持原來的樣子 (顯示內(nèi)容) 呢，還是顯示列表? 在這種情況下，用戶會(huì)很容易的感到困惑。為了避免這種尷尬，我們建議 Tabs 最好做得淺一些。

另外，若你的 Tabs 堅(jiān)持不變的話，很大程度會(huì)影響到 Back 的作用。當(dāng)用戶切換到不同的 Tab 并且在這個(gè) Tab 中做了一些操作之后，Back 的作用就會(huì)變得不甚明確。如果你非得在同一個(gè)視圖內(nèi)顯示新內(nèi)容，那么我們建議你采用 Drawer，Drawer 才是為全局內(nèi)容切換而生的。

上圖顯示的才是正確的做法，打開一個(gè)新的，沒有 Tabs，有 Up 的界面，而不是繼續(xù)顯示 Tabs。

5. 溯回 (反向遍歷) Tabs

前面說的 Tabs 不應(yīng)該深層，同樣也提到了 Tabs 不應(yīng)該包含歷史。什么叫做不因該包含歷史呢? 就是指，你在 Tabs 上的操作不能被 Back 溯回。同一個(gè)導(dǎo)航層級(jí)是不應(yīng)該被溯回的。

6. 溯回 (反向遍歷) Drawer

和 Tabs 一樣，Drawer 中的導(dǎo)航項(xiàng)也不應(yīng)該被溯回。理由同上。當(dāng)用戶在不同的導(dǎo)航項(xiàng)中切換時(shí)，你應(yīng)該重置任務(wù)狀態(tài)。在不同的導(dǎo)航項(xiàng)目中切換就像是切換到不同的應(yīng)用中一樣 (比如說，在 Google+ 中，Photos Tab 根本就是另一個(gè)應(yīng)用。。。)。在用戶按下 Back 的時(shí)候，你應(yīng)該退出應(yīng)用，或者回到應(yīng)用的主界面 —— 這里的主界面是指哪個(gè)自然狀態(tài)下的初始界面，一個(gè)你特別希望用戶 (同時(shí)用戶也特別期待能夠容易地) 回到的地方。

7. 深層的 Navigation Drawer

前文說過，一個(gè)移動(dòng)應(yīng)用不應(yīng)該有復(fù)雜的結(jié)構(gòu)。如果你需要特別多的導(dǎo)航層級(jí)，那么說明你真正應(yīng)該做的其實(shí)是簡化你的應(yīng)用結(jié)構(gòu)。Drawer 存在的意義是提供一個(gè)穩(wěn)定的導(dǎo)航樞紐，讓用戶不需要記住自己在什么地方，他只要打開 Drawer 就能自然的明白一切。但是，如果在 Drawer 里面彈出了一個(gè)次級(jí) Drawer 會(huì)把很多人逼瘋。

Drawer 雖然有能力承載多個(gè)導(dǎo)航層級(jí)，但是正確的做法不是這樣的。

當(dāng)你需要在 Drawer 中放入多個(gè)導(dǎo)航層級(jí)的時(shí)候，不應(yīng)該以新彈出一個(gè) Drawer 的方式，而是應(yīng)該以展開/折疊的方式呈現(xiàn)這個(gè)子層級(jí)。展開和折疊并不會(huì)造成整個(gè)控件的劇變，同時(shí)能展示給用戶少多一些的項(xiàng)目。關(guān)于 Drawer 上的導(dǎo)航項(xiàng)以及觸摸區(qū)域的設(shè)置，在 Android Design 中另有提及。

如果你的導(dǎo)航層級(jí)真的很深，你可以單獨(dú)做出一個(gè)次級(jí)導(dǎo)航頁展示所有的導(dǎo)航項(xiàng)目。比如說，在 Play Music 中，曲庫下的 Tabs (藝人，專輯，風(fēng)格，曲目) 其實(shí)完全可以做成 Drawer 中的次級(jí)導(dǎo)航項(xiàng)，但是把它們分散到 Tabs 中能夠更好的優(yōu)化導(dǎo)航。(上圖這樣則是有點(diǎn)類似腹肌式的導(dǎo)航方式。當(dāng)然，最好不要只是在上面寫著文字，可以往里面添加點(diǎn)圖片啊，內(nèi)容預(yù)覽什么的)

8. 錯(cuò)誤的 Drawer 轉(zhuǎn)場(chǎng)

我們?cè)谶@里說轉(zhuǎn)場(chǎng)的時(shí)候，是意味著過渡動(dòng)畫和一個(gè)有著 Drawer 的界面和沒有 Drawer 的界面之間的切換。下面兩個(gè)錯(cuò)誤都和這個(gè)轉(zhuǎn)場(chǎng)有關(guān)。

當(dāng)用戶打開 Drawer，按下其中一個(gè)項(xiàng)目之后，他不應(yīng)該被帶去一個(gè)有著 Up 箭頭的新界面。所有在 Drawer 中呈現(xiàn)的導(dǎo)航項(xiàng)，都應(yīng)該在其界面中顯示 Drawer 指示 (比如說，"漢堡")。而且，當(dāng)用戶通過 Drawer 從其中一個(gè)導(dǎo)航項(xiàng)進(jìn)入另一個(gè)導(dǎo)航項(xiàng)，他不應(yīng)該看到標(biāo)準(zhǔn)的視圖切換動(dòng)畫 (漸變 + 放大，常見于進(jìn)入新界面/新活動(dòng)時(shí))，而應(yīng)該是一個(gè)細(xì)致而迅速的漸隱 + 漸顯動(dòng)畫，伴隨著 Drawer 的關(guān)閉而完成。同樣的動(dòng)畫也應(yīng)該應(yīng)用在 Action Bar 的轉(zhuǎn)變上。還有一個(gè)對(duì)于開發(fā)者而言常見的討論是，應(yīng)該用 Activity 還是 Fragment? 這個(gè)問題并沒有標(biāo)準(zhǔn)答案，也很難回答。一般來說還是視情況而定 —— 它實(shí)現(xiàn)起來難度如何? 對(duì)于我的應(yīng)用而言靠譜嗎? 如果你有什么建議的話當(dāng)然歡迎評(píng)論。

上圖展示的就是正確的做法，在 Action Bar 上顯示 Drawer Indicator。

9. 不顯示 Up 箭頭

上文說過，所有出現(xiàn)在 Drawer 中的導(dǎo)航頁面都應(yīng)該顯示 Drawer 指示，這點(diǎn)反過來也是一樣成立的 —— 沒有顯示在 Drawer 中的東西就不應(yīng)該顯示 Drawer 指示。比如在上圖，當(dāng)用戶進(jìn)入某個(gè)內(nèi)容的時(shí)候，Drawer 指示依然顯示。實(shí)際上，這個(gè)內(nèi)容頁已經(jīng)不是導(dǎo)航頁了，也沒有在 Drawer 中顯示，這里是應(yīng)用更深的層級(jí)，已經(jīng)不歸 Drawer 管了。這里應(yīng)該顯示的是 Up。

在顯示 Up 同時(shí)，你也可以允許用戶以邊緣滑動(dòng)的方式喚出 Drawer。你不需要總是顯示 Drawer 指示來告訴用戶可以喚出 Drawer，因?yàn)樵诖渭?jí)界面中喚出 Drawer 是某種意義上的"進(jìn)階用戶操作"。有人發(fā)現(xiàn)了，那很好，沒人發(fā)現(xiàn)，不要緊，通過 Up 他們依然能夠找回 Drawer。另外，你可以看看 Google Play Newsstand 是如何處理在沒有 Drawer 指示的地方處理 Drawer 的 —— 漸變動(dòng)畫真的非常重要。

10. 右側(cè)導(dǎo)航

前文說過，Android 上有個(gè)規(guī)律就是"導(dǎo)航靠左，操作靠右"。對(duì)于從左向右閱讀的用戶而言，左側(cè)導(dǎo)航項(xiàng)能夠更好的強(qiáng)調(diào)導(dǎo)航層級(jí)。另外，由于 Spinners 只能出現(xiàn)在左側(cè)，Tabs 也往往將最左側(cè)的一個(gè)設(shè)為默認(rèn)，右側(cè)的 Drawer 與這些操作距離過遠(yuǎn)。而且，Drawer 指示放在左邊，操作的時(shí)候向左回縮，如果在右側(cè)使用 Drawer 的話就會(huì)遇到各種各樣的視覺隱喻沖突。

正確的做法就是如上圖所示。當(dāng)然，如果在從右向左的語言環(huán)境下 (比如說，希伯來文什么的，不過我覺得我們國家的開發(fā)者應(yīng)該不怎么會(huì)去做希伯來語適配吧……)，那當(dāng)然是應(yīng)該反轉(zhuǎn)這些東西的位置。

以上就是本期 ADiA 介紹的全部十個(gè)導(dǎo)航設(shè)計(jì)錯(cuò)誤。如果你有更多的常見/不常見錯(cuò)誤，或者對(duì)于上面提出的錯(cuò)誤有更好的解決方案，當(dāng)然歡迎評(píng)論。

本文系作者授權(quán)數(shù)英發(fā)表，內(nèi)容為作者獨(dú)立觀點(diǎn)，不代表數(shù)英立場(chǎng)。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。