Material Design之浮動操作按鈕

本文轉自UI中國

浮動操作按鈕

浮動操作按鈕一般作為進階操作的開關，在用戶界面中通常是一個漂浮的小圓圈，它有自身獨特的動態效果，比如變形、彈出、位移等等。

有兩種尺寸的浮動操作按鈕：默認大小和較小的，使用哪種尺寸需要根據屏幕中的元素來決定。

內容相關

并不是每一個屏幕都需要浮動操作按鈕。一個浮動操作按鈕應該能夠代表這個APP中的主要操作。在左邊主要是相冊集和打開的圖片，并不需要浮動按鈕。而在右側，主要的動作是添加內容，所以添加浮動操作按鈕是合理的。

盡量只在屏幕中擺放一個浮動按鈕，因為它是整個屏幕中最突出的按鈕。

不要在對話框中使用浮動按鈕，去使用扁平的按鈕。

不要在側邊的導航欄中加入浮動按鈕，他會分散用戶的注意力，側邊欄的主要任務就是導航。

不要把浮動操作按鈕擺放在下拉菜單會覆蓋的面積。

操作相關

不要在浮動操作按鈕中設置彈出菜單選項。

如果是應用程序內添加文件類型的標志，可以讓浮動操作按鈕在被點擊后變化為相關的按鈕。

然而，如果是一組動作按鈕，之間并沒有關聯，那么你應該把這些按鈕放入到菜單中，而不是通過浮動操作按鈕激活。

如果在點擊浮動操作按鈕過后，出現工具欄，那么工具欄中應該擺放相關的按鈕。在這個例子中，是讓用戶選擇添加的媒體類型。

不要將毫無關聯的圖標按鈕添加到由浮動操作按鈕激活的工具欄中。

一個浮動操作按鈕可以包含聯系人列表。

但是不要將各類功能和聯系人或其他元素都放進按鈕中。

品質

浮動按鈕通常可以作為：添加、編輯、喜歡、分享、搜索等等按鈕出現

一般來說，我們會避免在浮動操作按鈕上設置會對內容操作按鈕，比如下載、刪除、新建文件夾等等；或者不具體的動作，比如警告或錯誤；應該在工具欄或控件欄中的按鈕，比如音量控制、字體顏色等等。另外浮動操作按鈕不應該包含應用程序欄圖標或狀態欄上的通知圖標，還有注意的是，不要在浮動操作按鈕上再添加氣泡或其他元素。

使用圓形作為按鈕的外形，以免混淆用戶。

不要在浮動操作按鈕中加入反彈動畫。

位置

浮動操作按鈕可以放在界面中明顯的分割線上或附加在擴展欄中。

也可以將浮動操作按鈕放在頁腳或者展開的列表上。

不要將浮動操作按鈕隨機的懸浮在一個位置上，同時也要注意不要讓浮動操作按鈕遮擋住其他按鈕。

一個浮動操作按鈕可以鏈接到一個新的窗口

浮動操作按鈕可以被放置在工具欄或者頁面分隔上（只要不遮擋其他元素）

浮動操作按鈕可以附著在區域的邊緣

一個屏幕中只允許出現一個浮動操作按鈕

不要將浮動操作按鈕隱藏在側邊欄或附著在側邊欄上

不要給界面中每一個元素上都放置一個浮動操作按鈕

不要讓狀態通知或其他元素，遮擋住浮動操作按鈕。