浮動(dòng)操作按鈕提升用戶體驗(yàn)的5種方式

浮動(dòng)操作按鈕（FAB）是浮動(dòng)在用戶界面上方的帶圓圈的圖標(biāo)。它的形狀，位置和顏色確保它在UI的其余部分中脫穎而出。FAB在2014年通過Google的Material Design原則發(fā)布而得到普及。自該版本發(fā)布以來，F(xiàn)AB用戶界面元素已在Web和移動(dòng)設(shè)計(jì)中被廣泛采用。

盡管FAB可以看作是很小的，看似微不足道的UI組件，但其效果可能很重要。假設(shè)該模式已正確使用，則意味著它是立即可識(shí)別和可訪問的。

Android應(yīng)用中的浮動(dòng)操作按鈕

?

1.代表標(biāo)志性行動(dòng)

理想情況下，F(xiàn)AB應(yīng)突出顯示最相關(guān)或最常用的操作，應(yīng)將其用于應(yīng)用程序的主要特征。如果要在應(yīng)用程序中使用FAB，則必須仔細(xì)考慮應(yīng)用程序的設(shè)計(jì)，并且必須將用戶的可能操作歸結(jié)為一個(gè)突出的功能。例如，音樂應(yīng)用可能具有表示“播放/停止”的FAB。類似Instagram的應(yīng)用程序可能具有表示“拍照”的FAB。

浮動(dòng)動(dòng)作按鈕表示應(yīng)用程序中的主要?jiǎng)幼鳌?/span>在此屏幕上暫?；蚧謴?fù)播放將告訴用戶這是一個(gè)音樂應(yīng)用程序。

根據(jù)史蒂夫·瓊斯（Steve Jones）的研究，F(xiàn)AB在用戶首次使用該按鈕時(shí)顯示出對(duì)可用性的輕微影響。但是，一旦用戶使用FAB成功完成一項(xiàng)任務(wù)，他們將比傳統(tǒng)的操作按鈕更有效地使用它。

?

2.成為尋路工具

FAB是告訴用戶下一步操作的自然提示。Google的研究表明，面對(duì)陌生的屏幕時(shí)，許多用戶都依賴FAB進(jìn)行導(dǎo)航。因此，F(xiàn)AB作為下一步工作的路標(biāo)非常有用。

在Twitter中使用浮動(dòng)操作按鈕可以鼓勵(lì)您發(fā)布內(nèi)容

?

3.提供一套行動(dòng)

在某些情況下，如下面的Evernote示例所示，使按鈕旋轉(zhuǎn)并公開其他一些選項(xiàng)是合適的。FAB可以將其替換為一系列更具體的操作，并且可以將它們?cè)O(shè)計(jì)為與用戶相關(guān)。根據(jù)經(jīng)驗(yàn)，在按下時(shí)至少提供三個(gè)選項(xiàng)，但不要超過六個(gè)（包括原始的浮動(dòng)操作按鈕目標(biāo)）。

還請(qǐng)記住，這些動(dòng)作必須與FAB本身表達(dá)的主要?jiǎng)幼飨嚓P(guān)，并且彼此相關(guān)：如果將這些顯示的動(dòng)作放在工具欄上，則不要像對(duì)待它們那樣獨(dú)立。

請(qǐng)勿：?“我在哪里”操作與創(chuàng)建內(nèi)容操作無關(guān)。

?

4.注意上下文

上下文在用戶交互中起著重要作用。有時(shí)用戶想要消費(fèi)內(nèi)容，有時(shí)他們想要執(zhí)行操作。這完全取決于上下文。使用某些上下文行為可以將FAB的優(yōu)點(diǎn)帶到任何應(yīng)用程序的UX中。讓我們以Google+為例。當(dāng)用戶與信息流互動(dòng)時(shí)，Google +會(huì)顯示該按鈕，而當(dāng)互動(dòng)反向時(shí)會(huì)隱藏該按鈕。這兩個(gè)狀態(tài)取決于上下文：當(dāng)用戶與社交流互動(dòng)時(shí)，主要?jiǎng)幼魇菨L動(dòng)，因此不需要FAB；當(dāng)用戶停止?jié)L動(dòng)時(shí)，他們可能想發(fā)布一些內(nèi)容。

?

5.將兩個(gè)國家聯(lián)系在一起

FAB不僅是一個(gè)圓形按鈕，它還具有一些可轉(zhuǎn)換的屬性，您可以使用這些屬性來簡化屏幕之間的用戶。變形浮動(dòng)操作按鈕時(shí)，請(qǐng)以邏輯方式在兩個(gè)狀態(tài)之間進(jìn)行轉(zhuǎn)換。以下示例中的動(dòng)畫保持了用戶的方向感，并幫助用戶理解了視圖布局中剛剛發(fā)生的更改，觸發(fā)更改的原因以及以后在需要時(shí)如何再次發(fā)起更改。

圖片來源：Ehsan Rahimi

圖片來源：Dribbble

?

結(jié)論

高端網(wǎng)站設(shè)計(jì)能會(huì)說FAB是糟糕的UX。之所以說是誘人的，是因?yàn)橛脩艉驮O(shè)計(jì)師對(duì)此并不習(xí)慣。我們已經(jīng)習(xí)慣了熟悉的工具欄，而FAB的概念對(duì)我們來說仍然相當(dāng)陌生。我們都知道新事物很難實(shí)現(xiàn)，但同時(shí)又鼓勵(lì)了更精心設(shè)計(jì)的用戶體驗(yàn)。正確使用FAB對(duì)于最終用戶而言可能是一個(gè)非常有用的模式。??