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