隨著CSS3和HTML5建站技術(shù)的發(fā)展，動效在網(wǎng)頁設(shè)計(jì)中的作用越來越顯著。與靜態(tài)界面相比，動態(tài)的轉(zhuǎn)變更符合人們的認(rèn)知體系，可以有效降低用戶認(rèn)知負(fù)載。這是因?yàn)椋诰W(wǎng)站界面使用動畫效果能讓元素的變化、界面的轉(zhuǎn)變、層次結(jié)構(gòu)之間的關(guān)系更加清晰自然。從某種程度上來說，動效還是用戶交互的基礎(chǔ)。那么，什么樣的動效才是有效的呢?我瀏覽了不少網(wǎng)站，總結(jié)出了5個(gè)核心準(zhǔn)則，現(xiàn)在一起來看一下吧。

　　1、自然流暢

　　一個(gè)好的動畫效果應(yīng)該是自然流暢的。在很多糟糕的網(wǎng)站設(shè)計(jì)中，我們可以看到頁面或元素的狀態(tài)改變都很生硬、突兀，這會讓用戶產(chǎn)生困惑：為什么某某元素突然出現(xiàn)或消失?任何事物都存在一個(gè)轉(zhuǎn)變的過程，人們早已在自然界、生活中形成了這樣的認(rèn)知規(guī)律。所以當(dāng)網(wǎng)站的頁面有兩個(gè)或多個(gè)狀態(tài)，需要使用動畫效果做過渡時(shí)，一定要保證它的自然流暢，讓用戶明白所以然。下圖就是一個(gè)比較好的示例，當(dāng)用戶在列表中選取一個(gè)項(xiàng)目點(diǎn)擊查看時(shí)，小卡片會展開為大卡片，展示眾多細(xì)節(jié)，這種動效是有規(guī)則可循的。

　　2、層次分明

　　一個(gè)高效的動效應(yīng)該是層次分明的。層次分明的動效一方面能夠清晰展示頁面狀態(tài)的變化，另一方面能夠有效抓住用戶的注意力，決定著用戶的關(guān)注持續(xù)時(shí)間。以下圖為例，圓形的懸浮按鈕處設(shè)置了動效，它會擴(kuò)展為帶有3個(gè)按鈕的頭部導(dǎo)航元素，導(dǎo)航界面與原先的界面有很鮮明的層次分割。雖然初次瀏覽的用戶難以預(yù)測到這一轉(zhuǎn)變的發(fā)生，但是這種形式的動畫能夠很好地保持用戶的注意力，引導(dǎo)用戶進(jìn)行下一步的交互。

　　3、關(guān)聯(lián)性

　　網(wǎng)站頁面上動畫效果大多都涉及到前后元素或狀態(tài)之間的變化。雖然我們在前面也強(qiáng)調(diào)了不同元素和狀態(tài)之間的層次分明，但是，光有層次感可不行，動畫效果也要有邏輯感，能呈現(xiàn)出一定的關(guān)聯(lián)性，讓用戶清楚界面變化的過程。下面以兩個(gè)栗子給大家實(shí)際展示一下什么是動效的關(guān)聯(lián)性。

　　在第一個(gè)栗子中，新出現(xiàn)的界面與動效觸發(fā)點(diǎn)較遠(yuǎn)，這讓整個(gè)界面看上去有斷層的感覺，用戶在瀏覽起來時(shí)也沒有那么順暢;

　　在第二個(gè)栗子中，新出現(xiàn)的界面就是從觸發(fā)點(diǎn)延伸出去的，這種形式的動效在關(guān)聯(lián)性上就做的很好。

　　4、快速精準(zhǔn)

　　如果說網(wǎng)站中的動畫效果只能有一個(gè)準(zhǔn)則的話，那一定就是動效的快速精準(zhǔn)。當(dāng)我們在網(wǎng)站中設(shè)計(jì)轉(zhuǎn)場動畫時(shí)，動效的速度絕對是一個(gè)需要重點(diǎn)考慮的因素。它既不能太慢，浪費(fèi)訪客的時(shí)間，也不能太快，讓訪客覺得難以理解。下面是一個(gè)反面教材，動畫效果的速度太慢了，這種不必要的延遲會加長用戶的等待時(shí)間，讓用戶覺得煩躁。

　　這還有一個(gè)正面的栗子。當(dāng)元素在不同狀態(tài)中切換時(shí)，動效的速度是恰當(dāng)?shù)模銐蚩焖倬珳?zhǔn)，也足夠讓用戶理解。小飛建議，為了兼顧動效的效率、用戶理解的順暢，動效應(yīng)該在觸動后的0.1s內(nèi)開始，在300ms內(nèi)結(jié)束，這算是一個(gè)最佳的狀態(tài)。不過這條準(zhǔn)則也不是固定不變的，你可以根據(jù)自己網(wǎng)站動畫效果的實(shí)際狀況進(jìn)行調(diào)整。

　　5、簡單清晰

　　動畫效果還應(yīng)該簡單清晰。如果用戶界面上存在許多動態(tài)或交互的元素，用戶的注意力會分散，不知道究竟應(yīng)該點(diǎn)擊哪一個(gè)。這在一定程度上會引起用戶的混亂。

　　所以，動效應(yīng)避免一次呈現(xiàn)過多效果，尤其當(dāng)動效同時(shí)存在多重、復(fù)雜的變化的時(shí)候。少即是多的原則對于動效同樣也成立。如果某個(gè)動效的簡化能夠讓整個(gè)UI更加清晰直觀，一定要去進(jìn)行修改。還有，當(dāng)動效中同時(shí)包含形狀、大小和位移變化的時(shí)候，一定要保持移動路徑的清晰，讓狀態(tài)變化更清晰。