浮動操作按鈕
運行方式
過渡
大屏幕

浮動操作按鈕

浮動操作按鈕

浮動操作按鈕適用于進階的操作。它是漂浮在 UI 上的一個圓形圖標，具有一些動態(tài)的效果，比如變形、彈出、位移等等。

浮動操作按鈕有兩種尺寸：

• 默認尺寸：適用于多數(shù)應(yīng)用情況。
• 迷你尺寸：僅用于創(chuàng)建與其他屏幕元素視覺的連續(xù)性。

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

浮動操作按鈕

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

迷你浮動操作按鈕

浮動操作按鈕應(yīng)至少放在距手機邊緣 16dp 或電腦/臺式機邊緣 24dp 的地方。

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

浮動操作按鈕紅線。

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

迷你浮動操作按鈕紅線

浮動操作按鈕在被聚焦時會出現(xiàn)水墨，在被選中時會彈出來。

浮動操作按鈕獲得焦點

浮動操作按鈕被選中

不是每個屏幕都需要浮動操作按鈕。一個浮動操作按鈕能夠代表這個 App 中的主要操作

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

(上圖)可取：主要操作是在畫廊里觸摸圖片，所以不需要任何按鈕。

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

(上圖)可?。褐饕僮魇翘砑游募A。

一個屏幕只推薦使用一個浮動操作按鈕來增加其顯著性。它應(yīng)該只代表最常見的操作。

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

(上圖)不可取

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

(上圖)不可取

特性

用浮動操作按鈕進行積極的操作，如創(chuàng)建、收藏、分享、瀏覽和探索。

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

(上圖)可取

避免用浮動操作按鈕進行下面這些輕微破壞性操作：

• 存檔或刪除
• 非特異性操作
• 警報或錯誤
• 限制性任務(wù)如剪切文本
• 控制應(yīng)放在一個工具欄中，如音量控制或改變字體顏色

浮動操作按鈕不包含 app 圖標或狀態(tài)欄通知。不要把證章或者其他元素層疊在浮動操作按鈕上

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

(上圖)不可取

APP 主要操作的圖案強制使用圓形圖標

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

(上圖)可取

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

(上圖)不可取

不要給浮動操作按鈕額外的維度。

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

(上圖)可取

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

(上圖)不可取

運行方式

運行方式

在默認情況下，浮動操作按鈕就像一塊擴展的物體在屏幕上活動。在它里面的圖標可能是活動的。

浮動操作按鈕因為其相對重要性，可能以不同于其他 UI 的方式在屏幕上出現(xiàn)和移動。要考慮各元素出現(xiàn)的位置和怎樣把浮動操作按鈕放到合適的位置上去。

如果在多個旁邊的屏幕上有浮動操作按鈕（比如選項卡），在進入屏幕時，若在每個屏幕上的操作不同，按鈕應(yīng)該顯示和隱藏。若操作相同，按鈕應(yīng)該停留在屏幕上（如果有需要，轉(zhuǎn)換到新的位置上）

(上圖)可取

(上圖)可取

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

(上圖)不可取

(上圖)不可取

過渡

過渡

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

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

觸發(fā)器

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

一個浮動操作按鈕可以簡單地觸發(fā)一個操作。

浮動操作按鈕讓地圖視圖回到中心位置

App 通常使用一個單一的浮動操作按鈕。然而，本例使用了兩個浮動操作按鈕，因為它們執(zhí)行同樣重要但獨特的操作。

工具欄

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

浮動操作按鈕變成一個工具欄

浮動操作按鈕變成一個工具欄

一個工具欄在滾動條上消失對屏幕來說非常有用。而整個工具欄在屏幕的初始輸入或一個長列表的頂部或底部時非常需要。

工具欄在滾動時轉(zhuǎn)變成一個浮動操作按鈕

工具欄在滾動時轉(zhuǎn)變成一個浮動操作按鈕

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

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

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

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

(上圖)不可取：不要包括不相關(guān)或者混亂不清的操作。

快速撥號

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

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

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

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

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

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

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

通過給予用最好、最顯眼以及最少的選項來減少選擇疲勞。

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

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

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

一個浮動操作按鈕應(yīng)該彈出不超過六個選項。

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

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

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

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

選項不應(yī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 />

浮動操作按鈕并非彈出菜單。

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

浮動操作按鈕并非彈出菜單。

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

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

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

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

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

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

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

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

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

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

變形

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

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

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

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

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

滿屏

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

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

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

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

大屏幕

大屏幕

浮動操作按鈕可以附屬到一個擴展的 app bar。

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

(上圖)可取

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

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

(上圖)可取

浮動操作按鈕可以被附屬到一個單頁的邊緣。

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

(上圖)可取

單個屏幕上不要多與一個浮動操作按鈕。

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

(上圖)不可取

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

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

(上圖)不可取