如今豐富細膩的 App 動效遍布移動端優(yōu)秀應用界面中脓钾，為用戶提供了良好的動態(tài)沉浸式體驗，動效設計在產(chǎn)品研發(fā)過程中也越來越被認可和重視桩警。
通過本文可训，你將輕松了解到關于動效設計的一些必備知識：
- 究竟為什么要設計動效？它的意義和價值是什么生真？
- App 動效形式多種多樣沉噩，如何將它們區(qū)分和歸類？
- 優(yōu)秀的動效有哪些實用性的指導原則供我們參考柱蟀？
- 動效軟件紛繁眾多川蒙，如何挑選出最合適的那一款？（文末附有下載鏈接）
一长已、動效設計的必要性
1.提升用戶體驗
設計師若只追求靜態(tài)像素的完美呈現(xiàn)畜眨，而忽略動態(tài)過程的合理表達，會導致用戶不能在視覺上覺察元素的連續(xù)變化术瓮，進而很難對新舊狀態(tài)的更替有清晰的感知康聂。
迪士尼動畫大師乃特維克說過一句話：
動畫的一切皆在于時間點和空間幅度。
通過「時間點」和「空間幅度」的設計為用戶建立運動的可信度胞四，即視覺上的真實感恬汁，當用戶意識到這個動作是合理的，才能更加清晰愉悅地使用產(chǎn)品辜伟。
2.增添產(chǎn)品氣質
未添加動效的產(chǎn)品氓侧，會帶給人一種死氣沉沉的感覺，所有內(nèi)容平鋪直敘导狡、毫無生機约巷，即使界面設計的很美觀，也會缺乏一種靈動細膩的氣質旱捧。
如果把產(chǎn)品比作成美女独郎，那么界面視覺就是美女的顏值踩麦，交互動效就是美女的肢體語言。合理的動效能將更立體氓癌、更富有關聯(lián)性的信息傳遞出去谓谦，提高產(chǎn)品的“表達能力”，增加親和力和趣味性顽铸，也利于品牌的建立茁计。
3.創(chuàng)造設計師優(yōu)勢
3.1 降低溝通成本
設計師通過制作高保真動效 Demo 展示設計思路和創(chuàng)意，大大提高設計提案交接率谓松，降低了設計師與開發(fā)的溝通成本星压，提高了動效的還原度，體現(xiàn)專業(yè)性鬼譬。
3.2 打造核心競爭力
在 UI 設計行業(yè)已經(jīng)趨于飽和娜膘、并且產(chǎn)品設計流程逐漸實現(xiàn)體系化和模塊化的今天，設計師如果只會利用組件重復性地“拼湊”頁面而無更多的價值產(chǎn)出优质，被替代的可能性將會增大竣贪。
在日常工作之余，若要為公司和團隊輸出更多的價值巩螃，動效設計能力便是交互/視覺設計師的必備技能與核心競爭力之一演怎。
二、動效設計的類型
界面動效種類紛繁多樣避乏，根據(jù) App 動效的作用爷耀，可以大體分為如下 6 個類型:
1.轉場過渡
人腦灰質會對動態(tài)事物（如:移動、形變拍皮、色變等）保持敏感歹叮。在界面中加入一些平滑舒適的過渡效果，不僅能讓界面顯得生動铆帽，更能幫助用戶理解界面前后變化的邏輯關系咆耿。
2.層級展示
現(xiàn)實空間里，物體存在近大遠小原則爹橱，運動則會近快遠慢萨螺。當界面中的元素存在不同層級時，恰當?shù)膭有Э梢詭椭脩衾砬迩昂笪恢藐P系愧驱，以動效來體現(xiàn)整個系統(tǒng)的空間感慰技。
3.空間擴展
在移動端界面設計中，由于有限的屏幕空間難以承載大量的信息內(nèi)容冯键，可以通過折疊惹盼、翻轉庸汗、縮放等形式拓展附加內(nèi)容的存儲空間惫确，以漸進展示的方式來減輕用戶的認知負擔。
4.聚焦關注
聚焦關注是通過元素的動作變化，提醒用戶關注特點的內(nèi)容信息改化。這種提醒方式不僅可以降低視覺元素的干擾掩蛤，使界面更清爽簡潔，還能在用戶使用過程中陈肛，輕盈自然地吸引用戶注意力揍鸟。
5.內(nèi)容呈現(xiàn)
界面內(nèi)容元素按照一定的秩序規(guī)律逐級呈現(xiàn)，引導用戶視覺焦點走向句旱，幫助用戶更好地感知頁面布局阳藻、層級結構和重點內(nèi)容，同時也能讓整個流程更加豐富流暢谈撒，增添了界面的活力腥泥。
6.操作反饋
無論是點擊、長按啃匿、拖拽蛔外、滑動等交互行為，都應該得到系統(tǒng)的即時反饋溯乒，將其以視覺或動效的方式展現(xiàn)夹厌，幫助用戶了解當前系統(tǒng)對交互過程的響應情況，為用戶帶來安全感裆悄。
三矛纹、動效設計的原則
這是一位在五年時間內(nèi)為四十多個國家和上百個頂尖機構提供咨詢服務的動效設計師，總結出來的實用性動效設計原則灯帮，為提升產(chǎn)品體驗與可用性提供幫助崖技。[譯者 Z Yuhan 注] 原英文鏈接
3.1 緩入緩出
時效事件發(fā)生時，元素的動作應顯得自然钟哥，與用戶預期相符迎献。
3.2 偏移與延遲
加入新的界面元素或場景時，可用于表達元素之間的關系腻贰。
3.3 父子關系
當界面元素較多時吁恍，可以利用時空差異創(chuàng)造出可以感知到的父子繼承關系。
3.4 形變
用連貫的狀態(tài)描繪表達元素功能的改變播演。
3.5 值變
當元素的值發(fā)生變化時冀瓦，用連續(xù)動態(tài)的方式表達前后之間的關聯(lián)鲁僚。
3.6 遮罩
如果一個界面元素的不同的展示方式對應不同的功能袍镀，那么讓展示方式的變化過程具有連續(xù)性。
3.7 覆蓋
用堆疊元素的相對位置來描述它們的扁平空間關系笙什。
3.8 復制
當新的元素從已有元素復制出來時洲炊，用連貫的方式描述其關聯(lián)關系感局。
3.9 景深
允許用戶看得到非主要元素或場景（前景或背景）尼啡。
3.10 視差
當用戶滾動界面時，在平面創(chuàng)造出空間層次询微。
3.11 翻轉
通過具有空間架構的描述方式來表現(xiàn)新元素的產(chǎn)生與離場崖瞭。
3.12 滑動變焦
用連續(xù)的空間描述來引導界面元素和空間。
四撑毛、動效軟件的選擇
動效設計軟件紛繁眾多书聚，不同軟件的側重點也各不相同，設計師可以根據(jù)項目的時間藻雌、精細度雌续、面向對象等條件來選擇合適的軟件。下面我列舉出市面上常見的動效軟件以及各自的優(yōu)缺點胯杭，供選擇參考西雀。
1.After Effects
AE 這款軟件知名度很高，學過設計的應該都知道歉摧，它的優(yōu)點就是強大艇肴，可以實現(xiàn)超高精度的動效，一般 UI 動效制作只用到了 AE 很小的一部分功能叁温。缺點是門檻高再悼，上手較困難，不能做實時交互動效膝但。
2.Hype
Hype 號稱無代碼動效神器冲九，像 AE 一樣使用時間軸來設置動畫。動畫效果在 PC跟束、Pad莺奸、Mobile 端都可以直接預覽，也可以導出視頻或者 GIF冀宴。3.0 版還有物理特性和彈性曲線灭贷，可以實現(xiàn)更強大的動畫效果。
3.Principle
Principle 功能強大略贮，界面和 Sketch 類似甚疟，被譽為 Sketch 的最佳拍檔。它主要是做少量頁面間的過渡轉場逃延、單元素動畫等細節(jié)動效览妖。優(yōu)點很明顯，上手快揽祥、效率高讽膏、質感好，缺點就是不易做整套交互流程拄丰。
4.Flinto
Flinto 界面跟 Sketch 也非常相似府树，能夠快速實現(xiàn)各種滾動是嗜、轉場、點擊反饋等效果挺尾，適合模擬多個頁面、場景復雜的交互流程站绪，學習成本低遭铺。缺點是復雜的動效難以實現(xiàn)，價格略貴且試用期短恢准。
5.Framer
Framer 是一個基于 Javascript 的原型工具魂挂，能快速導入 Photoshop、Sketch 中的圖像并模擬圖層分層馁筐，支持手勢涂召，動畫精細度高，可在手機或平板中預覽效果敏沉。缺點是需要有一定的編程基礎果正，上手難度較高。
6.ProtoPie
Protopie 是一款交互原型設計工具盟迟，支持 Mac 和 Windows 雙平臺秋泳，更加輕量級，集成的功能更吸引人攒菠，可以調用 iPhone 系統(tǒng)的陀螺儀迫皱、麥克風、羅盤辖众、3D Touch卓起，多種智能傳感器等等，絕對是 Windows 用戶設計師的福利凹炸。
小結
動效設計可以提升用戶體驗戏阅、增添產(chǎn)品氣質，并為設計師創(chuàng)造優(yōu)勢啤它；
6 種作用的動效類型：轉場過渡饲握、層級展示、空間擴展蚕键、聚焦關注救欧、內(nèi)容呈現(xiàn)、操作反饋锣光；
12 個實用性的動效原則：緩入緩出笆怠、偏移與延遲、父子關系誊爹、形變蹬刷、值變瓢捉、遮罩、覆蓋办成、復制泡态、景深、視差迂卢、翻轉某弦、滑動變焦；
根據(jù)項目時間而克、精細度靶壮、面向對象等條件，選擇合適的工具制作動效员萍。
到此腾降，《Design System》系列的動效理論篇就要告一段落了，如果喜歡的話就點個贊～你也可以關注我的公眾號「彭彭設計筆記」碎绎，我會不定期更新 UI 設計類精品文章螃壤。
最后，已為大家整理好了各個軟件的官方下載鏈接筋帖，請收下～
After Effects 官網(wǎng)下載地址
Hype 官網(wǎng)下載地址
Principle 官網(wǎng)下載地址
Flinto 官網(wǎng)下載地址
Framer 官網(wǎng)下載地址
ProtoPie 官網(wǎng)下載地址
