視頻課程地址
一泪姨、產(chǎn)品動效存在的價值
01. 我們?yōu)槭裁匆鰟有гO(shè)計
1.增加體驗舒適度：讓用戶認知過程更自然。
2.增加界面活力：第一時間吸引注意力唯蝶，突出重點雏胃。
3.描述層級關(guān)系：體現(xiàn)元素之間的層級與空間關(guān)系。
4.提供反饋宪祥、明確意向：助力交互體驗寺鸥。
5.加深品牌感：加深品牌圖形的印象猪钮，與用戶互動產(chǎn)生共鳴品山。
02. 常見動效的分類與解析
轉(zhuǎn)場類
轉(zhuǎn)場類動效用于層級跳轉(zhuǎn)或場景切換胆建，除入場和離場動效外經(jīng)常輔以縮放、透度旋轉(zhuǎn)等平滑的效果肘交，幫助用戶理解界面間的變化和層級關(guān)系笆载，也讓界面更加真實動。避免場景的瞬間切換導致用戶產(chǎn)生變化盲視(視覺刺激的突兀變化會阻止用戶注意到新的信息)涯呻。
展示類
展示類動效用于突出產(chǎn)品核心功能和品牌調(diào)性凉驻，界面信息按照一定的規(guī)律呈現(xiàn)引導用戶的視覺流向，幫助用戶更好的理解產(chǎn)品,能夠在第一眼吸引住用戶复罐。常見的如企業(yè)或產(chǎn)品的官網(wǎng)首頁,app閃屏等能夠?qū)Ξa(chǎn)品起到很好的宣傳作用涝登。
引導類
引導類動效通過界面中某些元素的變化，引起用戶注意或引導用戶進行操作效诅，避免用戶困惑,能夠自然而然的聚焦用戶視線胀滚，降低其他視覺元素的干擾。
反饋類
反饋類動效用于對用戶的操作及時給出相應的反饋乱投，如：懸浮咽笼、點擊、拖拽等戚炫，以視覺的形式展現(xiàn)給用戶剑刑，告知用戶系統(tǒng)正在與用戶發(fā)生交互，讓用戶產(chǎn)生一定的心理預期双肤。
二施掏、優(yōu)秀動效重要要素
01. 設(shè)計動效的準確切入點
此時交互和視覺均已定稿，動效形式會因定稿的內(nèi)容受到限制米死，設(shè)計上就會出現(xiàn)牽強锌历，動效失去了功能性，為了動效而動效峦筒。
02. 根據(jù)產(chǎn)品特性定義動效風格（情感化動效）
現(xiàn)如今市場上的產(chǎn)品種類眾多扇丛，常見如安全术吗、社交、游戲帆精、新聞较屿、財經(jīng)、效率卓练、體育隘蝎、工具、商務等等襟企，都有自身特有的用戶群體嘱么。
因此在設(shè)計動效時，除了要考慮動效的基本設(shè)計原則外顽悼，還要考慮產(chǎn)品本身的特性和動效帶給用戶的心理感受曼振。
03. 遵循物理運動法則
說到物理運動法則，不得不提到牛頓三大定律表蝙。但現(xiàn)實世界中存在著摩擦力拴测、空氣阻力等外力因素，物體會做加速或減速運動府蛇，人類也養(yǎng)成了這樣的認知集索。因此在動效設(shè)計時，物體的運動要符合現(xiàn)實世界的運動規(guī)律汇跨，符合物理運動法則的動效才符合用戶的感知务荆。
最常用的緩動曲線包括緩入、緩出兩種形式穷遂，緩入為加速曲線函匕，緩出為減速曲線◎胶冢考慮到速度變化對用戶心理和注意力的影響盅惜，(不斷減速的物體會吸引用戶的注意力,不斷加速的物體會失去用戶的注意力)因此入場動效要先快后慢，持續(xù)吸引用戶視線忌穿，出場動效要先慢后快抒寂。
04. 動效的響應時長和持續(xù)時長
響應時長：指從用戶執(zhí)行操作到反饋出現(xiàn)的間隔時長。
- 對于由用戶操作直接觸發(fā)的反饋掠剑，理想的響應時間應該控制在100ms(0.1s)內(nèi);
- 對于由用戶操作間接觸發(fā)的反饋屈芜，響應時長可允許達到1秒左右，不可超過2秒無反饋;
- 當反饋時間為2-9秒時，可使用循環(huán)的加載樣式(如:常見的菊花轉(zhuǎn)) ;
- 當反饋時間超過10秒時井佑，須使用帶有進度指示的加載樣式(如已加載了60%,還剩30秒)属铁。
持續(xù)時間：從動效開始到結(jié)束的時長。
- 交互微動效的持續(xù)時間不宜過長躬翁，以避免浪費用戶時間焦蘑，影響用戶的閱讀和操作效率，其持續(xù)時間一般不超過0.5秒(加載動效除外);
- 較快的動效更容 易吸引用戶注意力姆另，也更節(jié)省時間;
- 較慢的動效較少分散用戶注意力喇肋，更適用于非用戶直接觸發(fā)的場景;
- 出場動效一般比進場動效更快。
05. 克制過分的動效設(shè)計
盡量避免夸張的動效,做有意義的事迹辐，不去做太多的修飾而干擾用戶。
如右圖例子在展開時甚侣，更注重的是菜單的內(nèi)容明吩，而右側(cè)的圖標切換并不是主要的元素，不需要過度強調(diào)去分散用戶的注意殷费。只需在不經(jīng)意間切換,明確指示變化即可印荔。
06. 動效需要反應產(chǎn)品品牌調(diào)性
每個產(chǎn)品都有自己的品牌調(diào)性，動效設(shè)計要符合產(chǎn)品的品牌調(diào)性详羡。對產(chǎn)品來說仍律，符合品牌調(diào)性的動效能夠保持與其他產(chǎn)品的差異化，提升產(chǎn)品的B格实柠，也能夠在用戶心中形成品牌效應水泉。
三、怎樣能讓開發(fā)很好還原動效效果
PNG序列或者是GIF動圖存在的問題
- 文件資源過大
- 不同機型適配不便
- GIF格式色彩位深度限制
01. LOTTIE介紹
Lottie是一個iOS窒盐、Android和React Native庫草则，可實時渲染After Effects動畫， 從而使應用程序可以像使用靜態(tài)圖像一樣輕松地使用動畫蟹漓。使用After Effect的擴展插件Bodymovie導出json格式的文件
02. 動效設(shè)計文檔的輸出方法
Inspector Spacetime
強烈推薦Google設(shè)計團隊開發(fā)的動效標注導出插件炕横，能夠快速根據(jù)關(guān)鍵幀，快速列出緩動的貝塞爾曲線葡粒、位移坐標等份殿。
英文速查
| Sharable Data | 共享數(shù)據(jù) |
|---|---|
| Layer name | 圖層名稱 |
| Property name | 物業(yè)名稱 |
| Delay time (live value) | 延遲時間(實時值) |
| Duration of keyframe pair | 關(guān)鍵幀對的持續(xù)時間 |
| Value change | 價值變化 |
| Cubic Bezier interpolation curve | 三次貝塞爾曲線插值曲線 |
四、總結(jié)&思考
5G時代的來臨嗽交，網(wǎng)絡(luò)變得更加順暢卿嘲，用戶對于產(chǎn)品的性能或是體驗，都有著更高的期望轮纫，動效是一個很好提升產(chǎn)品體驗的模塊腔寡，希望上述內(nèi)容能夠讓大家對動效的了解更加全面。
