Material Design（原質(zhì)化設(shè)計(jì)）是谷歌開發(fā)的一種視覺設(shè)計(jì)語言，它遵循了優(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)用欄提供了訪問抽屜導(dǎo)航的入口，以及最多可放置4個(gè)操作按鈕，包括懸浮操作按鈕（FAB）。

原則

1、可操作的

底部的應(yīng)用欄突出顯示重要的屏幕操作，并且讓浮動(dòng)操作按鈕更顯眼。

2、靈活的

底部應(yīng)用欄的布局和操作會(huì)根據(jù)屏幕的需要而變化。

3、人體工學(xué)

底部應(yīng)用欄可以通過移動(dòng)設(shè)備上的手持位置輕松到達(dá)。

何時(shí)使用

應(yīng)該：

1.僅限移動(dòng)設(shè)備

2.訪問底部抽屜導(dǎo)航

3.屏幕有2～5個(gè)操作

避免：

1.已有底部導(dǎo)航欄的APP

2.屏幕只有1個(gè)或沒有操作

布局

底部應(yīng)用欄基于FAB的存在及其在欄中的位置，有三種不同的布局。這些布局決定了可以包含在欄中的操作數(shù)。

1、FAB居中

在主屏幕上使用底部應(yīng)用欄，其中包含抽屜導(dǎo)航控件和突出操作按鈕（例如FAB）。可以在欄的另一側(cè)放置最少1個(gè)，最多2個(gè)附加操作。

2、FAB位于邊緣

在次級(jí)頁面上使用FAB，需要懸浮操作按鈕和3～4個(gè)其他操作。

3、無FAB

當(dāng)不需要懸浮操作按鈕時(shí)，底部應(yīng)用欄可以防止更多菜單里的操作，并且在相對(duì)邊緣上最多可以放置4個(gè)操作圖標(biāo)。

懸浮操作按鈕

若有懸浮操作圖標(biāo)，那么懸浮操作按鈕（FAB）將以以下列兩種方式，顯示在底部應(yīng)用欄上：

1.重疊：FAB的水平高于底部應(yīng)用欄（基于Z軸），并且對(duì)條形的形狀沒有影響。

2.插入：FAB與底部應(yīng)用欄處于同一水平，并且欄形狀改變，以便于FAB可剛好放在底部應(yīng)用欄中的凹槽中。

特別注意

1、覆蓋

底部應(yīng)用欄可以被鍵盤和其他臨時(shí)元素覆蓋。如果你的APP需要長時(shí)間/經(jīng)常遮住底部應(yīng)用欄，則應(yīng)使用其他的組件。

2、導(dǎo)航

底部應(yīng)用欄可以顯示菜單圖標(biāo)以打開底部導(dǎo)航抽屜，但該欄本身不應(yīng)包含任何導(dǎo)航操作（例如返回上一頁面或關(guān)閉頁面的圖標(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)用欄中（用于訪問）

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è)頁面的頂部，并且可以在滾動(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īng)用欄中放置元素：

a.將導(dǎo)航放在最左側(cè)

b.將標(biāo)題放在導(dǎo)航的右側(cè)

c.將上下文操作放在導(dǎo)航的右側(cè)

d.將更多菜單放在最右側(cè)

對(duì)于從右往左看的語言，應(yīng)該翻轉(zhuǎn)放置位置。

1、兩種表現(xiàn)方式

突出的頂部應(yī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è)頁面

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)用欄可以保留在原位，也可以通過以下方式進(jìn)行轉(zhuǎn)換：

a.向上滾動(dòng)時(shí)隱藏頂部應(yīng)用欄

b.向下滾動(dòng)時(shí)顯示頂部應(yīng)用欄

下文操作欄

用法

頂部應(yīng)用欄可以轉(zhuǎn)換為上下文操作欄，以便于為所選項(xiàng)目提供上下文操作。

例如，當(dāng)用戶從圖庫中選擇照片時(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中的主要頁面之間自由切換。

底部導(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)的頁面。

原則

1、人體工學(xué)

在手持移動(dòng)設(shè)備上，底部導(dǎo)航欄很容易被觸及。

2、一致性

若使用底部導(dǎo)航欄，其將顯示在每個(gè)屏幕的底部。

3、關(guān)聯(lián)性

通過底部導(dǎo)航欄進(jìn)入的頁面，應(yīng)同等重要。

何時(shí)使用

應(yīng)該：

a.優(yōu)先級(jí)最高的頁面/功能，應(yīng)該從APP的任何位置都可以訪問的

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

注：國內(nèi)APP一般很少遇到文本很長的狀態(tài)，如果做國外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視覺設(shè)計(jì)語言概述（一）

原創(chuàng)： 宛蘇