乾貨分享！懸浮按鈕設計規範和經典實踐

懸浮按鈕（Floating Action Button，簡稱FAB）是APP應用中常見的UI元件。它輕盈、優雅、便捷又高效，是Google設計語言中一顆璀璨的明珠。懸浮按鈕每每都會獨立出如今界面之上，提高總體的導航，拓展頁面的功能，使應用的操做更加便捷。

做爲Android UI交互中最關鍵的元素之一，懸浮按鈕在用戶體驗中的地位十分重要。UI上，每每是最色彩大膽最直觀的頁面元素；在功能上，每每是表明用戶在頁面上最高頻次的操做。懸浮按鈕的使用有什麼基本準則？有哪些實用用途？咱們一塊兒在這篇文章中來看一看。

懸浮按鈕的使用原則

A、選擇適當的懸浮按鈕尺寸

懸浮按鈕主要用於促進用戶行爲，它們經過在UI上浮動的圓圈圖標來區分，而且具備包括變形，啓動和傳送錨點的運動行爲。通常有兩種尺寸，默認版和迷你版（僅用於與其餘界面元素建立視覺連續性）。

默認的尺寸通常爲56*56dp，迷你版的尺寸爲40*40dp。界面寬度低於460dp時，須要從默認尺寸（56dp）調整至迷你尺寸（40dp）。

B、懸浮按鈕只承載正向操做

因爲懸浮按鈕一般承載的是主要的、有表明性的操做，一般它應該是個積極正向的交互，好比建立、分享、探索等。惟一的懸浮按鈕不該該執行破壞性的操做，好比刪除、歸檔。它不該該是非特定的操做，或者是不完整的交互，好比剪切和粘貼是一組組合交互，它們應該存在於菜單欄當中，而非懸浮按鈕中。

C、大尺寸屏幕上的懸浮按鈕

懸浮按鈕在大尺寸的屏幕上能夠放置在擴展的APP欄、工具欄或者結構性的元素（前提不阻礙其餘元素）和表單的邊緣上。須要注意的是，每一個頁面只能出現一個懸浮按鈕，也不要將懸浮按鈕與一個頁面上的全部元素產生關聯，懸浮按鈕自己顯眼抓人眼球，濫用懸浮按鈕會分散用戶的注意力。

懸浮按鈕的用途

觸發器

懸浮按鈕能夠簡單地觸發某個動做或在某處導航，經常使用於觸發功能、菜單或導航。

        

工具欄

懸浮按鈕能夠在進行點按或滾動操做時變換成工具欄。 工具欄能夠包含相關的操做，文本和搜索字段等。當用戶經過滾動發出他們有興趣繼續瀏覽內容的信號，滾動消失的工具欄則大大地節省了屏幕空間，總體的使用體驗會很是流暢。

   

界面變形的樞紐

懸浮按鈕能夠轉換爲APP結構的一部分，藉助動效延伸到整個屏幕，甚至變爲獨立的界面，從而成爲界面功能切換的動態樞紐。

對於這一塊的用法，谷歌Material Design設計規範要求：「變形浮動按鈕時，須要以邏輯的方式在開始和結尾的位置轉換，不要使用其餘元素，而且變形動畫應該是可逆的，新的變形頁面也能夠轉換會懸浮按鈕。」

觸發和擴展一系列操做

除了單一的功能觸發外，經過懸浮按鈕更經常使用於觸發一系列的操做，經過擴展，用一組相關、經常使用的懸浮按鈕來替代原來的單一交互。常見的形式有拓展按鈕，拓展表單等。

做爲通常規則，這組拓展出來的按鈕不該少於3個，不能多於6個，不然違反了做爲懸浮按鈕的快速、高效的原則。

懸浮按鈕的實踐

明確了懸浮按鈕的基本設計規範和用途分類後，咱們就能夠嘗試開始動手本身的設計實踐了，下面爲你們從兩個方面的入門提供幫助。

原型設計

若是對懸浮按鈕在產品上的運用有了初步的構思，能夠經過原型工具Mockplus快速實現原型效果。

Mockplus支持快速設計、快速分享、輕鬆預覽和輕鬆協做，你能夠經過200個組件，8種智能交互組件，僅僅經過鼠標拖拽就實現交互；設計完成後由8種方式供你預覽，還支持8種批註工具在線審閱，團隊中也能大放光彩。上圖的原型例子能夠戳這裏下載：http://doc.mockplus.cn/?p=1046

案例欣賞

尚未靈感？沒關係。這裏爲你們收集了Dribbble和Uplabs上面的一些經典懸浮按鈕設計案例，相信會帶給你啓發。

Navigation at the bottom

做品功能和UI貼切地結合是總體變得出彩，設計中，下拉菜單佔據了屏幕的一半，模糊了背景上的元素，突出了表單的重要性。菜單設計得很是簡練，全部選項都按照垂直順序排列，大量的留白保證了文字處於主體地位。

流動的切換動畫細節加強了呼吸感，給用戶帶來了感性細膩的操做反饋。

FAB for User Engagement

這一款FAB顯得很是有侵略性。 激活以後沒有一點的猶豫，壟斷了整個屏幕，佔據了主導地位。由於空間的充裕，設計成功地將全部重要環節都包含在內，圖標美麗直觀，體驗強烈而寬敞。在UI方面做者巧妙地設置焦點，帶來了愉悅的視覺觀感。 

Filter Menu

這款做品把FAB做爲一種樞紐，使搜索過程更加高效和愉快，爲用戶提供了更靈活的使用體驗。 必要的過濾器選項排列在一個弧形當中，每個都有一款精心設計的圓形圖標。菜單面板也具備很是像按鈕自己的圓形形狀。 這樣一來，組件看上去就和諧了。 

總結

懸浮按鈕看似簡單，可是要在APP設計中，仍是要注意基本設計規範、場景和用戶體驗的。正確使用懸浮按鈕，會給你的產品體驗帶來事半功倍的效果。