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

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

 一、菜單（Menus） 

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

原則 

 1、快捷 

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

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

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

 3、易讀 

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

類(lèi)型 

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

1、下拉菜單 

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

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

2、外露下拉菜單

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

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

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

原則 

1、可識(shí)別 

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

2、有組織 

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

3、靈活性 

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

類(lèi)型 

1、模態(tài)抽屜 

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

開(kāi)啟和關(guān)閉 

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

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

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

 2.輕點(diǎn)黑色蒙版 

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

 2、底部抽屜 

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

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

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

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

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

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

滾動(dòng) 

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

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

Material Design視覺(jué)設(shè)計(jì)語(yǔ)言概述（一）

Material Design視覺(jué)設(shè)計(jì)語(yǔ)言概述（二）

Material Design視覺(jué)設(shè)計(jì)語(yǔ)言概述（三）

Material Design視覺(jué)設(shè)計(jì)語(yǔ)言概述（四）

Material Design視覺(jué)設(shè)計(jì)語(yǔ)言概述（五）

原創(chuàng)： 宛蘇