Oops…

它們站出來(lái)，站在路上

就好像一枚硬幣的另一面，可能更重要的是，F(xiàn)AB 妨礙著正常操作，它占領(lǐng)了屏幕上的一塊區(qū)域，有效的阻止了內(nèi)容。

但，嘿，F(xiàn)AB 只不過(guò)是一個(gè)小的圓形按鈕，對(duì)嗎？能有多少內(nèi)容會(huì)被擋住呢？

如果你看看 Photos 的截圖（緊湊視圖下），會(huì)意識(shí)到右下角那個(gè) Search 浮動(dòng)按鈕會(huì)占據(jù)縮略圖 50% 的空間，很顯然已經(jīng)大到足以覆蓋掉照片中一張甚至兩張臉。

當(dāng)你想看看屏幕上最后一行第四個(gè)縮略圖時(shí)，還需要額外的滾動(dòng)，這甚至不是最壞的情況。

用戶 dumazy 遇到了一個(gè)問(wèn)題，F(xiàn)AB 按鈕掩蓋了 Favourite 按鈕以及屏幕上的時(shí)間戳，這說(shuō)明了一個(gè)所有 App 在列表頁(yè)面都會(huì)遇到的問(wèn)題，當(dāng)列表中的最后一項(xiàng)不能在進(jìn)行進(jìn)一步滾動(dòng)時(shí)，則更加是一個(gè)問(wèn)題。

這意味著一整列的寬度必須做出犧牲（或通過(guò)重新定位 Favourite 按鈕），以提供更好易用性，雖然可能不是看上去這樣，但 FAB 按鈕占據(jù)了比按鈕本身還要大的空間。

進(jìn)階操作可能不經(jīng)常使用

在做 UX 設(shè)計(jì)時(shí)，一定要記住 80/20 法則非常有用，其中指出，用戶 80％ 的時(shí)間將會(huì)使用 20％ 的功能，換句話說(shuō)，我們應(yīng)該不遺余力的去設(shè)計(jì)那些用戶大部分時(shí)間使用的幾個(gè)重要功能。

FAB 實(shí)際上做到了這一點(diǎn)——理論上來(lái)講。但是，如果『進(jìn)階操作』沒(méi)有被用戶經(jīng)常使用呢？

以 Google 的 Gmail 應(yīng)用為例：

Gmail 應(yīng)用的 FAB 是寫(xiě)郵件按鈕，這表明主要操作是創(chuàng)建一封電子郵件。

但是，這是真的嗎？

多項(xiàng)研究表明，在移動(dòng)設(shè)備上，至少 50% 的用戶是讀郵件，撰寫(xiě)郵件方面，小到?jīng)]有數(shù)據(jù)表明。換句話說(shuō)，作為我們的日常經(jīng)驗(yàn)也會(huì)證實(shí)，大多數(shù)用戶傾向于使用他們的電子郵件 App 來(lái)閱讀電子郵件。

也許有少量的用戶會(huì)在移動(dòng)設(shè)備上回復(fù)郵件，但這也僅發(fā)生在打開(kāi)郵件之后（注意，這意味著他們將繞過(guò)首頁(yè)的 FAB 按鈕 ）。

這種用戶行為，有可能是由于虛擬鍵盤(pán)和自動(dòng)更正的不完善的輸入機(jī)制造成的（這句話翻譯的可能不對(duì)），也就是說(shuō)用戶的主要操作實(shí)際上是閱讀（和回復(fù)）的電子郵件，而不是撰寫(xiě)一封新的郵件。

那么，『撰寫(xiě)郵件』FAB 到底做了什么？

在極少的情況下會(huì)使用戶感到爽，就是當(dāng)用戶在路上打開(kāi) App 后可以馬上撰寫(xiě)郵件。但是更多時(shí)候，它只是占用屏幕空間，擋住星形按鈕（收藏按鈕）和時(shí)間戳，并持續(xù)不斷的用醒目的紅色來(lái)使用戶分心。

我們需要 FABs 嗎？仔細(xì)想想——我們真的想要 FABs 嗎？

當(dāng)然，并不是所有采用 Material Design 的應(yīng)用中的 FAB 都降低了體驗(yàn)，一些使用了 FAB 的出色應(yīng)用令人印象深刻，也因此提升了使用體驗(yàn)。

Google Maps 是一個(gè)很棒的例子，用戶在地圖上的主要?jiǎng)幼魇谦@得方向，F(xiàn)AB 這樣做非常有意義，做了它該做的事。

但考慮使用地圖時(shí)的場(chǎng)景下，用戶的注意力總是會(huì)落到屏幕的中間，但在大多數(shù)應(yīng)用中，不管是網(wǎng)格視圖或列表視圖，用戶會(huì)與屏幕上任何位置的內(nèi)容發(fā)生交互，包括 FAB 按鈕處于的位置。

上面的截圖也只說(shuō)明了一部分：在實(shí)際使用過(guò)程中，F(xiàn)ABs 會(huì)待在那里不動(dòng)甚至當(dāng)用戶滾動(dòng)屏幕時(shí)（大多數(shù)情況下）；Google 多次強(qiáng)調(diào)在 Material Design 中 動(dòng)效設(shè)計(jì) 與 UI 設(shè)計(jì)一樣重要；缺少動(dòng)效，截圖并不能很好的展示出在上下文環(huán)境中的內(nèi)容優(yōu)先級(jí)。（這句話翻譯的可能不對(duì)）

當(dāng)優(yōu)秀的 FAB 實(shí)現(xiàn)寥寥無(wú)幾時(shí)，這就引出一個(gè)問(wèn)題：我們需要 FABs 嗎？

當(dāng)我們看到使用 FAB 的應(yīng)用存在一些缺點(diǎn)時(shí)，我們簡(jiǎn)單的歸結(jié)為：用戶在 App 上不只是執(zhí)行操作，他們會(huì)閱讀內(nèi)容（如果時(shí)間不多時(shí)）。

FAB 在 Material Design 中設(shè)計(jì)的假設(shè)是基于用戶會(huì)經(jīng)常操作某個(gè)操作，因此將它做為一個(gè)可持續(xù)出現(xiàn)的高級(jí)按鈕，但是大多數(shù)應(yīng)用中，用戶會(huì)專(zhuān)注在內(nèi)容上的消費(fèi)：在 Photos 中，用戶想『查看』照片；在 Gmail 中，用戶想要『閱讀』他們的電子郵件；在 Facebook App 中，用戶想『看』朋友們的狀態(tài)。

因此，F(xiàn)AB 是種設(shè)計(jì)理念（或至少，是設(shè)計(jì)上的一種選擇）使得最佳內(nèi)容讓位于操作，我們需要自問(wèn)：這是折衷的需要嗎？事實(shí)上，是一種折衷的做法嗎？

FABs 在大部分時(shí)間降低了用戶體驗(yàn)，我們也很難定義出在一個(gè) App 中最常用的操作，還需去探索更加有效的方法（比如滑動(dòng)屏幕時(shí)，隱藏 FAB 按鈕，或者在不同位置展示元素），我想說(shuō)，答案是一個(gè)響亮的：不。

Google 的 Material Design 是一個(gè)很好的，很棒的具有統(tǒng)一性、原則性的設(shè)計(jì)語(yǔ)言，至于 FAB，嗯，不是極好的（原文最后一句為：just isn’t that fab. ）

原文鏈接地址：

https://medium.com/tech-in-asia/material-design-why-the-floating-action-button-is-bad-ux-design-acd5b32c5ef

#專(zhuān)欄作家#

大偉，微信電影 產(chǎn)品經(jīng)理，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家，從用戶需求（在一大堆很酷的設(shè)想中砍掉當(dāng)中的絕大一部分）到產(chǎn)品定義（有價(jià)值且符合公司戰(zhàn)略發(fā)展），從產(chǎn)品原型到視覺(jué)設(shè)計(jì)，從交互到動(dòng)效，毫無(wú)疑問(wèn)，這些都是非常振奮人心和充滿能量的，希望你可以在我們的會(huì)話中找到有用的東東。

本文系作者授權(quán)發(fā)布，未經(jīng)許可，不得轉(zhuǎn)載。