這篇短文將會評論UI方案中動畫的過度運用，并將其與前期的視覺方案進行對比，提出一些對于有用的GUI動效方案的建議。
海淘科技將在下文中，簡略評論怎樣改進下面的這個交互。
UI動效方案的不好案例
注：這個不好案例并非假定，而是來自近期的真實客戶案例。
概述
自從 70、80 時代首個光柵圖像在CRT屏幕出現(xiàn)以來，我們對于(數(shù)字)視覺方案的心情一直在不斷進化。與其他藝術(shù)領(lǐng)域不一樣，在數(shù)字方案領(lǐng)域暴露的趨勢，與運用設(shè)備的展開史緊密有關(guān)。
設(shè)備才干的進步眾所周知，閃現(xiàn)器技能使分辨率從CGA320*200，到VGA的640*480，然后到SVGA的800*600，到現(xiàn)在已敏捷進步至4k及以上。
類比視覺方案展開進程
動效方案正在履歷生長的苦楚，正如在當年90時代和21世紀初的視覺方案。追溯視覺方案進化展開的進程，有助于我們?nèi)ダ斫猬F(xiàn)時期的動效方案。
在更精妙的方案言語出現(xiàn)之前，方案師們在前期時期簡略亂用新功用，這是正常的。90時代末和21世紀初的界面方案師，應(yīng)當還記得以暗影、斜角、高光，無留白這特征的過度方案。當方案師們著迷于新媒體，并沉醉于像素的美好時，這一成果再天然不過了。
不論你喜歡與否，扁平化方案在方案圈中已成為干流思想。全部的首要系統(tǒng)渠道(Android、iOS、OSX、Windows、Windows phone)都現(xiàn)已初步擁抱這種極簡方案言語。同時，它還操作著高速展開的頁面方案。
扁平化方案是視覺方案考慮老到的體現(xiàn)。它是一個天然的進程，一方面是被潮流和時尚唆使，另一方面折射出業(yè)內(nèi)人士總算逐漸掌握了數(shù)字媒體 。
現(xiàn)時期的動效方案，可以類比視覺方案史的“暗影時期”。
頁面動效才干有了明顯進步，得益于CSS中的過渡特色(transition)和被硬件加速支撐的變形特色(transform)，以及正在展開的標準，如JS動效(JS Web Animations)。
另外，現(xiàn)在的移動設(shè)備因為其不斷精進的功用，以及多核、多存儲、高dpi等優(yōu)勝的特性，可以流暢地輸出60fps動畫效果。
讓全部東西都動起來!這么的動效似乎讓人回到了1999年。
考慮到現(xiàn)在是UI動效的前期方案時期，方案師企圖通過增加動效來增強視覺亮點，和從前的暗影和斜角沒什么不一樣。
可是我很深信，與視覺方案不一樣，動效方案的老到不需要耗時15年。
無意義的動效隨處可見，它們也不只出自業(yè)余方案師之手。作為用戶，我們可以很輕易地發(fā)現(xiàn)這種阻止著你的動畫，它阻隔著你和你的政策，令你迷惑皺眉。作為方案師，你需要認識到你的UI方案并非什么文娛。沒有人只為看著酷炫的動效爽，就運用你的app或許頁面。
OS X的全屏動畫
桌面端和移動端都有很多的差勁UI動畫示例，其中之一，便是OS X的窗口切換到全屏方法的過渡動畫。因為它來自因前沿的方案感著稱的蘋果公司，且是旗艦產(chǎn)品的首要特色，所以格外令人迷惑。
(視頻：5-yosemite fullscreen.mp4)
這個UI動畫有以下幾個疑問：
緩慢
非必要
不可設(shè)置(除非通過命令行修正)
怎樣知道你的UI動效使人厭煩?我們會在博客上寫文抱怨。很多評論怎樣加速或禁用動效的博文和論壇疑問帖，都很有力地闡明這個轉(zhuǎn)場動效除了讓用戶煩惱，毫無效果，這是UI動效方案的一個大忌。
動效方案案例研討
我們運用一個簡略方案做示例，它來自我近期為客戶進行的工作。這個交互包括了一些差勁的方案決議方案。
UI動效方案的不好案例(線上demo)
這個方案包括如下疑問：
遮擋了界面的蒙層
缺少后臺正在實行操作的指示
動畫緩慢
動畫非必要
這個動畫最煩人的一點，是在耗時間的網(wǎng)絡(luò)央求完成后，這個動畫才發(fā)生，致使增加用戶額定的等待時間。
動畫是不是必要?
首要疑問理應(yīng)為：這個動畫進步了用戶領(lǐng)會嗎?
上述交互案例中，出現(xiàn)了精確運用UI動畫的絕佳時機?？紤]到這一交互需要一個耗時100-500毫秒的網(wǎng)絡(luò)央求，這是個運用動畫來掩蓋央求耗時的絕好時機。
方案改進
改進1(線上Demo)
這是很小的一個改進，增加一個加載指示器，告訴用戶正在等待額定的數(shù)據(jù)?？墒?，彈出動畫是剩下的，減緩了用戶流程。
改進2
刪減了不必要的滑出動畫，運用戶在操作后即可看到所需數(shù)據(jù)。蒙層的運用阻擋了用戶視圖，是剩下的打擾。
動畫——障眼法
推延，即使是網(wǎng)絡(luò)運用的推延，通過緩存和預(yù)讀取本錢，也可以減少甚至消除。可是這種方法也有其疑問。運用流量有限的移動網(wǎng)絡(luò)的用戶，并不情愿運用預(yù)讀取很多或許底子不不需要的數(shù)據(jù)。
考慮到推延并不總能完全避免，我們可以運用動畫制造更妥當?shù)腻e覺。這種情況下，運用分層動畫格外有用。
改進3
改進如下：
運用了不遮擋界面的加載指示。
堆疊的動畫分散了用戶對數(shù)據(jù)讀取推延的注意力。
漸進式加載
漸進式加載可用來進一步減少可感知的數(shù)據(jù)加載時間。用戶底子不可能立刻用到運用展現(xiàn)的全部數(shù)據(jù)。通過分塊下載、數(shù)據(jù)可用后再閃現(xiàn)信息的方法，用戶會發(fā)生運用比實際上呼應(yīng)更及時的錯覺。
改進4
很多留言的人，包括來自用戶領(lǐng)會社區(qū)的Isak Falch，舉薦我運用“拓寬式卡片”，這個方法最真實的優(yōu)點是堅持了用戶對上下文環(huán)境的感知。
作為另一種備選方案，也現(xiàn)已完成如下：
改進5
我們要注意，不要重復(fù)方法跨越功用的過錯。動畫可以且應(yīng)當運用于加強網(wǎng)站或運用的用戶領(lǐng)會，而純裝飾性的動畫效果設(shè)計，不太或許有助于產(chǎn)品變得非常好。
