Material Design（原質化設計）是谷歌開發(fā)的一種視覺設計語言，它遵循了優(yōu)秀設計的經典原則，同時還結合了創(chuàng)新理念和新技術。

欄（Bars）

一、應用欄：底部（APP Bars：bottom）

底部的應用欄在移動屏幕底部用于顯示導航和關鍵性操作。

底部應用欄提供了訪問抽屜導航的入口，以及最多可放置4個操作按鈕，包括懸浮操作按鈕（FAB）。

原則

1、可操作的

底部的應用欄突出顯示重要的屏幕操作，并且讓浮動操作按鈕更顯眼。

2、靈活的

底部應用欄的布局和操作會根據屏幕的需要而變化。

3、人體工學

底部應用欄可以通過移動設備上的手持位置輕松到達。

何時使用

應該：

1.僅限移動設備

2.訪問底部抽屜導航

3.屏幕有2～5個操作

避免：

1.已有底部導航欄的APP

2.屏幕只有1個或沒有操作

布局

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

1、FAB居中

在主屏幕上使用底部應用欄，其中包含抽屜導航控件和突出操作按鈕（例如FAB）?？梢栽跈诘牧硪粋确胖米钌?個，最多2個附加操作。

2、FAB位于邊緣

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

3、無FAB

當不需要懸浮操作按鈕時，底部應用欄可以防止更多菜單里的操作，并且在相對邊緣上最多可以放置4個操作圖標。

懸浮操作按鈕

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

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

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

特別注意

1、覆蓋

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

2、導航

底部應用欄可以顯示菜單圖標以打開底部導航抽屜，但該欄本身不應包含任何導航操作（例如返回上一頁面或關閉頁面的圖標）。APP的導航應放置在其他組件中，例如頂部應用欄或嵌入在屏幕上。

3、與頂部應用欄配對

與底部應用欄一起使用時，頂級應用欄可以提供向上的導航和其他操作。在整個APP中，應該在兩個欄上明確組織和劃分操作。

a.將單個導航菜單控件放在底部應用欄中（用于訪問）

b.將單個更多菜單控件放于底部應用欄的邊緣操作

c.將搜索操作（例如搜索圖標）放置在整個應用中一致的位置

d.破壞性操作放置在頂部應用欄中，例如“刪除”

4、Snackbars

Snackbars 與 Toasts 應在垂直于底部應用欄上方的位置進行動畫處理顯示，避免遮蓋底部應用欄。

二、應用欄：頂部 （App bars: top）

頂部應用欄顯示與當前屏幕相關的信息和操作。

原則

1、持久性

頂部應用欄始終顯示在APP中每個頁面的頂部，并且可以在滾動時消失。

2、引導性

頂部應用欄提供了引導用戶瀏覽應用的可靠方式。

3、一致性

頂部應用欄的位置和內容應一致，以提高熟悉度。

類型

常規(guī)的頂部應用欄

下文操作欄

上下文操作欄為所選項提供操作。頂部應用欄可以轉換為上下文操作欄，保持可操作狀態(tài)直到執(zhí)行操作或將其取消。

布局

對于從左往右看的語言，建議在頂部應用欄中放置元素：

a.將導航放在最左側

b.將標題放在導航的右側

c.將上下文操作放在導航的右側

d.將更多菜單放在最右側

對于從右往左看的語言，應該翻轉放置位置。

1、兩種表現方式

突出的頂部應用欄可包含更長的標題、背景圖片，或為頂部應用欄提供更強的存在感。

在突出型的頂部應用欄中使用背景圖片的注意事項：

2、導航圖標

導航圖標是可選的。當它出現在應用欄中時，它會與 Bar 的左側對齊。它可以是：

a.菜單圖標，用于打開導航抽屜

b.一個向上箭頭，用于瀏覽APP的層次結構

c.后退箭頭，返回上一個頁面

3、標題

應用欄標題可用于描述：

a.用戶當前所在的屏幕

b.用戶當前所在的部分

c.正在使用的應用程序

4、操作項和更多菜單

將最常用的操作放在左側，更少使用的操作依次向右放置。任何不適合應用欄的剩余操作項都可以放入更多菜單。

5、滾動

在滾動時，頂部應用欄可以保留在原位，也可以通過以下方式進行轉換：

a.向上滾動時隱藏頂部應用欄

b.向下滾動時顯示頂部應用欄

下文操作欄

用法

頂部應用欄可以轉換為上下文操作欄，以便于為所選項目提供上下文操作。

例如，當用戶從圖庫中選擇照片時，頂部應用欄將轉換為具有與所選照片相關的操作的上下文應用欄。

當頂部應用欄轉換為上下文操作欄時，會發(fā)生以下更改：

a.欄的填充色發(fā)生變化

b.導航圖標被替換為關閉圖標

c.應用欄標題文字轉換為上下文操作欄文字

d.頂部應用欄操作將替換為上下文操作

關閉后，上下文操作欄將轉換回頂部應用欄。

布局

當頂部應用欄轉換為上下文操作欄時，欄應該更改顏色以指示狀態(tài)的更改。

三、底部導航 （Bottom Navigation）

底部導航欄使用戶可以在APP中的主要頁面之間自由切換。

底部導航欄位于屏幕的底部，通常顯示3～5個入口。每個入口都由一個圖標和一個文本標簽（可選）表示。

點擊底部導航圖標時，用戶將被帶到與該圖標關聯的頁面。

原則

1、人體工學

在手持移動設備上，底部導航欄很容易被觸及。

2、一致性

若使用底部導航欄，其將顯示在每個屏幕的底部。

3、關聯性

通過底部導航欄進入的頁面，應同等重要。

何時使用

應該：

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

b.支持3～5個入口

c.僅限手機和平板使用

避免：

a.單個任務，例如查看單個電子郵件

b.用戶首選項或設置

布局

根據入口數量：

a.3個入口：顯示所的圖標和文本標簽。

b.4～5個入口：只有選中的入口才顯示圖標和文本標簽。未選中的顯示圖標，如果空間允許，則可以同時放置文本標簽。

注：國內APP一般很少遇到文本很長的狀態(tài)，如果做國外APP項目的，可以參考上圖這種方式。

標記

底部導航圖標可以在右上角加標記。這些標記可以包含動態(tài)信息，例如許多待處理請求。

1.標記

2.帶有數字的標記

3.具有最多字符數的標記

Material Design視覺設計語言概述（一）

原創(chuàng)： 宛蘇