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

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

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

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

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

Bottom navigation底部導航

推薦用法：

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

Bottom sheets底板

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

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

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

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

Buttons按鈕

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

Flat button 平面按鈕

減少干擾

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

規(guī)格：

Raised buttons上升按鈕

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

Floating action buttons 懸浮按鈕

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

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

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

Dropdown buttons 下拉按鈕

Toggle buttons [右： icon toggles ]

切換按鈕

Cards?卡片

2DP高度、2DP圓角、可以有多個動作，組織UI，分隔信息。

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

卡片有固定寬度和可變的高度，最高為平臺可用高度。

↓ 超過最大高度的信息將會被截斷，不可滾動（桌面可以），但可擴展。

補充卡片

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

UI控件

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

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ù)進行排序。

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

大部分區(qū)域用于主要動作。小部分區(qū)域用于補充動作。

長按列表觸發(fā)單個列表的操作，批量操作屬于工具欄的范疇，因為工具欄統(tǒng)治著所有在它下面滾動的元素。

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

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

（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 圓形一體化

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

圓形一體化

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)品用于撤銷。
因為高度與懸浮按鈕相同，不應影響彼此的顯示。

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ǔ)款—文字圖標款—圖標款(不推薦混合) ↓

擴展應用欄–插入搜索–可滾動 ↓（注意可滾動的標簽位置）

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

Text fields文本字段

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

焦點提醒

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

重要信息提醒 （資料填寫）

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

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

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

Toolbars?工具欄

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

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

Tooltips?工具提醒

多用于桌面

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

Types of widgets?窗口小部件

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

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

可快速保存文字，即時拍照，語音等。

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

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

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