如果要在應(yīng)用程序中使用FAB，則必須仔細(xì)考慮應(yīng)用程序的設(shè)計，并將用戶的可能操作歸結(jié)為一個最突出的功能。正確使用FAB，最終會給用戶帶來驚人的幫助。

懸浮按鈕（FAB）是Android應(yīng)用程序中一個非常常用的控件。像一個漂浮在用戶界面上的圓形圖標(biāo)，為設(shè)計師調(diào)用應(yīng)用程序關(guān)鍵部分的產(chǎn)品故事。FAB是非常簡單且易于實踐的UI元素，但設(shè)計師往往不能正確的納入設(shè)計中。在本文中，你將找到有關(guān)以下問題的答案：

• 什么時候使用FAB？
• 什么是FAB的最佳實踐？
• FAB和動畫如何共同改善UX？

什么時候使用FAB？

標(biāo)志性操作

FAB強調(diào)相關(guān)或經(jīng)常使用的操作。它應(yīng)該用于具有很強特性操作的應(yīng)用程序中。理想情況下，F(xiàn)AB應(yīng)該代表整個應(yīng)用程序的核心功能，就像下面的例子一樣。

懸浮按鈕表示應(yīng)用程序中的主要操作。在此屏幕上暫停或恢復(fù)播放會告訴用戶它是一個音樂應(yīng)用程序。

作為找到方法的工具

FAB是告訴用戶下一步做什么的自然提示。Google的研究表明，當(dāng)面對不熟悉的屏幕時，許多用戶依賴用FAB來導(dǎo)航。因此，F(xiàn)AB作為重要的路標(biāo)非常有用。

Twitter使用FAB寫一個引用操作。

不是每個屏幕都需要FAB

FABs是豐富多彩且可破壞的。因為它們被設(shè)計得很突出，發(fā)現(xiàn)這些按鈕是非常容易的。但不是每個屏幕都應(yīng)該使用FAB，因為不是每個屏幕都需要這一重要性的操作。

為了促進(jìn)操作，不要一味使用FAB！

適用于Android的Google Photos app就是一個很好的例子。該應(yīng)用程序在圖庫的視圖中打開，該視圖具有用于搜索的懸浮操作的按鈕。

FAB有兩個問題：

• 搜索是大多數(shù)用戶的額外操作。主要任務(wù)是照片瀏覽。因此，不需要FAB。
• FAB的存在可以分散用戶的注意力，讓用戶遠(yuǎn)離主要內(nèi)容（照片）。

搜索是Google相冊的額外操作，不需要FAB

提示：查找屏幕的主要操作可能比第一次看到困難得多。為了簡化任務(wù)并了解是否需要FAB在你的UI中使用一個簡單的五分鐘規(guī)則：如果你在屏幕的主要搜索操作超過了5分鐘，很明顯這里不需要FAB。

FAB的最佳實踐

避免mystery meat導(dǎo)航

術(shù)語“mystery meat導(dǎo)航”是由Vincent Flanders介紹，Vincent Flanders是著名網(wǎng)站?Web Pages That Suck.的創(chuàng)始人。它指的是用戶必須利用按鈕和鏈接來查找接下來做的事情。

FAB是一個僅圖標(biāo)的按鈕，問題是icons are really hard to understand，因為它們是如此開放的解釋。正如NNGpoints out，普遍認(rèn)可的圖標(biāo)很少見。例如，你能猜測下面的例子中的按鈕是用來做什么的嗎？

FAB在這里是什么意思？

在你點擊之前，你一定不知道。如果用戶需要猜測，你的按鈕是mystery meat.。有人說，發(fā)現(xiàn)這些圖標(biāo)需要很短的時間，而且風(fēng)險低。通過點擊它可以看出找到一個可能相當(dāng)小的圖標(biāo)意味著什么。但是有一個認(rèn)知的負(fù)擔(dān)：

用戶必須記住它的含義。

將所有的mystery meat圖標(biāo)疊加在你所有的應(yīng)用程序中，這是個很大的工程。

只有使用圖標(biāo)按鈕才可以接受，而且要確保用戶與相關(guān)語境的清晰。語境幫助用戶解釋圖標(biāo)按鈕和其操作。例如，如果你有一個筆記應(yīng)用程序，很明顯，應(yīng)用程序的主要目的是采取和查看——注釋?！肮P”圖標(biāo)將在這種情況下的作用是非常大的。

每屏幕只能使用一個FAB

因為FAB是如此的突出和具有侵入性，所以FAB在頁面上應(yīng)該使用一次，或者根本不使用。

屏幕上沒有多個懸浮按鈕。

僅使用FAB進(jìn)行積極的操作

因為FAB是有特色的，所以通常是一個積極的操作，如創(chuàng)建、分享、探索等等。FAB也應(yīng)該具有破壞性的操作，如刪除或歸檔。它們不應(yīng)該是非特定的或警告的，有限的操作，如剪切和粘貼文本，或者應(yīng)該在工具欄中進(jìn)行的操作（例如：改變音量）。

該功能應(yīng)該是一個讓用戶對使用FAB感到開心的操作，而不用擔(dān)心會發(fā)生錯誤。圖片來源：Material?Design

FAB和動畫

懸浮按鈕的設(shè)計具有靈活性。FAB可以擴展，變形或發(fā)生反應(yīng)。

擴展一組操作

在某些情況下，按鈕可以旋轉(zhuǎn)出來并暴露其他幾個選項（如下面的Evernote示例所示）。 FAB可以用一系列更具體的操作來替代自己，并且可以將它們設(shè)計為用戶的語境。但請記?。?/p>

• 這些操作必須與FAB本身所表達(dá)的主要操作相關(guān)聯(lián)：如果它們位于工具欄上，不要將這些的操作視為獨立的。
• 作為一般規(guī)則，按新聞至少有三個選項，但不得超過六個，包括原始懸浮按鈕目標(biāo)。

懸浮按鈕會拋出相關(guān)的操作。

FAB可以轉(zhuǎn)變成新的界面

FAB不僅僅是一個圓形按鈕，它還具有一些變革性的屬性，你可以用它來幫助用戶從一個屏幕到另一個屏幕。懸浮按鈕可以轉(zhuǎn)換為作為應(yīng)用程序結(jié)構(gòu)部分的視圖。

FAB可以改善屏幕之間的轉(zhuǎn)換

當(dāng)懸浮按鈕變形時，以邏輯方式在開始和結(jié)束位置之間轉(zhuǎn)換。例如，下面的示例中的動畫維護用戶的方向感，并幫助用戶了解視圖布局中剛剛發(fā)生的更改，如果需要更改內(nèi)容，稍后再次啟動更改。

圖片來源：Ehsan?Rahimi

滾動時可以隱藏FAB

當(dāng)向下滾動（如果阻礙用戶閱讀內(nèi)容），F(xiàn)AB可以被隱藏。在下面的例子中，F(xiàn)AB需要可以移出方式，以便列表項的所有部分實際上都可以訪問。

隱藏FAB以最大化專用于列表的視口區(qū)域。圖片來源：Juliane?Lehmann

Android的中等應(yīng)用程序是使用此技術(shù)的一個很好的例子。心臟按鈕消失在滾動，只有當(dāng)喜歡文章的讀者想要使用按鈕時，在文章結(jié)尾達(dá)到時才會重新出現(xiàn)。

結(jié)論

如果要在應(yīng)用程序中使用FAB，則必須仔細(xì)考慮應(yīng)用程序的設(shè)計，并將用戶的可能操作歸結(jié)為一個最突出的功能。正確使用FAB，最終會給用戶帶來驚人的幫助。

感謝您的閱讀！

譯者：SKYUI

原文作者：Nick Babich，Nick is a software developer who’s passionate about user experience.

原文地址：https://uxplanet.org/floating-action-button-in-ux-design-7dd06e49144e

本文由@SKYUI 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。