Google的材料設計規范是每位設計師都需要了解的，作為西半球最牛逼的公司之一，Google聚集了世界上最優秀的設計大蟲，為開發者制定了一套具有Google精神的設計規范。

組件的規范使用就是其中很重要的一章，只要你用對了組件，谷歌的活力、陽光、理性就會從屏幕中迸發出來，感染到沒有國界、種族、性別、年齡限制的理性的正常人。

如果大家有時間還是建議去拜讀原著，不用翻墻。（瀏覽器中打開）↓
https://material.io/guidelines/
下面是整理關于組件的關鍵點，以前在印象筆記里藏著，搬出來分享一下。

Bottom navigation

底部導航

推薦用法：

• 3個導航分類顯示圖標和文本，4-5個的話非活動的不顯示文本。
• 向下滾動時可以和狀態欄一起隱藏，增加全浸式體驗。
• 不要使用橫向屏幕滾動在活動與非活動視圖之間轉換。
• 后退鍵不可以在導航欄之間切換。
• 它的高度是8DP。

Bottom sheets

底板

分類：

Modal bottom sheets 模態底板：簡單對話框的形式，如分享。
Persistent bottom sheets 持久底板：提供應用程序內容，如音樂播放。（移動端100%寬度展示，平板桌面可以插入，不必要全寬顯示）

模態底板可現實長菜單名稱，圖標和菜單相關聯，帶子文本的菜單等 。

模態底板可用于提供來自 [其它應用程序的內容] 或 [空間深層鏈接]。
如需提供關閉底板的按鈕，應用 [ X ] 而不是 [ ← ]。

Buttons

按鈕

分類：

• Flat button 平面按鈕
• Raised button 上升按鈕
• Floating action button 浮動按鈕
• Dropdown buttons 下拉按鈕
• Toggle buttons 切換按鈕

• Flat button 平面按鈕：
  減少干擾

焦點：12%的不透明度（文字顏色）

規格：

• Raised buttons
  上升按鈕

1.緊急、匆忙的情境下使用。
2.突出、強調重要。
3.幫助組織UI，分隔信息。

• Floating action buttons
  懸浮按鈕

1.默認56DP，圓形。（觸摸按鍵大小應在7---10mm，56dp的物理長度為9mm）
2.跨越屏幕時應短暫消失，如有必要可移動到其他位置，如：和FAB高度一樣的Snack bar彈出時。（微信收藏文章時彈出Snack bar）
3.當屏幕寬度為460DP或更小時，更改為微型大小40DP。
4.每個屏幕只推薦1個浮動按鈕（需要使用2個時請保證2個按鈕的執行不同的操作），執行相關的主要操作（積極）。
5.避免遮住主要內容。
6.推薦3-6個選項。

↑ 浮動按鈕不是溢出菜單。選項里也不應包含溢出菜單。（溢出菜單屬于工具欄）

↓ 正確使用：（懸浮按鈕變形至下圖，可以伴隨推動其他組件）

• Dropdown buttons
  下拉按鈕

• Toggle buttons
  [右： icon toggles ]
  切換按鈕

Cards

卡片

2DP高度、2DP圓角、可以有多個動作。

↓ 從左到右：瓷磚（直角）、列表（加了一條線的瓷磚）、卡片（圓角、陰影）

卡片有固定寬度和可變的高度，最高為平臺可用高度。
↓ 超過最大高度的信息將會被截斷，不可滾動（桌面可以），但可擴展。

補充卡片
設計的時候可以從最基本的開始，需要哪些元素就在基礎上補充。

UI控件

↑ 星級選項、選項卡、溢出菜單、滑塊、分段按鈕等
[ Google強烈反對文本中帶有內聯鏈接 ! ]

卡片內容塊尺寸參考：
https://material.io/guidelines/components/cards.html#cards-content-blocks

Chips

芯片

高度32DP
芯片可以包含文本，照片、規則、圖標、聯系人等。

如點擊可打開菜單，點擊芯片出現郵箱選擇。

Date Tables

數據表

[多用于桌面產品]
鼠標懸浮要暗于選中的列表

Dalogs

對話框

• 無標題提醒對話框

• 有標題提醒對話框

• 簡單對話框

• 復雜對話框

• 全屏對話框

  
  

Dividers

分隔器

Full-bleed divider --- inset dividers
滿血切割者 - 插入切割者

不必要的分隔會讓用戶困惑（如右圖用多個滿血分割線，或多個插入分割線）

Expansion panels

擴展面板

↑ 擴展面板作為輕量級的容器，可獨立存在，也可以連接一個界面。

擴展面板上可執行輕量級的操作，如簡單編輯，增加信息，避免繁瑣的操作。
↓ 下圖使用芯片可以讓修改變得輕松，幫助文檔協助用戶使用。

Grid lists

網格列表

由重復圖案的細胞瓷磚垂直水平排列，不能滑動，不建議網格的水平滾動。

網格列表：適合展示相同類型的內容，主要是圖像。單個Cell里可以在頂部和底部用暗紗幫助展示提醒信息。

Lists

列表

適合包含多種數據類型的一組數據。

過濾與排序：
按文件類型、文件大小、字母順序、時間日期或其他參數進行排序。

最具有特色的防止在瓷磚左側。
大部分區域用于主要動作。小部分區域用于補充動作。
最總要的內容放在第一行。

舉個例子，長按前后應該顯示為：下圖的上下半部分。

錯誤：長按單個商品后顯示下左圖。（右圖為點擊列表右上角3個小黑點時的交互，應該是長按的交互）

（2017.04.01的zara）

Lists : Controls

列表：控件

類型：
Check box 復選框
Switch 開關
Reorder 重新排序
Leave-behinds 保留
Expend/collapse 展開/折疊

檢查-內聯信息-嵌套菜單指示器 ↓

Menus

菜單

子菜單每層高度+1DP.

↓ 如果內容比較多，默認顯示滾動條。

規格：

Picker

選擇器

日期選擇器
時間選擇器（感覺瀑布流的更好用）

Progress&activity

加載

分類：
linear 線性
cirular 圓形
circular with intergration 圓形一體化

↑ 線性，↓ 圓形確定時間與模糊時間。（用于加載頁面、視頻、圖片）

圓形一體化

↓ 加載其他內容

Selection controls

選擇控件

Check box 復選框
Radio button 單選按鈕
Switch 開關

Sliders

滑塊

滑塊是涼的。做得好，用戶喜歡與它們互動。做得不好，會產生挫敗。

Continuous slider 連續滑塊
Discrete slider 離散滑塊

Continuous slider 連續滑塊：只需要模糊值或相對值。

如果需要輸入特定值也可以 ↑

Discrete slider 離散滑塊：需要特定值得目標設置。

Snackbars & toasts

零食吧臺與面包機

snack、toast、cookie---哎，最近衣服又瘦了。

Snackbars：
可以有文本按鈕（1個），但是不能有ICON。比Toast多個按鈕，例如微信收藏的增加標簽，還有很多產品用于撤銷。
因為高度與懸浮按鈕相同，不應影響彼此的顯示。

Toasts

推薦顯示1.5秒。（視覺暫留達到峰值的最短時間）

Steppers

步驟提醒器

Editable steps

Mobile steps
可選步驟（標記可選）

vertical steppers 垂直步驟
horizontal steppers（stepper feedback ） 水平步驟（步驟反饋）

stepper feedback 步驟反饋:切換步驟時及時給予反饋（右 ↑）

Subheaders

子標題

子標題可以與瓷磚一起顯示或與內容相關。他們通常與過濾或排序標準相關。

Tabs

標簽

基礎款---文字圖標款---圖標款(不推薦混合) ↓

擴展應用欄--插入搜索--可滾動 ↓

標簽內容最好單行，如果需要被截斷之前應被包裹到第二行 ↓

Text fields

文本字段

未輸入提醒（必填+星號暗示）

焦點提醒

非重要信息提醒（文本、備注輸入） ↑
重要信息提醒 （資料填寫）↓

計數器文本輸入提醒

錯誤提醒：
(無輸入信息錯誤提醒,輸入信息錯誤提醒)

輸入（搜索）補全：(在輸入框補全,下拉列表中補全)

Toolbars

工具欄

被統治的內容在工具欄下方滾動。

工具欄的操作不能被另一張材料分隔，除了對話框之類的臨時操作。相反工具欄可以限制他們的寬度。

Tooltips

工具提醒

通過鼠標懸停，點擊并按住一個項目觸發工具提醒，（移動端按住觸發）只要用戶沒有離開元素，保持顯示。
顯示時間為1.5秒，如果在此之前采取另一個操作，則提醒立刻消失。

Types of widgets

窗口小部件

窗口小部件是非常精致而方便的功能，例如印象筆記、日歷、chrome等。
它們顯示對用戶重要的幾個要素，提供快速的信息獲取功能使用。

可以觸發而不打開應用：

調整大小和位置

Google從一個個組件和一顆顆像素之中展現出對生命的尊重與熱愛，給我們帶來驚喜。同時也在指導我們如何用google精神設計生活、交互世界。

公眾號：白無馬
歡迎相互交流學習