關注 Android Design 的同學可能都會知道，自從 Google I/O 2013 的 Android Design Section 上專門講解了 Drawer 和 Google 自家應用紛紛涌上 Drawer 之后，這個剛剛正式加入 Android Design 中沒多久的新導航方式一下子就火了起來，Google 應用之外的第三方應用們紛紛嘗試使用新的 Drawer，有的也獲得了不錯的成效，但是有些應用卻比較失敗。
Drawer 作為新一代 Android Design 的代表之一，具有非常高的泛用性。很多舊的導航方式都可以無違和的被 Drawer 替代。這次的 Android Design，我們就來總結(jié)一下現(xiàn)在可以透露的關于 Navigation Drawer 的情報。
Drawer 的黑歷史
要了解現(xiàn)在的 Drawer，就不得不提提他的歷史。在最早的時候，Drawer 還不是現(xiàn)在這個樣子的。第一個應用了 Drawer 交互的 Google 應用是天朝人民不甚熟稔的 YouTube。
可以看出，YouTube 中使用的 Drawer 和現(xiàn)在我們熟悉的 Drawer 還是有很大的不同的。它使用了 Up 箭頭作為指示，展開的方式是內(nèi)容向右側(cè)滑動使 Drawer 露出。而在 YouTube 之外，Google 方面也對 Drawer 進行了一番研究。
稍微解釋一下這張圖。圖中出現(xiàn)了幾種對于 Drawer 的 Up 和 Back 的探討。Hidden View Changer 的特性是，只有通過 Up 才能喚出 Drawer，在抽屜按下 Back 則會返回應用主界面；而 Hidden Home 則是在應用的主界面和 Drawer 打開的狀況下按 Back 都可以退回上一界面；Hidden Shortcuts 的情況下，Back 不會返回到"上一畫面"，而是和 Up 一樣返回到(Drawer 未展開的)上級界面；至于 True Home 則是把 Drawer 作為真正的主界面，在列表下按下 Back 或者 Up 都會打開 Drawer，而只有在 Drawer 中才能通過 Back 返回上一畫面。些交互方案各有特點，基本上包含了當前見到的絕大多數(shù) Drawer 的操作邏輯。
這張圖則是說明了 Android 團隊嘗試的各種 Drawer 標識。從最早的 Up 箭頭到反 Up 箭頭(右箭頭)，甚至還有詭異的 Contextual Action Bar 樣式，結(jié)果最后被采用的還是三條橫杠的指示。順便說個順便說個有趣的事兒，這三條橫杠被 Google 團隊內(nèi)部人員戲稱為 "Hamberger(漢堡)"。實際上 Google 并沒有強制開發(fā)者使用這三條橫杠。反正我是覺得這三條橫杠不好看...
除了單擊應用圖標區(qū)域之外，Android 團隊認為 Drawer 應該也能通過更方便的方式觸發(fā)。畢竟現(xiàn)在手機的屏幕越做越大，大屏手機上想要觸到左上角的區(qū)域還真不是一般的蛋疼。Android Design 團隊選擇了使用了左側(cè)滑入這一手勢。
Drawer 的優(yōu)勢
在 Drawer 之前，開發(fā)者們大多數(shù)使用的是下面幾種導航方式: 腹肌式(Six-pack)，下拉欄式，還有 Tab 式。
這三種交互方式也算是各有各的好處。對于腹肌式的導航而言，直觀的排列展示所有的分類。下拉欄式的好處在于直接展示內(nèi)容的同時占用的空間小，可以把 Action Bar 的空間留給 Action Overflow 和其他常用操作。而 Tabs 的優(yōu)點則是在直接展示內(nèi)容的同時可以快速的切換分類。
而不同的導航方式則提供了在頂級視圖(如上段舉例中的"分類")間切換的途徑。但是在能夠切換頂級視圖的情況下，想要在非頂級視圖間導航就略顯麻煩了——用戶必須退回頂級視圖，在頂級視圖切換分類之后再進入別的內(nèi)容。這個時候，就應當是 Drawer 登場的時候了。
Drawer 的好處就是能夠提供在非頂級視圖間導航的能力。以上圖為例，假設一個應用最常被用到的界面是頂級視圖的 1，2，3，4，和非頂級視圖的 3。3，4。2，如果使用其他的導航方式，想要從 3。3 到 4。2 就會使一個萬分痛苦的過程。而如果引入了 Drawer 這種導航方式，想要從 3。3 到 4。2 就只需要把 Drawer 拉出，點擊 4。2，完成~
說了這么多，什么情況下該使用 Drawer 呢? 這里總結(jié)一下: 當你有三個以上的頂級視圖，有很深的導航層級，需要在很深的層級中添加導航中樞，需要用到十字導航，或者需要更好的內(nèi)容結(jié)構(gòu)的時候，就應該考慮使用 Drawer 了。
Drawer 的一般結(jié)構(gòu)
Drawer 作為一個方便的導航方式，比起幾種老式的導航方式而言會更經(jīng)常被用戶接觸到，而且結(jié)構(gòu)也可以做得更加復雜 (基本上 Spinner 和 Tabs 就只能做成標準的形式，頂多加個分類或者開關什么的)。而如何做一個結(jié)構(gòu)優(yōu)美的 Drawer 呢?
由于 Drawer 的可定制性很高，你可以輕松的在其中加入可以展開/折疊的導航，圖片，未讀計數(shù)來使它變得更加美觀和易用。當然，你也可以向Drawer 里面加入單選按鈕(比如 Gmail 的賬戶選擇)或者 Spinners(比如新的 Drive 的賬戶選擇)。合理的對 Drawer 進行布局會使得 Drawer 起到事半功倍的效果。
提升易用性
當用戶第一次使用帶有 Drawer 的應用的時候，他們不一定會意識到 Drawer 的存在。這時候就需要對他們進行合理的引導。
如上圖所示，在第一次進入應用的時候，可以自動展開 Drawer 讓用戶知曉 Drawer 的存在。而通過 Back 則返回到應用的主界面。
同樣的，在用戶觸摸到屏幕左側(cè)邊緣的時候，讓列表內(nèi)容的亮度稍微降低，左側(cè)的 Drawer 則稍稍露出一條，讓用戶意識到"這里有個東西，我可以把它拉出來"。
Drawer 的標識
前面提到，Google 應用自己的 Drawer 標識是三條橫杠。
但是并不是意味著所有的能召出 Drawer 的地方都要用三條杠。而在導航樞紐的非頂級頁面上也可以放上三道杠。
另外，自制標識也是一個很好的選擇，不過需要注意的就是要能夠標識 Drawer 打開和關閉的狀態(tài)，而在兩個狀態(tài)間能夠漸變切換(官方的漢堡是伸長/縮短)。
一些例子
作為新一代 Drawer 的代表性應用，Gmail 使用的 Drawer 承擔了兩個任務: 切換用戶和切換分類/標簽。在這里，Drawer 只能在頂級頁面中被召出。而且實際上，在 Gmail 應用中，左上角喚出 Drawer 的觸發(fā)區(qū)域不單單是 Gmail 圖標，整個標簽名/郵箱地址都是觸發(fā)區(qū)域(和以前的 Spinner 的觸發(fā)區(qū)域是一致的)。而列表標題和列表項的使用制造出了層級結(jié)構(gòu)和分層，并使其顯得井井有條。
另外你也可以注意到，在 Drawer 打開之后，搜索和新郵件按鈕消失了。來自 Android 團隊的解釋是，移出這兩個按鈕是為了讓用戶更好的把注意力集中在復雜的 Drawer 內(nèi)容中。
而在 Play Music 和 Play Books 中，Drawer 則是和 Spinner 一起使用。而且在 Music 中，在除了設置和正在播放界面之外的任何界面都可以從左側(cè)滑出 Drawer。另外還有一個小細節(jié)，這張圖上的 Play Music 是一個早期版本的 Play Music，Radio 依然還是 Instant Mixes。
Earth 應用中的 Drawer 則有些特別，他是作為圖層/功能開關和層級切換的用處。實際上，對于 Earth 而言，切換頂級界面并不是常用功能(對于 Earth 而言頂級界面就只有這個主視圖)，而且它也沒有傳統(tǒng)意義上的 Action Bar——取而代之的是一個搜索欄，因為這對于 Earth 而言是個更重要的功能。這實際上從側(cè)面證明了某些情況下并不必要完全遵循 Android Design 也可以做出不錯的應用。
而 One Today 在這里作為例子出現(xiàn)其實是證明了右側(cè) Drawer 存在的可能性。右側(cè) Drawer 的觸發(fā)方式也有兩種，單擊右上角的未讀計數(shù)或者從右側(cè)邊緣滑入。在 Google 自家的應用中，右側(cè) Drawer 基本上專注于通知。而在右側(cè) Drawer 展開的情況下，點擊應用 Logo 區(qū)域(包括 Notification 文字這塊區(qū)域)會看到右側(cè) Drawer 退回的同時左側(cè) Drawer 彈出，煞是有趣。和 One Today 性質(zhì)類似的還有 Google+ 的通知，不過 Google+ 的通知是整個主界面內(nèi)容區(qū)向左滑動露出 Drawer，而且不能通過右側(cè)邊緣滑入來打開。
其他 Drawer 實現(xiàn)(非 Google 應用)
早在 Google 使用 Drawer 之前，就有很多應用嘗試了 Drawer 的使用。Drawer 的呈現(xiàn)形式可以說是五花八門: 保留/不保留 Action Bar，Drawer 位于內(nèi)容的上方/下方，內(nèi)容保持不動/滑開，Drawer 以從底部上浮的方式出現(xiàn)... 等等等等。有興趣的開發(fā)者可以下載 SlidingMenu Demo 來看看這些五花八門且不乏創(chuàng)意的實踐。
而 Android 團隊則認為關于自定義 Drawer，有兩點值得注意。首先是 Action Bar 最好保持不動。畢竟一般情況下，應用的 Logo 還是在 Action Bar 上，而且還有最常用的操作按鈕和 Action Overflow。當然，如果應用 Logo 不再 Action Bar 上，也沒有常用操作按鈕等(比如 Falcon Pro)，那么 Action Bar 就可以隨便移動了。另外，如果采用的是全局式的 Drawer 觸發(fā)(就是在主界面上隨意區(qū)域向右拖動都能觸發(fā) Drawer)，那么建議的動畫形式是整個內(nèi)容區(qū)域右移——這動畫的隱喻和邊緣滑入動畫的不太一樣，邊緣滑入的動畫是"拉出 Drawer"，內(nèi)容區(qū)域滑動則是"露出 Drawer"。
另外，如果采用了"內(nèi)容區(qū)滑動"型 Drawer 的話，在內(nèi)容區(qū)域就不建議采用橫向滑動的手勢了，畢竟兩種操作會產(chǎn)生沖突(悲劇的撫波在一開始的版本中就遇到了這個問題)。在這一點上新版的四次元就做得很好，大家可以期待一下。
什么地方不適合 Drawer
如果你的應用需要非常經(jīng)常的在不同視圖/分類中切換，那么需要滑出的 Drawer 顯然是個糟糕的方案(這也解釋了為什么 Play Store 使用了 Fixed Tabs + Spinner 而不是 Drawer 來進行導航)。還有前面說過的，如果你只有三個或者更少的頂級視圖，那么 Drawer 存在的必要性其實很低(就這點而言，Play Books 的 Drawer 其實很不必要... 實際上我個人也更喜歡原來的 Play Books)。
最后也是最重要的一點: 想要讓 Drawer 發(fā)揮最大的效果，合理的設計應用的層級結(jié)構(gòu)是非常重要的。如果一個應用的層級結(jié)構(gòu)很糟糕，Drawer 也是救不了它的。Drawer 不是萬靈藥。