交互設計案例！手把手教你改善界面交互動畫

本文將探究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毫秒的請求才能完成，正是采用動畫填補這一等待時長的良好機會。

(編輯：小酷)