以下兩種側邊欄哪一種符合Material Design？哪種更加優秀？

01-27

Fuubo：覆蓋整豎條屏幕（左）
知乎：可以看出三明治變箭頭的動畫（右）

很多答案都只回答了問題的前半部分：

覆蓋 Toolbar 的 Side Drawer 更加符合 Material Design。

我來補充一下問題的後半部分，斗膽分析一下為什麼 Material Design 認為 Side Navigation Drawer （一下簡稱側邊欄）覆蓋 Toolbar 是更加『優秀』的設計。

首先結論是基於我對側邊欄目的的理解： Side Nav Drawer 的出現是用來解決 App 頁面深度太深的問題的。

（這裡不知道如何用準確的用語言表達，我舉個例子）

以 Google Play 為例：

這是主頁，點按左上方『漢堡包』按鈕可以看到側邊欄。

在這裡你可以看到並且切換到幾個主要的功能。

如果你點擊主頁的一個 app 進入應用 details activity：

『漢堡包』圖標消失，但是你仍然可以從左側拉出側邊欄。那麼為什么側邊欄要出現在這裡？答案是這樣能讓用戶很快的切換到 My Apps、My wishlist 等頁面去。如果和知乎一樣，你就必須返回到主頁面再從左側划出側邊欄：

如果說一次的返回還是可以忍受的，那麼考慮一下這種情況—— Play Store 在每一個頁面下方是有相關 App 推薦的：

如果用戶繼續瀏覽相關推薦 App，一層又一層的進入頁面，到最後，backstack 很可能有五六頁甚至十幾頁那麼多，你回到主頁就需要連按 N 多下 back，然後再划出側邊欄，這就讓人抓狂了。因此要保證每個頁面都能統一的拉出側邊欄，實現快速轉跳：

反面栗子（知乎）：

需要跳牆查看，沒梯子的我總結一下：我按了7次返回鍵才回到主頁拉出側邊欄轉到『發現』頻道。 @NovaDNG :p

http://youtu.be/5bD6P_rwd0M

以上說明了側邊欄的主要用途，現在再來考慮側邊欄是覆蓋好還是不覆蓋好：

側邊欄既然是每一個頁面都有的元素，優先順序肯定是高過 Toolbar 的，除非使用單一 Activity 然後用 replace Fragment 的方法實現，否則從邏輯上我不知道有任何理由需要露出 Toolbar。

ps： iOS 是如何做到快速轉跳的呢？

當然也有許多的 app 開始使用『漢堡包』菜單鍵，不過由於『漢堡包』和左上角『返回』衝突以及左側拉出側邊欄和 iOS 邊緣右拉返回衝突，所以有快速轉跳需求的應用還是很大程度的依賴上面這種底端的 Tab Bar。

這是一個關於 Navigation drawer 的問題。

以下內容引用自http://www.google.com/design/spec/patterns/navigation-drawer.html

手動翻譯，有誤請立即打臉！

印刷格式(Typography)

Roboto Medium, 14sp, #FFFFFF

Roboto Regular, 14sp, #FFFFFF

列表物件: Roboto Medium, 14sp, 87% #000000

次標題: Roboto Medium, 14sp, 54% #000000. 和16dp寬的關鍵對齊線（keylines）

垂直的關鍵線和水平的邊緣

讓圖示對齊的垂直關鍵線位於從左側以及導覽面板的右側邊緣算起16dp的地方，並且為54% #000000。
和圖示或圖像相關的內容對齊於從導覽面板左側邊緣算起72dp的位置。
導覽面板的寬度等於畫面寬度減掉功能列的高度，在這個例子中即為從畫面右邊算起56dp。
在移動設備上使用16dp寬的水平邊緣。

垂直間隔

24dp

56dp

8dp

48dp

在每個列表群組的上方和底部加上8dp的padding。有一個例外是次標題下方最上面那個列表，因為次標題自己已經有padding了。

高度

導覽抽出式面板（nav drawer）跨越整個屏幕的高度，而且面板是在狀態欄(status bar)之下。
所有面板（nav drawer）以下的東西都要遮蓋變暗(be darkened by a scrim)，面板（nav drawer）內容依然可見。

由此可見Fuubo更符合Material Design.

僅僅說 ?圖二更符合規範所以更優秀? 那是讀規範讀傻了.

先來看看兩種不同的 Drawer 層級:

為什麼 Google 最後選擇了將 Drawer 置於最上級? 在早期的 Drawer 呈現形式中, 有兩個很大的問題:

首先, Drawer 在這個位置暗示了 Action Bar 在導航到其他入口的時候不會有變化 (Action Bar 不被擋住). 在 Material Design 中, 層級關係被前所未有的強化. 下層內容服從上層改變是一條基本的規則. 而在這樣的呈現形式中, 卻會造成上層內容隨下層內容而變化. (在例圖應用里, 當用戶位於 Album 中時, Action Bar 上操作會變成只剩下搜索, Story 里連搜索都沒有.)
其次, 當抽屜展開時, 假設 Action Bar 上的按鈕還是有效的, 但是它們的效果對象卻是被 Drawer 遮住了一半 (或更多更多) 的那些項目, 而不是直接位於他們下方的 Drawer.

Material Design 中 Drawer 的表現是最接近預期的. 當用戶從 Drawer 中進行導航的時候, Drawer 之下所有的內容都可以改變, 包括 Action Bar. 這與現實的對應是最緊密的.

另外, 由於 Quick Return 的大量運用, 舊的 Drawer 在 Quick Return 下顯得非常笨拙. 而 Navigation Hub 概念的加入也使得 Drawer 不再是只有在一級界面才能調出的導航方式, 而是被擴展到了幾乎所有界面下. 這個時候再使用傳統 Drawer 就會出現越來越多的隱喻問題.

(另外, 知乎 3.0 中會採用 Material Design 的 Drawer. 2.X 版本因為只是套用了最新的庫, 沒有對布局進行更改.)

我覺得通知欄那裡再加個黑色半透明覆蓋在drawer上最符合

對於材料設計一改之前高度低於actionbar的抽屜設計，覆蓋掉了左上角按鈕，我也是醉了。按鈕動畫變成了意會，放一半就不見了，但還在後面動。

不過與這個改變相關的，有一個改變。actionbar升級為toolbar，不再固定在頂端，可以放在任意位置，可高度定製化，從而適配各種屏幕尺寸。我覺得從這個改變就可以理解為什麼抽屜高度要全屏。

這樣算中庸之道嗎？

簡單說：下面一個更符合。哪個更像兩張紙疊加的效果～遮多少是干擾信息多或者少～

題主的截圖是不客觀的：

知乎沒有針對4.4做狀態欄變色優化，而fuubo有。。。

然後腦補一下所謂「沉浸式」：

就發現其實兩者是差不多的，視覺上差別在於側邊欄的顏色，以及圖標，還有側邊欄寬度，action bar 的處理效果等

知乎那三道橫線轉成剪頭的動態效果是不錯的，fuubo沒有或者說是簡化了，從比例上來看，知乎的側邊欄伸展寬度也是比較合理的。

總之，使用體驗上是沒多大區別的。。

我們再來看看這種處理方式，對比感受一下：

我想問這兩種方式分別如何實現