浮動按鈕

浮動按鈕是一個改進操作的一個特殊例子。它有一個浮在整個界面之上的圖標，并且在改變、啟動、轉換錨點時有特殊的動作，這使得浮動按鈕與其他的按鈕區(qū)別開來。

浮動按鈕的大小有兩種：默認大小的和迷你版的。迷你版的浮動按鈕只應在需要和屏幕上的其他元素產(chǎn)生視覺上的延續(xù)性時使用。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-floatingactionbuttonFAB02b_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-floatingactionbuttonFAB02a_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-floatingactionbuttonFAB3_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-floatingactionbuttonFAB4_large_mdpi.png" alt="" />

相關內(nèi)容

不是每個界面都需要一個浮動按鈕。浮動按鈕應該包含一個應用里最主要的操作。在屏幕的左側的界面中，它最主要的操作通過點擊屏幕來打開圖庫里的圖片，所以這里不需要浮動按鈕。而在屏幕的右側的界面里，它最主要的功能是添加文件。對于這種情況，放置一個浮動按鈕是比較合適的。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-associatedcontent-FAB03do1_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-associatedcontent-FAB03do2_large_mdpi.png" alt="" />

(上圖)可取

浮動按鈕是界面里最突出的按鈕，所以一個界面盡量只使用一個浮動按鈕。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-associatedcontent-FAB04dont1_large_mdpi.png" alt="" />

(上圖)不可取

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-associatedcontent-FAB04dont2_large_mdpi.png" alt="" />

(上圖)不可取

不要在對話框里用浮動按鈕。用扁平的按鈕即可。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-associatedcontentFAB05do_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-associatedcontentFAB05dont_large_mdpi.png" alt="" />

(上圖)不可取

不要把浮動按鈕吸附在側邊抽屜（Side drawer）的邊上，這會使得用戶分心，不能完成當前的操作。側邊抽屜（Side drawer）是用來作導航的。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-associatedcontentFAB07do_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-associatedcontentFAB07dont_large_mdpi.png" alt="" />

(上圖)不可取

不要把浮動按鈕和下拉菜單關聯(lián)到一起。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-associatedcontentFAB08do_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-associatedcontentFAB08dont_large_mdpi.png" alt="" />

(上圖)不可取

相關動作

把多出來的操作放在工具欄的“溢出（overflow）”菜單里面，而非浮動按鈕里面。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-relatedactionsFAB09do1_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-relatedactionsFAB09do2_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-relatedactionsFAB10dont1_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-relatedactionsFAB10dont2_large_mdpi.png" alt="" />

(上圖)不可取

如果一個應用的特點是添加文件種類，那么浮動按鈕在首次點擊后可以變成幾個相關的按鈕。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-relatedactionsFAB11do1_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-relatedactionsFAB11do2_large_mdpi.png" alt="" />

(上圖)不可取

但是，如果你點擊浮動按鈕后出現(xiàn)的動作選項與浮動按鈕無關，并且這些按鈕又不是浮動按鈕的表達意義的自然延伸，那么這些動作選項最好放到“溢出”菜單里面。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-relatedactionsFAB12dont1_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-relatedactionsFAB12dont2_large_mdpi.png" alt="" />

(上圖)不可取

如果點擊一個浮動按鈕后它變成一個工具條，那么這個工具條應該包含相關的選項。在這個例子里，用戶可以根據(jù)不同的選項來選擇添加媒體的類型。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-relatedactionsFAB13do1_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-relatedactionsFAB13do2_large_mdpi.png" alt="" />

(上圖)可取

不要將浮動按鈕變成一個包含不相干或讓人困惑的選項的工具條。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-relatedactionsFAB14dont1_large_mdpi.png" alt="" />

(上圖)不可取

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-relatedactionsFAB14dont2_large_mdpi.png" alt="" />

(上圖)不可取

浮動按鈕可以包含一列聯(lián)系人。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-relatedactionsFAB15do1_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-relatedactionsFAB15do2_large_mdpi.png" alt="" />

(上圖)可取

但它不應包含不相干的選項。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-relatedactionsFAB16dont1_large_mdpi.png" alt="" />

(上圖)不可取

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-relatedactionsFAB16dont2_large_mdpi.png" alt="" />

(上圖)不可取

特性

使用浮動按鈕做一些保護性的操作，像創(chuàng)建、加入我的最愛、分享、導航和瀏覽。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-qualitiesFAB17_large_mdpi.png" alt="" />

(上圖)可取

通常情況下，避免用浮動按鈕做一些破壞性的操作，比如歸檔或刪除到垃圾箱；不夠明確的動作；警告或標記為錯誤；像剪切文本這樣受限制的任務；或是應該在工具欄里出現(xiàn)的操作，比如調(diào)節(jié)音量或是改變字體顏色。浮動按鈕不應包含應用欄（譯者注：工具欄、狀態(tài)欄之類）上的圖標或是狀態(tài)欄上的信息，比如通知。不要在浮動按鈕上放置任何標記或是其他元素。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-qualitiesFAB18_large_mdpi.png" alt="" />

(上圖)不可取

為了保持一致性，要始終使用圓形的浮動按鈕，這樣不致于讓用戶感到困惑。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-qualitiesFAB20do_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-qualitiesFAB20dont_large_mdpi.png" alt="" />

(上圖)不可取

不要讓浮動按鈕跳起來。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-qualitiesFAB21do_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-qualitiesFAB21dont_large_mdpi.png" alt="" />

(上圖)不可取

放置位置

你可以根據(jù)圖框的間距規(guī)則放置浮動按鈕，你也可以把浮動按鈕吸附擴展的應用欄（譯者注：工具欄、狀態(tài)欄之類）的邊上。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-placementFAB23do1_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-placementFAB23do2_large_mdpi.png" alt="" />

(上圖)可取

浮動按鈕可以附在頁腳或是某塊擴展的區(qū)域的邊上。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-placementFAB24do1_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-placementFAB24do2_large_mdpi.png" alt="" />

(上圖)可取

不能把隨意地把浮動按鈕放到一個位置。當浮動按鈕附在工具欄上時候要注意，它可能會和其他控件重疊或覆蓋。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-placementFAB25dont1_large_mdpi.png" alt="" />

(上圖)不可取

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-placementFAB25dont2_large_mdpi.png" alt="" />

(上圖)不可取

浮動按鈕可以附在一個延伸的頁頭上。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-placementFAB26_large_mdpi.png" alt="" />

(上圖)可取

浮動按鈕可以附在工具欄邊上，也可以附在一塊區(qū)域的結構化的元素（只要它不蓋住其他元素）上。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-placementFAB27_large_mdpi.png" alt="" />

(上圖)可取

浮動按鈕可以附在某塊區(qū)域的邊緣上。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-placementFAB28_large_mdpi.png" alt="" />

(上圖)可取

不要在一個界面里放置多個浮動按鈕。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-placementFAB29_large_mdpi.png" alt="" />

(上圖)不可取

不要把浮動按鈕吸附在抽屜邊上或放到抽屜里面。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-placementFAB30_large_mdpi.png" alt="" />

(上圖)不可取

不要把一個界面里的每個控件都關聯(lián)一個浮動按鈕。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-placementFAB31_large_mdpi.png" alt="" />

(上圖)不可取

不要讓提示框（譯者注：原文snackbars or toasts，是兩種UI元素,具體可以查看Componnent>Snackbars and Toasts里的解釋）遮住浮動按鈕。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-placement13do1_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-placement14dont1_large_mdpi.png" alt="" />

(上圖)不可取

原文：Promoted Actions 翻譯：ZeroLu 校對：sisyphus60