點睛還是敗筆？手把手教你改善界面交互動畫（附案例）

@特贊Tezign??：本文將探究UI設計中動畫效果的過度應用，通過對比早期的視覺設計，為UI動畫的有效設計提供一些建議，另外附上實戰案例，手把手教你改進文中案例的交互動畫喲。

遺憾的是，這并非某個做作的反面案例——而是某個近期客戶處拿來的實例。

簡介

自70-80年代CRT屏幕上映第一幅光柵圖形以來，人們對數字視覺設計的態度便不斷進化。與其他藝術領域不同，數字設計的潮流始終隨可用工具的進化而變化。

我們已經見證了設備顯示能力的不斷進步——從有限的CGA分辨率 (320 x 200) 到VGA(640 x 480)，再到SVGA (800 x 600)，直至今日顯示技術已迅速邁向4K分辨率乃至更高。

視覺設計的相似性

2000年前后的典型網頁設計

在90年代至2000年前后，動態設計經歷過與視覺設計相似的成長瓶頸期。因而回顧視覺設計的發展歷程對于我們理解動態設計的現狀具有重要的借鑒意義。

在新的設計語言形成并進化之前，設計師往往會濫用新技術，這是很自然的現象。在90年代后期到2010年間（互聯網初期、CD-ROM時代），為顯示媒介做過設計的人，必然牢記那些不厭其煩被使用的設計方式和元素—陰影、倒角、光效以及地不考慮留白。這些都是設計師駕馭新型媒介并醉心于嶄新像素中的自然產物。

扁平化設計

扁平化設計范例

無論你喜愛與否，時下扁平化設計風格正風靡設計圈。所有主流系統都十分青睞各式各樣的極簡主義扁平化設計語言（Android, iOS, OSX, Windows, Windows Mobile）。它甚至在高速變化的網頁設計領域也占據主導。

扁平化設計是視覺設計思維的成熟化體現。這一自然進化不僅源自時尚潮流的驅動，同時也反映了這一行業專業人員已逐漸掌握數字媒介的核心

動態設計

當前動態設計的形勢，可與視覺設計的下拉陰影時代相提并論。

網頁動畫的潛力在CSS過渡效果、由硬件加速的變形效果以及即將到來的標準（如JS Web Animations）的驅動下得到了巨大提升。

像1999年那樣使用動畫吧！

此外，運算能力更強的多核、大容量、高DPI設備，現在已經可以完美輸出60幀的UI動畫。

鑒于UI動效設計才剛剛興起，設計師被導向以動畫作為視覺吸引是很自然的事，這與當年陰影、倒角盛行的時代相似。

我確信，與視覺設計不同的是，動態設計不需要15年之久才能變得成熟。

動畫的過度使用

無用的動畫在設計中比比皆是，且并不僅限于設計新手。作為用戶，你可以輕易地發現這種動畫——它擋住了你與既定目標之間的路，使你因無法完整地詮釋意圖而萬分沮喪。作為設計師，你必須明白UI絕不等于娛樂。沒有人會打開你的app或網站，然后贊嘆彈出的動畫做得有多贊！

失敗的動畫案例設計

OS X 全屏動畫

無論是桌面還是移動端，UI動畫的反面案例數不勝數。Mac OS X由窗口轉換到全屏的動畫就是一個例子。作為以前沿設計感知名的公司推出的主打產品中的核心功能，這一轉化的失敗著實令人費解。

該動畫存在的問題包括：

- 速度緩慢

- 無存在必要性

- 除非使用命令行，否則無法修改

如何知道自己的UI動畫令人反感呢？那就是當有人開始寫文章來吐槽這個問題的時候。無數的博客文章和論壇回復都關于如何加速或取消這個效果，這很好地說明了這種設計除了刺激用戶以外幾乎沒有任何作用，而這正是UI動態設計的大忌。

動態設計案例分析

拿一個近期客戶的案例做例子。這個交互包含了一系列不妥當的設計，包括：

反面教材

- 徹底擋住UI的蒙版

- 缺少后臺操作正在執行的指示

- 動態效果緩慢

-無用的動畫

最令人厭煩的是它出現在耗時最長的網絡請求完成以后，從而為用戶增加了額外的等待時間。

動畫效果是否必要？

首先考慮一個問題：動畫是否提升了用戶體驗？

上文的交互是正確使用UI動畫的完美案例。這個交互需要一個100-500毫秒的請求才能完成，正是采用動畫填補這一等待時長的良好機會。

改進設計

第一次迭代

這是一個細節性的提升，增加了一個載入指示以告訴用戶他們正在等待額外的數據，但是，彈出的動畫過于多余，只起到了降低用戶效率的作用。

第二次迭代

用戶不希望在閱讀信息時看到任何多余的動畫。使用蒙版遮住用戶視圖是一種不必要的入侵式行為。

魔術般的動畫

即使對于網頁App，使用緩存和主動預載機制，延遲也是可以減少甚至去除的。但是，這種做法自身也存在問題。有流量限制的移動端用戶并不希望預加載大量可能不需要的數據。

既然延遲不是總能完全避免，動畫就可使之變得更加流暢。此時層級動畫會非常有效。

第三次迭代

改進功能包括：

- 非阻礙性的載入指示

- 層疊動畫，分散用戶對延遲的注意力

漸進式載入

漸進式的載入方式可進一步減少用戶所感知的數據載入時間。幾乎可以確定，用戶不會立即使用程序將提供給他們的全部數據。通過給數據下載分塊，并隨數據的載入來顯示信息，用戶感受到的將是一個交互性更強的App。

第四次迭代

相當數量的評論都推薦了卡片式擴張的交互方式，在此列出，作為替代方案。

感謝你們建設性的建議！

備用方案

該方式一個顯著的好處就是，用戶可保持對上下文的感知。

結論

我們必須十分謹慎，讓形式重于實用性的歷史不再重演。動畫可以也理應被用在你的網站或App上以強化用戶體驗，但純粹裝飾性的動畫效果，很難令產品變的更好。

冗長的網絡請求提供了使用動畫的絕好機會——如同魔術一般，降低用戶所感知的等候時長。

譯者微信號：

【職場經驗之看完轉系列！】

想成為總監？來看看這個！
《優設重磅首發！聊聊從設計師到總監的晉級路線》

牛魔王的重磅之作！面試到簡歷全部搞定！
《優設重磅首發！全方位揭開簡歷和面試話術的秘密》

成為職場大牛的11種必備能力！
《設計師進階教程！成為優秀設計師必備的11種職場能力》

譯者： Vin
校對：莫小貝

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量99萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：