作者隨設(shè)計(jì)組件進(jìn)行了一些總結(jié)，滿滿的干貨，希望對(duì)大家有所幫助。

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

組件的規(guī)范使用就是其中很重要的一章，只要你用對(duì)了組件，谷歌的活力、陽(yáng)光、理性就會(huì)從屏幕中迸發(fā)出來(lái)，感染到?jīng)]有國(guó)界、種族、性別、年齡限制的理性的正常人。

如果大家有時(shí)間還是建議去拜讀原著，不用翻墻。

下面是整理關(guān)于組件的關(guān)鍵點(diǎn)，在筆記里藏著，搬出來(lái)分享一下。

Bottom navigation底部導(dǎo)航

推薦用法：

• 3個(gè)導(dǎo)航分類(lèi)顯示圖標(biāo)和文本，4-5個(gè)的話非活動(dòng)的不顯示文本。
• 向下滾動(dòng)時(shí)可以和狀態(tài)欄一起隱藏，增加全浸式體驗(yàn)。
• 不要使用橫向屏幕滾動(dòng)在活動(dòng)與非活動(dòng)視圖之間轉(zhuǎn)換。
• 后退鍵不可以在導(dǎo)航欄之間切換。
• 它的高度是8DP。

Bottom sheets底板

Modal bottom sheets 模態(tài)底板：簡(jiǎn)單對(duì)話框的形式，如分享。

Persistent bottom sheets 持久底板：提供應(yīng)用程序內(nèi)容，如音樂(lè)播放。（移動(dòng)端100%寬度展示，平板桌面可以插入，不必要全寬顯示）

模態(tài)底板可現(xiàn)實(shí)長(zhǎng)菜單名稱(chēng)，圖標(biāo)和菜單相關(guān)聯(lián)，帶子文本的菜單等 。

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

Buttons按鈕

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

Flat button 平面按鈕

減少干擾

焦點(diǎn)：12%的不透明度（文字顏色）

規(guī)格：

Raised buttons上升按鈕

• 緊急、匆忙的情境下使用。
• 突出、強(qiáng)調(diào)重要。
• 幫助組織UI，分隔信息。

Floating action buttons 懸浮按鈕

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

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

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

Dropdown buttons 下拉按鈕

Toggle buttons [右： icon toggles ]

切換按鈕

Cards?卡片

2DP高度、2DP圓角、可以有多個(gè)動(dòng)作，組織UI，分隔信息。

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

卡片有固定寬度和可變的高度，最高為平臺(tái)可用高度。

↓ 超過(guò)最大高度的信息將會(huì)被截?cái)?，不可滾動(dòng)（桌面可以），但可擴(kuò)展。

補(bǔ)充卡片

設(shè)計(jì)的時(shí)候可以從最基本的開(kāi)始，需要哪些元素就在基礎(chǔ)上補(bǔ)充。

UI控件

↑ 星級(jí)選項(xiàng)、選項(xiàng)卡、溢出菜單、滑塊、分段按鈕等[ Google強(qiáng)烈反對(duì)文本中帶有內(nèi)聯(lián)鏈接 ! ]

Chips芯片

• 高度32DP
• 芯片可以包含文本，照片、規(guī)則、圖標(biāo)、聯(lián)系人等。

如點(diǎn)擊可打開(kāi)菜單，點(diǎn)擊芯片出現(xiàn)郵箱選擇。

Date Tables數(shù)據(jù)表

• 多用于桌面產(chǎn)品
• 鼠標(biāo)懸浮要暗于選中的列表

Dalogs對(duì)話框

無(wú)標(biāo)題提醒對(duì)話框

有標(biāo)題提醒對(duì)話框

簡(jiǎn)單對(duì)話框

復(fù)雜對(duì)話框

全屏對(duì)話框

Dividers分隔器

• Full-bleed divider — inset dividers（滿血切割者 – 插入切割者）

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

Expansion panels擴(kuò)展面板

↑ 擴(kuò)展面板作為輕量級(jí)的容器，可獨(dú)立存在，也可以連接一個(gè)界面。

擴(kuò)展面板上可執(zhí)行輕量級(jí)的操作，如簡(jiǎn)單編輯，增加信息，避免繁瑣的操作。

↓ 下圖使用芯片可以讓修改變得輕松，幫助文檔協(xié)助用戶使用。

Grid lists網(wǎng)格列表

由重復(fù)圖案的細(xì)胞瓷磚垂直水平排列，不能滑動(dòng)，不建議網(wǎng)格的水平滾動(dòng)。

網(wǎng)格列表：適合展示相同類(lèi)型的內(nèi)容，主要是圖像。單個(gè)Cell里可以在頂部和底部用暗紗幫助展示提醒信息。另外還可以添加按鈕。

Lists列表

排序：按文件類(lèi)型、文件大小、字母順序、時(shí)間日期或其他參數(shù)進(jìn)行排序。

最具有特色的放置在瓷磚左側(cè)。

大部分區(qū)域用于主要?jiǎng)幼鳌Ｐ〔糠謪^(qū)域用于補(bǔ)充動(dòng)作。

長(zhǎng)按列表觸發(fā)單個(gè)列表的操作，批量操作屬于工具欄的范疇，因?yàn)楣ぞ邫诮y(tǒng)治著所有在它下面滾動(dòng)的元素。

舉個(gè)例子，長(zhǎng)按列表前后應(yīng)該顯示為：下圖的上下半部分。（不糾結(jié)于樣式）

錯(cuò)誤：長(zhǎng)按單個(gè)商品后顯示下左圖。（右圖為點(diǎn)擊列表右上角3個(gè)小黑點(diǎn)時(shí)的交互，應(yīng)該是長(zhǎng)按的交互）

（2017.04.01的zara）

Lists : Controls列表：控件

• Check box 復(fù)選框
• Switch 開(kāi)關(guān)
• Reorder 重新排序
• Leave-behinds 保留
• Expend/collapse 展開(kāi)/折疊

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

Menus菜單

子菜單每層高度+1DP.

↓ 如果內(nèi)容比較多，默認(rèn)顯示滾動(dòng)條。

下拉菜單點(diǎn)擊后，當(dāng)前選擇項(xiàng)應(yīng)處于默認(rèn)覆蓋位置，并突出顯示。

規(guī)格：

Picker選擇器

• 日期選擇器
• 時(shí)間選擇器（感覺(jué)瀑布流的更好用）

Progress&activity?加載

• linear 線性
• cirular 圓形
• circular with intergration 圓形一體化

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

圓形一體化

Selection controls?選擇控件

• Check box 復(fù)選
• Radio button 單選按鈕
• Switch 開(kāi)關(guān)

Sliders滑塊

做得好，用戶喜歡與它們互動(dòng)。做得不好，會(huì)產(chǎn)生挫敗。

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

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

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

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

Snackbars & Toasts?零食吧臺(tái)與面包機(jī)

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

Snackbars：

可以有文本按鈕（1個(gè)），但是不能有ICON。比toast多了個(gè)按鈕，例如微信收藏的增加標(biāo)簽，還有很多產(chǎn)品用于撤銷(xiāo)。
因?yàn)楦叨扰c懸浮按鈕相同，不應(yīng)影響彼此的顯示。

Toasts

推薦顯示1.5秒。（視覺(jué)暫留達(dá)到峰值的最短時(shí)間）

Steppers 步驟提醒器

Editable steps可編輯

Mobile steps 可選步驟（標(biāo)記可選）

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

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

Subheaders 子標(biāo)題

子標(biāo)題與內(nèi)容相關(guān)。他們通常與過(guò)濾或排序標(biāo)準(zhǔn)相關(guān)。

Tabs標(biāo)簽

基礎(chǔ)款—文字圖標(biāo)款—圖標(biāo)款(不推薦混合) ↓

擴(kuò)展應(yīng)用欄–插入搜索–可滾動(dòng) ↓（注意可滾動(dòng)的標(biāo)簽位置）

標(biāo)簽內(nèi)容最好單行，如果需要被截?cái)嘀皯?yīng)被包裹到第二行 ↓

Text fields文本字段

未輸入提醒（必填+星號(hào)暗示）

焦點(diǎn)提醒

非重要信息提醒（文本、備注輸入） ↑

重要信息提醒 （資料填寫(xiě)）

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

錯(cuò)誤提醒：(無(wú)輸入信息錯(cuò)誤提醒,輸入信息錯(cuò)誤提醒)

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

Toolbars?工具欄

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

工具欄的操作不能被另外的材料分隔，除了對(duì)話框之類(lèi)的臨時(shí)操作。相反工具欄可以限制他們的寬度。

Tooltips?工具提醒

多用于桌面

通過(guò)鼠標(biāo)懸停，點(diǎn)擊并按住一個(gè)項(xiàng)目觸發(fā)工具提醒，（移動(dòng)端按住觸發(fā)）只要用戶沒(méi)有離開(kāi)元素，保持顯示。顯示時(shí)間為1.5秒，如果在此之前采取另一個(gè)操作，則提醒立刻消失。

Types of widgets?窗口小部件

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

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

可快速保存文字，即時(shí)拍照，語(yǔ)音等。

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

Google從一個(gè)個(gè)組件和一顆顆像素之中展現(xiàn)出對(duì)生命的尊重與熱愛(ài)，給我們帶來(lái)驚喜。同時(shí)也在指導(dǎo)我們?nèi)绾蝕oogle精神設(shè)計(jì)生活、交互世界。

本文由 @白無(wú)馬 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。