左：不要包裝標(biāo)簽文本咸这；右：不要縮小文本大小以使文本標(biāo)簽適合單行夷恍。

·?目的地圖標(biāo)（可選）

圖標(biāo)可以補(bǔ)充標(biāo)簽作為目的地的指標(biāo)魔眨， 使用時(shí)媳维，應(yīng)始終將它們放在文本之前， 其他應(yīng)用程序組件和內(nèi)容應(yīng)引用這些圖標(biāo)遏暴。

Right：選中時(shí)選用識別度高的提示標(biāo)簽侄刽；Wrong：不要使用相同的圖標(biāo)來表示不同的主要目的地。

Caution：輔助目標(biāo)可以用相同的圖標(biāo)表示朋凉，特別是如果它們是集合的一部分（1）州丹；Wrong：不要將圖標(biāo)應(yīng)用于某些目的地而不是其他目的地， 圖標(biāo)應(yīng)該用于所有目的地杂彭，要么不使用墓毒。

△?分隔線（可選）

水平分隔線可用于分隔列表中的導(dǎo)航目的地組，它們延伸到抽屜的整個(gè)寬度亲怠。

Right：使用全寬分隔符（1）分隔目標(biāo)組（2）·所计；Wrong：不要使用分隔線來分隔各個(gè)目的地。

△?標(biāo)題（可選）

導(dǎo)航抽屜的標(biāo)題區(qū)域是一個(gè)靈活的空間团秽，可用于品牌表達(dá)（例如應(yīng)用程序標(biāo)題或徽標(biāo)）主胧，帳戶切換等。

如果優(yōu)先考慮訪問帳戶切換习勤，則可以將帳戶切換器放置在導(dǎo)航抽屜的標(biāo)題區(qū)域中踪栋。

如果導(dǎo)航抽屜是頁面的完整垂直高度，則可以在標(biāo)題區(qū)域中放置品牌元素或產(chǎn)品名稱图毕。

如果導(dǎo)航抽屜被頂部應(yīng)用欄剪切夷都，請勿在標(biāo)題中放置品牌元素或產(chǎn)品名稱。予颤，在這種情況下损肛，頂級應(yīng)用欄是該內(nèi)容的更合適的位置。

△?Scrim（僅限模態(tài)和底部）

模態(tài)導(dǎo)航抽屜使用稀松布來阻止與應(yīng)用程序其余部分的交互荣瑟。 稀松布直接放在抽屜的紙張下面治拿，可以輕敲或點(diǎn)擊以取消抽屜。

適用于模態(tài)側(cè)導(dǎo)航抽屜（1）和底部導(dǎo)航抽屜（2）的Scrim笆焰。

三劫谅、標(biāo)準(zhǔn)抽屜

△ 用法

標(biāo)準(zhǔn)導(dǎo)航抽屜允許同時(shí)與屏幕內(nèi)容和抽屜互動(dòng)， 它們可以在平板電腦和臺式機(jī)上使用，但由于屏幕尺寸有限捏检，它們不適合移動(dòng)設(shè)備荞驴。

可選擇的：

·?模態(tài)抽屜? 在響應(yīng)式布局網(wǎng)格中，在規(guī)定的最小斷點(diǎn)寬度至少為600dp時(shí)贯城，應(yīng)使用模態(tài)抽屜替換標(biāo)準(zhǔn)抽屜

·?永久可見的抽屜? 當(dāng)用戶需要經(jīng)常切換目的地（并允許屏幕尺寸）時(shí)熊楼，可以使用永久可見的抽屜

·?允許的抽屜? 當(dāng)用戶可能專注于屏幕內(nèi)容并且需要較少訪問其導(dǎo)航目的地時(shí)，可以使用可禁用的抽屜

△ 行為

· 滾動(dòng)

導(dǎo)航抽屜可以垂直滾動(dòng)能犯，獨(dú)立于屏幕的其他內(nèi)容和UI鲫骗， 如果導(dǎo)航目的地列表長于抽屜的高度，則抽屜的內(nèi)容可以在抽屜中滾動(dòng)踩晶。

· 能見度

標(biāo)準(zhǔn)導(dǎo)航抽屜的可見性取決于屏幕大小执泰，應(yīng)用布局和使用頻率。

1.允許的標(biāo)準(zhǔn)抽屜可用于優(yōu)先考慮內(nèi)容的布局（例如照片庫）或用戶不太可能經(jīng)常切換目的地的應(yīng)用渡蜻， 他們應(yīng)該使用可見的導(dǎo)航菜單圖標(biāo)來打開和關(guān)閉抽屜术吝。

2.永久可見的標(biāo)準(zhǔn)抽屜允許在不相關(guān)的目的地之間快速轉(zhuǎn)動(dòng)， 它們需要用于控制的菜單圖標(biāo)茸苇，因?yàn)樗鼈儾荒鼙挥脩羧∠?/p>

通過點(diǎn)擊頂部應(yīng)用欄（1）中的導(dǎo)航菜單圖標(biāo)打開和關(guān)閉標(biāo)準(zhǔn)的可允許導(dǎo)航抽屜排苍，并保持打開狀態(tài)，直到再次點(diǎn)擊菜單圖標(biāo)（2）学密。

桌面上的永久導(dǎo)航抽屜淘衙。

△ 海拔

標(biāo)準(zhǔn)導(dǎo)航抽屜可以使用以下高程位置之一：

1.與頂部應(yīng)用欄相同的高度（全高）

2.在低于頂部應(yīng)用欄的高度（剪裁）

·?全高

全高導(dǎo)航抽屜與頂部應(yīng)用欄位于同一高度。

· 修剪

剪切的導(dǎo)航抽屜與在頂部應(yīng)用欄下方滾動(dòng)的內(nèi)容處于同一高度则果。

四幔翰、模態(tài)抽屜

△ 用法

模態(tài)導(dǎo)航抽屜使用scrim與應(yīng)用內(nèi)容的其余部分進(jìn)行交互，它們高于應(yīng)用程序UI的大部分西壮，并且不會影響屏幕的布局網(wǎng)格遗增。

它們主要用于屏幕空間有限的移動(dòng)設(shè)備，可以用平板電腦和臺式機(jī)上的標(biāo)準(zhǔn)抽屜代替款青。

A modal drawer on mobile

△ 行為

· 打開和關(guān)閉

模態(tài)導(dǎo)航抽屜總是通過抽屜外的控件來打開做修，例如頂部應(yīng)用欄中的導(dǎo)航菜單圖標(biāo)。

模態(tài)抽屜可以通過以下行為關(guān)閉：

1.選擇抽屜按鈕

2.點(diǎn)擊抽屜之外屏幕的其他部位

3.向抽屜的固定邊緣滑動(dòng)（例如抡草，從左向右滑動(dòng)左側(cè)導(dǎo)航抽屜）

62/5000總是通過導(dǎo)航菜單圖標(biāo)（1）打開模態(tài)抽屜饰及。

可以通過輕敲scrim（1）或?qū)⒊閷匣蜃筮吶A東來關(guān)閉抽屜。

· 滑動(dòng)

如果導(dǎo)航目的地列表長于抽屜的高度康震，則列表可以在抽屜中垂直滾動(dòng)燎含。

五、底部抽屜

△ 用法

底部導(dǎo)航抽屜是模態(tài)抽屜腿短，固定在屏幕底部而不是左邊或右邊屏箍， 它們僅用于底部應(yīng)用欄绘梦。

點(diǎn)擊底部應(yīng)用欄中的導(dǎo)航菜單圖標(biāo)即可打開這些抽屜。赴魁，它們僅用于移動(dòng)設(shè)備卸奉。

底部導(dǎo)航抽屜

△ 行為

在移動(dòng)設(shè)備上打開（縱向）

與其他模態(tài)底部工作表一樣，底部導(dǎo)航抽屜的初始垂直位置基于其內(nèi)容和屏幕高度颖御。 它們最初無法打開超過屏幕高度的50％榄棵。

1.如果抽屜內(nèi)容低于屏幕高度的50％，請始終將抽屜打開至最大高度

2.如果抽屜內(nèi)容大于屏幕高度的50％潘拱，最初將它們打開至50％疹鳄，然后允許用戶將抽屜向上拖動(dòng)到其全高或屏幕高度（以先到者為準(zhǔn)）

Right：打開底部導(dǎo)航抽屜，其中只包含幾個(gè)項(xiàng)目的全高（A）泽铛；Wrong：不要將抽屜的高度超出其內(nèi)容尚辑。

調(diào)整底部導(dǎo)航抽屜的打開位置辑鲤，以便視圖中的最后一個(gè)列表項(xiàng)被屏幕底部剪切盔腔，這可以通知用戶有更多要查看的項(xiàng)目润樱。

· 在移動(dòng)設(shè)備上開放（橫向）

在移動(dòng)橫向方向辜伟，較高的底部導(dǎo)航抽屜自動(dòng)打開到全屏模式。

底部抽屜以橫向方式在移動(dòng)設(shè)備上打開全屏模式狱庇。

在橫向模式下宁赤，請勿將底部抽屜打開至屏幕高度的一半舀透。

· 滾動(dòng)

底部導(dǎo)航抽屜一旦打開到全屏高度，就可以在內(nèi)部滾動(dòng)决左。

當(dāng)最初打開到屏幕高度的50％時(shí)愕够，必須將抽屜拖到屏幕高度，然后才能顯示其他項(xiàng)目佛猛。 在滾動(dòng)時(shí)惑芭，抽屜的標(biāo)題變成了一個(gè)高架的應(yīng)用程序欄，并且可以關(guān)閉继找。

Right：在全高時(shí)允許底部抽屜的內(nèi)容滾動(dòng)遂跟；Wrong：當(dāng)?shù)撞砍閷系膬?nèi)容不在全屏高度時(shí)，請勿滾動(dòng)它婴渡。

·?內(nèi)容層次結(jié)構(gòu)

由于底部導(dǎo)航抽屜內(nèi)容項(xiàng)的數(shù)量最初并非全部可見幻锁，因此抽屜的內(nèi)容應(yīng)按如下順序排列：

1.首先列出最有可能被用戶頻繁訪問的項(xiàng)目

2.如果使用了帳戶切換器，請將其放在抽屜的頂部

六边臼、狀態(tài)

導(dǎo)航抽屜中的目的地采用列表項(xiàng)的形式哄尔。 每個(gè)項(xiàng)目都可以激活，不活動(dòng)柠并，懸停岭接，聚焦和按下置谦。

1. Activated

當(dāng)前屏幕或其父節(jié)點(diǎn)用激活狀態(tài)表示， 一次只能激活導(dǎo)航抽屜中的一個(gè)項(xiàng)目亿傅， 此狀態(tài)應(yīng)與未激活的項(xiàng)目具有強(qiáng)烈的視覺對比媒峡。

2. Inactive

未激活狀態(tài)是導(dǎo)航抽屜中項(xiàng)目的默認(rèn)狀態(tài)。

3. Focus

4. Pressed

5. Hover

一次只能激活一個(gè)抽屜項(xiàng)目葵擎。

不要一次激活多個(gè)抽屜項(xiàng)目谅阿。

END.THANKS FOR YOUR READING~

如有不當(dāng)，還請多多指教~