Material Design:為什麼懸浮響應按鈕是糟糕的 UX 設計

發表於2015-06-28

Material Design 是 Google 一年前推出的一種設計語言,代表著該公司在跨裝置和平臺上創造統一使用者體驗的大膽嘗試。它注重大膽的色彩、自由且遵循陰影的使用,以指示 UI 層和平滑的動畫,為 Android(和某些 iOS 上的 Google 應用)提供非常優秀的使用者體驗。

然而,自從 Material Design 去年推出以來,有一個地方在困擾著我:懸浮響應按鈕(Floating Action Buttons,本文簡寫為 FAB)。

懸浮式響應按鈕 | Image credit: Google

根據 Google 的建議,FAB 是懸浮在 UI 上的圓形按鈕,用於”進階操作“【注1】。它們用來呼叫響應按鈕,代表著使用者在特定螢幕上最想操作的單個行為。

由於 Material Design 大膽的視覺風格,FAB 十分突出,而難以忽視——問題就出在這裡。

在理想條件下,FAB 貌似提供了優秀的使用者體驗,然而,FAB 的廣泛使用相對於 app 的整體使用者體驗,或許是有害的。下面是一些原因。

它們帶走了身臨其境的體驗

FAB 在視覺上十分突出——它們總是位於螢幕上每個其它 UI 元素的頂層。這樣,增加一個 FAB,將自動導致使用者體驗少了一些身臨其境,尤其是影響到了那些想提供身臨其境體驗的 app(或螢幕)。

舉個例子,新版 Google 相簿。

Google’s Photos app | Image credit: Google

該應用開啟後,是相簿的檢視,帶著一個懸浮搜尋按鈕。不過問題在於,當我開啟相簿應用時,我只是想……瀏覽我的照片。

這個搜尋按鈕就這樣分散了使用者身臨其境瀏覽照片的體驗,後者恰恰是該應用擺在首位的主要目的。當然,聰明的照片搜尋是 Google 相簿這款 app 的獨特功能。但是,這意味著它應該是 app 裡的頂層的、持續出現的 FAB 嗎?(我不覺得)

具有諷刺意味的是,Google 同意我的看法。在 Material Design 教程的 FAB 一節,Google 解釋道,「不是每個螢幕都需要一個 FAB」。它接著說「主要響應是觸碰相簿中的圖片,因此不需要按鈕。」哦。

它們過於突出、起了阻礙的影響

這或許就像同一枚硬幣的另一面,但是或許更重要的,FAB 的阻礙影響有另一種暗示。FAB 佔據了螢幕上的面積,有效地遮擋了內容

但是,FAB 只是一個小圓按鈕,對吧?它能遮擋多少內容呢?

如果你看 Google 相簿 app 的截圖,你就意識到,用於搜尋的 FAB 遮擋了圖片縮圖 50%——明確地說,大到足以蓋住一兩張臉。當你每次想看螢幕最後一行的第四張縮圖時,還需要額外的滾動。這甚至還不是最糟糕的情況。

FAB 遮擋了內容,收藏按鈕和時間戳 | Image credit: dumazy

有個名叫 dumazy 的使用者,在 Graphic Design Stack Exchange 網站提出了他遇到的問題,是關於 FAB 遮擋了 app 螢幕上的“收藏”星星,還有時間戳。這表明了所有帶有列表檢視的 app 都會面臨的問題,當列表的最後一個條目不能進一步滾動時,它就更是問題了。

這意味著 FAB 寬度的、整個列不得不做出犧牲(通過重新調整星標按鈕等),以支援螢幕合適的可用性。

雖然它看起來不是那樣的,FAB 佔用了比建議的尺寸、更多的螢幕空間。

進階操作或許不那麼經常用到

在做 UX 設計時,記住 80/20 法則是有用的,它指出使用者在 80% 的時間裡將使用 20% 的功能。換句話說,大部分努力應該放在使用者大多數時間在用的少量元素上。

從理論上看,FAB 實際上就是那樣做的。但是如果“進階動作”沒有被使用者經常用到,該怎麼辦呢?

拿 Google Gmail 做例子。

Google’s Gmail app | Image credit: Google

Gmail app 的 FAB 是撰寫按鈕,表明使用者執行的主要動作是寫郵件。

不過,這是真的嗎?

多項研究表明,現在至少 50% 的郵件是通過移動裝置閱讀的,但是沒有資料顯示同樣的情況轉移到撰寫郵件上。換句話說,我們日常體驗更可能證實,大部分忙碌的移動使用者傾向於使用他們的郵件應用閱讀郵件。

可能有少量使用者在移動裝置上回復郵件,但是僅僅發生在開啟了一封郵件之後(注意,這意味著他們將繞過 FAB)。這種使用者行為,就像不太完美的虛擬鍵盤的輸入機制和自動糾錯所導致的,意味著使用者執行的主要動作,實際上是閱讀(和回覆)郵件,而非撰寫新郵件。

因此,“寫郵件” FAB 有什麼作用呢?在少數情況下,當使用者立即想用這個應用寫郵件時,它可以讓使用者愉悅。但是其它場合,它只是佔用了螢幕空間,遮擋了星星按鈕和時間戳,因帶有明顯的紅色而持續地分散注意力。

我們需要 FAB 嗎?或者說,我們想要 FAB 嗎?

當然,不是所有應用程式裡的 FAB 降低了使用 Material 應用的體驗。有一些極好的例子,FAB 意義非凡,因此增強了那些應用的 UX。

Google’s Maps on iOS

Google 地圖是 FAB 使用得當的極好例子。使用者在地圖上執行的主要動作是找到方向,因此用 FAB 做這樣的事情就太棒了。

但是考慮到地圖是一種非常特殊的情況,使用者感興趣的內容差不多位於螢幕中央(就是你的藍色方向點的位置)。然而,在大多數應用裡,網格或列表檢視意味著,使用者需要和位於螢幕每個地方的內容進行互動,包括 FAB 通常放置的地方。

還有,上面的截圖只說出了一部分情況:在實際使用中,這些 FAB 在使用者滾動(大部分時間裡)時,仍然呆在那裡。正如 Google 在 Material Design 裡多次強調的,動態圖形設計【注2】和 UI 設計一樣重要。在移動內容的情況下,動態圖形的缺乏——在螢幕空間的持續保持——催生了一種更高階的分心,這是截圖幾乎顯示不出來的。

當優秀的 FAB 實現的例子少之又少時,就提出了一個問題:我們需要 FAB 嗎?

當我們談了應用裡的 FAB 的缺點,我們可以將其總結為一個簡單的認識:使用者在應用裡不僅僅只是執行動作,他們也消費內容(沒有比這花的時間多了)。

Material Design 裡的 FAB 設計是基於使用者經常執行某個動作為前提,因此它應該以持續的、高階按鈕的形式,被給予一種重要的狀態。但是在很多應用裡,使用者關注於消費內容(多得不能再多了):在 Google 相簿 app 裡,使用者想瀏覽照片;在 Gmail app 裡,使用者想閱讀他們的郵件;在 Facebook app 裡,使用者想檢視他們朋友的動態。

FAB 是這樣一種設計哲學(至少算作一種設計上的選擇),使理想的內容消費從屬於執行動作。我們需要自問:這樣一種折衷是必需的嗎?事實上,這樣的折衷是想要的嗎?

當 FAB 導致大部分時間裡 UX 消失時,當難以搞清楚 app 裡的單個最常使用的動作時,當需要探索迂迴的方法(類似於滾動時消失,或列出不同位置的元素)時,我想說,答案是非常響亮的 不。

Google 的 Material Design 是一種棒極了的、統一的、有準則的設計語言,但是 FAB 卻名不副實。

相關文章