起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識思考：如何利用動效提升產品體驗？
什么是動效呢？動效就是使UI富有表現力且讓產品易于使用的元素和表現手段。
設計師在工作中經常會收到“我覺的這里感覺不太好”或者“沒達到我想要的感覺”。
這種情況下，是設計方案沒有滿足產品需求？還是設計方案沒有解決產品問題？都不是，而是缺乏了動效對于靜態(tài)元素的補充說明，缺乏了動態(tài)元素的鏈接，減弱了關聯性，增加了需求方對于方案的理解成本，或者腦補不到對應的操作效果。所以動效就呼之而出了。
會AE的設計師有很多，似乎動效已經是設計師的標配，但你懂得如何利用動效提升產品體驗嗎？
產品有哪些體驗問題
- 產品操作流程；
- 用戶主觀感受；
- 品牌主張。
做動效不能為了做動效而做動效，一定要想清楚通過動效想解決什么問題。主要從產品操作流程和用戶感受兩個視角來分析。通過梳理業(yè)務流程、產品流程，從用戶的視角去發(fā)現用戶在使用過程中的需求、痛點和對產品有什么樣的期望。
以體驗為目標，以發(fā)現的問題為出發(fā)點，思考每一個操作節(jié)點出現了什么問題，哪些問題可以通過動效解決，或者用戶在哪些節(jié)點中產生的消極情緒可以通過動效的形式降低。當然除此之外，產品在使用和推廣的過程中背后的品牌價值和理念是否得到了合理的傳遞，進而觸達用戶的內心，用戶對于產品的認知是否形成特有的心智。
通常情況下遇到的一些體驗問題有：
- 加載時間過長；
- 產品缺乏趣味性元素；
- 動效混亂；
- 內容加載過于生硬；
- 產品框架復雜，用戶理解成本過高。
等等，希望通過拋磚引玉，大家思考自己產品現階段存在的問題。
動效分為哪幾種類型
從形式上分析主要有四種類型構成，分別是圖標動效、界面動效、提示動效、信息狀態(tài)動效。從屬性上分析主要有被動觸發(fā)和主動顯示兩種。
圖標動效：基于產品內部的圖標而生成的動效，主要應用在用戶行為觸發(fā)的狀態(tài)切換，幫助用戶理解操作行為產生的意義，并且引導用戶繼續(xù)后續(xù)的操作，使整個流程傳遞趣味性，增加產品的人性化。
界面動效：當喚起新頁面內容時，界面的動效幫助用戶理解產品的框架結構和層級關系，在認知上給用戶一個緩沖時間，減弱用戶獲取信息的跳躍感，提升界面之間的關聯性。
提示型動效：一般是主動顯示的動效，比如：當有新消息，或者是有緊急任務需要處理的時候，提示型動效就會主動發(fā)生作用（這也是人類在進化的過程中對于運動物體最敏感的特性所決定的），并且比閱讀文字的成本要低。(沒有找到合適的案例）
信息狀態(tài)動效：這種動效是向用戶傳遞產品運行的狀態(tài)，也稱為加載動效，主要是當產品由于某種原因無法及時展現信息，而幫助產品傳遞狀態(tài)，增加用戶預期，降低焦慮的負面情緒。
被動觸發(fā)：由用戶行為觸發(fā)的，通過動效的形式反饋產品信息，提升產品的趣味性和用戶的愉悅感。
主動顯示：由于產品的加載或者是產品自身狀態(tài)發(fā)生的變化時，通過動效引起用戶的注意，傳遞產品信息。
適用在產品的哪個階段
從產品的生命周期分析，可以分為啟動期、發(fā)展期、穩(wěn)定成熟期、衰退期。在不同的發(fā)展階段，用戶的需求、團隊聚焦點、項目資源都在發(fā)生變化。
在啟動期，團隊會把人力、時間等項目資源向產品戰(zhàn)略、功能傾斜，快速構建產品，驗證產品方向的準確性，體驗作為次重點對待。在發(fā)展期和穩(wěn)定成熟期間，產品戰(zhàn)略和形態(tài)已經確定，用戶開始從認識產品到了解產品，對產品的體驗開始提出新的訴求。
合作團隊也開始以用戶目標為基礎在構建產品差異化上發(fā)力，聚焦體驗，通過不同的方式提升產品體驗，優(yōu)化用戶使用產品的感知，使產品更加貼合用戶的心里模型。合作團隊也會釋放資源支持體驗提升的使命，提升設計價值。
設計師基于對團隊、目標、資源了解的基礎上，以產品定位為基點，以用戶目標為動力，把動效作為設計賦能的切入點，通過感性的動效，提升產品體驗感染用戶，滿足用戶的可預測的非理性需求，讓用戶在使用的過程中可追憶過去，和產品形成共鳴增加用戶粘性，塑造產品體驗壁壘，賦能業(yè)務。
動效的設計目標
- 用戶：輔助用戶理解產品，吸引用戶注意力，視覺引導，情感共鳴，減弱用戶焦慮；
- 產品：提升產品趣味性，曝光產品品牌，增加用戶粘性，提升產品差異化。
在使用動效之前要想清楚動效的意義是什么，如何去運用動效，動效能給產品帶來什么樣的亮點和體驗上的提升。
動效的意義主要有兩個部分：
- 對用戶認知的影響；
- 對產品體驗和品牌的提升。
從用戶使用產品的順序分析，獲取信息、理解產品、感受產品、形成認知，動效可以通過符合真實物理運動規(guī)律的設計元素，讓用戶理解產品，使實現模型、設計模型和用戶的認知模型形成匹配，降低理解成本。
通過抓住眼球對于運動物體的敏感性，以動效吸引用戶注意力，引導用戶的瀏覽順序，讓用戶快速感知到產品希望用戶獲取的信息。同時動效也是一種趣味元素的集合，人的天性對動效有吸引力，相信每一個人幼年時對動畫片都愛的目不轉睛。
動效就是一個簡短的故事，通過動效向用戶講述產品的狀態(tài)情節(jié)，讓用戶在感受趣味性的同時，減弱負面情緒的影響，留下對產品的正面的認知。
從產品需求的角度分析，分別是獲取用戶、增加用戶粘性、留下用戶、品牌傳遞。動效區(qū)別于靜態(tài)設計方案的獨特之處就是動效體現出來的趣味性，能讓用戶在使用產品的過程中，感受到是和一個人性化的產品在交流，獲取交流的趣味性，讓產品從可用變成易用。
在視覺感性層面，形成和同類產品的差異性，進而傳遞產品背后的品牌理念和主張。集易用、獨特性、品牌為一體的動效設計理念應運而生。
合格的動效具備哪些特征
動效的真實感、節(jié)奏的一致性、動效的物理性、元素路徑的一致性、動效的故事性。
（1）動效的真實感
是指元素運動形式的可能性。每一中元素都有自己的運動能力范圍（生活中類似物品的運動情況和用戶的認知習慣），設計師的腦洞大并不代表動效的合理，超出能力范圍的動效不僅不會增分，反而會降低用戶的認知體驗。
比如：表示一個電話的Icon動效，想吸引用戶點擊，引導用戶的行為，通俗情況下可能是Icon元素的抖動，或者是上下彈跳，來引導用戶。但如果用一種類似波浪的翻滾動效來表示，就超出了電話Icon的運動能力范圍。因為在用戶的認知范圍內是沒有波浪狀的Icon動效。
（2）節(jié)奏的一致性
是指界面動效中的所有運動元素和動效屬性采用同樣的時間，同樣的速度，同樣的節(jié)奏，引導用戶獲取信息、理解產品。如果節(jié)奏不一致，首先用戶感受到的是一個不舒服的運動場景。其次用戶無法理解動效傳遞的意義，無法獲取應該獲取的信息。最后會感覺整個動效太過拖沓、不嚴謹，減弱用戶的正面感受。
（3）動效的物理性和直實性不同
物理性指元素在真實感的基礎上符合運動的物理特性。繼續(xù)拿電話Icon舉例，電話Icon設計了上下彈跳的動效，但Icon的上下運動是勻速的，沒有減速和加速，這就是不符合物理性。符合物理性的動效便于用戶理解動效含義。
大家想想小時候看過的《貓和老鼠》，卡通人物的運動特性都是在真實生活中呈現出來的物理性的基礎上進行夸張，所以你會感受到動畫所傳遞的趣味。
（4）元素路徑的一致性
是指所有參與運動的元素的運動方向保持一致，不能出現有元素A向上移動，元素B向下移動，這就違背了運動路徑的一致性。運動路徑的一致性通常包括三類，橫向一致性，縱向一致性，和中心輻射一致性。
（5）動效的故事性和趣味性
再此提起《貓和老鼠》，相信大家小時候都喜歡看，因為有故事、有趣味。動效也是簡短的動畫，所以動效通過元素的運動來傳遞背后的品牌故事，這就是動效的魅力。想清楚你的動效想傳遞什么、故事性是什么非常重要，因為動效不僅讓用戶感受到趣味，還要通過動效建立對于產品的立體認知、品牌認知。
動效應該是一整套動效語言
解決問題不能僅僅停留在做好了一個動效，針對產品體驗的解決方案應該是一整套針對產品的動效語言。通過動效語言來形成具有品牌性、一致性的認知體驗。主要通過動效屬性和動效類別來定義設計語言。
動效屬性包括速度、軌跡、時間、視覺焦點、節(jié)奏、層級，動效類別就是在前面談到的四種動效圖標動效、界面動效、提示動效、信息狀態(tài)動效。
在不同動效類別的基礎上去定義它們的屬性應該做怎樣的變化，進而搭建一整套動效語言，例如：界面動效元素在多長時間（時間的單位建議是統(tǒng)一的，比如：毫秒）中運動多長的距離（距離可以通過設計圖的尺寸去計算），元素的運動軌跡是什么，整個過程中是否有視覺焦點（用于引動用戶的視覺），動效的運動節(jié)奏如何，是加速運動還是減速運動？
最理想的動效語言是一整套數據表格和動效范例，范例主要用作團隊成員之間溝通和理解，在達成一致之后，修改表格的數據并且給到開發(fā)團隊修改元素的動效屬性。
動效注意事項
必須要說的是很多動效的實現，可能不是由代碼去繪制出來的，而是由設計師制作輸出動效序列幀，所以需要注意一下幾點：
- 需要設計師確定動效的播放幀速率（平衡動效占用的手機資源和動效的流暢性，24fps是能夠滿足一般性需求）。
- 動效是運動的，顯示區(qū)域要比靜態(tài)元素的區(qū)域要大，所以在設計之前要先和開發(fā)成員溝通，了解現在開發(fā)框架中的顯示面積情況，可變動性有都多大，技術邊界在哪里，這樣輸出的動效才是一個可落地的方案。
- 在動效樣式不多的情況下建議使用序列幀動效，開發(fā)成本低，設計師主導具體動效樣式，減少反復溝通的成本。
- 界面轉場動效和提示動效，建議使用代碼編寫，因為出現場景多，編寫成本低，可修改性強。而圖標型動效，建議是序列幀動效，因為變化參數多，程序表現難度大。
- 特別注意H5環(huán)境中的動效，減少在加載動效中使用序列幀的方式，因為在加載過程中，序列幀也是需要加載的，由于網絡環(huán)境的不同會造成動效的卡頓。代碼動效中動畫屬性變化過多，會過分占用程序資源，造成動效不流暢，代碼實現的動效需要制作Demo或者找案例參考，并且把變形屬性轉譯成代碼語言，否則就會造成大家都能理解，但不知道哪些屬性發(fā)生了變化，增加溝通成本。
如何去落地
在開始設計之前，先與開發(fā)人員溝通表現動效的形式，分幾期去完成，達成統(tǒng)一共識。提前溝通動效方案的風險點和困難點，會讓后期推動更加便利。圖標型動效制作成本高，可以先找參考案例，在樣式上和團隊形成統(tǒng)一共識的基礎上再進行定制化、品牌化的設計。
界面動效和提示型動效可以采用Flinto，Principle等制作成高保真Demo，便于團隊成員理解，形成視覺上的感知，減少后期不必要的反復溝通和修改。
總結
動效是一種設計語言和表現手段，在使用之前一定要思考為什么使用，使用之后產生什么價值。
動效一定是輔助用戶理解產品，輔助產品傳遞產品價值。動效方案的創(chuàng)意性，邏輯性，物理規(guī)律一定要在動效中呈現，否則方案是沒有價值的。
切莫過分動效，否則會弄巧成拙。
本文由 @亮kingking 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議。
- 目前還沒評論，等你發(fā)揮！
