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)容和屏幕高度。
如果抽屜內(nèi)容低于屏幕高度的50%,請始終將抽屜打開至最大高度
如果抽屜內(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): 宛蘇
全站高品質(zhì)素材免費下載!