什么是動效呢虽另？動效就是使UI富有表現(xiàn)力且讓產(chǎn)品易于使用的元素和表現(xiàn)手段狭归。

設(shè)計師在工作中經(jīng)常會收到“我覺的這里感覺不太好”或者“沒達到我想要的感覺”

這種情況下焚廊，是設(shè)計方案沒有滿足產(chǎn)品需求屡穗？還是設(shè)計方案沒有解決產(chǎn)品問題练湿？都不是，而是缺乏了動效對于靜態(tài)元素的補充說明涌庭，缺乏了動態(tài)元素的鏈接芥被，減弱了關(guān)聯(lián)性，增加了需求方對于方案的理解成本坐榆，或者腦補不到對應(yīng)的操作效果撕彤。所以動效就呼之而出了。

會AE的設(shè)計師有很多猛拴，似乎動效已經(jīng)是設(shè)計師的標配羹铅，但你懂得如何利用動效提升產(chǎn)品體驗嗎？

產(chǎn)品有哪些體驗問題

1愉昆、產(chǎn)品操作流程? ?

2职员、用戶主觀感受? ?

3、品牌主張

做動效不能為了做動效而做動效跛溉，一定要想清楚通過動效想解決什么問題焊切。主要從產(chǎn)品操作流程和用戶感受兩個視角來分析。通過梳理業(yè)務(wù)流程芳室、產(chǎn)品流程专肪，從用戶的視角去發(fā)現(xiàn)用戶在使用過程中的需求、痛點和對產(chǎn)品有什么樣的期望堪侯。以體驗為目標嚎尤，以發(fā)現(xiàn)的問題為出發(fā)點，思考每一個操作節(jié)點出現(xiàn)了什么問題伍宦，哪些問題可以通過動效解決芽死，或者用戶在哪些節(jié)點中產(chǎn)生的消極情緒可以通過動效的形式降低。當然除此之外次洼，產(chǎn)品在使用和推廣的過程中背后的品牌價值和理念是否得到了合理的傳遞关贵，進而觸達用戶的內(nèi)心，用戶對于產(chǎn)品的認知是否形成特有的心智卖毁。

通常情況下遇到的一些體驗問題有

1揖曾、加載時間過長? ??

2、產(chǎn)品缺乏趣味性元素? ?

3亥啦、動效混亂

4炭剪、內(nèi)容加載過于生硬? ?

5、產(chǎn)品框架復(fù)雜禁悠，用戶理解成本過高

等等，希望通過拋磚引玉碍侦，大家思考自己產(chǎn)品現(xiàn)階段存在的問題粱坤。

動效分為哪幾種類型

從形式上分析主要有四種類型構(gòu)成隶糕，分別是圖標動效、界面動效站玄、提示動效枚驻、信息狀態(tài)動效。從屬性上分析主要有被動觸發(fā)和主動顯示兩種株旷。

圖標動效：基于產(chǎn)品內(nèi)部的圖標而生成的動效再登，主要應(yīng)用在用戶行為觸發(fā)的狀態(tài)切換，幫助用戶理解操作行為產(chǎn)生的意義晾剖，并且引導(dǎo)用戶繼續(xù)后續(xù)的操作锉矢，使整個流程傳遞趣味性，增加產(chǎn)品的人性化齿尽。

界面動效：當喚起新頁面內(nèi)容時沽损，界面的動效幫助用戶理解產(chǎn)品的框架結(jié)構(gòu)和層級關(guān)系，在認知上給用戶一個緩沖時間循头，減弱用戶獲取信息的跳躍感绵估，提升界面之間的關(guān)聯(lián)性。

提示型動效：一般是主動顯示的動效卡骂，比如国裳，當有新消息，或者是有緊急任務(wù)需要處理的時候全跨，提示型動效就會主動發(fā)生作用（這也是人類在進化的過程中對于運動物體最敏感的特性所決定的）缝左，并且比閱讀文字的成本要低。(沒有找到合適的案例)

信息狀態(tài)動效：這種動效是向用戶傳遞產(chǎn)品運行的狀態(tài)螟蒸，也稱為加載動效盒使，主要是當產(chǎn)品由于某種原因無法及時展現(xiàn)信息，而幫助產(chǎn)品傳遞狀態(tài)七嫌，增加用戶預(yù)期，降低焦慮的負面情緒苞慢。

被動觸發(fā)：由用戶行為觸發(fā)的诵原，通過動效的形式反饋產(chǎn)品信息，提升產(chǎn)品的趣味性和用戶的愉悅感挽放。

主動顯示：由于產(chǎn)品的加載或者是產(chǎn)品自身狀態(tài)發(fā)生的變化時绍赛，通過動效引起用戶的注意，傳遞產(chǎn)品信息辑畦。

適用在產(chǎn)品的哪個階段

從產(chǎn)品的生命周期分析吗蚌，可以分為啟動期、發(fā)展期纯出、穩(wěn)定成熟期蚯妇、衰退期敷燎。在不同的發(fā)展階段，用戶的需求箩言、團隊聚焦點硬贯、項目資源都在發(fā)生變化。

在啟動期陨收，團隊會把人力饭豹、時間等項目資源向產(chǎn)品戰(zhàn)略、功能傾斜,快速構(gòu)建產(chǎn)品务漩，驗證產(chǎn)品方向的準確性拄衰，體驗作為次重點對待。

在發(fā)展期和穩(wěn)定成熟期間饵骨，產(chǎn)品戰(zhàn)略和形態(tài)已經(jīng)確定肾砂，用戶開始從認識產(chǎn)品到了解產(chǎn)品，對產(chǎn)品的體驗開始提出新的訴求宏悦。合作團隊也開始以用戶目標為基礎(chǔ)在構(gòu)建產(chǎn)品差異化上發(fā)力镐确，聚焦體驗，通過不同的方式提升產(chǎn)品體驗饼煞，優(yōu)化用戶使用產(chǎn)品的感知源葫，使產(chǎn)品更加貼合用戶的心里模型。合作團隊也會釋放資源支持體驗提升的使命砖瞧，提升設(shè)計價值息堂。

設(shè)計師基于對團隊、目標块促、資源了解的基礎(chǔ)上荣堰，以產(chǎn)品定位為基點，以用戶目標為動力竭翠，把動效作為設(shè)計賦能的切入點振坚，通過感性的動效，提升產(chǎn)品體驗感染用戶斋扰，滿足用戶的可預(yù)測的非理性需求渡八，讓用戶在使用的過程中可追憶過去，和產(chǎn)品形成共鳴传货，增加用戶粘性屎鳍，塑造產(chǎn)品體驗壁壘，賦能業(yè)務(wù)问裕。

動效的設(shè)計目標

用戶：輔助用戶理解產(chǎn)品逮壁，吸引用戶注意力，視覺引導(dǎo)粮宛，情感共鳴窥淆，減弱用戶焦慮

產(chǎn)品：提升產(chǎn)品趣味性卖宠，曝光產(chǎn)品品牌，增加用戶粘性祖乳，提升產(chǎn)品差異化逗堵。

在使用動效之前要想清楚動效的意義是什么，如何去運用動效眷昆，動效能給產(chǎn)品帶來什么樣的亮點和體驗上的提升蜒秤。

動效的意義主要有兩個部分

1、對用戶認知的影響

2亚斋、對產(chǎn)品體驗和品牌的提升作媚。

從用戶使用產(chǎn)品的順序分析，獲取信息帅刊，理解產(chǎn)品纸泡，感受產(chǎn)品，形成認知赖瞒，動效可以通過符合真實物理運動規(guī)律的設(shè)計元素女揭，讓用戶理解產(chǎn)品，使實現(xiàn)模型栏饮、設(shè)計模型和用戶的認知模型形成匹配吧兔，降低理解成本。通過抓住眼球?qū)τ谶\動物體的敏感性袍嬉，以動效吸引用戶注意力境蔼，引導(dǎo)用戶的瀏覽順序，讓用戶快速感知到產(chǎn)品希望用戶獲取的信息伺通。同時動效也是一種趣味元素的集合箍土，人的天性對動效有吸引力，相信每一個人幼年時對動畫片都愛的目不轉(zhuǎn)睛罐监。動效就是一個簡短的故事吴藻，通過動效向用戶講述產(chǎn)品的狀態(tài)情節(jié)，讓用戶在感受趣味性的同時笑诅，減弱負面情緒的影響调缨，留下對產(chǎn)品的正面的認知。

從產(chǎn)品需求的角度分析吆你，分別是獲取用戶，增加用戶粘性俊犯，留下用戶妇多，品牌傳遞。動效區(qū)別于靜態(tài)設(shè)計方案的獨特之處就是動效體現(xiàn)出來的趣味性燕侠，能讓用戶在使用產(chǎn)品的過程中者祖，感受到是和一個人性化的產(chǎn)品在交流立莉，獲取交流的趣味性，讓產(chǎn)品從可用變成易用七问。在視覺感性層面蜓耻，形成和同類產(chǎn)品的差異性，進而傳遞產(chǎn)品背后的品牌理念和主張械巡。集易用刹淌、獨特性、品牌為一體的動效設(shè)計理念應(yīng)運而生讥耗。

合格的動效具備哪些特征

動效的真實感有勾、節(jié)奏的一致性、動效的物理性古程、元素路徑的一致性蔼卡、動效的故事性

動效的真實感指元素運動形式的可能性。每一中元素都有自己的運動能力范圍（生活中類似物品的運動情況和用戶的認知習慣）挣磨，設(shè)計師的腦洞大并不代表動效的合理雇逞，超出能力范圍的動效不僅不會增分，反而會降低用戶的認知體驗茁裙。比如表示一個電話的Icon動效塘砸，想吸引用戶點擊，引導(dǎo)用戶的行為呜达，通俗情況下可能是Icon元素的抖動谣蠢，或者是上下彈跳，來引導(dǎo)用戶查近。但如果用一種類似波浪的翻滾動效來表示眉踱，就超出了電話Icon的運動能力范圍。因為在用戶的認知范圍內(nèi)是沒有波浪狀的Icon動效霜威。

節(jié)奏的一致性指界面動效中的所有運動元素和動效屬性采用同樣的時間谈喳，同樣的速度，同樣的節(jié)奏戈泼，引導(dǎo)用戶獲取信息婿禽、理解產(chǎn)品。如果節(jié)奏不一致大猛，首先用戶感受到的是一個不舒服的運動場景扭倾。其次用戶無法理解動效傳遞的意義，無法獲取應(yīng)該獲取的信息挽绩。最后會感覺整個動效太過拖沓膛壹、不嚴謹，減弱用戶的正面感受。

動效的物理性和直實性不同模聋，物理性指元素在真實感的基礎(chǔ)上符合運動的物理特性肩民。繼續(xù)拿電話Icon舉例，電話Icon設(shè)計了上下彈跳的動效链方，但Icon的上下運動是勻速的持痰，沒有減速和加速，這就是不符合物理性祟蚀。符合物理性的動效便于用戶理解動效含義工窍。大家想想小時候看過的《貓和老鼠》，卡通人物的運動特性都是在真實生活中呈現(xiàn)出來的物理性的基礎(chǔ)上進行夸張暂题，所以你會感受到動畫所傳遞的趣味移剪。

元素路徑的一致性指所有參與運動的元素的運動方向保持一致，不能出現(xiàn)有元素A向上移動薪者，元素B向下移動纵苛，這就違背了運動路徑的一致性。運動路徑的一致性通常包括三類言津，橫向一致性攻人，縱向一致性，和中心輻射一致性悬槽。

動效的故事性和趣味性怀吻，再此提起《貓和老鼠》，相信大家小時候都喜歡看初婆，因為有故事蓬坡、有趣味。動效也是簡短的動畫磅叛，所以動效通過元素的運動來傳遞背后的品牌故事屑咳，這就是動效的魅力。想清楚你的動效想傳遞什么弊琴、故事性是什么非常重要兆龙，因為動效不僅讓用戶感受到趣味，還要通過動效建立對于產(chǎn)品的立體認知敲董、品牌認知紫皇。

動效應(yīng)該是一整套動效語言

解決問題不能僅僅停留在做好了一個動效。針對產(chǎn)品體驗的解決方案應(yīng)該是一整套針對產(chǎn)品的動效語言腋寨。通過動效語言來形成具有品牌性聪铺、一致性的認知體驗。主要通過動效屬性和動效類別來定義設(shè)計語言萄窜。

動效屬性包括速度计寇、軌跡、時間脂倦、視覺焦點番宁、節(jié)奏、層級赖阻。動效類別就是在前面談到的四種動效圖標動效蝶押、界面動效、提示動效火欧、信息狀態(tài)動效棋电。在不同動效類別的基礎(chǔ)上去定義它們的屬性應(yīng)該做怎樣的變化，進而搭建一整套動效語言苇侵，例如界面動效元素在多長時間（時間的單位建議是統(tǒng)一的赶盔，比如毫秒）中運動多長的距離（距離可以通過設(shè)計圖的尺寸去計算），元素的運動軌跡是什么榆浓，整個過程中是否有視覺焦點（用于引動用戶的視覺）于未，動效的運動節(jié)奏如何，是加速運動還是減速運動陡鹃？

最理想的動效語言是一整套數(shù)據(jù)表格和動效范例烘浦。范例主要用作團隊成員之間溝通和理解，在達成一致之后萍鲸，修改表格的數(shù)據(jù)并且給到開發(fā)團隊修改元素的動效屬性闷叉。

動效注意事項

必須要說的是很多動效的實現(xiàn)，可能不是由代碼去繪制出來的脊阴，而是由設(shè)計師制作輸出動效序列幀握侧，所以需要注意一下幾點

1、需要設(shè)計師確定動效的播放幀速率（平衡動效占用的手機資源和動效的流暢性嘿期，24fps是能夠滿足一般性需求）品擎。

2、動效是運動的秽五，顯示區(qū)域要比靜態(tài)元素的區(qū)域要大孽查，所以在設(shè)計之前要先和開發(fā)成員溝通，了解現(xiàn)在開發(fā)框架中的顯示面積情況坦喘，可變動性有都多大盲再，技術(shù)邊界在哪里，這樣輸出的動效才是一個可落地的方案瓣铣。

3答朋、在動效樣式不多的情況下建議使用序列幀動效，開發(fā)成本低棠笑，設(shè)計師主導(dǎo)具體動效樣式梦碗，減少反復(fù)溝通的成本。

4、界面轉(zhuǎn)場動效和提示動效洪规，建議使用代碼編寫印屁，因為出現(xiàn)場景多，編寫成本低斩例，可修改性強雄人。而圖標型動效，建議是序列幀動效念赶，因為變化參數(shù)多础钠，程序表現(xiàn)難度大。

5叉谜、特別注意H5環(huán)境中的動效旗吁，減少在加載動效中使用序列幀的方式，因為在加載過程中停局，序列幀也是需要加載的很钓，由于網(wǎng)絡(luò)環(huán)境的不同會造成動效的卡頓。代碼動效中動畫屬性變化過多翻具，會過分占用程序資源履怯，造成動效不流暢，代碼實現(xiàn)的動效需要制作Demo或者找案例參考裆泳，并且把變形屬性轉(zhuǎn)譯成代碼語言叹洲，否則就會造成大家都能理解，但不知道哪些屬性發(fā)生了變化工禾，增加溝通成本运提。

如何去落地

在開始設(shè)計之前，先與開發(fā)人員溝通表現(xiàn)動效的形式闻葵，分幾期去完成民泵，達成統(tǒng)一共識。提前溝通動效方案的風險點和困難點會讓后期推動更加便利槽畔。圖標型動效制作成本高栈妆，可以先找參考案例，在樣式上和團隊形成統(tǒng)一共識的基礎(chǔ)上再進行定制化厢钧、品牌化的設(shè)計鳞尔。界面動效和提示型動效可以采用Flinto，Principle等制作成高保真Demo早直，便于團隊成員理解寥假，形成視覺上的感知，減少后期不必要的反復(fù)溝通和修改霞扬。

總結(jié)

動效是一種設(shè)計語言和表現(xiàn)手段糕韧，在使用之前一定要思考為什么使用枫振，使用之后產(chǎn)生什么價值。

動效一定是輔助用戶理解產(chǎn)品萤彩，輔助產(chǎn)品傳遞產(chǎn)品價值粪滤。動效方案的創(chuàng)意性，邏輯性乒疏，物理規(guī)律一定要在動效中呈現(xiàn)额衙，否則方案是沒有價值的。

切莫過分動效怕吴，否則會弄巧成拙。