懸浮操作按鈕达传，英文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)建，分享，探索等等爬虱。懸浮按鈕不應該是破壞性的隶债，例如刪除，例如存檔跑筝。它們不應該是模糊的死讹，或者帶有警告性質的，或者一些比較限制的行為曲梗，例如復制黏貼文字赞警，也不應該是一些本應在工具欄的操作，例如改變音量虏两。
懸浮按鈕與動效
懸浮按鈕是靈活的愧旦。可以延伸定罢，變形和反應笤虫。
1.延伸成一系列動作
在一些情況下，按鈕可以延伸出一系列的動作祖凫，如下圖Evernote的例子琼蚯。懸浮按鈕可以用一系列更加確切的動作代表它自己，并且你可以將它設計得與上下文更加關聯(lián)惠况。但記自馐：
1）這些動作必須與主要操作統(tǒng)一，并且與其他的操作相關聯(lián)稠屠。不要將它們當做是工具欄的操作峦睡，因為工具欄的操作通常都是獨立的。
2）作為基本的規(guī)則权埠，3到6個延展的按鈕比較好（包括最初的那個按鈕）榨了。
2.懸浮按鈕可以變形成新的界面
懸浮按鈕不僅僅是一個圓形按鈕，它有一些變形的屬性弊知，可以幫助頁面之間更良好地過渡阻逮。懸浮按鈕可以轉換為app中不同的視圖。
懸浮按鈕可以提升屏幕之間的過渡效果秩彤。
當懸浮按鈕變形，開始與結束的兩個屏幕邏輯嚴密地融合在一起事哭。例如漫雷，下圖的動畫起到了方向引導的作用，并且?guī)椭脩羧ダ斫鈱哟蔚淖兓⒃郏ダ斫庾兓挠|發(fā)點降盹，這樣下次操作會更加順暢。
3.懸浮按鈕可以在滑動時隱藏
懸浮按鈕如果妨礙到了瀏覽谤辜，則可以隱藏蓄坏。例如下方的例子价捧，懸浮按鈕在滑動的時候被隱藏，這樣就不會擋到閱讀的視線涡戳。
Medium app也很好地用了這個技術结蟋。“喜歡”按鈕在滑動的時候是被隱藏的渔彰，當?shù)竭_文章的尾部嵌屎，又出現(xiàn)了，出現(xiàn)的時機比較適宜恍涂，是用戶閱讀完文章宝惰，并想要點贊的時候。
小結
如果你要在app中使用懸浮按鈕的話再沧，必須要小心考慮用戶的可能操作尼夺，將部分重要的操作轉化為懸浮按鈕的操作。如果使用正確炒瘸，懸浮按鈕對于用戶來說會是一種很新奇有效的模式汞斧。
原文鏈接
https://uxplanet.org/floating-action-button-in-ux-design-7dd06e49144e
