Material Design(原質(zhì)化設(shè)計(jì))是谷歌開發(fā)的一種視覺(jué)設(shè)計(jì)語(yǔ)言,它遵循了優(yōu)秀設(shè)計(jì)的經(jīng)典原則,同時(shí)還結(jié)合了創(chuàng)新理念和新技術(shù)。
欄(Bars)
一、應(yīng)用欄:底部(APP Bars:bottom)
底部的應(yīng)用欄在移動(dòng)屏幕底部用于顯示導(dǎo)航和關(guān)鍵性操作。
底部應(yīng)用欄提供了訪問(wèn)抽屜導(dǎo)航的入口,以及最多可放置4個(gè)操作按鈕,包括懸浮操作按鈕(FAB)。
原則
1、可操作的
底部的應(yīng)用欄突出顯示重要的屏幕操作,并且讓浮動(dòng)操作按鈕更顯眼。
2、靈活的
底部應(yīng)用欄的布局和操作會(huì)根據(jù)屏幕的需要而變化。
3、人體工學(xué)
底部應(yīng)用欄可以通過(guò)移動(dòng)設(shè)備上的手持位置輕松到達(dá)。
何時(shí)使用
應(yīng)該:
1.僅限移動(dòng)設(shè)備
2.訪問(wèn)底部抽屜導(dǎo)航
3.屏幕有2~5個(gè)操作
避免:
1.已有底部導(dǎo)航欄的APP
2.屏幕只有1個(gè)或沒(méi)有操作
布局
底部應(yīng)用欄基于FAB的存在及其在欄中的位置,有三種不同的布局。這些布局決定了可以包含在欄中的操作數(shù)。
1、FAB居中
在主屏幕上使用底部應(yīng)用欄,其中包含抽屜導(dǎo)航控件和突出操作按鈕(例如FAB)??梢栽跈诘牧硪粋?cè)放置最少1個(gè),最多2個(gè)附加操作。
2、FAB位于邊緣
在次級(jí)頁(yè)面上使用FAB,需要懸浮操作按鈕和3~4個(gè)其他操作。
3、無(wú)FAB
當(dāng)不需要懸浮操作按鈕時(shí),底部應(yīng)用欄可以防止更多菜單里的操作,并且在相對(duì)邊緣上最多可以放置4個(gè)操作圖標(biāo)。
懸浮操作按鈕
若有懸浮操作圖標(biāo),那么懸浮操作按鈕(FAB)將以以下列兩種方式,顯示在底部應(yīng)用欄上:
1.重疊:FAB的水平高于底部應(yīng)用欄(基于Z軸),并且對(duì)條形的形狀沒(méi)有影響。
2.插入:FAB與底部應(yīng)用欄處于同一水平,并且欄形狀改變,以便于FAB可剛好放在底部應(yīng)用欄中的凹槽中。
特別注意
1、覆蓋
底部應(yīng)用欄可以被鍵盤和其他臨時(shí)元素覆蓋。如果你的APP需要長(zhǎng)時(shí)間/經(jīng)常遮住底部應(yīng)用欄,則應(yīng)使用其他的組件。
2、導(dǎo)航
底部應(yīng)用欄可以顯示菜單圖標(biāo)以打開底部導(dǎo)航抽屜,但該欄本身不應(yīng)包含任何導(dǎo)航操作(例如返回上一頁(yè)面或關(guān)閉頁(yè)面的圖標(biāo))。APP的導(dǎo)航應(yīng)放置在其他組件中,例如頂部應(yīng)用欄或嵌入在屏幕上。
3、與頂部應(yīng)用欄配對(duì)
與底部應(yīng)用欄一起使用時(shí),頂級(jí)應(yīng)用欄可以提供向上的導(dǎo)航和其他操作。在整個(gè)APP中,應(yīng)該在兩個(gè)欄上明確組織和劃分操作。
a.將單個(gè)導(dǎo)航菜單控件放在底部應(yīng)用欄中(用于訪問(wèn))
b.將單個(gè)更多菜單控件放于底部應(yīng)用欄的邊緣操作
c.將搜索操作(例如搜索圖標(biāo))放置在整個(gè)應(yīng)用中一致的位置
d.破壞性操作放置在頂部應(yīng)用欄中,例如“刪除”
4、Snackbars
Snackbars 與 Toasts 應(yīng)在垂直于底部應(yīng)用欄上方的位置進(jìn)行動(dòng)畫處理顯示,避免遮蓋底部應(yīng)用欄。
二、應(yīng)用欄:頂部 (App bars: top)
頂部應(yīng)用欄顯示與當(dāng)前屏幕相關(guān)的信息和操作。
原則
1、持久性
頂部應(yīng)用欄始終顯示在APP中每個(gè)頁(yè)面的頂部,并且可以在滾動(dòng)時(shí)消失。
2、引導(dǎo)性
頂部應(yīng)用欄提供了引導(dǎo)用戶瀏覽應(yīng)用的可靠方式。
3、一致性
頂部應(yīng)用欄的位置和內(nèi)容應(yīng)一致,以提高熟悉度。
類型
常規(guī)的頂部應(yīng)用欄
下文操作欄
上下文操作欄為所選項(xiàng)提供操作。頂部應(yīng)用欄可以轉(zhuǎn)換為上下文操作欄,保持可操作狀態(tài)直到執(zhí)行操作或?qū)⑵淙∠?
布局
對(duì)于從左往右看的語(yǔ)言,建議在頂部應(yīng)用欄中放置元素:
a.將導(dǎo)航放在最左側(cè)
b.將標(biāo)題放在導(dǎo)航的右側(cè)
c.將上下文操作放在導(dǎo)航的右側(cè)
d.將更多菜單放在最右側(cè)
對(duì)于從右往左看的語(yǔ)言,應(yīng)該翻轉(zhuǎn)放置位置。
1、兩種表現(xiàn)方式
突出的頂部應(yīng)用欄可包含更長(zhǎng)的標(biāo)題、背景圖片,或?yàn)轫敳繎?yīng)用欄提供更強(qiáng)的存在感。
在突出型的頂部應(yīng)用欄中使用背景圖片的注意事項(xiàng):
2、導(dǎo)航圖標(biāo)
導(dǎo)航圖標(biāo)是可選的。當(dāng)它出現(xiàn)在應(yīng)用欄中時(shí),它會(huì)與 Bar 的左側(cè)對(duì)齊。它可以是:
a.菜單圖標(biāo),用于打開導(dǎo)航抽屜
b.一個(gè)向上箭頭,用于瀏覽APP的層次結(jié)構(gòu)
c.后退箭頭,返回上一個(gè)頁(yè)面
3、標(biāo)題
應(yīng)用欄標(biāo)題可用于描述:
a.用戶當(dāng)前所在的屏幕
b.用戶當(dāng)前所在的部分
c.正在使用的應(yīng)用程序
4、操作項(xiàng)和更多菜單
將最常用的操作放在左側(cè),更少使用的操作依次向右放置。任何不適合應(yīng)用欄的剩余操作項(xiàng)都可以放入更多菜單。
5、滾動(dòng)
在滾動(dòng)時(shí),頂部應(yīng)用欄可以保留在原位,也可以通過(guò)以下方式進(jìn)行轉(zhuǎn)換:
a.向上滾動(dòng)時(shí)隱藏頂部應(yīng)用欄
b.向下滾動(dòng)時(shí)顯示頂部應(yīng)用欄
下文操作欄
用法
頂部應(yīng)用欄可以轉(zhuǎn)換為上下文操作欄,以便于為所選項(xiàng)目提供上下文操作。
例如,當(dāng)用戶從圖庫(kù)中選擇照片時(shí),頂部應(yīng)用欄將轉(zhuǎn)換為具有與所選照片相關(guān)的操作的上下文應(yīng)用欄。
當(dāng)頂部應(yīng)用欄轉(zhuǎn)換為上下文操作欄時(shí),會(huì)發(fā)生以下更改:
a.欄的填充色發(fā)生變化
b.導(dǎo)航圖標(biāo)被替換為關(guān)閉圖標(biāo)
c.應(yīng)用欄標(biāo)題文字轉(zhuǎn)換為上下文操作欄文字
d.頂部應(yīng)用欄操作將替換為上下文操作
關(guān)閉后,上下文操作欄將轉(zhuǎn)換回頂部應(yīng)用欄。
布局
當(dāng)頂部應(yīng)用欄轉(zhuǎn)換為上下文操作欄時(shí),欄應(yīng)該更改顏色以指示狀態(tài)的更改。
三、底部導(dǎo)航 (Bottom Navigation)
底部導(dǎo)航欄使用戶可以在APP中的主要頁(yè)面之間自由切換。
底部導(dǎo)航欄位于屏幕的底部,通常顯示3~5個(gè)入口。每個(gè)入口都由一個(gè)圖標(biāo)和一個(gè)文本標(biāo)簽(可選)表示。
點(diǎn)擊底部導(dǎo)航圖標(biāo)時(shí),用戶將被帶到與該圖標(biāo)關(guān)聯(lián)的頁(yè)面。
原則
1、人體工學(xué)
在手持移動(dòng)設(shè)備上,底部導(dǎo)航欄很容易被觸及。
2、一致性
若使用底部導(dǎo)航欄,其將顯示在每個(gè)屏幕的底部。
3、關(guān)聯(lián)性
通過(guò)底部導(dǎo)航欄進(jìn)入的頁(yè)面,應(yīng)同等重要。
何時(shí)使用
應(yīng)該:
a.優(yōu)先級(jí)最高的頁(yè)面/功能,應(yīng)該從APP的任何位置都可以訪問(wèn)的
b.支持3~5個(gè)入口
c.僅限手機(jī)和平板使用
避免:
a.單個(gè)任務(wù),例如查看單個(gè)電子郵件
b.用戶首選項(xiàng)或設(shè)置
布局
根據(jù)入口數(shù)量:
a.3個(gè)入口:顯示所的圖標(biāo)和文本標(biāo)簽。
b.4~5個(gè)入口:只有選中的入口才顯示圖標(biāo)和文本標(biāo)簽。未選中的顯示圖標(biāo),如果空間允許,則可以同時(shí)放置文本標(biāo)簽。
注:國(guó)內(nèi)APP一般很少遇到文本很長(zhǎng)的狀態(tài),如果做國(guó)外APP項(xiàng)目的,可以參考上圖這種方式。
標(biāo)記
底部導(dǎo)航圖標(biāo)可以在右上角加標(biāo)記。這些標(biāo)記可以包含動(dòng)態(tài)信息,例如許多待處理請(qǐng)求。
1.標(biāo)記
2.帶有數(shù)字的標(biāo)記
3.具有最多字符數(shù)的標(biāo)記
Material Design視覺(jué)設(shè)計(jì)語(yǔ)言概述(一)
全站高品質(zhì)素材免費(fèi)下載!