設(shè)計師們,停止不必要的UI動效設(shè)計吧!
這篇短文將會探討UI設(shè)計中動畫的過度使用,并將其與早期的視覺設(shè)計進(jìn)行對比,提出一些對于有效的GUI動效設(shè)計的建議。我們將在下文中,簡單探討如何改善下面的這個交互。
這個反面案例并非假設(shè),而是來自近期的真實客戶案例。
UI動效設(shè)計的反面案例(線上Demo)
自從 70、80 年代首個光柵圖像在CRT屏幕出現(xiàn)以來,人們對于(數(shù)字)視覺設(shè)計的態(tài)度一直在不斷進(jìn)化。與其他藝術(shù)領(lǐng)域不同,在數(shù)字設(shè)計領(lǐng)域顯露的趨勢,與使用設(shè)備的發(fā)展史緊密相關(guān)。
設(shè)備能力的提升有目共睹,顯示器技術(shù)使分辨率從CGA320*200,到VGA的640*480,然后到SVGA的800*600,到現(xiàn)在已快速提升至4k及以上。
類比視覺設(shè)計發(fā)展歷程
動效設(shè)計正在經(jīng)歷成長的疼痛,正如在當(dāng)年90年代和21世紀(jì)初的視覺設(shè)計。追溯視覺設(shè)計進(jìn)化發(fā)展的過程,有助于我們?nèi)ダ斫猬F(xiàn)階段的動效設(shè)計。
(21世紀(jì)初期的網(wǎng)頁設(shè)計)
在更精妙的設(shè)計語言出現(xiàn)之前,設(shè)計師們在初期階段容易濫用新功能,這是正常的。90年代末和21世紀(jì)初的界面設(shè)計師,應(yīng)該還記得以陰影、斜角、高光,無留白這特征的過度設(shè)計。
當(dāng)設(shè)計師們著迷于新媒體,并陶醉于像素的奇妙時,這一結(jié)果再自然不過了。
扁平化設(shè)計
(扁平化設(shè)計示例)
不管你喜歡與否,扁平化設(shè)計在設(shè)計圈中已成為主流思想。所有的主要系統(tǒng)平臺(Android、iOS、OSX、Windows、Windows phone)都已經(jīng)開始擁抱這種極簡設(shè)計語言。同時,它還主宰著高速發(fā)展的網(wǎng)頁設(shè)計。
扁平化設(shè)計是視覺設(shè)計思考成熟的體現(xiàn)。它是一個自然的進(jìn)程,一方面是被潮流和時尚驅(qū)使,另一方面折射出業(yè)內(nèi)人士終于逐漸掌握了數(shù)字媒體 。
動效設(shè)計
現(xiàn)階段的動效設(shè)計,可以類比視覺設(shè)計史的“陰影階段”。
網(wǎng)頁動效能力有了顯著提升,得益于CSS中的過渡屬性(transition)和被硬件加速支持的變形屬性(transform),以及正在發(fā)展的標(biāo)準(zhǔn),如JS動效(JS Web Animations)。
另外,現(xiàn)在的移動設(shè)備由于其不斷精進(jìn)的性能,以及多核、多存儲、高dpi等優(yōu)越的特性,可以流暢地輸出60fps動畫效果。
讓所有東西都動起來!這樣的動效仿佛讓人回到了1999年。
考慮到現(xiàn)在是UI動效的早期設(shè)計階段,設(shè)計師試圖通過增加動效來增強視覺亮點,和曾經(jīng)的陰影和斜角沒什么不同。
但是我很確信,與視覺設(shè)計不同,動效設(shè)計的成熟不需要耗時15年。
過度的動效使用
無意義的動效隨處可見,它們也不僅出自業(yè)余設(shè)計師之手。
作為用戶,我們可以很輕易地發(fā)現(xiàn)這種妨礙著你的動畫,它阻隔著你和你的目標(biāo),令你困擾皺眉。作為設(shè)計師,你需要意識到你的UI設(shè)計并非什么娛樂。沒有人只為看著酷炫的動效爽,就使用你的app或者網(wǎng)頁。
UI動畫的使用反例
OS X的全屏動畫
桌面端和移動端都有無數(shù)的糟糕UI動畫示例,其中之一,就是OS X的窗口切換到全屏模式的過渡動畫。因為它來自因前沿的設(shè)計感著稱的蘋果公司,且是旗艦產(chǎn)品的主要特點,所以格外令人困惑。
這個UI動畫有以下幾個問題:
- 緩慢
- 非必要
- 不可設(shè)置(除非通過命令行修改)
如何知道你的UI動效使人厭煩?人們會在博客上寫文抱怨。無數(shù)探討如何加速或禁用動效的博文和論壇問題帖,都很有力地說明這個轉(zhuǎn)場動效除了讓用戶煩惱,毫無作用,這是UI動效設(shè)計的一個大忌。
動效設(shè)計案例研究
我們使用一個簡單設(shè)計做示例,它來自我最近為客戶進(jìn)行的工作。這個交互包含了一些糟糕的設(shè)計決策。
UI動效設(shè)計的反面案例(線上demo)
這個設(shè)計包括如下問題:
- 遮擋了界面的蒙層
- 缺少后臺正在執(zhí)行操作的指示
- 動畫緩慢
- 動畫非必要
這個動畫最煩人的一點,是在耗時間的網(wǎng)絡(luò)請求完成后,這個動畫才發(fā)生,導(dǎo)致增加用戶額外的等待時間。
動畫是否必要?
首要問題理應(yīng)為:這個動畫提升了用戶體驗嗎?
上述交互案例中,出現(xiàn)了正確使用UI動畫的絕佳時機(jī)。考慮到這一交互需要一個耗時100-500毫秒的網(wǎng)絡(luò)請求,這是個利用動畫來掩蓋請求耗時的絕好機(jī)會。
設(shè)計改進(jìn)
改進(jìn)1(線上Demo)
這是很小的一個改進(jìn),增加一個加載指示器,告訴用戶正在等待額外的數(shù)據(jù)。然而,彈出動畫是多余的,減緩了用戶流程。
改進(jìn)2(線上Demo)
刪減了不必要的滑出動畫,使用戶在操作后即可看到所需數(shù)據(jù)。蒙層的使用阻擋了用戶視圖,是多余的打擾。
動畫——障眼法
延遲,即使是網(wǎng)絡(luò)應(yīng)用的延遲,通過緩存和預(yù)讀取資源,也可以減少甚至消除。然而這種方式也有其問題。使用流量有限的移動網(wǎng)絡(luò)的用戶,并不愿意應(yīng)用預(yù)讀取大量可能根本不不需要的數(shù)據(jù)。
考慮到延遲并不總能完全避免,我們可以使用動畫制造更利落的錯覺。這種情況下,使用分層動畫尤其有效。
改進(jìn)3(線上Demo)
改進(jìn)如下:
- 使用了不遮擋界面的加載指示。
- 重疊的動畫分散了用戶對數(shù)據(jù)讀取延遲的注意力。
漸進(jìn)式加載
漸進(jìn)式加載可用來進(jìn)一步減少可感知的數(shù)據(jù)加載時間。用戶基本不可能立刻用到應(yīng)用展示的所有數(shù)據(jù)。通過分塊下載、數(shù)據(jù)可用后再顯示信息的方法,用戶會產(chǎn)生應(yīng)用比實際上響應(yīng)更及時的錯覺。
改進(jìn)4(線上Demo)
很多留言的人,包括來自用戶體驗社區(qū)的Isak Falch,推薦我使用“擴(kuò)展式卡片”,這個方法最切實的好處是保持了用戶對上下文環(huán)境的感知。
作為另一種備選方案,也已經(jīng)實現(xiàn)如下:
改進(jìn)5(線上Demo)
感謝大家的建設(shè)性意見!
結(jié)論
我們要注意,不要重復(fù)過去形式超越功能的錯誤。動畫可以且應(yīng)該應(yīng)用于加強網(wǎng)站或應(yīng)用的用戶體驗,而純裝飾性的動畫效果,不太可能有助于產(chǎn)品變得更好。
長時間的網(wǎng)絡(luò)請求,是使用動畫障眼法,縮短等待時間感知的好機(jī)會。
注:如果你對這篇文章感興趣的話,你應(yīng)該也會對《有效的原型設(shè)計》感興趣。
譯文來自:Stop Gratuitous UI Animation 。百度MUX的譯文僅作學(xué)習(xí)用途
本文系人人都是產(chǎn)品經(jīng)理團(tuán)隊@百度MUX ?翻譯發(fā)布,未經(jīng)許可,不得轉(zhuǎn)載。
看到都在噴我就放心了
我就說嘛,劉超一個人是不能搞臭一鍋湯的。
這很百度。
看了你的回復(fù)才去看作者。。。真的很百度。。。
看到大家都在鄙視我就放心了 ??
看到改進(jìn)方案的我直接放棄了閱讀,loading現(xiàn)在給人最直觀的感受就是慢,慢,慢,用從下往上的彈出動效有何不可,這也算慢的話,我更愿意看這樣的動效,而不是先loading再出現(xiàn)彈窗,因為一出現(xiàn)loading個人感覺就是網(wǎng)絡(luò)是不是出現(xiàn)問題了,瑪?shù)戮W(wǎng)速怎么這么差,或許因為這種多次加載的動效懷疑到應(yīng)用本身的問題,對比可得,這樣的改進(jìn)動效有何意義?
同意。首先,結(jié)合上下文,1. 動畫信息非必要顯示。2.在加載動畫中放圖標(biāo),這是可點還是不可點?點了怎么處理?3.為了解決一個加載等待的小問題,過度設(shè)計了一個大版面,大交互。
還不如就做個簡單有趣的小動畫呢。
干貨?
這是水貨
這個動效用什么工具制作的啊?