Material Design:為什么 FAB (Floating Action Button) 是不好的體驗設計 ? ?

4 評論 56238 瀏覽 17 收藏 12 分鐘

前段時間寫過一篇 『Google Photos 的幾點交互』,當時也覺得全屏瀏覽時,右下角那個藍色的 Search 按鈕(FAB Button)有點喧賓奪主,礙眼,明明只是位于瀏覽之后的次級操作卻占據(jù)著重要的位置,碰巧在 Medium 上讀到一篇關于 FAB 的文章,翻譯后與大家分享下。

下面進入譯文:

谷歌于一年前推出了全新的設計語言 Material Design ,旨在為手機、平板電腦、臺式機和『其他平臺』提供更一致、更廣泛的『外觀和感覺』。

重要功能包括 系統(tǒng)字體Roboto的升級版本 ,同時顏色更鮮艷,支持各種新動畫效果,還具有內(nèi)置的實時UI陰影,打造出 Android 平臺出色的用戶體驗(如 Google App 在 iOS 上的表現(xiàn))。

關于 Material Design ,自從其去年發(fā)布后有一件事一直困擾著我:浮動操作按鈕(Floating Action Button)。

什么是 FAB?

FAB 全稱:Floating Action Button,是浮動操作按鈕,一般作為進階操作的開關,在用戶界面中通常是一個漂浮的小圓圈,它有自身獨特的動態(tài)效果,比如變形、彈出、位移等等,代表著在當前頁面上用戶的特定的操作。

1

由于 Material Design 大膽的視覺風格,F(xiàn)ABs 非常難以忽視和突出——而這正是問題所在。

看上去 FABs 好像提供了理想的條件及好的用戶體驗,但在實際使用中,廣泛使用的 FABs 可能對應用的整體體驗有所影響,這里有一些原因:

它影響了沉浸式的用戶體驗

FABs 視覺突出——它確確實實在其它所有 UI 原素的上方,例如,添加一個 FAB 按鈕尤其會影響到那些旨在提供的沉浸式體驗的應用程序(或屏幕)。

Google Photos 就是其中一個例子。

2

在 Gallery 視圖中,有提供 浮動 Search 按鈕,但問題是:當我打開照片應用時,我只是想瀏覽我的照片。

浮動 Search 按鈕就這樣打斷了用戶沉浸式的體驗,變成了 app 的主要操作目的,誠然,智能搜索是 Google Photos 提供的獨特的功能,但這就意味著需要給它一個頂級的、持續(xù)出現(xiàn)的理由嗎?(我以為不是的)

有趣的是,Google 與我的意見一致,在 Material Design 的設計指南中關于 FABs ,Google 是這樣說的:

『并不是每一個屏幕都需要浮動操作按鈕』,接著說:『一個浮動操作按鈕應該能夠代表這個 App 中的主要操作,左邊主要是相冊集和打開的圖片,并不需要浮動按鈕,而在右側(cè),主要的動作是添加內(nèi)容,所以添加浮動操作按鈕是合理的。』

Oops…

3

它們站出來,站在路上

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

但,嘿,F(xiàn)AB 只不過是一個小的圓形按鈕,對嗎?能有多少內(nèi)容會被擋住呢?

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

當你想看看屏幕上最后一行第四個縮略圖時,還需要額外的滾動,這甚至不是最壞的情況。

用戶 dumazy 遇到了一個問題,F(xiàn)AB 按鈕掩蓋了 Favourite 按鈕以及屏幕上的時間戳,這說明了一個所有 App 在列表頁面都會遇到的問題,當列表中的最后一項不能在進行進一步滾動時,則更加是一個問題。

4

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

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

在做 UX 設計時,一定要記住 80/20 法則非常有用,其中指出,用戶 80% 的時間將會使用 20% 的功能,換句話說,我們應該不遺余力的去設計那些用戶大部分時間使用的幾個重要功能。

FAB 實際上做到了這一點——理論上來講。但是,如果『進階操作』沒有被用戶經(jīng)常使用呢?

以 Google 的 Gmail 應用為例:

5

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

但是,這是真的嗎?

多項研究表明,在移動設備上,至少 50% 的用戶是讀郵件,撰寫郵件方面,小到?jīng)]有數(shù)據(jù)表明。換句話說,作為我們的日常經(jīng)驗也會證實,大多數(shù)用戶傾向于使用他們的電子郵件 App 來閱讀電子郵件。

也許有少量的用戶會在移動設備上回復郵件,但這也僅發(fā)生在打開郵件之后(注意,這意味著他們將繞過首頁的 FAB 按鈕 )。

這種用戶行為,有可能是由于虛擬鍵盤和自動更正的不完善的輸入機制造成的(這句話翻譯的可能不對),也就是說用戶的主要操作實際上是閱讀(和回復)的電子郵件,而不是撰寫一封新的郵件。

那么,『撰寫郵件』FAB 到底做了什么?

在極少的情況下會使用戶感到,就是當用戶在路上打開 App 后可以馬上撰寫郵件。但是更多時候,它只是占用屏幕空間,擋住星形按鈕(收藏按鈕)和時間戳,并持續(xù)不斷的用醒目的紅色來使用戶分心。

我們需要 FABs 嗎?仔細想想——我們真的想要 FABs 嗎?

當然,并不是所有采用 Material Design 的應用中的 FAB 都降低了體驗,一些使用了 FAB 的出色應用令人印象深刻,也因此提升了使用體驗。

6

Google Maps 是一個很棒的例子,用戶在地圖上的主要動作是獲得方向,F(xiàn)AB 這樣做非常有意義,做了它該做的事。

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

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

當優(yōu)秀的 FAB 實現(xiàn)寥寥無幾時,這就引出一個問題:我們需要 FABs 嗎?

當我們看到使用 FAB 的應用存在一些缺點時,我們簡單的歸結(jié)為:用戶在 App 上不只是執(zhí)行操作,他們會閱讀內(nèi)容(如果時間不多時)。

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

因此,F(xiàn)AB 是種設計理念(或至少,是設計上的一種選擇)使得最佳內(nèi)容讓位于操作,我們需要自問:這是折衷的需要嗎?事實上,是一種折衷的做法嗎?

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

Google 的 Material Design 是一個很好的,很棒的具有統(tǒng)一性、原則性的設計語言,至于 FAB,嗯,不是極好的(原文最后一句為:just isn’t that fab. )

 

原文鏈接地址:

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

#專欄作家#

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

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

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 為什么說fab按鈕不是好的體驗設計,我是被標題吸引的

    來自北京 回復
  2. 作為一種補充,寫得挺好的!

    來自廣東 回復
  3. 這個東西 見仁見智

    來自四川 回復
    1. ??

      來自廣東 回復