懸浮按鈕的經(jīng)典設(shè)計(jì)規(guī)范和實(shí)踐

羅華

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

作為Android UI交互中最關(guān)鍵的元素之一，懸浮按鈕在用戶(hù)體驗(yàn)中的地位十分重要。UI上，往往是色彩最大膽、最直觀的頁(yè)面元素；在功能上，是用戶(hù)在頁(yè)面上最高頻次的操作。懸浮按鈕的使用有什么基本準(zhǔn)則？有哪些實(shí)用用途？我們一起在這篇文章中來(lái)看一看。

懸浮按鈕的使用原則

1.選擇適當(dāng)?shù)膽腋“粹o尺寸

懸浮按鈕主要用于促進(jìn)用戶(hù)行為，它們通過(guò)在UI上浮動(dòng)的圓圈圖標(biāo)來(lái)區(qū)分，并且具有包括變形、啟動(dòng)和傳送錨點(diǎn)的運(yùn)動(dòng)行為。一般有兩種尺寸，默認(rèn)版和迷你版（僅用于與其他界面元素創(chuàng)建視覺(jué)連續(xù)性）。

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

2.懸浮按鈕只承載正向操作

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

3.大尺寸屏幕上的懸浮按鈕

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

懸浮按鈕的用途

1.觸發(fā)器

懸浮按鈕可以簡(jiǎn)單地觸發(fā)某個(gè)動(dòng)作或在某處導(dǎo)航，常用于觸發(fā)功能、菜單或?qū)Ш健?/p>

2.工具欄

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

3.界面變形的樞紐

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

對(duì)于這一塊的用法，谷歌Material Design設(shè)計(jì)規(guī)范要求：“變形浮動(dòng)按鈕時(shí)，需要以邏輯的方式在開(kāi)始和結(jié)尾的位置轉(zhuǎn)換，不要使用其他元素，并且變形動(dòng)畫(huà)應(yīng)該是可逆的，新的變形頁(yè)面也可以轉(zhuǎn)換回懸浮按鈕?！?img src="https://cimg.fx361.com/images/2022/10/19/qkimagesjywljywl201806jywl20180640-2-l.jpg"/>

4.觸發(fā)和擴(kuò)展一系列操作

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

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

懸浮按鈕的實(shí)踐

明確了懸浮按鈕的基本設(shè)計(jì)規(guī)范和用途分類(lèi)后，我們就可以嘗試開(kāi)始動(dòng)手自己的設(shè)計(jì)實(shí)踐了。

原型設(shè)計(jì)

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

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

案例欣賞

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

Navigation at the Bottom

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

流動(dòng)的切換動(dòng)畫(huà)細(xì)節(jié)增強(qiáng)了呼吸感，給用戶(hù)帶來(lái)了感性細(xì)膩的操作反饋。

FAB for User Engagement

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

Filter Menu

這款作品把FAB作為一種樞紐，使搜索過(guò)程更加高效和愉快，為用戶(hù)提供了更靈活的使用體驗(yàn)。必要的過(guò)濾器選項(xiàng)排列在一個(gè)弧形當(dāng)中，每一個(gè)都有一款精心設(shè)計(jì)的圓形圖標(biāo)。菜單面板也具有非常像按鈕本身的圓形形狀。這樣一來(lái)，組件看上去就和諧了。

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