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