Google的材料設(shè)計規(guī)范是每位設(shè)計師都需要了解的隐轩，作為西半球最牛逼的公司之一窗慎，Google聚集了世界上最優(yōu)秀的設(shè)計大蟲图云，為開發(fā)者制定了一套具有Google精神的設(shè)計規(guī)范惯悠。

組件的規(guī)范使用就是其中很重要的一章，只要你用對了組件竣况，谷歌的活力克婶、陽光、理性就會從屏幕中迸發(fā)出來，感染到?jīng)]有國界情萤、種族鸭蛙、性別、年齡限制的理性的正常人筋岛。

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

Bottom navigation

底部導航

推薦用法：

• 3個導航分類顯示圖標和文本柒傻，4-5個的話非活動的不顯示文本孝赫。
• 向下滾動時可以和狀態(tài)欄一起隱藏，增加全浸式體驗红符。
• 不要使用橫向屏幕滾動在活動與非活動視圖之間轉(zhuǎn)換青柄。
• 后退鍵不可以在導航欄之間切換。
• 它的高度是8DP预侯。

Bottom sheets

底板

分類：

Modal bottom sheets 模態(tài)底板：簡單對話框的形式刹前，如分享。
Persistent bottom sheets 持久底板：提供應(yīng)用程序內(nèi)容雌桑，如音樂播放喇喉。（移動端100%寬度展示，平板桌面可以插入校坑，不必要全寬顯示）

模態(tài)底板可現(xiàn)實長菜單名稱拣技，圖標和菜單相關(guān)聯(lián)，帶子文本的菜單等 耍目。

模態(tài)底板可用于提供來自 [其它應(yīng)用程序的內(nèi)容] 或 [空間深層鏈接]膏斤。
如需提供關(guān)閉底板的按鈕，應(yīng)用 [ X ] 而不是 [ ← ]邪驮。

Buttons

按鈕

分類：

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

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

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

規(guī)格：

• Raised buttons
  上升按鈕

1.緊急莫辨、匆忙的情境下使用。
2.突出毅访、強調(diào)重要沮榜。
3.幫助組織UI，分隔信息喻粹。

• Floating action buttons
  懸浮按鈕

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

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

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

• Dropdown buttons
  下拉按鈕

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

Cards

卡片

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

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

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

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

UI控件

↑ 星級選項依溯、選項卡、溢出菜單瘟则、滑塊黎炉、分段按鈕等
[ Google強烈反對文本中帶有內(nèi)聯(lián)鏈接 ! ]

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

Chips

芯片

高度32DP
芯片可以包含文本，照片醋拧、規(guī)則慷嗜、圖標、聯(lián)系人等丹壕。

如點擊可打開菜單庆械，點擊芯片出現(xiàn)郵箱選擇。

Date Tables

數(shù)據(jù)表

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

Dalogs

對話框

• 無標題提醒對話框

• 有標題提醒對話框

• 簡單對話框

• 復雜對話框

• 全屏對話框

  
  

Dividers

分隔器

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

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

Expansion panels

擴展面板

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

擴展面板上可執(zhí)行輕量級的操作忿峻，如簡單編輯，增加信息辕羽，避免繁瑣的操作逛尚。
↓ 下圖使用芯片可以讓修改變得輕松，幫助文檔協(xié)助用戶使用刁愿。

Grid lists

網(wǎng)格列表

由重復圖案的細胞瓷磚垂直水平排列绰寞，不能滑動，不建議網(wǎng)格的水平滾動铣口。

網(wǎng)格列表：適合展示相同類型的內(nèi)容滤钱，主要是圖像。單個Cell里可以在頂部和底部用暗紗幫助展示提醒信息脑题。

Lists

列表

適合包含多種數(shù)據(jù)類型的一組數(shù)據(jù)件缸。

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

最具有特色的防止在瓷磚左側(cè)已艰。
大部分區(qū)域用于主要動作痊末。小部分區(qū)域用于補充動作。
最總要的內(nèi)容放在第一行哩掺。

舉個例子凿叠，長按前后應(yīng)該顯示為：下圖的上下半部分。

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

（2017.04.01的zara）

Lists : Controls

列表：控件

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

檢查-內(nèi)聯(lián)信息-嵌套菜單指示器 ↓

Menus

菜單

子菜單每層高度+1DP.

↓ 如果內(nèi)容比較多，默認顯示滾動條誊薄。

規(guī)格：

Picker

選擇器

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

Progress&activity

加載

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

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

圓形一體化

↓ 加載其他內(nèi)容

Selection controls

選擇控件

Check box 復選框
Radio button 單選按鈕
Switch 開關(guān)

Sliders

滑塊

滑塊是涼的。做得好俏脊，用戶喜歡與它們互動全谤。做得不好，會產(chǎn)生挫敗爷贫。

Continuous slider 連續(xù)滑塊
Discrete slider 離散滑塊

Continuous slider 連續(xù)滑塊：只需要模糊值或相對值认然。

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

Discrete slider 離散滑塊：需要特定值得目標設(shè)置补憾。

Snackbars & toasts

零食吧臺與面包機

snack、toast卷员、cookie---哎盈匾，最近衣服又瘦了。

Snackbars：
可以有文本按鈕（1個）毕骡，但是不能有ICON削饵。比Toast多個按鈕，例如微信收藏的增加標簽未巫，還有很多產(chǎn)品用于撤銷窿撬。
因為高度與懸浮按鈕相同，不應(yīng)影響彼此的顯示叙凡。

Toasts

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

Steppers

步驟提醒器

Editable steps

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

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

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

Subheaders

子標題

子標題可以與瓷磚一起顯示或與內(nèi)容相關(guān)。他們通常與過濾或排序標準相關(guān)狭姨。

Tabs

標簽

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

擴展應(yīng)用欄--插入搜索--可滾動 ↓

標簽內(nèi)容最好單行宰啦，如果需要被截斷之前應(yīng)被包裹到第二行 ↓

Text fields

文本字段

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

焦點提醒

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

計數(shù)器文本輸入提醒

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

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

Toolbars

工具欄

被統(tǒng)治的內(nèi)容在工具欄下方滾動饼拍。

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

Tooltips

工具提醒

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

Types of widgets

窗口小部件

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

可以觸發(fā)而不打開應(yīng)用：

調(diào)整大小和位置

Google從一個個組件和一顆顆像素之中展現(xiàn)出對生命的尊重與熱愛，給我們帶來驚喜舀瓢。同時也在指導我們?nèi)绾斡胓oogle精神設(shè)計生活廷雅、交互世界。

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