Buttons: floating action button 浮動操作按鈕

這是一個翻譯系列，原文是谷歌18年所出的材料設計指南（文末有鏈接），強大的材料設計將帶我們一起深入了解UI設計中的所有規范。每周會更新數篇，一共百余篇，歡迎關注哦。

浮動操作按鈕（FAB）代表一個頁面的首要操作。

目錄

1. 用法
2. 剖析
3. 位置
4. 行為
5. 過渡類型
6. 擴展型FAB
7. 主題化
8. 規格

用法

浮動操作按鈕（FAB）在頁面上執行首要或最常見的操作。它出現在所有頁面內容的前面，通常是一個圓形，中間有一個圖標。FAB有三種類型：常規型、迷你型和擴展型。

只在作為展示頁面首要操作的最合適方式時，使用FAB。

原則

剖析

1. 容器
2. 圖標

容器

FAB通常顯示在圓形容器中。 App的顏色方案決定了它的填充顏色，這應該與FAB背后區域的顏色形成對比。

FAB容器有兩種尺寸：

1.默認（56 x 56dp）

2.迷你（40 x 40dp）

迷你FAB應該用在較小的頁面上。當頁面寬度為460dp或更小時，默認FAB（56dp）的容器應轉換為迷你尺寸（40dp）。

迷你FAB還可用于與其他頁面元素建立視覺連續性。

這個迷你FAB通過其下方文件夾圖標的對應尺寸、形狀和位置來創建視覺連續性。

圖標

FAB的圖標應清楚地說明其動作。FAB不應包含頁面上其他位置的通知或操作。

位置

FAB可以附加到頂部應用欄和某些組件的邊緣。

浮動操作按鈕（FAB）可以附加到頂部應用欄。

浮動操作按鈕（FAB）可以附加到頂部應用欄。

單個組件（如卡片）不能各自擁有自己的FAB。

行為

操作

浮動操作按鈕（FAB）可以在當前頁面上觸發操作，也可以執行創建新頁面的操作。

FAB可觸發重要的、建設性操作，例如：

1. 新建
2. 喜歡
3. 分享
4. 啟動一個過程

避免使用FAB進行不重要的或破壞性操作，例如：

1. 存檔或刪除
2. 警報或錯誤
3. 限制性任務（如剪切文本）

更適合放工具欄的控件（如調整音量或字體顏色的控件）

使用FAB進行首要的積極操作。

不要將FAB用于輕微，溢出，不清楚或破壞性的操作。

動效

在整個用戶流程中，FAB位置保持一致。

出現在頁面上

當FAB在頁面上動時，它會從中心點向外擴展。其中的圖標也可以是動的。

雖然FAB應與頁面內容相關，但它們不會附加到所顯示內容的表面。FAB由于其相對重要性而與其他UI元素分開移動。

頁面轉換

FAB可以變形以啟動相關操作。當頁面更改其布局時，FAB應該消失并在轉換期間重新出現。

再現

只有當它與新頁面相關時，FAB才會重新出現。如果可能的話，它應該重新出現在相同的位置。

標簽式頁面

當存在標簽時，FAB應該短暫消失，然后在新內容移動到位時重新出現。這表示FAB未連接到任何特定選項標簽。

在標簽之間切換時，FAB消失然后重新出現。

在標簽之間切換時，FAB不與頁面內容一致移動。

過渡類型

快速撥號

按下時，FAB可以以快速撥號的形式顯示三到六個相關動作。此轉換可以通過以下方式之一進行：

1. 按下后，FAB可以彈出相關動作
2. 按下后，FAB可以轉換為包含相關操作的菜單（僅限Android）

如果需要超過六個操作，則應使用除FAB之外的其他組件來呈現它們。

發出相關動作

按下后，FAB仍然可見并發出一堆相關動作。如果在此狀態下按下FAB，則應啟動其默認操作或關閉快速撥號操作。

FAB顯示一堆相關操作。

轉換為包含相關操作的菜單

在Android中按下FAB后，它可以轉換為包含相關操作的菜單。遮罩表示暫時禁用了操作菜單之外的功能。只有點擊了某操作或遮罩后，菜單才消失。

FAB轉換為操作菜單

變形

FAB使用容器變形模式來變換成各種表面。

屏幕內

全屏

FAB可以轉換為跨越整個頁面的新表面。 這種類型的轉換通常用于創建新內容。

FAB可以轉換為跨越整個頁面的新表面。

擴展型FAB

擴展型FAB更寬，它包含文本標簽。

擴展型FAB

剖析

1. 容器
2. 圖標（可選）
3. 文字標簽

容器

擴展型FAB容器的寬度可以是固定的或流動的。

1. 固定寬度容器由圖標、文本標簽和內邊距的累積寬度而定。
2. 流體寬度容器由其與頁面上諸如頁面寬度或布局網格等內容的關系而定。

此固定擴展型FAB的寬度由圖標、文本標簽和容器填充的累積寬度定義。

此擴展的FAB容器寬度由布局網格而定。

圖標

擴展型FAB的圖標應直觀地表示其操作。

對于從左到右書寫的語言，圖標應放在文本標簽的左側。

對于從右到左書寫的語言，圖標應放在右側。

文本標簽

擴展型FAB的文本標簽應描述其行為。

位置

擴展型FAB可以位于頁面的中央，左側或右側。

桌面和平板電腦

對于大于840dp的界面（例如桌面），擴展型FAB應放在頁面的左上角或頁面的右下角。

在桌面端，擴展型FAB位于左上角

在桌面端，擴展型FAB位于右下角

移動端

在移動設備上，擴展型FAB應位于右下角或底部中間。

在移動設備上，擴展型FAB應位于右下角或底部中間

在移動設備上，擴展的FAB位于右下方

避免在底部應用欄上方使用擴展型FAB，因為該組合會占用大量頁面空間。如果它們已配對，則擴展型FAB應在滾動時折疊。

行為

快速撥號

當點擊時，擴展型FAB還可以顯示3-6個相關動作的快速撥號。在懸停時，這些相關操作會展開以顯示標簽。

在快速撥號轉換期間，擴展型FAB變為標準FAB。

擴展型FAB快速撥號

轉換為標準FAB

如果空間有限，擴展型FAB可以轉換為標準FAB。例如，如果App視區的大小調整為低于840dp，或者打開了導航抽屜。

擴展型FAB轉換為標準FAB

當滾動頁面時，擴展型FAB可以轉換為標準FAB。

在用戶滾動回頁面頂部之前，FAB不變回擴展型FAB。

用戶滾動到頁面頂部后，擴展型FAB轉換為標準FAB

主題化

Reply素材主題

此電子郵件App的浮動操作按鈕已使用材料主題進行自定義。定制領域包括顏色和形狀。

Reply自定義的FAB

顏色

Reply的擴FAB在兩個元素上使用了自定義顏色：容器，圖標和文本。

文本

Reply的擴展型FAB在其按鈕文本上使用了自定義排版。

形狀

Reply的FAB在其容器上使用了自定義形狀。

Posivibe’s材料主題

此社交媒體App的浮動操作按鈕已使用材料主題進行自定義。定制領域包括顏色和形狀。

Posivibe’s的自定義FAB

顏色

Posivibe’s的FAB在兩個元素上使用了自定義顏色：容器和圖標。

形狀

Posivibe’s的FAB在其容器上使用了自定義形狀。

Shrine材料主題

此零售App的擴展浮動操作按鈕已使用材料主題進行自定義。定制領域包括顏色、排版和形狀。

Shrine的自定義FAB

顏色

Shrine的擴展型FAB在兩個元素上使用自定義顏色：容器和文本。

文本

Shrine的擴展型FAB在其按鈕文本上使用了自定義排版。

形狀

Shrine的擴展型FAB在其容器上使用自定義形狀。

規格

浮動操作按鈕

常規型

迷你FAB

位置

擴展浮動操作按鈕

位置

原文地址：Material Design

譯者：珠珠

轉載請注明：學UI網 » Buttons: floating action button 浮動操作按鈕