懸浮操作按鈕，英文Floating Action Button，簡稱FAB，它是一個在安卓app中常用的操作。大概形式是一個圓形的按鈕在UI上層浮動，這是一個讓設計師們展示產(chǎn)品重要功能的地方。懸浮按鈕是簡單易用的UI元素，可能正是因為這樣吧，使用的時候不會太糾結，以至于有時候會錯誤地運用在設計中。
這篇文章中有幾個點：
?- 什么時候用？
- 怎么用？
- 懸浮按鈕與動畫要怎么結合，才能提升UX？
懸浮按鈕，什么時候用呢？
1.象征性的動作
懸浮按鈕中包含了最高頻使用的動作。它們代表了你app強有力的特點。理想地說，懸浮按鈕應該像下面例子一樣，代表你整個app最核心的功能。
2.作為導航
懸浮按鈕可以作為自然引導用戶的線索。Google的研究表明，當面對著不太熟悉的界面，很多用戶甚至要依賴懸浮按鈕去導航。因此，懸浮按鈕作為重點的路標，是比較有用的。
3.但，不是所有的界面都需要懸浮按鈕
懸浮按鈕是多彩的，懸升的，打破網(wǎng)格的存在。靜謐天空中的一個熱氣球的感覺。所以很難去忽略它，但那無可厚非，因為本來就是為了突出，才設計它的呀。但不是所有的界面度需要這個懸浮按鈕，理由很簡單，并不是每個界面都有重要的操作。
不要不計成本地用懸浮按鈕，它只能是用于重要的操作。
一個很好的例子是安卓的Google Photos app。這個app以gallery（畫廊）形式打開，其中有一個用作搜索的懸浮按鈕。那么問題來了：
1）搜索對于大多數(shù)用戶來說，都是額外的操作。主要的用戶任務是瀏覽照片。所以，沒有必要去使用懸浮按鈕。
2）懸浮按鈕的使用會干擾用戶，并且分散用戶在照片上的注意力。
小提示：找出界面中的最主要操作，不是表面上看那么簡單。為了去簡化任務，理解你是否需要懸浮按鈕，你需要使用一個簡單的五分鐘原則：如果你已經(jīng)糾結了五分鐘，去考慮你最主要的操作是什么，那么很明顯，這么懸浮按鈕在這個界面上不是很必要。
最佳實踐
1.避免不清晰的導航
不清晰的導航其實還有一個英語上的詞叫做“Mystery meat navigation”，直譯就是神秘的肉導航，最早是一個較多Vincent Flanders的人創(chuàng)造的，他也是“Web Pages That Suck”這個著名網(wǎng)站的創(chuàng)始人。什么是“神秘的肉”呢？我查了一下，其實來源于美國學校餐廳里的肉，因為有些已經(jīng)被加工，所以它們原本的樣子已經(jīng)不太清晰了，所以看到這塊肉的時候，也不太知道這是一塊肉，以至于不太想吃。因此神秘的肉導航，就是指一些不太清晰的導航。
懸浮按鈕是用按鈕的形式展現(xiàn)的，因此一個問題就是這些按鈕很難理解。NNgroup也指出，很少icon是大家都公認的。例如你能猜到下圖的icon是什么意思么？
當然直到你點之前，你都不會知道按鈕具體代表什么意思。并且如果一個用戶要去“猜”的話，你的按鈕就變成一塊“神秘的肉”了。有人可能說，用來認識這些功能的時間是很短的，就點一下就好，因此風險很小。是的，只是點一下而已，不太花時間，但，這里有一個認知負擔的問題：
用戶需要去記住它包含了什么意思。
記住一個懸浮按鈕，還好，但如果所有的app都有這個懸浮按鈕，那你就要去記住所有app不同懸浮按鈕的不同含義。
我們可以用圖標來代表按鈕，可是使用的時候必須要跟整個場景匹配，并且需要確保用戶能夠理解。整體的上下文場景，可以幫助用戶區(qū)理解按鈕的操作。例如，如果你有個做筆記的app，那么很自然，最主要的功能就是去寫，去看筆記。那么一個筆圖標的懸浮按鈕就很容易理解了。
2.一個界面只使用一個懸浮按鈕
因為懸浮按鈕是那么地打眼，所以要么只用一個，要么干脆不用。
3.只代表積極的動作
因為懸浮按鈕有特殊的風格，所以一般也用它來突出某些特點。那么這些特點最好也是帶有積極含義的特點。例如說創(chuàng)建，分享，探索等等。懸浮按鈕不應該是破壞性的，例如刪除，例如存檔。它們不應該是模糊的，或者帶有警告性質(zhì)的，或者一些比較限制的行為，例如復制黏貼文字，也不應該是一些本應在工具欄的操作，例如改變音量。
懸浮按鈕與動效
懸浮按鈕是靈活的?？梢匝由?，變形和反應。
1.延伸成一系列動作
在一些情況下，按鈕可以延伸出一系列的動作，如下圖Evernote的例子。懸浮按鈕可以用一系列更加確切的動作代表它自己，并且你可以將它設計得與上下文更加關聯(lián)。但記住：
1）這些動作必須與主要操作統(tǒng)一，并且與其他的操作相關聯(lián)。不要將它們當做是工具欄的操作，因為工具欄的操作通常都是獨立的。
2）作為基本的規(guī)則，3到6個延展的按鈕比較好（包括最初的那個按鈕）。
2.懸浮按鈕可以變形成新的界面
懸浮按鈕不僅僅是一個圓形按鈕，它有一些變形的屬性，可以幫助頁面之間更良好地過渡。懸浮按鈕可以轉(zhuǎn)換為app中不同的視圖。
懸浮按鈕可以提升屏幕之間的過渡效果。
當懸浮按鈕變形，開始與結束的兩個屏幕邏輯嚴密地融合在一起。例如，下圖的動畫起到了方向引導的作用，并且?guī)椭脩羧ダ斫鈱哟蔚淖兓?，去理解變化的觸發(fā)點，這樣下次操作會更加順暢。
3.懸浮按鈕可以在滑動時隱藏
懸浮按鈕如果妨礙到了瀏覽，則可以隱藏。例如下方的例子，懸浮按鈕在滑動的時候被隱藏，這樣就不會擋到閱讀的視線。
Medium app也很好地用了這個技術?！跋矚g”按鈕在滑動的時候是被隱藏的，當?shù)竭_文章的尾部，又出現(xiàn)了，出現(xiàn)的時機比較適宜，是用戶閱讀完文章，并想要點贊的時候。
小結
如果你要在app中使用懸浮按鈕的話，必須要小心考慮用戶的可能操作，將部分重要的操作轉(zhuǎn)化為懸浮按鈕的操作。如果使用正確，懸浮按鈕對于用戶來說會是一種很新奇有效的模式。
原文鏈接
https://uxplanet.org/floating-action-button-in-ux-design-7dd06e49144e
