Material Design 里面有兩個很特殊的存在，一個是下拉菜單一個就是導(dǎo)航抽屜。這兩個控件在iOS的HIG中并未提及，但是在我們的實際運(yùn)用中還算比較廣泛。 

 例如微信和QQ右上角“添加”按鈕的下拉菜單。以及QQ改版前左上角“我的”的側(cè)邊抽屜導(dǎo)航（只是改版后模態(tài)改成了非模態(tài)）。

 一、菜單（Menus） 

 菜單是顯示在界面上的臨時選項列表。當(dāng)用戶與按鈕、操作項或其他控件交互時，它就會出現(xiàn)。 

原則 

 1、快捷 

 菜單應(yīng)該易于打開，關(guān)閉和交互。 

 2、關(guān)聯(lián) 

 菜單內(nèi)容應(yīng)該符合用戶需求。 

 3、易讀 

 菜單項應(yīng)易于瀏覽。 

類型 

 菜單允許用戶從多個選項中進(jìn)行選擇。與選擇控件（例如一組單選按鈕）相比，它們不是那么地突出，而且占用了更少的空間。

1、下拉菜單 

下拉菜單是由圖標(biāo)、按鈕或操作項觸發(fā)的選項列表。它們的位置根據(jù)打開它們的元素而變化。 

下拉菜單通常位于觸發(fā)它的元素下方。 

2、外露下拉菜單

外露的下拉菜單在選項列表上方顯示當(dāng)前選定的菜單項。有些變體可以支持用戶手動輸入。         

二、導(dǎo)航抽屜（Navigation Drawer） 

 導(dǎo)航抽屜提供對目的地和應(yīng)用功能的訪問，例如切換帳戶。

原則 

1、可識別 

導(dǎo)航抽屜的位置和列表的內(nèi)容可以清楚地看出是導(dǎo)航。 

2、有組織 

導(dǎo)航抽屜根據(jù)用戶使用的重要程度（優(yōu)先級）排序，最前面的是用戶頻繁使用到的，同時將相關(guān)的導(dǎo)航組合在一起。 

3、靈活性 

導(dǎo)航抽屜可以顯示或隱藏，以適應(yīng)不同的應(yīng)用程序布局。 

類型 

1、模態(tài)抽屜 

模態(tài)導(dǎo)航抽屜使用黑色蒙版，阻止其與APP頁面內(nèi)容的其余部分進(jìn)行交互。它們高于APP中UI的大部分，并且不會影響屏幕的布局網(wǎng)格。

開啟和關(guān)閉 

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

同時可以通過以下方式關(guān)閉：

 1.選擇抽屜內(nèi)的操作項 

 2.輕點黑色蒙版 

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

 2、底部抽屜 

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

 點擊底部應(yīng)用欄中的菜單圖標(biāo)即可打開這些抽屜。 

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

 與其他模態(tài)底板一樣，底部導(dǎo)航抽屜的初始垂直位置基于是其內(nèi)容和屏幕高度。 

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

2. 如果抽屜內(nèi)容大于屏幕高度的50％，默認(rèn)將它們打開至50％，然后允許用戶將抽屜向上拖動到其全高或屏幕高度 

滾動 

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

 當(dāng)默認(rèn)打開到屏幕高度的50％時，必須將抽屜拖到屏幕高度，然后才能顯示其他項目。在滾動時，抽屜的標(biāo)題變成了一個頂部應(yīng)用欄。

Material Design視覺設(shè)計語言概述（一）

Material Design視覺設(shè)計語言概述（二）

Material Design視覺設(shè)計語言概述（三）

Material Design視覺設(shè)計語言概述（四）

Material Design視覺設(shè)計語言概述（五）

原創(chuàng)： 宛蘇