有段時(shí)間沒(méi)有寫(xiě)UI動(dòng)效相關(guān)的文章了，之前寫(xiě)過(guò)一篇《超全面！動(dòng)效設(shè)計(jì)標(biāo)準(zhǔn)與規(guī)范》的動(dòng)畫(huà)文章，里面會(huì)講到一些更具體的參數(shù)范圍，實(shí)用性拉滿(mǎn)，看完就可以用到你的動(dòng)效調(diào)優(yōu)里，干到擰不出水。今天的這篇更偏方法一些，強(qiáng)烈推薦你把2篇結(jié)合一起看，效果更佳！
如今對(duì)用戶(hù)來(lái)說(shuō)，好的體驗(yàn)是界面一致、易讀和簡(jiǎn)單。設(shè)計(jì)師要如何才能讓UI更加符合用戶(hù)的自然直覺(jué)呢？
動(dòng)效，可以讓界面變得更加自然，填補(bǔ)部分體驗(yàn)上的隔閡。今天這篇文章會(huì)講到常用的12個(gè)UI/UX動(dòng)畫(huà)原則，幫你做出富有樂(lè)趣的界面設(shè)計(jì)。
一、緩動(dòng)
”緩動(dòng)“指的是在一個(gè)動(dòng)作在過(guò)渡中進(jìn)行的方式。你可以把緩動(dòng)理解為加速或減速。一個(gè)物體可以從界面的一側(cè)緩慢啟動(dòng)，然后加速，最后到另一側(cè)突然停止?；蛘撸矬w可以快速啟動(dòng)，然后逐漸減速到停止。關(guān)鍵幀表示了動(dòng)畫(huà)的開(kāi)始和結(jié)束，緩動(dòng)決定了中間過(guò)程。
將緩動(dòng)應(yīng)用于補(bǔ)間動(dòng)畫(huà)的一種簡(jiǎn)單方法是使用“屬性”面板(彩云注：這里彩云還專(zhuān)門(mén)去查了下資料，這個(gè)功能是AE的一個(gè)Beta版本的功能，叫 Properties panel，可以很方便的修改屬性) 。緩動(dòng)值的范圍從 –100 到 100。負(fù)值會(huì)從起始位置產(chǎn)生更平緩的變化（稱(chēng)為緩入）， 正值會(huì)導(dǎo)致逐漸減速（稱(chēng)為緩出）。
（彩云注：在我們現(xiàn)在用的AE正式版中，可以直接修改緩動(dòng)屬性然后配合曲線(xiàn)也可以修改緩動(dòng)幅度，如果有體驗(yàn)過(guò)Beta版本的同學(xué)歡迎文末留言交流呀）。
Saptarshi Prakash
二、偏移和延遲
當(dāng)多個(gè)UI元素同時(shí)移動(dòng)時(shí)，用戶(hù)傾向于將它們分組在一起，而忽略了每個(gè)元素都可能有自己的功能。
偏移和延遲在同時(shí)移動(dòng)的UI元素之間創(chuàng)建了層次結(jié)構(gòu)，并說(shuō)明它們是相關(guān)的，但又是不同的。不同于完全的同步，元素的時(shí)間、速度和間隔是交錯(cuò)的，從而產(chǎn)生了微妙的“一個(gè)接一個(gè)”的效果。（彩云注：動(dòng)效本質(zhì)上也是為了打造層次感，其實(shí)這又是上2期講的底層設(shè)計(jì)原則的應(yīng)用之一了。所以，我們?cè)诳匆粋€(gè)知識(shí)點(diǎn)的時(shí)候，要學(xué)會(huì)系統(tǒng)性地去思考）
當(dāng)用戶(hù)在屏幕之間切換時(shí)，偏移和延遲表明存在多個(gè)交互元素。
三、父子關(guān)系
”父子關(guān)系“意思是將一個(gè)UI元素的屬性鏈接到其他元素的屬性。當(dāng)父元素中的屬性發(fā)生變化時(shí)，子元素的鏈接屬性也會(huì)發(fā)生變化。所有元素屬性都可以相互鏈接。
例如，父元素的位置可以綁定到子元素的比例。當(dāng)父元素移動(dòng)時(shí)，子元素的大小會(huì)增大或減少。
父子級(jí)創(chuàng)建了UI元素之間的關(guān)系，建立了層次結(jié)構(gòu)，這樣方便用戶(hù)同時(shí)與多個(gè)元素互動(dòng)。在實(shí)際交互中，這種形式非常有影響力。
Ayoub Kada
四、變換
變換發(fā)生在一個(gè)UI元素過(guò)渡到另一個(gè)UI元素時(shí)。例如，一個(gè)下載按鈕變換到一個(gè)進(jìn)度條，進(jìn)度條完成后轉(zhuǎn)換成完成圖標(biāo)。
從用戶(hù)的角度來(lái)看，變換是顯示用戶(hù)與目標(biāo)相關(guān)狀態(tài)的有效方法（保證系統(tǒng)狀態(tài)的可見(jiàn)性）。特別是對(duì)于UI元素有從開(kāi)始到結(jié)束狀態(tài)變換時(shí)，這種變換動(dòng)效尤其有用。比如說(shuō)這里的文件下載動(dòng)效。（彩云注：做這樣的動(dòng)效是有效的，對(duì)于用戶(hù)體驗(yàn)的ROI很高）
Y.J.Y
五、數(shù)值變化
數(shù)值變化動(dòng)效（數(shù)字、文本或圖形）在界面中非常常見(jiàn)，比如在銀行APP，日歷，電商網(wǎng)站等等各類(lèi)產(chǎn)品中。這些變化與現(xiàn)實(shí)中用戶(hù)的需求產(chǎn)生關(guān)聯(lián)，所以可以隨時(shí)被調(diào)整變化。
這種數(shù)值變化表明了數(shù)據(jù)的動(dòng)態(tài)性質(zhì)，動(dòng)效告訴用戶(hù)數(shù)據(jù)是可交互的。如果沒(méi)有這些動(dòng)態(tài)變化時(shí)，用戶(hù)的參與意愿會(huì)降低。
Creative jeff
六、滑動(dòng)和變焦
滑動(dòng)和變焦這樣的動(dòng)效可以讓用戶(hù)在界面的UI元素中”旅行“，能增加畫(huà)面的層次細(xì)節(jié)。
- 滑動(dòng): 當(dāng)用戶(hù)的視角接近(或遠(yuǎn)離)一個(gè)UI元素時(shí)，就會(huì)產(chǎn)生滑動(dòng)。想象一個(gè)人拿著相機(jī)走到一朵花前想要近距離拍攝。
- 變焦：通過(guò)變焦，用戶(hù)的視角和UI元素保持不變，但元素在用戶(hù)屏幕中的大小會(huì)增加(或減少)?，F(xiàn)在想象這個(gè)人呆在原地，用相機(jī)的變焦功能讓花看起來(lái)更大。
七、維度
維度使UI元素看起來(lái)好像有多個(gè)交互面，就像物理世界中的對(duì)象一樣。這種行為是通過(guò)使元素看起來(lái)像是可折疊的、可翻轉(zhuǎn)的、浮動(dòng)的，或賦予現(xiàn)實(shí)的深度屬性來(lái)實(shí)現(xiàn)的。
作為一種敘事手段，維度意味著UI元素的不同側(cè)面是連接的，并有助于無(wú)縫的屏幕轉(zhuǎn)換。
Sang Nguyen
八、視差
當(dāng)兩個(gè)（或更多）UI 元素同時(shí)移動(dòng)但速度不同時(shí)，會(huì)產(chǎn)生視差，其目的是建立層次結(jié)構(gòu)。
- 交互元素在前景中出現(xiàn)的更快
- 非交互元素在背景中出現(xiàn)的更慢
視差將用戶(hù)引向交互UI元素，同時(shí)允許非交互元素留在屏幕上，并保持設(shè)計(jì)的統(tǒng)一性。
Netrix
九、模糊
想象一扇磨砂玻璃門(mén)， 它需要互動(dòng)才能打開(kāi)，但也可以隱約看到門(mén)后面的東西。
模糊效果也是如此。它為用戶(hù)提供了一個(gè)需要交互的界面，同時(shí)顯示屏幕提示，引導(dǎo)用戶(hù)聚集。導(dǎo)航菜單、鎖屏和文件夾/文件窗口中都有經(jīng)常被使用到。
magazineduwebdesign
十、克隆
克隆是一種動(dòng)態(tài)行為，把一個(gè) UI 元素分裂成其他元素。這是一種突出重要信息或交互選項(xiàng)的聰明方法。
當(dāng)UI元素在界面中具體化時(shí)，它們需要一個(gè)清晰的原點(diǎn)，用來(lái)鏈接到已經(jīng)在界面上的元素。如果元素突然出現(xiàn)或消失，用戶(hù)就很難清楚地記住上下文。
Interface Market
十一、疊加
在2D空間中，沒(méi)有所謂的深度，UI元素只能在X和Y軸上移動(dòng)。疊加在UI的2D空間中創(chuàng)造出前景/背景區(qū)分的錯(cuò)覺(jué)。通過(guò)模擬深度，疊加可以根據(jù)用戶(hù)需要隱藏和顯示元素。
在使用疊加時(shí)，信息層次結(jié)構(gòu)是一個(gè)重要的考慮因素。例如，用戶(hù)在筆記應(yīng)用中首先看到的應(yīng)該是他們的筆記列表。然后，疊加可以用來(lái)為每條消息提供次要選項(xiàng)——比如刪除或保存。
十二、蒙版
蒙版是對(duì)UI元素的部分進(jìn)行顯示和隱藏。通過(guò)改變?cè)氐娘@示區(qū)域，蒙版區(qū)域產(chǎn)生變化，同時(shí)允許元素本身保持可識(shí)別。因此，照片和插圖等視覺(jué)元素非常適合用在這種動(dòng)效上。
從可用性的角度來(lái)看，設(shè)計(jì)師可以使用蒙版，給用戶(hù)反饋，讓用戶(hù)知道每一步操作的反饋和進(jìn)度。
By Min-Sang Choi
原文：https://bootcamp.uxdesign.cc/12-principles-of-ui-ux-animation-you-should-know-75cf41e49e62
作者：Ayoub ┃Marhouse
譯者：彩云Sky
本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）
作者：彩云Sky
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》這12個(gè)常用動(dòng)效方法，很適合用到你的界面里
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司