AAA教育

懸浮按鈕（Floating Action Button，簡稱FAB）是APP應用中常見的UI元件。它輕盈、優(yōu)雅、便捷又高效，是Google設計語言中一顆璀璨的明珠。懸浮按鈕往往都會獨立出現(xiàn)在界面之上，提升整體的導航，拓展頁面的功能，使應用的操作更加便捷。

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

懸浮按鈕的使用原則

A、選擇適當?shù)膽腋“粹o尺寸

懸浮按鈕主要用于促進用戶行為，它們通過在UI上浮動的圓圈圖標來區(qū)分，并且具有包括變形，啟動和傳送錨點的運動行為。一般有兩種尺寸，默認版和迷你版（僅用于與其他界面元素創(chuàng)建視覺連續(xù)性）。

默認的尺寸一般為56*56dp，迷你版的尺寸為40*40dp。界面寬度低于460dp時，需要從默認尺寸（56dp）調(diào)整至迷你尺寸（40dp）。

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

由于懸浮按鈕通常承載的是主要的、有代表性的操作，通常它應該是個積極正向的交互，比如創(chuàng)建、分享、探索等。唯一的懸浮按鈕不應該執(zhí)行破壞性的操作，比如刪除、歸檔。它不應該是非特定的操作，或者是不完整的交互，比如剪切和粘貼是一組組合交互，它們應該存在于菜單欄當中，而非懸浮按鈕中。

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

懸浮按鈕在大尺寸的屏幕上可以放置在擴展的APP欄、工具欄或者結(jié)構(gòu)性的元素（前提不阻礙其他元素）和表單的邊緣上。需要注意的是，每個頁面只能出現(xiàn)一個懸浮按鈕，也不要將懸浮按鈕與一個頁面上的所有元素產(chǎn)生關聯(lián)，懸浮按鈕本身顯眼抓人眼球，濫用懸浮按鈕會分散用戶的注意力。

懸浮按鈕的用途

觸發(fā)器

懸浮按鈕可以簡單地觸發(fā)某個動作或在某處導航，常用于觸發(fā)功能、菜單或?qū)Ш健?/span>

工具欄

懸浮按鈕可以在進行點按或滾動操作時變換成工具欄。 工具欄可以包含相關的操作，文本和搜索字段等。當用戶通過滾動發(fā)出他們有興趣繼續(xù)瀏覽內(nèi)容的信號，滾動消失的工具欄則大大地節(jié)省了屏幕空間，整體的使用體驗會非常流暢。

界面變形的樞紐

懸浮按鈕可以轉(zhuǎn)換為APP結(jié)構(gòu)的一部分，借助動效延伸到整個屏幕，甚至變?yōu)楠毩⒌慕缑?，從而成為界面功能切換的動態(tài)樞紐。

對于這一塊的用法，谷歌Material Design設計規(guī)范要求：“變形浮動按鈕時，需要以邏輯的方式在開始和結(jié)尾的位置轉(zhuǎn)換，不要使用其他元素，并且變形動畫應該是可逆的，新的變形頁面也可以轉(zhuǎn)換會懸浮按鈕。”

觸發(fā)和擴展一系列操作

除了單一的功能觸發(fā)外，通過懸浮按鈕更常用于觸發(fā)一系列的操作，通過擴展，用一組相關、常用的懸浮按鈕來替代原來的單一交互。常見的形式有拓展按鈕，拓展表單等。

作為一般規(guī)則，這組拓展出來的按鈕不應少于3個，不能多于6個，否則違反了作為懸浮按鈕的快速、高效的原則。

懸浮按鈕的實踐

明確了懸浮按鈕的基本設計規(guī)范和用途分類后，我們就可以嘗試開始動手自己的設計實踐了，下面為大家從兩個方面的入門提供幫助。

原型設計

如果對懸浮按鈕在產(chǎn)品上的運用有了初步的構(gòu)思，可以通過原型工具Mockplus快速實現(xiàn)原型效果。

Mockplus支持快速設計、快速分享、輕松預覽和輕松協(xié)作，你可以通過200個組件，8種智能交互組件，僅僅通過鼠標拖拽就實現(xiàn)交互；設計完成后由8種方式供你預覽，還支持8種批注工具在線審閱，團隊中也能大放光彩。

案例欣賞

還沒有靈感？不要緊。這里為大家收集了Dribbble和Uplabs上面的一些經(jīng)典懸浮按鈕設計案例，相信會帶給你啟發(fā)。

Navigation at the bottom

作品功能和UI貼切地結(jié)合是整體變得出彩，設計中，下拉菜單占據(jù)了屏幕的一半，模糊了背景上的元素，突出了表單的重要性。菜單設計得非常簡練，所有選項都按照垂直順序排列，大量的留白保證了文字處于主體地位。

流動的切換動畫細節(jié)增強了呼吸感，給用戶帶來了感性細膩的操作反饋。

FAB for User Engagement

這一款FAB顯得非常有侵略性。 激活之后沒有一點的猶豫，壟斷了整個屏幕，占據(jù)了主導地位。因為空間的充裕，設計成功地將所有重要環(huán)節(jié)都包含在內(nèi)，圖標美麗直觀，體驗強烈而寬敞。在UI方面作者巧妙地設置焦點，帶來了愉悅的視覺觀感。

Filter Menu

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

總結(jié)

懸浮按鈕看似簡單，但是要在APP設計中，還是要注意基本設計規(guī)范、場景和用戶體驗的。正確使用懸浮按鈕，會給你的產(chǎn)品體驗帶來事半功倍的效果。

相關文章--《UI大牛告訴你如何從設計中提高產(chǎn)品思維》