浮動(dòng)按鈕

浮動(dòng)按鈕是一個(gè)改進(jìn)操作的一個(gè)特殊例子。它有一個(gè)浮在整個(gè)界面之上的圖標(biāo)，并且在改變、啟動(dòng)、轉(zhuǎn)換錨點(diǎn)時(shí)有特殊的動(dòng)作，這使得浮動(dòng)按鈕與其他的按鈕區(qū)別開來(lái)。

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

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="" />

相關(guān)內(nèi)容

不是每個(gè)界面都需要一個(gè)浮動(dòng)按鈕。浮動(dòng)按鈕應(yīng)該包含一個(gè)應(yīng)用里最主要的操作。在屏幕的左側(cè)的界面中，它最主要的操作通過點(diǎn)擊屏幕來(lái)打開圖庫(kù)里的圖片，所以這里不需要浮動(dòng)按鈕。而在屏幕的右側(cè)的界面里，它最主要的功能是添加文件。對(duì)于這種情況，放置一個(gè)浮動(dòng)按鈕是比較合適的。

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="" />

(上圖)可取

浮動(dòng)按鈕是界面里最突出的按鈕，所以一個(gè)界面盡量只使用一個(gè)浮動(dòng)按鈕。

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="" />

(上圖)不可取

不要在對(duì)話框里用浮動(dòng)按鈕。用扁平的按鈕即可。

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="" />

(上圖)不可取

不要把浮動(dòng)按鈕吸附在側(cè)邊抽屜（Side drawer）的邊上，這會(huì)使得用戶分心，不能完成當(dāng)前的操作。側(cè)邊抽屜（Side drawer）是用來(lái)作導(dǎo)航的。

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="" />

(上圖)不可取

不要把浮動(dòng)按鈕和下拉菜單關(guān)聯(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="" />

(上圖)不可取

相關(guān)動(dòng)作

把多出來(lái)的操作放在工具欄的“溢出（overflow）”菜單里面，而非浮動(dòng)按鈕里面。

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="" />

(上圖)不可取

如果一個(gè)應(yīng)用的特點(diǎn)是添加文件種類，那么浮動(dòng)按鈕在首次點(diǎn)擊后可以變成幾個(gè)相關(guān)的按鈕。

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="" />

(上圖)不可取

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

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="" />

(上圖)不可取

如果點(diǎn)擊一個(gè)浮動(dòng)按鈕后它變成一個(gè)工具條，那么這個(gè)工具條應(yīng)該包含相關(guān)的選項(xiàng)。在這個(gè)例子里，用戶可以根據(jù)不同的選項(xiàng)來(lái)選擇添加媒體的類型。

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="" />

(上圖)可取

不要將浮動(dòng)按鈕變成一個(gè)包含不相干或讓人困惑的選項(xiàng)的工具條。

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="" />

(上圖)不可取

浮動(dòng)按鈕可以包含一列聯(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="" />

(上圖)可取

但它不應(yīng)包含不相干的選項(xiàng)。

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="" />

(上圖)不可取

特性

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

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

(上圖)可取

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

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

(上圖)不可取

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

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="" />

(上圖)不可取

不要讓浮動(dòng)按鈕跳起來(lái)。

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ī)則放置浮動(dòng)按鈕，你也可以把浮動(dòng)按鈕吸附擴(kuò)展的應(yīng)用欄（譯者注：工具欄、狀態(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="" />

(上圖)可取

浮動(dòng)按鈕可以附在頁(yè)腳或是某塊擴(kuò)展的區(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="" />

(上圖)可取

不能把隨意地把浮動(dòng)按鈕放到一個(gè)位置。當(dāng)浮動(dòng)按鈕附在工具欄上時(shí)候要注意，它可能會(huì)和其他控件重疊或覆蓋。

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="" />

(上圖)不可取

浮動(dòng)按鈕可以附在一個(gè)延伸的頁(yè)頭上。

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

(上圖)可取

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

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

(上圖)可取

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

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

(上圖)可取

不要在一個(gè)界面里放置多個(gè)浮動(dòng)按鈕。

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

(上圖)不可取

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

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

(上圖)不可取

不要把一個(gè)界面里的每個(gè)控件都關(guān)聯(lián)一個(gè)浮動(dòng)按鈕。

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

(上圖)不可取

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

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 校對(duì)：sisyphus60