北京UI設(shè)計(jì)培訓(xùn)_UI動(dòng)效設(shè)計(jì)轉(zhuǎn)場(chǎng)的6個(gè)核心規(guī)則

動(dòng)效不僅是界面的重要支持元素，也是用戶交互的基礎(chǔ)。相比于靜態(tài)的界面，動(dòng)態(tài)的轉(zhuǎn)場(chǎng)動(dòng)效更符合人類的自然認(rèn)知體系，有效地降低了用戶的認(rèn)知負(fù)載，屏幕上元素的變化過(guò)程，前后界面的變化邏輯，以及層次結(jié)構(gòu)之間的變化關(guān)系，都在動(dòng)效的加持之下，變得更加清晰自然。轉(zhuǎn)場(chǎng)動(dòng)效在UI界面中所起到的作用無(wú)疑是顯著的。

UI動(dòng)效設(shè)計(jì)日趨成熟。通過(guò)大量的案例分析和經(jīng)驗(yàn)，總結(jié)出了專場(chǎng)動(dòng)效的6個(gè)核心規(guī)則。
1、自然是好UI動(dòng)效的核心

用戶界面中只是靜止是生硬的，然用戶很難立刻理解。在現(xiàn)實(shí)生活中，事物不會(huì)突然的出現(xiàn)也不會(huì)突然的消失，都會(huì)有一個(gè)過(guò)渡的過(guò)程。當(dāng)界面有很多狀態(tài)的時(shí)候，轉(zhuǎn)態(tài)之間的變化可以使用過(guò)渡來(lái)填充，讓用戶明白他是怎么來(lái)的，而非一瞬間的過(guò)程。

2、快速的過(guò)渡是高效UI動(dòng)效的基礎(chǔ)

快速準(zhǔn)確，絕不拖沓是UI動(dòng)效的基礎(chǔ)，在設(shè)計(jì)過(guò)渡動(dòng)效的時(shí)候，時(shí)間和速度一定是最需要設(shè)計(jì)師把握好的因素。如果說(shuō)有什么是每個(gè)動(dòng)效設(shè)計(jì)都必須具備的，那一定是快速高效的時(shí)機(jī)把控。準(zhǔn)確的表達(dá)不會(huì)浪費(fèi)用戶的時(shí)間，也不會(huì)讓用戶產(chǎn)生煩躁。

當(dāng)元素在不同狀態(tài)之間切換的時(shí)候，運(yùn)動(dòng)過(guò)程在讓人看得清、容易理解的情況下盡量快，這樣才是的狀態(tài)。為了兼顧動(dòng)效的效率、理解的便捷以及用戶體驗(yàn)，動(dòng)效應(yīng)該在用戶觸發(fā)之后的0.1s內(nèi)開(kāi)始，在300ms 內(nèi)結(jié)束，這樣不會(huì)浪費(fèi)用戶的時(shí)間，還恰到好處。

3、高效的UI動(dòng)效是層次分明的

良好的過(guò)渡動(dòng)效有助于在正確的時(shí)間點(diǎn)，將用戶的注意到吸引到關(guān)鍵的內(nèi)容上，一個(gè)層次分明的動(dòng)效通常能夠清晰地展示狀態(tài)的變化，抓住用戶的注意力，而這取決于動(dòng)效是否能夠在正確的時(shí)間強(qiáng)調(diào)對(duì)的內(nèi)容。

4、清晰的UI動(dòng)效才是好動(dòng)效

動(dòng)效是功能性優(yōu)先、視覺(jué)傳達(dá)為核心的視覺(jué)元素，太過(guò)復(fù)雜的動(dòng)效除了有炫技之嫌，還會(huì)讓人難于理解，甚至在操作過(guò)程中失去方向感，這對(duì)于用戶體驗(yàn)而言是一個(gè)退步，而非優(yōu)化。清晰是幾乎所有好設(shè)計(jì)都有的共通點(diǎn)，不止是動(dòng)效。

動(dòng)效應(yīng)該避免一次呈現(xiàn)過(guò)多效果，尤其當(dāng)動(dòng)效同時(shí)存在多重、復(fù)雜的變化的時(shí)候，會(huì)自然地呈現(xiàn)出混亂的態(tài)勢(shì)，少即是多的原則對(duì)于動(dòng)效同樣是金科玉律。如果某個(gè)動(dòng)效的簡(jiǎn)化能夠讓整個(gè)UI更加清晰直觀，那么這個(gè)修改方案一定是個(gè)好主意。當(dāng)動(dòng)效中同時(shí)包含形狀、大小和位移變化的時(shí)候，請(qǐng)務(wù)必保持路徑的清晰以及變化的直觀性。

5、關(guān)聯(lián)是過(guò)渡動(dòng)效的重要功能

良好的過(guò)渡動(dòng)效連接著新出現(xiàn)的界面元素和之前的交互與觸發(fā)元素，既然是過(guò)渡，自然就牽涉到變化前后元素之間的關(guān)聯(lián)。這種關(guān)聯(lián)邏輯

用戶清楚變化的過(guò)程，以及界面中所發(fā)生的前后變化。動(dòng)效的發(fā)生點(diǎn)和交互的觸發(fā)點(diǎn)是非?？拷模@個(gè)動(dòng)效無(wú)疑闡述了兩者之間的因果

系動(dòng)效連接顯示和隱藏的兩個(gè)不同狀態(tài)，讓用戶知道上哪兒找隱藏的窗口。

6、可用性和可訪問(wèn)性

動(dòng)效本質(zhì)上是作為視覺(jué)傳達(dá)的一個(gè)組成部分而存在的，對(duì)于視覺(jué)障礙用戶而言，他們不一定能夠從動(dòng)效中得到好處、獲取信息。所以，考慮到這一部分用戶的需求，你應(yīng)該提供額外的信息幫助他們明白界面變化。

webacessibility.com 中提供了不少關(guān)于動(dòng)效設(shè)計(jì)的內(nèi)容和建議。

結(jié)語(yǔ)

過(guò)渡動(dòng)效始終是圍繞著用戶交互和界面元素而存在的，無(wú)論你要成效的是怎樣的動(dòng)態(tài)效果，可愛(ài)抑或是自然，都始終是服務(wù)于功能，然后才是情緒和氛圍。