對(duì)于帶有標(biāo)簽的屏幕，浮動(dòng)操作按鈕不應(yīng)朝著屏幕退出時(shí)的同一方向退出屏幕。否則會(huì)導(dǎo)致視覺(jué)噪音。這也將導(dǎo)致在屏幕上出現(xiàn)一個(gè)失靈的浮動(dòng)操作按鈕。此外，它錯(cuò)誤地暗示了浮動(dòng)操作按鈕與內(nèi)容在相同的 Z 水平高度上，而不是在根水平高度中 UI 主元素所在的水平高度的上。

(上圖)不可取

過(guò)渡

浮動(dòng)操作按鈕在 app 中，是其一個(gè)主要用途的獨(dú)特例子。利用它的可見(jiàn)性可為一個(gè)主要的 UI 元素創(chuàng)造愉快的過(guò)渡。

通常過(guò)渡包括觸發(fā)器、工具欄、快速撥號(hào)以及變形。當(dāng)然遠(yuǎn)不止這些。浮動(dòng)操作按鈕被設(shè)計(jì)的很靈活。你可以實(shí)驗(yàn)出最適合你的應(yīng)用和屏幕的過(guò)渡效果。

觸發(fā)器

浮動(dòng)操作按鈕可以只是簡(jiǎn)單地觸發(fā)一個(gè)操作或是某處的導(dǎo)航。觸摸脈動(dòng)的動(dòng)畫(huà)隨著導(dǎo)致變化的力量而向外擴(kuò)張。

一個(gè)浮動(dòng)操作按鈕可以簡(jiǎn)單地觸發(fā)一個(gè)操作。

浮動(dòng)操作按鈕讓地圖視圖回到中心位置

App 通常使用一個(gè)單一的浮動(dòng)操作按鈕。然而，本例使用了兩個(gè)浮動(dòng)操作按鈕，因?yàn)樗鼈儓?zhí)行同樣重要但獨(dú)特的操作。

工具欄

浮動(dòng)操作按鈕可在按下時(shí)或從滾動(dòng)工具欄轉(zhuǎn)換為工具欄。工具欄可以包含相關(guān)的操作、文本和搜索方面功能，或者任何手邊有用的部件。

浮動(dòng)操作按鈕變成一個(gè)工具欄

一個(gè)工具欄在滾動(dòng)條上消失對(duì)屏幕來(lái)說(shuō)非常有用。而整個(gè)工具欄在屏幕的初始輸入或一個(gè)長(zhǎng)列表的頂部或底部時(shí)非常需要。

工具欄在滾動(dòng)時(shí)轉(zhuǎn)變成一個(gè)浮動(dòng)操作按鈕

如果一個(gè)浮動(dòng)行為按鈕變成一個(gè)工具欄，那么這個(gè)工具欄應(yīng)包含相關(guān)的操作功能。

http://wiki.jikexueyuan.com/project/material-design/images/6_15.png" alt="" />

(上圖)可?。涸谶@個(gè)例子中，按鈕可以讓用戶選擇媒體類型來(lái)添加。

http://wiki.jikexueyuan.com/project/material-design/images/6_16.png" alt="" />

(上圖)不可?。翰灰ú幌嚓P(guān)或者混亂不清的操作。

快速撥號(hào)

浮動(dòng)動(dòng)作按鈕可在按下時(shí)將相關(guān)動(dòng)作實(shí)現(xiàn)。按鈕在菜單被調(diào)用后應(yīng)扔保留在屏幕上。點(diǎn)擊同一點(diǎn)應(yīng)能夠激活最常用的操作或關(guān)閉已打開(kāi)的菜單。

一個(gè)浮動(dòng)的操作按鈕能夠釋放相關(guān)的操作。

浮動(dòng)操作按鈕可以轉(zhuǎn)變?yōu)橐粋€(gè)包含所有操作的 material 單頁(yè)。

一個(gè)浮動(dòng)按鈕轉(zhuǎn)變?yōu)橐粋€(gè) material 單頁(yè)

作為一個(gè)通用規(guī)則，按動(dòng)按鈕時(shí)保持三個(gè)以上的選項(xiàng)，但不要超過(guò)六個(gè)，包括原來(lái)的浮動(dòng)操作按鈕。如果你有兩個(gè)選項(xiàng)，即，你的浮動(dòng)操作按鈕只彈出了另外一個(gè)選項(xiàng)——選擇哪個(gè)操作是最重要的。如果選項(xiàng)超過(guò)六個(gè)，用戶可能在選擇上有困惑。

通過(guò)給予用最好、最顯眼以及最少的選項(xiàng)來(lái)減少選擇疲勞。

http://wiki.jikexueyuan.com/project/material-design/images/6_17.png" alt="" width=240 height=426 />

一個(gè)浮動(dòng)操作按鈕至少應(yīng)該彈出三個(gè)以上的選項(xiàng)。

http://wiki.jikexueyuan.com/project/material-design/images/6_18.png" alt="" width=240 height=426 />

一個(gè)浮動(dòng)操作按鈕應(yīng)該彈出不超過(guò)六個(gè)選項(xiàng)。

不要在浮動(dòng)操作按鈕的選項(xiàng)中放置外鏈按鈕。從原始屏幕到目的頁(yè)面應(yīng)該最多兩次點(diǎn)擊。

http://wiki.jikexueyuan.com/project/material-design/images/6_19.png" alt="" width=360 height=256 />

選項(xiàng)應(yīng)該指明目的頁(yè)面。

http://wiki.jikexueyuan.com/project/material-design/images/6_20.png" alt="" width=360 height=256 />

選項(xiàng)不應(yīng)該包含外鏈菜單。

將外鏈操作放置在工具欄的外鏈菜單中，而不是放置在浮動(dòng)操作按鈕中。

http://wiki.jikexueyuan.com/project/material-design/images/6_21.png" alt="" width=360 height=256 />

外鏈菜單在工具欄中。

http://wiki.jikexueyuan.com/project/material-design/images/6_22.png" alt="" width=360 height=256 />

外鏈菜單在工具欄中。

http://wiki.jikexueyuan.com/project/material-design/images/6_23.png" alt="" width=360 height=256 />

浮動(dòng)操作按鈕并非彈出菜單。

http://wiki.jikexueyuan.com/project/material-design/images/6_24.png" alt="" width=360 height=256 />

浮動(dòng)操作按鈕并非彈出菜單。

如果一個(gè)應(yīng)用的主題時(shí)添加文件類型，浮動(dòng)操作按鈕在首次被點(diǎn)擊后可以轉(zhuǎn)換為相關(guān)的操作。如果出現(xiàn)的操作是與按鈕不相關(guān)的，將操作放到彈出菜單中。

http://wiki.jikexueyuan.com/project/material-design/images/6_25.png" alt="" />

浮動(dòng)操作按鈕可以轉(zhuǎn)變?yōu)橄嚓P(guān)操作。

http://wiki.jikexueyuan.com/project/material-design/images/6_26.png" alt="" />

浮動(dòng)操作按鈕不應(yīng)該轉(zhuǎn)變?yōu)椴幌嚓P(guān)的操作。

浮動(dòng)操作按鈕可以包含一個(gè)聯(lián)系人列表。這個(gè)列表不應(yīng)該包含不相關(guān)的操作。

http://wiki.jikexueyuan.com/project/material-design/images/6_27.png" alt="" width=240 />

浮動(dòng)操作按鈕可以轉(zhuǎn)變?yōu)橐粋€(gè)聯(lián)系人列表。

http://wiki.jikexueyuan.com/project/material-design/images/6_28.png" alt="" width=240 height= />

浮動(dòng)操作按鈕不應(yīng)該轉(zhuǎn)變?yōu)椴幌嚓P(guān)的操作。

變形

浮動(dòng)操作按鈕可以轉(zhuǎn)變?yōu)?material 單頁(yè)，app 結(jié)構(gòu)中的部分。這個(gè)神奇的轉(zhuǎn)變突出了按鈕可以做的操作。

當(dāng)浮動(dòng)操作按鈕變形時(shí)，在開(kāi)始和結(jié)束位置之間以合理的方式轉(zhuǎn)換。例如，不要穿過(guò)其他的 material 單頁(yè)。

變形動(dòng)畫(huà)應(yīng)該是可逆的，可以將新的 material 單頁(yè)變回為浮動(dòng)操作按鈕。

浮動(dòng)操作按鈕可以變形為一個(gè) material 單頁(yè)，app 結(jié)構(gòu)中的一部分。

滿屏

浮動(dòng)動(dòng)作按鈕可以轉(zhuǎn)變成占滿整個(gè)屏幕的新型物品。

這種戲劇性的轉(zhuǎn)變通常與創(chuàng)造新的內(nèi)容相關(guān)。其結(jié)果是，它不趨向于具有撤銷轉(zhuǎn)變或可逆操作的方法

浮動(dòng)動(dòng)作按鈕可以轉(zhuǎn)變成占滿整個(gè)屏幕的新型物品。

大屏幕

浮動(dòng)操作按鈕可以附屬到一個(gè)擴(kuò)展的 app bar。

http://wiki.jikexueyuan.com/project/material-design/images/6_29.png" alt="" width=380 height=285 />

(上圖)可取

浮動(dòng)操作按鈕可以被附屬到單頁(yè)中的一個(gè)工具欄或者結(jié)構(gòu)化元素（只要沒(méi)有阻礙其他元素）。

http://wiki.jikexueyuan.com/project/material-design/images/6_30.png" alt="" width=380 height=285 />

(上圖)可取

浮動(dòng)操作按鈕可以被附屬到一個(gè)單頁(yè)的邊緣。

http://wiki.jikexueyuan.com/project/material-design/images/6_31.png" alt="" width=380 height=285 />

(上圖)可取

單個(gè)屏幕上不要多與一個(gè)浮動(dòng)操作按鈕。

http://wiki.jikexueyuan.com/project/material-design/images/6_32.png" alt="" width=380 height=285 />

(上圖)不可取

不要將浮動(dòng)操作按鈕與屏幕上的每個(gè)元素都聯(lián)系起來(lái)。

http://wiki.jikexueyuan.com/project/material-design/images/6_33.png" alt="" width=380 height=285 />

(上圖)不可取

上一篇：布局模板下一篇：副標(biāo)題