一.動效的重要性
用戶在使用產(chǎn)品時衣形，都希望有一個良好的使用體驗辣往。但生硬的變化兔院、偶爾的卡頓、固定死板的效果站削，這些都不是我們希望看到的坊萝。這會大大增加用戶的負面情緒，產(chǎn)生不好的用戶體驗许起。再加上網(wǎng)速等不可抗力因素十偶，那么整體的產(chǎn)品體驗就會變得非常糟糕。
而出色的動效园细，可以使頁面之間聯(lián)系更加緊密惦积，整體體驗更加流暢，減少用戶的負面情緒猛频；同時狮崩，動效也可以增加產(chǎn)品的趣味性與品牌特色，讓用戶產(chǎn)生興趣并提高品牌認知度鹿寻。
動效設計作為一種高級的表現(xiàn)形式睦柴，它的展示要符合現(xiàn)實世界的客觀規(guī)律。不能脫離現(xiàn)實毡熏，要符合用戶的認知坦敌，真實自然。
現(xiàn)在招刹，越來越的人開始重視動效設計了恬试。包括一些招聘信息當中，有不少都明確表示有動效設計能力者優(yōu)先的字樣疯暑。那么训柴，當你掌握動效設計這項技能后，無疑是會大大增加自身的競爭力妇拯。同時幻馁，對于整體產(chǎn)品的參與程度也更高。
二.動效的常見類型
1.提示類動效
提示類動效常見的形式為默認狀態(tài)或者打開APP首頁越锈，固定位置的循環(huán)動畫仗嗦。如懸浮icon，按鈕icon等甘凭，主要的目的是吸引用戶點擊查看關(guān)鍵項目或通告稀拐。其他還包括一些引導類動畫，比如用戶第一次打開產(chǎn)品時丹弱，頁面的一步步指引性提示操作的動效德撬。
2.反饋類動效
反饋類動效包含的效果很多铲咨。通常需要用戶進行操作，包括點擊滑動等等蜓洪，從而得到相對應的反饋纤勒。其中，按鈕效果隆檀、導航欄標簽變化摇天、下拉刷新、彈窗動畫等等都包括在內(nèi)恐仑。更細節(jié)的位置還包括收藏泉坐、點贊、發(fā)送等等裳仆。
3.切換類動效
切換類動效最常見的形式包括banner滑動切換坚冀、開屏loading的切換、以及一些卡片類切換形式等等鉴逞。滑動可以讓用戶連續(xù)不間斷的去執(zhí)行某項操作司训。搭配合理的動效构捡，可以讓用戶感到不錯的流暢性與一體感，增加使用頻率壳猜。
4.內(nèi)容擴展動效
內(nèi)容擴展類動效：當點擊卡片或者按鈕時勾徽，會從此基礎上向外擴展出更多的樣式或內(nèi)容⊥嘲猓可以是同一層級的擴展喘帚，也可以是新層級的出現(xiàn)。
5.空間變化動效
此動效的變化略有復雜咒钟，變化的范圍較大吹由。通常會涉及到多個元素或位置的變化，樣式炫酷朱嘴，吸引力夠足倾鲫。不過，在使用時要慎重考慮萍嬉。
上面說的動效變化均為微動效的變化乌昔，讓用戶有所感知稍有留意即可；過分復雜的動畫如果使用不恰當或多次使用會使用戶產(chǎn)生審美疲勞壤追，同時對網(wǎng)速和手機配置都是個考驗磕道。
6.創(chuàng)意性動效
創(chuàng)意性動效一般是點睛之筆或是錦上添花的效果設計。有時一些小的細節(jié)動畫往往更能使用戶留意并記仔斜溺蕉；當然伶丐，也有些動效比較大型，同樣可能會遇到‘空間變化動效’所遇到的問題焙贷。
以上是我對常出現(xiàn)的一些動效的大致劃分撵割。像反饋類動效也會包含其他的效果。比如‘切換類動效’辙芍、‘擴展動效’等啡彬；而擴展動效和空間變化動效也會有所交集。
好的動效設計故硅，應該是以微動效為主庶灿；能夠讓用戶使用的流暢舒服。在使用時吃衅，讓用戶留意到即可往踢，而不應該過多的占有用戶的感知，從而阻礙用戶對頁面中主要內(nèi)容的關(guān)注度徘层。
三.動效的相關(guān)原則
①.時間相關(guān)的原則：緩動峻呕、偏移、延遲
②.關(guān)聯(lián)性相關(guān)的原則：父子關(guān)系
③.連續(xù)性相關(guān)的原則：轉(zhuǎn)化趣效、值變瘦癌、遮罩、覆蓋跷敬、復制
④.時間層級結(jié)構(gòu)相關(guān)的原則：視差
⑤.空間連續(xù)性相關(guān)的原則：維度讯私、變焦運動
1.緩動（Easing）
緩動可以說是最最基礎的動效了。絕大多數(shù)的效果中都會加上緩動西傀，從而避免生硬的變換形式出現(xiàn)斤寇。連貫的、符合自然規(guī)律的動效可以有效避免用戶注意力的流失拥褂，避免卡頓造成的不良體驗娘锁。
2-3.偏移（Offset）/延遲（Delay）
偏移和延遲的作用是通過視差或時間差等方式野宜，區(qū)別不同元素的出現(xiàn)或消失痊焊。從而讓用戶在分清楚元素之前，就能通過動效變化趨勢辨別出不同元素之間存在的不同功能與關(guān)系匾南。
4.父子關(guān)系（Parenting）
父子關(guān)系顧名思義尤慰，就是操作主元素從而使得子元素跟隨變化馏锡。這種動效加強了元素之間的聯(lián)系，讓用戶可以有更多的掌控感伟端，也增加了反饋的及時性杯道，實時觀察元素間的變化。
5.轉(zhuǎn)化（Transformation）
轉(zhuǎn)化效果，由一個元素轉(zhuǎn)化為一個或多個不同形狀的元素党巾；這種轉(zhuǎn)變的效果非常明顯萎庭，可以很好的吸引用戶的注意力，有非常不錯的一體性齿拂。icon驳规，按鈕或是進度條的設計當中都可以運用到。
6.值變（Value change）
頁面中文字署海、英文或數(shù)字等文本的變化吗购。通過用戶的操作，文字或數(shù)字實時進行變化砸狞，那么用戶會得到更直觀的感受捻勉。在動效設計當中加入值變，并與其他元素搭配使用刀森，會有更好的用戶體驗踱启。
7.遮罩（Masking）
保持原有的內(nèi)容，在特定的范圍里通過用戶對遮罩的操作進而改變形狀或位置研底，形成新的元素或展示形式埠偿。也是一種流暢性和一體性都非常高的動效形式。
8.覆蓋（Masking）
涉及Z軸空間上的一種表現(xiàn)形式榜晦。用戶通過操作使得上層的元素位移從而展示出下層更多的功能選擇胚想。不過，這種操作的弊端是需要一些學習成本芽隆，才能知曉層級的排布。
9.復制（Cloning）
用戶通過操作统屈，元素由一種變?yōu)槎喾N胚吁。動效體現(xiàn)上強調(diào)分離和結(jié)合，形式感的增加也讓用戶得到更加明確的反饋愁憔。
10.時差（Parallax）
當用戶進行滑動操作時腕扶，在原視覺界面的基礎上增加空間層次結(jié)構(gòu)的展示。通過時間差吨掌，創(chuàng)造出一快一慢兩種不同視覺感受的效果半抱。可以讓用戶清楚地感受到內(nèi)容的不同膜宋，以及更加逼真的層次感窿侈。
11.維度（Dimensionality）
通過維度的變化來達到立體視覺效果。翻轉(zhuǎn)秋茫、折疊史简、浮動等效果都包括在內(nèi)，是一種三維的效果表現(xiàn)形式肛著。
12.變焦運動（Zoom）
這里的變焦運動圆兵，是界面中圖片或是元素在不進行空間移動的情況下的放大縮小變化跺讯。讓用戶有一種元素是在非常大的場景中變化的感知，感受到類似于攝影機運動的效果殉农。這種效果屬于無縫銜接刀脏，讓用戶有很好的空間感。
四.動效的制作軟件
1.After Effects
動效設計的首選超凳，功能強大愈污、插件眾多。搭配Airbnb發(fā)布的Lottie聪建，可以將制作的動效直接生成代碼交給開發(fā)人員钙畔，而且支持的平臺很多。簡化了交付文件金麸、縮短了溝通時間擎析。Lottie目前支持的效果不多，不過大多數(shù)的動效設計都是沒有問題的挥下。AE目前不支持手機實時查看揍魂，無法測試交互。有一定的學習成本棚瘟。
2.Principle
操作較簡單现斋、上手快、效果好偎蘸、界面簡潔庄蹋。可以在手機上實時查看交互效果迷雪，可以快速生成高保真原型限书，制作demo非常迅速；不過章咧，制作整體的大型項目略有乏力倦西。
3.Hype
可制作的效果非常多，操作不難赁严∪拍可以說是無代碼制作原型或動效的神器。在Hype能夠制作出來的效果疼约，理論上開發(fā)基本都可以實現(xiàn)卤档。軟件生成的html代碼可以交給開發(fā)人員使用。
4.Flinto
Flinto和Principle非常相似程剥，上手簡單裆装、學習成本不高、可制作的效果也不少。和Principle一樣哨免，制作完整大型的項目不是很方便茎活。
5.Framer
Framer設計精度很高，可以在多個移動平臺上測試查看琢唾。但學習成本較高载荔，需要有代碼基礎。
6.ProtoPie
ProtoPie是韓國公司打造的原型設計工具采桃，界面簡潔懒熙、自帶教程、上手簡單普办。Mac工扎、Win等多平臺都可使用。同時還可以生成二維碼衔蹲，供多態(tài)設備查看測試肢娘。
7.Axure
Axure是很多人常用的原型制作工具，可以制作出很多動態(tài)效果舆驶，生成的代碼可以使用橱健。但制作復雜效果時需要一些學習成本；且在移動設備上預覽非常麻煩沙廉。
工具畢竟是工具拘荡，所以選擇適合自己的就好∏肆辏或者選擇公司團隊規(guī)定使用的軟件進行設計珊皿。如果只是單純制作demo，或是需要輸出代碼交付給開發(fā)的話巨税，使用AE即可蟋定；如果想要可交互可展示類的效果，那么Principle垢夹、Hype、ProtoPie均可维费；Principle的高效果元、Hype的豐富效果和ProtoPie的多平臺團隊展示各有優(yōu)點。
五.動效的落地交付
當我們制作好動效之后犀盟，交付標注和文檔是一個非常重要的環(huán)節(jié)而晒。其實一款產(chǎn)品中的很多動效都是使用的控件默認效果，實際的效果在Principle和Flinto這種交互動效軟件中可以很好的體現(xiàn)出來阅畴。
像loading倡怎、下拉刷新、缺省頁、升級彈窗等有特殊需求的頁面效果监署，就需要我們來設計制作了颤专。我個人經(jīng)常使用AE搭配bodymovin擴展插件，直接輸出json文件交付給開發(fā)人員钠乏。細節(jié)處通過文檔或?qū)崟r溝通來解決栖秕。
但還是會有一些動效是用插件無法解決無法輸出的。這個時候就需要一份清晰完整的說明文檔來配合開發(fā)人員制作晓避，將效果的還原程度最大化簇捍。
在交付文檔中有幾個環(huán)節(jié)需要我們進行填寫。其中包括：動效GIF展示圖俏拱、觸發(fā)條件暑塑、變換的元素和屬性、曲線圖和數(shù)值锅必、備注事格、起始時間、持續(xù)時間况毅、變換數(shù)值等等分蓖。
1.GIF展示圖
我們需要做一個demo，要讓開發(fā)人員清楚我們要做的效果是什么樣子的尔许。讓開發(fā)人員可以進行效果的評估么鹤，同時得到反饋。畢竟味廊，口說無憑蒸甜。我們還可以給靜態(tài)效果圖上的變換元素上標注清楚序號，以免后期元素太多而造成的混亂情況出現(xiàn)余佛。
2.觸發(fā)條件柠新、元素、變換屬性
這三點是一個基礎的概述辉巡。觸發(fā)條件是讓我們寫出元素是如何被觸發(fā)啟動的恨憎；并且界面中哪些元素會進行變換；有哪些屬性會發(fā)生變化郊楣。在這里憔恳，我們要給元素起好名，并且標注好序號净蚤。
3.曲線顯示
常用的曲線樣式有加速曲線(Ease In Sine)钥组、減速曲線(Ease Out Sine)、緩動曲線(Ease In Out Sine)今瀑、彈性曲線(Ease Out Elastic)等程梦。我們可以畫出曲線樣式或是直接在軟件中截圖点把，同時標出曲線屬性和數(shù)值。具體數(shù)值的獲取可以在Principle或者網(wǎng)站http://cubic-bezier.com中獲取屿附。
4.備注
我們可以將此動效用文字的形式具體描述出來郎逃；或者寫出動效發(fā)生時的一些注意事項及關(guān)鍵點。
5.變換數(shù)值
最后拿撩，就是要寫出效果的起始時間衣厘、持續(xù)時間、變換屬性數(shù)值這些更加具體的內(nèi)容了压恒。這里用的時間單位是毫秒影暴；主要是位移、不透明度探赫、縮放型宙、旋轉(zhuǎn)等數(shù)值的變化。
不只是交付文檔伦吠，我們還可以設計制作動效時間表妆兑。制作時間表的目的是規(guī)范我們的動效數(shù)值，比如讓所有彈窗出現(xiàn)消失的時間和效果數(shù)值都相同等毛仪。將產(chǎn)品中出現(xiàn)的效果進行統(tǒng)一的整理搁嗓，方便后期的修改和總結(jié)。
在這個注重用戶體驗的時代箱靴，動效設計越來越重要腺逛。好的動效，不僅可以讓用戶在使用產(chǎn)品時更加的舒服衡怀，沒有違和感棍矛；同時，也增加了產(chǎn)品的品質(zhì)感抛杨。
作為UI設計師够委，接觸動效、學習動效不僅讓我們增加新的技能怖现，增加自身競爭力茁帽；同時，可以讓我們在基礎設計上屈嗤、工作溝通對接上等都有提高潘拨，
