一、按鈕（Buttons）按鈕允許用戶只需輕按一下即可進行操作并做出選擇。

按鈕傳達用戶可以采取的操作。它們通常被用在整個UI中，例如：

? 對話框

? 模態(tài)窗口

? 列表

? 卡片

? 工具欄

 原則1、易讀性按鈕應該明確表明可以觸發(fā)一個動作。2、可查找按鈕應該很容易在其他元素中找到。3、清晰按鈕的操作和狀態(tài)應該清晰。

 類型1、文本按鈕（重要性低）文本按鈕通常用于不太重要的操作。2、線框按鈕（重要性中）由于帶有一個底框，線框按鈕用于比文本按鈕強調(diào)性更強。3、填充按鈕（重要性高）填充按鈕強調(diào)性更強，因為使用了顏色填充和陰影。4、切換按鈕切換按鈕通過布局和間距，對一組操作進行分組。它們的使用頻率低于其他3種按鈕類型。

 層級1、一個突出的按鈕一個布局應包含一個突出顯示的按鈕，以清楚地襯托出其他按鈕在層級中的重要性較低。這個高度強調(diào)的按鈕最引人注意。2、其他按鈕在APP的布局中，可以同時顯示多個按鈕，因此高度強調(diào)的按鈕可以伴隨中等和低強調(diào)按鈕，這些按鈕常用來執(zhí)行不太重要的操作。

使用多個按鈕時，請確保一個按鈕的可用狀態(tài)，不會看起來像另一個按鈕的禁用狀態(tài)。

 位置同一個頁面中，使用多種按鈕類型可用于表示不同的強調(diào)程度。以上布局使用了：

1.重要性最高的懸浮操作按鈕

2.重要性較高的紫色填充按鈕

3.重要性低的文本按鈕

 二、懸浮操作按鈕（FAB）懸浮操作按鈕（FAB）表示屏幕的主要操作。懸浮操作按鈕（FAB）在屏幕上執(zhí)行主要或最常見的操作。它出現(xiàn)在所有屏幕內(nèi)容的最前面，通常是一個圓形，中間有一個圖標。

FAB有三種類型：常規(guī)、迷你和擴展。 原則1、主要的FAB表示屏幕上的主要操作。2、建設性FAB應執(zhí)行建設性的操作（例如創(chuàng)建、分享或探索）。3、關聯(lián)性FAB應與其頁面內(nèi)容相關。

 類型1、常規(guī) FAB當屏幕寬度大于460dp時，默認常規(guī)FAB（56x56dp）。2、迷你 FAB迷你FAB應該用在較小的屏幕上。當屏幕寬度為460dp或更小時，常規(guī) FAB（56dp）的容器則會轉換為迷你FAB（40dp）。

迷你FAB還可用于與其他屏幕元素建立視覺連續(xù)性。3、擴展 FAB擴展FAB更寬，并包含文本標簽，圖標可選。 位置在移動設備上，擴展FAB應放置在右下角或底部中心。注：避免在底部應用欄上方使用擴展FAB，因為這樣會占用大量屏幕空間。如果它們必須是一對組合，則擴展FAB應在滾動時折疊。 用法懸浮操作按鈕（FAB）可以在當前頁面上觸發(fā)操作，也可以執(zhí)行跳轉到新頁面的操作。

FAB執(zhí)行重要的建設性操作，例如：

? 創(chuàng)建

? 收藏

? 分享

? 啟動進程

避免使用FAB執(zhí)行不重要或破壞性的操作，例如：

? 存檔或刪除

? 警報或錯誤

? 限制性的任務，如截斷文本

調(diào)整音量或字體顏色等的控件更適合用在工具欄。 快速展開按下FAB后，以快速展開的形式顯示3～6個相關動作。

若超過6個操作，則應使用其他操作來呈現(xiàn)它們而不是 FAB。

1、按下后，F(xiàn)AB 發(fā)出相關動作2、按下后，F(xiàn)AB 轉換為包含相關操作的菜單（僅限Android）

在Android上按下后，F(xiàn)AB可以轉換為包含相關操作的菜單。黑色蒙版表示暫時禁用了操作菜單之外的功能。菜單始終顯示在屏幕上，直到觸發(fā)操作或點擊黑色蒙版。 

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

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

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

作者： 宛蘇公眾號： 宛蘇