Material Design視覺(jué)設(shè)計(jì)語(yǔ)言(二)——Bars

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)下載!