Material Design 設(shè)計語言(六)菜單和抽屜導(dǎo)航

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

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


 一、菜單(Menus) 

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

1564385362522918.jpg

 

原則 

 1、快捷 

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

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

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

 3、易讀 

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

 

類型 

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

  

 1564385362418283.png


1、下拉菜單 

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

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


2、外露下拉菜單

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

3.gif



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

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

            

4.jpg

 

原則 

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)。

5.png       

 

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

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

 2.輕點黑色蒙版 

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

  

6.jpg           


 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%,然后允許用戶將抽屜向上拖動到其全高或屏幕高度 

7.jpg8.png

 

滾動 

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

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


9.jpg



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

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

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

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

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


原創(chuàng): 宛蘇 

每天更新,
全站高品質(zhì)素材免費下載!