懸浮操作按鈕（Floating Action Button藕溅，F(xiàn)AB），或者說懸浮按鈕熄守，是 Android 應用中最常見的一個控件蜈垮。懸浮按鈕通常是圓形耗跛，底部的Material Design 風格的陰影讓它看起來懸浮在整個UI之上。懸浮按鈕是Android UI 交互中最關鍵的元素之一攒发，在用戶流程中至關重要调塌。懸浮按鈕非常的易用，但是要正確的使用它惠猿，還是要遵循一些基本的規(guī)則羔砾。

在今天的文章中，你會找到下面問題的答案：

什么時候適合使用懸浮按鈕偶妖？

按鈕的最佳實踐有哪些姜凄？

懸浮按鈕要如何同動效結合起來優(yōu)化用戶體驗？

什么時候適合使用懸浮按鈕

1.執(zhí)行關鍵的操作

懸浮按鈕通常用來承載相關度最高趾访、最常用态秧、最重要的操作。通常扼鞋，在應用中申鱼，它應該承載特征性的操作，核心功能云头，就像下面的例子一樣：

懸浮按鈕用來觸發(fā)應用中的主操作捐友。屏幕上的暫停/播放交互使用懸浮按鈕來觸發(fā)，說明這個應用是一個音樂播放器溃槐。

2.作為引導工具

懸浮按鈕還可以為用戶提供下一步的提示和引導匣砖。Google 的研究表明，當面對不熟悉的界面之時昏滴，許多用戶都傾向于點擊懸浮按鈕來探索猴鲫，獲取引導。因此谣殊，懸浮按鈕在功能上有類似路標的屬性变隔。

Twitter 就將發(fā)推功能做成了懸浮按鈕。

3.并不是每屏都需要懸浮按鈕

懸浮按鈕色彩顯眼蟹倾，高亮匣缘，非常抓人眼球。當你打開界面的時候鲜棠，想要不去注意到它都不行肌厨，因為它太明顯了。但是豁陆，并不是每個界面都需要懸浮按鈕柑爸，因為不是每屏都有標志性的、重要的操作盒音。

不要濫用懸浮按鈕表鳍，它只為了關鍵操作而存在馅而！

Android 系統(tǒng)中 Google Photos 應用就是一個典型的案例。當你打開它的圖庫的時候譬圣，首先映入眼簾的是用于搜索的懸浮按鈕瓮恭，這個時候，懸浮按鈕存在2個關鍵的問題：

① 對于絕大多數(shù)的用戶而言厘熟，搜索是非主要交互屯蹦。首要的操作是瀏覽圖片，所以此處并不需要懸浮按鈕绳姨。

② 懸浮按鈕會分散用戶的注意力登澜。

小貼士：判斷一個界面的主要操作其實并沒有看起來那么簡單。為了簡化任務飘庄，并且考量你是否需要懸浮按鈕脑蠕，可以參考這個“五分鐘規(guī)則”：如果你花費了5分鐘還沒找到這一屏的主要操作，那么這說明這一屏不需要懸浮按鈕跪削。

懸浮按鈕最佳實踐

A空郊、避免出現(xiàn)“迷之導航”

實際上我們這里說的迷之導航指的是“Mystery meat navigation”，通常簡稱為MMN切揭，這句諷刺式的術語源于Web Pages That Suck 的站長 Vincent Flanders，指的是那些難于被發(fā)現(xiàn)锁摔、目的不明廓旬、只有當光標移動到其上才能發(fā)現(xiàn)、直到打開才知道其內(nèi)容的“隱藏式”鏈接谐腰。

實際上孕豹，懸浮按鈕所存在的問題和MMN有點相似，它是一個典型的圖標式按鈕十气，并不包含文字標簽來說明其功能励背，而通用的、普遍被認識的圖標始終是少數(shù)砸西。舉個例子叶眉，下面的按鈕是什么功能？

有人能猜出它與分享相關芹枷，那么它的分享功能具體是指向什么地方衅疙，有什么效果，你能確知么鸳慈？你想要知道饱溢，就必須點擊它。的確走芋，點擊這些按鈕來發(fā)現(xiàn)其功能绩郎，耗費的時間非常短潘鲫，風險也不高，但是這終究是一種認知負擔肋杖，不是嗎溉仑？最麻煩的地方在于，用戶必須記住它的功能才行兽愤。

將所有的的這些圖標和相應的APP都記住彼念，這個工作量可不小。

當然浅萧，使用圖標式的按鈕本身并不存在問題逐沙，前提是，APP的上下文環(huán)境要明晰洼畅，用戶才能夠清晰判斷按鈕的含義和功能吩案。舉個例子，你使用的是筆記類應用帝簇，很明顯徘郭，主要的功能是記錄、查看筆記丧肴。那么這個時候残揉，懸浮按鈕上的筆的圖標，所表達的含義就很清晰了芋浮。

B抱环、一屏只使用一個懸浮按鈕

懸浮按鈕在界面中是突出的，也是最具有侵略性的纸巷，所以要么只使用一個懸浮按鈕镇草，要么干脆別用。

C瘤旨、懸浮按鈕只承載正向操作

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

Material Design 的設計規(guī)范中對于懸浮按鈕所承載交互和圖標有指引說明。

懸浮按鈕和動效

懸浮按鈕本身非常靈活滓侍，它可以擴展蒋川、變形，也可以給予反饋撩笆。

A捺球、擴展為一系列操作

在某些情況下，點擊懸浮按鈕可以擴展出其他的常用操作（就像 Evernote這樣）夕冲。通過擴展氮兵，用一組相關、常用的懸浮按鈕來替代原來的單一交互歹鱼，這樣是可行的泣栈，它們是一體的，可展開也能收納弥姻，不常駐南片，這和前面所提到的原則并不沖突。

不過庭敦，這樣的設計要注意幾點：

① 這些操作必須與開始的總懸浮按鈕是關聯(lián)起來的疼进，它們是一體的，不要把展開后的按鈕視為單獨的存在秧廉。

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

B澜沟、懸浮按鈕變形為新的界面

懸浮按鈕可以不一直都為按鈕形態(tài)，借助動效它能夠延伸到整個屏幕峡谊，變?yōu)楠毩⒌慕缑妗?/p>

懸浮按鈕能夠作為界面轉(zhuǎn)化的中間樞紐茫虽。

當懸浮按鈕變形為界面的時候，它闡明了前后界面之間的邏輯關系既们，就像下面的案例：

C濒析、滾動的時候隱藏懸浮按鈕

為了便于用戶在滾動的過程中閱讀內(nèi)容，懸浮按鈕可以在滾動界面的時候啥纸，隱藏起來号杏。

Medium 的 Android 版客戶端當中，就是這么使用懸浮按鈕的，當滾動到文章底部的時候盾致，懸浮按鈕會再次出現(xiàn)主经。實際上，他們的網(wǎng)頁端也采用了類似的設計模式庭惜。

結語

懸浮按鈕看起來很簡單罩驻，但是要在APP設計的時候正確使用，還是要注意細節(jié)护赊、場景和用戶需求的惠遏。正確使用懸浮按鈕，會有事半功倍的效果骏啰。

原作者：Nick Babich

譯者：陳子木