抽屜式導(dǎo)航

抽屜式導(dǎo)航是Google應(yīng)用程序中一種常見的模式。抽屜導(dǎo)航從左側(cè)滑出，它遵循列表的關(guān)鍵設(shè)計線和標(biāo)準(zhǔn)。

http://wiki.jikexueyuan.com/project/material-design/images/patterns_navdrawer_metrics1.png"width="360"/>

排版樣式
字體，字號，顏色：

1. Roboto Medium, 14sp, #FFFFFF
2. Roboto Regular, 14sp, #FFFFFF
3. 列表項: Roboto Medium, 14sp, 87% #000000
4. 副標(biāo)題: Roboto Medium, 14sp, 54% #000000。對其到16dp關(guān)鍵設(shè)計線。

http://wiki.jikexueyuan.com/project/material-design/images/patterns_navdrawer_metrics2.png"width="360"/>

垂直關(guān)鍵設(shè)計線和水平間距

圖標(biāo)的垂直關(guān)鍵設(shè)計線是距側(cè)邊導(dǎo)航左右邊緣均為16dp的設(shè)計線，并且圖標(biāo)顏色為不透明度為54%的黑色（#000000）。

與圖標(biāo)或頭像對應(yīng)的文本內(nèi)容距導(dǎo)航左側(cè)邊緣72dp。

側(cè)邊導(dǎo)航的寬度等于屏幕的寬度減去actionbar的高度，或者是距屏幕右側(cè)邊緣56dp。側(cè)邊導(dǎo)航的最大寬度是5倍于標(biāo)準(zhǔn)增量（手機(jī)上是56dp，平板上是64dp）。

在手機(jī)上使用16dp的水平距離，在平板則上使用24dp。

http://wiki.jikexueyuan.com/project/material-design/images/patterns_navdrawer_metrics3.png"width="360"/>

垂直間距

1. 24dp
2. 56dp
3. 8dp
4. 48dp

在每個列表組的頂部和底部添加8dp的間距。一個例外的情況是，當(dāng)這個列表組有一個副標(biāo)題的時候頂部不需添加8dp的間距，因?yàn)楦睒?biāo)題包含有他自己的間距設(shè)定。

高度

抽屜導(dǎo)航的占據(jù)了屏幕的全部高度，并且抽屜導(dǎo)航在狀態(tài)欄的下方。抽屜下方所有的東西會覆蓋一層陰影（scrim）而變暗。陰影下的所有內(nèi)容依然是可見的。

http://wiki.jikexueyuan.com/project/material-design/images/patterns_navdrawer_elevation1.png"width="360"/>

Android上的抽屜導(dǎo)航

選擇狀態(tài)

當(dāng)列表中的一項被選擇后，那一項會變?yōu)閼?yīng)用程序的主色調(diào)，或者是不透明度為100%的黑色（#000000），以此來凸顯此項被選中。觸摸紋波也是一種高亮，進(jìn)一步凸顯列表項被選中。

如果這種顏色觸摸紋波/高亮不能與程序主色調(diào)形成足夠的對比，那么就使用的程序主色的暗色調(diào)。

http://wiki.jikexueyuan.com/project/material-design/images/patterns_navdrawer_selection1.png"width="360"/> http://wiki.jikexueyuan.com/project/material-design/images/patterns_navdrawer_selection2.png"width="360"/> http://wiki.jikexueyuan.com/project/material-design/images/patterns_navdrawer_selection3.png"width="360"/> http://wiki.jikexueyuan.com/project/material-design/images/patterns_navdrawer_selection4.png"width="360"/> http://wiki.jikexueyuan.com/project/material-design/images/patterns_navdrawer_selection5.png"width="360"/> http://wiki.jikexueyuan.com/project/material-design/images/patterns_navdrawer_selection6.png"width="360"/>

分隔線

在導(dǎo)航抽屜里所有分割線都是完全在抽屜面板內(nèi)部。此外，在分隔線上方和下方均有8dp的間距。

http://wiki.jikexueyuan.com/project/material-design/images/patterns_navdrawer_dividers1.png"width="360"/>

上下文

http://wiki.jikexueyuan.com/project/material-design/images/patterns_navdrawer_dividers2.png"width="360"/>

8 dp 垂直間距

滾動

抽屜導(dǎo)航可以像任何普通視圖一樣滾動。

http://wiki.jikexueyuan.com/project/material-design/images/patterns_navdrawer_scrolling1.png"width="360"/> http://wiki.jikexueyuan.com/project/material-design/images/patterns_navdrawer_scrolling2.png"width="360"/>

設(shè)置和支持

設(shè)置和支持位于滾動列表的底部，與列表內(nèi)容的其余部分排成列。

如果在導(dǎo)航抽屜中的內(nèi)容列表很長，設(shè)置和支持這兩項可以被釘在導(dǎo)航抽屜的底部（譯者：非列表底部）較高一層的視圖上。該視圖層（顯示設(shè)置和支持的視圖層）只有在列表顯示頂部的時候才顯示;任何在其他的位置的滾動會立即使該視圖層消失，并且把設(shè)置和支持這兩項加到列表底部，與列表內(nèi)容的其余部分排成列。當(dāng)關(guān)閉和重??新打開抽屜式導(dǎo)航的時候，抽屜導(dǎo)航保持其滾動到的位置。（譯者：其實(shí)現(xiàn)在的 Play 商店和 Gmail 并沒有嚴(yán)格按照這個標(biāo)準(zhǔn)來，并沒有把設(shè)置和支持釘在抽屜導(dǎo)航底部的上一層。從 Inbox 上倒是可以看到一點(diǎn)影子。2014-12-10）

http://wiki.jikexueyuan.com/project/material-design/images/patterns_navdrawer_settings1.png"width="360"/> http://wiki.jikexueyuan.com/project/material-design/images/patterns_navdrawer_settings2.png"width="360"/>

如果列表不用滾動，那么設(shè)置和支持項會在列表底部顯示，而且不用被釘在底部。

http://wiki.jikexueyuan.com/project/material-design/images/patterns_navdrawer_settings3.png"width="360"/>