Android 應(yīng)用中十大導(dǎo)航設(shè)計錯誤
[核心提示] 這一次，我們就設(shè)計錯誤的話題展開，指出一些大家在安卓開發(fā)領(lǐng)域設(shè)計應(yīng)用導(dǎo)航時經(jīng)常被犯下的錯誤以便更好的避免他們。
大家好，這里是 2014 年***期正式的 ADiA 教程。在上一次的設(shè)計錯誤文章里，我們已經(jīng)簡略的提過了一下導(dǎo)航設(shè)計上的錯誤，這一次，我們就這個話題展開，指出一些大家在設(shè)計應(yīng)用導(dǎo)航時經(jīng)常被犯下的錯誤以便更好的避免他們。
十大導(dǎo)航設(shè)計”反模式”，Android 開發(fā)者聯(lián)系團(tuán)隊為你用心呈現(xiàn)~ 希望大家看 (乖) 得 (乖) 開 (中) 心 (槍)~
1. 將導(dǎo)航項放在 Action Overflow 里
我應(yīng)該已經(jīng)不止一次在各種 App 上看到有人把導(dǎo)航項放在 Action Overflow 中了。經(jīng)常被放進(jìn) Action Overflow 的導(dǎo)航有"主頁"，"商店"，"我的信息 (微信，twitter 中槍)"，甚至一些分類。但是 Action Overflow 真的不是導(dǎo)航項該去的地方，別忘了這地方是 Action Overflow，是用來放操作的。還有另一個很重要的原因是，在很多有著 Menu 按鈕的手機上，應(yīng)用中是不會顯示 Action Overflow 的，他們得被 Menu 鍵喚出，可見性太低了，而且關(guān)于 Menu 鍵還有一大堆問題 (這里就不展開了)。
還有一點很重要的就是，在現(xiàn)在的 Android 上，界面 UI 已經(jīng)逐漸形成了一個規(guī)律 —— 導(dǎo)航靠左，操作靠右。如果你硬是要把導(dǎo)航放進(jìn) Action Overflow，無形中也會違背這個規(guī)律。
2.錯誤的導(dǎo)航層級
這個錯誤也是頗為常見的。在 Android 中我們有很多常見的導(dǎo)航方式，比如 Tabs，Spinners 和 Drawer。這些導(dǎo)航方式當(dāng)然是可以搭配著使用的，但是當(dāng)你搭配使用這些導(dǎo)航方式的時候，請注意他們之間的層級關(guān)系。當(dāng)你規(guī)劃你的導(dǎo)航層級的時候，一般 情況下是要構(gòu)造一個樹狀結(jié)構(gòu)，在一個層級下有其他的子層級，以此類推。在 Android 中，不同層級一般對應(yīng)著不同的導(dǎo)航方式。而錯誤的用法是，比如上圖中那樣的，用 Tab 作為***導(dǎo)航層，Spinners 作為次層，而 Drawer 作為最次層。在 Android 上，這三個導(dǎo)航方式對應(yīng)的層級是遵循著比較嚴(yán)格的規(guī)定的。
上圖呢才是一般情況下的正確做法。通常情況下，Drawer (如果有的話) 代表著***的導(dǎo)航層級，然后則是 Spinners，再次是 Tabs。如果你有超過三級的導(dǎo)航層級，我們強烈建議你把最頂端的幾個都放在 Drawer 中 (只有 Drawer 能容納超過一個導(dǎo)航層級，因為 Drawer 中的項目能夠以合理的方式展開)，然后把剩下兩個層級分配各 Spinners 和 Tabs。當(dāng)然，實際上作為一個移動應(yīng)用，簡化層級也是非常重要的，我們強烈的不推薦你在應(yīng)用中采用非常深的導(dǎo)航層級，這只會讓用戶感到困惑。
還有一點需要注意的是，雖然在上面的示意圖中 Spinner 和 Drawer 共存而且看起來 Spinner 在 Action Bar 上 (Drawer 實際上在 Action Bar 之下)，但是在實際應(yīng)用中，當(dāng)用戶劃出 Drawer 的時候，你應(yīng)該讓 Drawer 漸變成另一副模樣 —— 只留下在應(yīng)用中全局通用的操作，比如搜索，隱去其他的東西，比如 Spinners，換成 App 的名字。這樣的話就不會產(chǎn)生導(dǎo)航層級上的困惑了。
另外，關(guān)于 Drawer，我們還有另一期專門介紹它的 ADiA: Android Design 趨勢——Navigation Drawer。
3.不能滑動切換的 Tabs。
在 Android 中，Tab 幾乎是綁定了橫向滑動的操作。用戶對 Tabs 的期望就是他們可以被滑動。如果你在頁面上采用了 paginate (ViewPager) 內(nèi)容，那么內(nèi)容上的滑動操作就會和 Tabs 的全局滑動產(chǎn)生混淆。當(dāng)然，如果頁面中只有一小部分是可以滑動的內(nèi)容 —— 比如一個非全屏的圖片瀏覽，那么這么做是完全沒問題的，只要不與 Tabs 本身的滑動手勢沖突即可。
正確的做法很簡單，只要把橫向的 ViewPager 給改為縱向就行了。當(dāng)然，如果你有其他的解決方案也很好，只要規(guī)避與導(dǎo)航的手勢沖突就可以了。
4. 深層/頑固的 Tabs
什么叫做"深層"的 Tabs? 要解釋深層，一般來講我們用"淺層"來做對比。在 Android 上，Tabs 應(yīng)該是淺的。你用 Tabs 來作為試圖更變，或者分類切換之用，而不應(yīng)該在 Tabs 之內(nèi)再有層級和歷史。通常情況下，Tabs 只應(yīng)該在導(dǎo)航界面出現(xiàn)。在上圖的例子中，用戶點擊一個項目，理應(yīng)打開一個全新的頁面，而不是刷新 Tabs 下的內(nèi)容。這種持續(xù)出現(xiàn)的 Tab 就是我們所說的深層 Tabs，或者說在 Tabs 之內(nèi)有歷史。
之所以不這么做的原因是，當(dāng)你離開了這個 Tab，比如說滑動到了另一個 Tab 上的時候，你就把這個 Tab 置于了一種尷尬的境地 —— 現(xiàn)在這個 Tab (對于用戶而言不可見) 應(yīng)該顯示什么呢? 當(dāng)用戶從另一個 Tab 回到這個 Tab (無論是點擊還是滑動) 時，他應(yīng)該保持原來的樣子 (顯示內(nèi)容) 呢，還是顯示列表? 在這種情況下，用戶會很容易的感到困惑。為了避免這種尷尬，我們建議 Tabs ***做得淺一些。
另外，若你的 Tabs 堅持不變的話，很大程度會影響到 Back 的作用。當(dāng)用戶切換到不同的 Tab 并且在這個 Tab 中做了一些操作之后，Back 的作用就會變得不甚明確。如果你非得在同一個視圖內(nèi)顯示新內(nèi)容，那么我們建議你采用 Drawer，Drawer 才是為全局內(nèi)容切換而生的。
上圖顯示的才是正確的做法，打開一個新的，沒有 Tabs，有 Up 的界面，而不是繼續(xù)顯示 Tabs。
5. 溯回 (反向遍歷) Tabs
前面說的 Tabs 不應(yīng)該深層，同樣也提到了 Tabs 不應(yīng)該包含歷史。什么叫做不因該包含歷史呢? 就是指，你在 Tabs 上的操作不能被 Back 溯回。同一個導(dǎo)航層級是不應(yīng)該被溯回的。
6.溯回 (反向遍歷) Drawer
和 Tabs 一樣，Drawer 中的導(dǎo)航項也不應(yīng)該被溯回。理由同上。當(dāng)用戶在不同的導(dǎo)航項中切換時，你應(yīng)該重置任務(wù)狀態(tài)。在不同的導(dǎo)航項目中切換就像是切換到不同的應(yīng)用中一樣 (比如說，在 Google+ 中，Photos Tab 根本就是另一個應(yīng)用。。。)。在用戶按下 Back 的時候，你應(yīng)該退出應(yīng)用，或者回到應(yīng)用的主界面 —— 這里的主界面是指哪個自然狀態(tài)下的初始界面，一個你特別希望用戶 (同時用戶也特別期待能夠容易地) 回到的地方。
7. 深層的 Navigation Drawer
前文說過，一個移動應(yīng)用不應(yīng)該有復(fù)雜的結(jié)構(gòu)。如果你需要特別多的導(dǎo)航層級，那么說明你真正應(yīng)該做的其實是簡化你的應(yīng)用結(jié)構(gòu)。Drawer 存在的意義是提供一個穩(wěn)定的導(dǎo)航樞紐，讓用戶不需要記住自己在什么地方，他只要打開 Drawer 就能自然的明白一切。但是，如果在 Drawer 里面彈出了一個次級 Drawer 會把很多人逼瘋。
Drawer 雖然有能力承載多個導(dǎo)航層級，但是正確的做法不是這樣的。
當(dāng)你需要在 Drawer 中放入多個導(dǎo)航層級的時候，不應(yīng)該以新彈出一個 Drawer 的方式，而是應(yīng)該以展開/折疊的方式呈現(xiàn)這個子層級。展開和折疊并不會造成整個控件的劇變，同時能展示給用戶少多一些的項目。關(guān)于 Drawer 上的導(dǎo)航項以及觸摸區(qū)域的設(shè)置，在 Android Design 中另有提及。
如果你的導(dǎo)航層級真的很深，你可以單獨做出一個次級導(dǎo)航頁 展示所有的導(dǎo)航項目。比如說，在 Play Music 中，曲庫下的 Tabs (藝人，專輯，風(fēng)格，曲目) 其實完全可以做成 Drawer 中的次級導(dǎo)航項，但是把它們分散到 Tabs 中能夠更好的優(yōu)化導(dǎo)航。(上圖這樣則是有點類似腹肌式的導(dǎo)航方式。當(dāng)然，***不要只是在上面寫著文字，可以往里面添加點圖片啊，內(nèi)容預(yù)覽什么的)
8. 錯誤的 Drawer 轉(zhuǎn)場
我們在這里說轉(zhuǎn)場的時候，是意味著過渡動畫和一個有著 Drawer 的界面和沒有 Drawer 的界面之間的切換。下面兩個錯誤都和這個轉(zhuǎn)場有關(guān)。
當(dāng)用戶打開 Drawer，按下其中一個項目之后，他不應(yīng)該被帶去一個有著 Up 箭頭的新界面。所有在 Drawer 中呈現(xiàn)的導(dǎo)航項，都應(yīng)該在其界面中顯示 Drawer 指示 (比如說，"漢堡")。而且，當(dāng)用戶通過 Drawer 從其中一個導(dǎo)航項進(jìn)入另一個導(dǎo)航項，他不應(yīng)該看到標(biāo)準(zhǔn)的視圖切換動畫 (漸變 + 放大，常見于進(jìn)入新界面/新活動時)，而應(yīng)該是一個細(xì)致而迅速的漸隱 + 漸顯動畫，伴隨著 Drawer 的關(guān)閉而完成。同樣的動畫也應(yīng)該應(yīng)用在 Action Bar 的轉(zhuǎn)變上。還有一個對于開發(fā)者而言常見的討論是，應(yīng)該用 Activity 還是 Fragment? 這個問題并沒有標(biāo)準(zhǔn)答案，也很難回答。一般來說還是視情況而定 —— 它實現(xiàn)起來難度如何? 對于我的應(yīng)用而言靠譜嗎? 如果你有什么建議的話當(dāng)然歡迎評論。
上圖展示的就是正確的做法，在 Action Bar 上顯示 Drawer Indicator。
9. 不顯示 Up 箭頭
上文說過，所有出現(xiàn)在 Drawer 中的導(dǎo)航頁面都應(yīng)該顯示 Drawer 指示，這點反過來也是一樣成立的 —— 沒有顯示在 Drawer 中的東西就不應(yīng)該顯示 Drawer 指示。比如在上圖，當(dāng)用戶進(jìn)入某個內(nèi)容的時候，Drawer 指示依然顯示。實際上，這個內(nèi)容頁已經(jīng)不是導(dǎo)航頁了，也沒有在 Drawer 中顯示，這里是應(yīng)用更深的層級，已經(jīng)不歸 Drawer 管了。這里應(yīng)該顯示的是 Up。
在顯示 Up 同時，你也可以允許用戶以邊緣滑動的方式喚出 Drawer。你不需要總是顯示 Drawer 指示來告訴用戶可以喚出 Drawer，因為在次級界面中喚出 Drawer 是某種意義上的"進(jìn)階用戶操作"。有人發(fā)現(xiàn)了，那很好，沒人發(fā)現(xiàn)，不要緊，通過 Up 他們依然能夠找回 Drawer。另外，你可以看看 Google Play Newsstand 是如何處理在沒有 Drawer 指示的地方處理 Drawer 的 —— 漸變動畫真的非常重要。
10.右側(cè)導(dǎo)航
前文說過，Android 上有個規(guī)律就是"導(dǎo)航靠左，操作靠右"。對于從左向右閱讀的用戶而言，左側(cè)導(dǎo)航項能夠更好的強調(diào)導(dǎo)航層級。另外，由于 Spinners 只能出現(xiàn)在左側(cè)，Tabs 也往往將最左側(cè)的一個設(shè)為默認(rèn)，右側(cè)的 Drawer 與這些操作距離過遠(yuǎn)。而且，Drawer 指示放在左邊，操作的時候向左回縮，如果在右側(cè)使用 Drawer 的話就會遇到各種各樣的視覺隱喻沖突。
正確的做法就是如上圖所示。當(dāng)然，如果在從右向左的語言環(huán)境下 (比如說，希伯來文什么的，不過我覺得我們國家的開發(fā)者應(yīng)該不怎么會去做希伯來語適配吧……)，那當(dāng)然是應(yīng)該反轉(zhuǎn)這些東西的位置。
以上就是本期 ADiA 介紹的全部十個導(dǎo)航設(shè)計錯誤。如果你有更多的常見/不常見錯誤，或者對于上面提出的錯誤有更好的解決方案，當(dāng)然歡迎評論。
***，一如既往的感謝 +Roman Nurik 和 +Nick Butcher 的 Android Design in Action 活動。
