手把手教你改善界面交互動畫

 　　本文將探究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上以強化用戶體驗，但純粹裝飾性的動畫效果，很難令產品變的更好。

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

　　譯者微信號：