視頻課程地址
一、產(chǎn)品動(dòng)效存在的價(jià)值
01. 我們?yōu)槭裁匆鰟?dòng)效設(shè)計(jì)
1.增加體驗(yàn)舒適度：讓用戶(hù)認(rèn)知過(guò)程更自然。
2.增加界面活力：第一時(shí)間吸引注意力，突出重點(diǎn)。
3.描述層級(jí)關(guān)系：體現(xiàn)元素之間的層級(jí)與空間關(guān)系。
4.提供反饋、明確意向：助力交互體驗(yàn)。
5.加深品牌感：加深品牌圖形的印象，與用戶(hù)互動(dòng)產(chǎn)生共鳴。
02. 常見(jiàn)動(dòng)效的分類(lèi)與解析
轉(zhuǎn)場(chǎng)類(lèi)
轉(zhuǎn)場(chǎng)類(lèi)動(dòng)效用于層級(jí)跳轉(zhuǎn)或場(chǎng)景切換，除入場(chǎng)和離場(chǎng)動(dòng)效外經(jīng)常輔以縮放、透度旋轉(zhuǎn)等平滑的效果，幫助用戶(hù)理解界面間的變化和層級(jí)關(guān)系，也讓界面更加真實(shí)動(dòng)。避免場(chǎng)景的瞬間切換導(dǎo)致用戶(hù)產(chǎn)生變化盲視(視覺(jué)刺激的突兀變化會(huì)阻止用戶(hù)注意到新的信息)。
展示類(lèi)
展示類(lèi)動(dòng)效用于突出產(chǎn)品核心功能和品牌調(diào)性，界面信息按照一定的規(guī)律呈現(xiàn)引導(dǎo)用戶(hù)的視覺(jué)流向，幫助用戶(hù)更好的理解產(chǎn)品,能夠在第一眼吸引住用戶(hù)。常見(jiàn)的如企業(yè)或產(chǎn)品的官網(wǎng)首頁(yè),app閃屏等能夠?qū)Ξa(chǎn)品起到很好的宣傳作用。
引導(dǎo)類(lèi)
引導(dǎo)類(lèi)動(dòng)效通過(guò)界面中某些元素的變化，引起用戶(hù)注意或引導(dǎo)用戶(hù)進(jìn)行操作，避免用戶(hù)困惑,能夠自然而然的聚焦用戶(hù)視線(xiàn)，降低其他視覺(jué)元素的干擾。
反饋類(lèi)
反饋類(lèi)動(dòng)效用于對(duì)用戶(hù)的操作及時(shí)給出相應(yīng)的反饋，如：懸浮、點(diǎn)擊、拖拽等，以視覺(jué)的形式展現(xiàn)給用戶(hù)，告知用戶(hù)系統(tǒng)正在與用戶(hù)發(fā)生交互，讓用戶(hù)產(chǎn)生一定的心理預(yù)期。
二、優(yōu)秀動(dòng)效重要要素
01. 設(shè)計(jì)動(dòng)效的準(zhǔn)確切入點(diǎn)
此時(shí)交互和視覺(jué)均已定稿，動(dòng)效形式會(huì)因定稿的內(nèi)容受到限制，設(shè)計(jì)上就會(huì)出現(xiàn)牽強(qiáng)，動(dòng)效失去了功能性，為了動(dòng)效而動(dòng)效。
02. 根據(jù)產(chǎn)品特性定義動(dòng)效風(fēng)格（情感化動(dòng)效）
現(xiàn)如今市場(chǎng)上的產(chǎn)品種類(lèi)眾多，常見(jiàn)如安全、社交、游戲、新聞、財(cái)經(jīng)、效率、體育、工具、商務(wù)等等，都有自身特有的用戶(hù)群體。
因此在設(shè)計(jì)動(dòng)效時(shí)，除了要考慮動(dòng)效的基本設(shè)計(jì)原則外，還要考慮產(chǎn)品本身的特性和動(dòng)效帶給用戶(hù)的心理感受。
03. 遵循物理運(yùn)動(dòng)法則
說(shuō)到物理運(yùn)動(dòng)法則，不得不提到牛頓三大定律。但現(xiàn)實(shí)世界中存在著摩擦力、空氣阻力等外力因素，物體會(huì)做加速或減速運(yùn)動(dòng)，人類(lèi)也養(yǎng)成了這樣的認(rèn)知。因此在動(dòng)效設(shè)計(jì)時(shí)，物體的運(yùn)動(dòng)要符合現(xiàn)實(shí)世界的運(yùn)動(dòng)規(guī)律，符合物理運(yùn)動(dòng)法則的動(dòng)效才符合用戶(hù)的感知。
最常用的緩動(dòng)曲線(xiàn)包括緩入、緩出兩種形式，緩入為加速曲線(xiàn)，緩出為減速曲線(xiàn)。考慮到速度變化對(duì)用戶(hù)心理和注意力的影響，(不斷減速的物體會(huì)吸引用戶(hù)的注意力,不斷加速的物體會(huì)失去用戶(hù)的注意力)因此入場(chǎng)動(dòng)效要先快后慢，持續(xù)吸引用戶(hù)視線(xiàn)，出場(chǎng)動(dòng)效要先慢后快。
04. 動(dòng)效的響應(yīng)時(shí)長(zhǎng)和持續(xù)時(shí)長(zhǎng)
響應(yīng)時(shí)長(zhǎng)：指從用戶(hù)執(zhí)行操作到反饋出現(xiàn)的間隔時(shí)長(zhǎng)。
- 對(duì)于由用戶(hù)操作直接觸發(fā)的反饋，理想的響應(yīng)時(shí)間應(yīng)該控制在100ms(0.1s)內(nèi);
- 對(duì)于由用戶(hù)操作間接觸發(fā)的反饋，響應(yīng)時(shí)長(zhǎng)可允許達(dá)到1秒左右，不可超過(guò)2秒無(wú)反饋;
- 當(dāng)反饋時(shí)間為2-9秒時(shí)，可使用循環(huán)的加載樣式(如:常見(jiàn)的菊花轉(zhuǎn)) ;
- 當(dāng)反饋時(shí)間超過(guò)10秒時(shí)，須使用帶有進(jìn)度指示的加載樣式(如已加載了60%,還剩30秒)。
持續(xù)時(shí)間：從動(dòng)效開(kāi)始到結(jié)束的時(shí)長(zhǎng)。
- 交互微動(dòng)效的持續(xù)時(shí)間不宜過(guò)長(zhǎng)，以避免浪費(fèi)用戶(hù)時(shí)間，影響用戶(hù)的閱讀和操作效率，其持續(xù)時(shí)間一般不超過(guò)0.5秒(加載動(dòng)效除外);
- 較快的動(dòng)效更容 易吸引用戶(hù)注意力，也更節(jié)省時(shí)間;
- 較慢的動(dòng)效較少分散用戶(hù)注意力，更適用于非用戶(hù)直接觸發(fā)的場(chǎng)景;
- 出場(chǎng)動(dòng)效一般比進(jìn)場(chǎng)動(dòng)效更快。
05. 克制過(guò)分的動(dòng)效設(shè)計(jì)
盡量避免夸張的動(dòng)效,做有意義的事，不去做太多的修飾而干擾用戶(hù)。
如右圖例子在展開(kāi)時(shí)，更注重的是菜單的內(nèi)容，而右側(cè)的圖標(biāo)切換并不是主要的元素，不需要過(guò)度強(qiáng)調(diào)去分散用戶(hù)的注意。只需在不經(jīng)意間切換,明確指示變化即可。
06. 動(dòng)效需要反應(yīng)產(chǎn)品品牌調(diào)性
每個(gè)產(chǎn)品都有自己的品牌調(diào)性，動(dòng)效設(shè)計(jì)要符合產(chǎn)品的品牌調(diào)性。對(duì)產(chǎn)品來(lái)說(shuō)，符合品牌調(diào)性的動(dòng)效能夠保持與其他產(chǎn)品的差異化，提升產(chǎn)品的B格，也能夠在用戶(hù)心中形成品牌效應(yīng)。
三、怎樣能讓開(kāi)發(fā)很好還原動(dòng)效效果
PNG序列或者是GIF動(dòng)圖存在的問(wèn)題
- 文件資源過(guò)大
- 不同機(jī)型適配不便
- GIF格式色彩位深度限制
01. LOTTIE介紹
Lottie是一個(gè)iOS、Android和React Native庫(kù)，可實(shí)時(shí)渲染After Effects動(dòng)畫(huà)， 從而使應(yīng)用程序可以像使用靜態(tài)圖像一樣輕松地使用動(dòng)畫(huà)。使用After Effect的擴(kuò)展插件Bodymovie導(dǎo)出json格式的文件
02. 動(dòng)效設(shè)計(jì)文檔的輸出方法
Inspector Spacetime
強(qiáng)烈推薦Google設(shè)計(jì)團(tuán)隊(duì)開(kāi)發(fā)的動(dòng)效標(biāo)注導(dǎo)出插件，能夠快速根據(jù)關(guān)鍵幀，快速列出緩動(dòng)的貝塞爾曲線(xiàn)、位移坐標(biāo)等。
英文速查
| Sharable Data | 共享數(shù)據(jù) |
|---|---|
| Layer name | 圖層名稱(chēng) |
| Property name | 物業(yè)名稱(chēng) |
| Delay time (live value) | 延遲時(shí)間(實(shí)時(shí)值) |
| Duration of keyframe pair | 關(guān)鍵幀對(duì)的持續(xù)時(shí)間 |
| Value change | 價(jià)值變化 |
| Cubic Bezier interpolation curve | 三次貝塞爾曲線(xiàn)插值曲線(xiàn) |
四、總結(jié)&思考
5G時(shí)代的來(lái)臨，網(wǎng)絡(luò)變得更加順暢，用戶(hù)對(duì)于產(chǎn)品的性能或是體驗(yàn)，都有著更高的期望，動(dòng)效是一個(gè)很好提升產(chǎn)品體驗(yàn)的模塊，希望上述內(nèi)容能夠讓大家對(duì)動(dòng)效的了解更加全面。
