一、按鈕(Buttons)按鈕允許用戶只需輕按一下即可進(jìn)行操作并做出選擇。
按鈕傳達(dá)用戶可以采取的操作。它們通常被用在整個(gè)UI中,例如:
? 對(duì)話框
? 模態(tài)窗口
? 列表
? 卡片
? 工具欄
原則1、易讀性按鈕應(yīng)該明確表明可以觸發(fā)一個(gè)動(dòng)作。2、可查找按鈕應(yīng)該很容易在其他元素中找到。3、清晰按鈕的操作和狀態(tài)應(yīng)該清晰。
類型1、文本按鈕(重要性低)文本按鈕通常用于不太重要的操作。2、線框按鈕(重要性中)由于帶有一個(gè)底框,線框按鈕用于比文本按鈕強(qiáng)調(diào)性更強(qiáng)。3、填充按鈕(重要性高)填充按鈕強(qiáng)調(diào)性更強(qiáng),因?yàn)槭褂昧祟伾畛浜完幱啊?strong>4、切換按鈕切換按鈕通過布局和間距,對(duì)一組操作進(jìn)行分組。它們的使用頻率低于其他3種按鈕類型。
層級(jí)1、一個(gè)突出的按鈕一個(gè)布局應(yīng)包含一個(gè)突出顯示的按鈕,以清楚地襯托出其他按鈕在層級(jí)中的重要性較低。這個(gè)高度強(qiáng)調(diào)的按鈕最引人注意。2、其他按鈕在APP的布局中,可以同時(shí)顯示多個(gè)按鈕,因此高度強(qiáng)調(diào)的按鈕可以伴隨中等和低強(qiáng)調(diào)按鈕,這些按鈕常用來執(zhí)行不太重要的操作。
使用多個(gè)按鈕時(shí),請(qǐng)確保一個(gè)按鈕的可用狀態(tài),不會(huì)看起來像另一個(gè)按鈕的禁用狀態(tài)。
位置同一個(gè)頁面中,使用多種按鈕類型可用于表示不同的強(qiáng)調(diào)程度。以上布局使用了:
1.重要性最高的懸浮操作按鈕
2.重要性較高的紫色填充按鈕
3.重要性低的文本按鈕
二、懸浮操作按鈕(FAB)懸浮操作按鈕(FAB)表示屏幕的主要操作。懸浮操作按鈕(FAB)在屏幕上執(zhí)行主要或最常見的操作。它出現(xiàn)在所有屏幕內(nèi)容的最前面,通常是一個(gè)圓形,中間有一個(gè)圖標(biāo)。
FAB有三種類型:常規(guī)、迷你和擴(kuò)展。 原則1、主要的FAB表示屏幕上的主要操作。2、建設(shè)性FAB應(yīng)執(zhí)行建設(shè)性的操作(例如創(chuàng)建、分享或探索)。3、關(guān)聯(lián)性FAB應(yīng)與其頁面內(nèi)容相關(guān)。
類型1、常規(guī) FAB當(dāng)屏幕寬度大于460dp時(shí),默認(rèn)常規(guī)FAB(56x56dp)。2、迷你 FAB迷你FAB應(yīng)該用在較小的屏幕上。當(dāng)屏幕寬度為460dp或更小時(shí),常規(guī) FAB(56dp)的容器則會(huì)轉(zhuǎn)換為迷你FAB(40dp)。
迷你FAB還可用于與其他屏幕元素建立視覺連續(xù)性。3、擴(kuò)展 FAB擴(kuò)展FAB更寬,并包含文本標(biāo)簽,圖標(biāo)可選。
位置在移動(dòng)設(shè)備上,擴(kuò)展FAB應(yīng)放置在右下角或底部中心。
注:避免在底部應(yīng)用欄上方使用擴(kuò)展FAB,因?yàn)檫@樣會(huì)占用大量屏幕空間。如果它們必須是一對(duì)組合,則擴(kuò)展FAB應(yīng)在滾動(dòng)時(shí)折疊。 用法懸浮操作按鈕(FAB)可以在當(dāng)前頁面上觸發(fā)操作,也可以執(zhí)行跳轉(zhuǎn)到新頁面的操作。
FAB執(zhí)行重要的建設(shè)性操作,例如:
? 創(chuàng)建
? 收藏
? 分享
? 啟動(dòng)進(jìn)程
避免使用FAB執(zhí)行不重要或破壞性的操作,例如:
? 存檔或刪除
? 警報(bào)或錯(cuò)誤
? 限制性的任務(wù),如截?cái)辔谋?
調(diào)整音量或字體顏色等的控件更適合用在工具欄。 快速展開按下FAB后,以快速展開的形式顯示3~6個(gè)相關(guān)動(dòng)作。
若超過6個(gè)操作,則應(yīng)使用其他操作來呈現(xiàn)它們而不是 FAB。
1、按下后,F(xiàn)AB 發(fā)出相關(guān)動(dòng)作2、按下后,F(xiàn)AB 轉(zhuǎn)換為包含相關(guān)操作的菜單(僅限Android)
在Android上按下后,F(xiàn)AB可以轉(zhuǎn)換為包含相關(guān)操作的菜單。黑色蒙版表示暫時(shí)禁用了操作菜單之外的功能。菜單始終顯示在屏幕上,直到觸發(fā)操作或點(diǎn)擊黑色蒙版。
Material Design視覺設(shè)計(jì)語言概述(一)
Material Design視覺設(shè)計(jì)語言概述(二)
Material Design視覺設(shè)計(jì)語言概述(三)
作者: 宛蘇公眾號(hào):
全站高品質(zhì)素材免費(fèi)下載!