你的UI動效，是點睛還是敗筆？
文 | Sophie Paxton
譯 | Vin
校 | 莫小貝
本文將探究UI設(shè)計中動畫效果的過度應(yīng)用，通過對比早期的視覺設(shè)計，為UI動畫的有效設(shè)計提供一些建議。
我們也會簡要涉及如何改進(jìn)下文中案例的交互。
遺憾的是，這并非某個做作的反面案例——而是某個近期客戶處拿來的實例。
簡介
自70-80年代CRT屏幕上映第一幅光柵圖形以來，人們對數(shù)字視覺設(shè)計的態(tài)度便不斷進(jìn)化。與其他藝術(shù)領(lǐng)域不同，數(shù)字設(shè)計的潮流始終隨可用工具的進(jìn)化而變化。
我們已經(jīng)見證了設(shè)備顯示能力的不斷進(jìn)步——從有限的CGA分辨率 (320 x 200) 到VGA(640 x 480)，再到SVGA (800 x 600)，直至今日顯示技術(shù)已迅速邁向4K分辨率乃至更高。
視覺設(shè)計的相似性
2000年前后的典型網(wǎng)頁設(shè)計
在90年代至2000年前后，動態(tài)設(shè)計經(jīng)歷過與視覺設(shè)計相似的成長瓶頸期。因而回顧視覺設(shè)計的發(fā)展歷程對于我們理解動態(tài)設(shè)計的現(xiàn)狀具有重要的借鑒意義。
在新的設(shè)計語言形成并進(jìn)化之前，設(shè)計師往往會濫用新技術(shù)，這是很自然的現(xiàn)象。在90年代后期到2010年間（互聯(lián)網(wǎng)初期、CD-ROM時代），為顯示媒介做過設(shè)計的人，必然牢記那些不厭其煩被使用的設(shè)計方式和元素—陰影、倒角、光效以及地不考慮留白。這些都是設(shè)計師駕馭新型媒介并醉心于嶄新像素中的自然產(chǎn)物。
扁平化設(shè)計
扁平化設(shè)計范例
無論你喜愛與否，時下扁平化設(shè)計風(fēng)格正風(fēng)靡設(shè)計圈。所有主流系統(tǒng)都十分青睞各式各樣的極簡主義扁平化設(shè)計語言（Android, iOS, OSX, Windows, Windows Mobile）。它甚至在高速變化的網(wǎng)頁設(shè)計領(lǐng)域也占據(jù)主導(dǎo)。
扁平化設(shè)計是視覺設(shè)計思維的成熟化體現(xiàn)。這一自然進(jìn)化不僅源自時尚潮流的驅(qū)動，同時也反映了這一行業(yè)專業(yè)人員已逐漸掌握數(shù)字媒介的核心。
動態(tài)設(shè)計
當(dāng)前動態(tài)設(shè)計的形勢，可與視覺設(shè)計的下拉陰影時代相提并論。
網(wǎng)頁動畫的潛力在CSS過渡效果、由硬件加速的變形效果以及即將到來的標(biāo)準(zhǔn)（如JS Web Animations）的驅(qū)動下得到了巨大提升。
像1999年那樣使用動畫吧！
此外，運(yùn)算能力更強(qiáng)的多核、大容量、高DPI設(shè)備，現(xiàn)在已經(jīng)可以完美輸出60幀的UI動畫。
鑒于UI動效設(shè)計才剛剛興起，設(shè)計師被導(dǎo)向以動畫作為視覺吸引是很自然的事，這與當(dāng)年陰影、倒角盛行的時代相似。
我確信，與視覺設(shè)計不同的是，動態(tài)設(shè)計不需要15年之久才能變得成熟。
動畫的過度使用
無用的動畫在設(shè)計中比比皆是，且并不僅限于設(shè)計新手。作為用戶，你可以輕易地發(fā)現(xiàn)這種動畫——它擋住了你與既定目標(biāo)之間的路，使你因無法完整地詮釋意圖而萬分沮喪。作為設(shè)計師，你必須明白UI絕不等于娛樂。沒有人會打開你的app或網(wǎng)站，然后贊嘆彈出的動畫做得有多贊！
失敗的動畫案例設(shè)計
OS X 全屏動畫
無論是桌面還是移動端，UI動畫的反面案例數(shù)不勝數(shù)。Mac OS X由窗口轉(zhuǎn)換到全屏的動畫就是一個例子。作為以前沿設(shè)計感知名的公司推出的主打產(chǎn)品中的核心功能，這一轉(zhuǎn)化的失敗著實令人費(fèi)解。
該動畫存在的問題包括：
- 速度緩慢
- 無存在必要性
- 除非使用命令行，否則無法修改
如何知道自己的UI動畫令人反感呢？那就是當(dāng)有人開始寫文章來吐槽這個問題的時候。無數(shù)的博客文章和論壇回復(fù)都關(guān)于如何加速或取消這個效果，這很好地說明了這種設(shè)計除了刺激用戶以外幾乎沒有任何作用，而這正是UI動態(tài)設(shè)計的大忌。
動態(tài)設(shè)計案例分析
拿一個近期客戶的案例做例子。這個交互包含了一系列不妥當(dāng)?shù)脑O(shè)計，包括：
反面教材
- 徹底擋住UI的蒙版
- 缺少后臺操作正在執(zhí)行的指示
- 動態(tài)效果緩慢
-無用的動畫
最令人厭煩的是它出現(xiàn)在耗時最長的網(wǎng)絡(luò)請求完成以后，從而為用戶增加了額外的等待時間。
動畫效果是否必要？
首先考慮一個問題：動畫是否提升了用戶體驗？
上文的交互是正確使用UI動畫的完美案例。這個交互需要一個100-500毫秒的請求才能完成，正是采用動畫填補(bǔ)這一等待時長的良好機(jī)會。
改進(jìn)設(shè)計
第一次迭代
這是一個細(xì)節(jié)性的提升，增加了一個載入指示以告訴用戶他們正在等待額外的數(shù)據(jù)，但是，彈出的動畫過于多余，只起到了降低用戶效率的作用。
第二次迭代
用戶不希望在閱讀信息時看到任何多余的動畫。使用蒙版遮住用戶視圖是一種不必要的入侵式行為。
魔術(shù)般的動畫
即使對于網(wǎng)頁App，使用緩存和主動預(yù)載機(jī)制，延遲也是可以減少甚至去除的。但是，這種做法自身也存在問題。有流量限制的移動端用戶并不希望預(yù)加載大量可能不需要的數(shù)據(jù)。
既然延遲不是總能完全避免，動畫就可使之變得更加流暢。此時層級動畫會非常有效。
第三次迭代
改進(jìn)功能包括：
- 非阻礙性的載入指示
- 層疊動畫，分散用戶對延遲的注意力
漸進(jìn)式載入
漸進(jìn)式的載入方式可進(jìn)一步減少用戶所感知的數(shù)據(jù)載入時間。幾乎可以確定，用戶不會立即使用程序?qū)⑻峁┙o他們的全部數(shù)據(jù)。通過給數(shù)據(jù)下載分塊，并隨數(shù)據(jù)的載入來顯示信息，用戶感受到的將是一個交互性更強(qiáng)的App。
第四次迭代
相當(dāng)數(shù)量的評論都推薦了卡片式擴(kuò)張的交互方式，在此列出，作為替代方案。
感謝你們建設(shè)性的建議！
備用|方案
該方式一個顯著的好處就是，用戶可保持對上下文的感知。
結(jié)論
我們必須十分謹(jǐn)慎，讓形式重于實用性的歷史不再重演。動畫可以也理應(yīng)被用在你的網(wǎng)站或App上以強(qiáng)化用戶體驗，但純粹裝飾性的動畫效果，很難令產(chǎn)品變的更好。
冗長的網(wǎng)絡(luò)請求提供了使用動畫的絕好機(jī)會——如同魔術(shù)一般，降低用戶所感知的等候時長。
來源 | 微信公眾號：特贊Tezign
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）