動(dòng)效相關(guān)問題
一、動(dòng)效的作用?
總結(jié)下來就是：友好、有趣、反饋、過渡、引導(dǎo)
在可用性良好的前提下，通過細(xì)節(jié)設(shè)計(jì)和交互方式創(chuàng)新為產(chǎn)品增加亮點(diǎn)，可以帶來更驚喜的體驗(yàn)和表達(dá)產(chǎn)品的氣質(zhì)與態(tài)度。
較少用戶在操作等待過程中的焦慮。
通過動(dòng)效的方式來進(jìn)行現(xiàn)實(shí)世界的模擬并且不需要任何提示，迎合用戶的意識(shí)認(rèn)知。使產(chǎn)品的交互方式更接近真實(shí)世界。增強(qiáng)了用戶對(duì)應(yīng)用的操縱感和帶入感。
引導(dǎo)作用就是通過動(dòng)效能夠幫助用戶使用功能，對(duì)功能的方向、位置、喚出操作、路徑等進(jìn)行暗示和指導(dǎo)，方便用戶在最短的時(shí)間內(nèi)來學(xué)會(huì)操作APP里的一些功能。
我們可以通過動(dòng)效的設(shè)計(jì)，來告訴用戶當(dāng)前APP正在處在那種狀態(tài)，可以通過平移、放大、縮小刪除等等動(dòng)效的方式來給用戶做及時(shí)的反饋。
讓過度盡量的流暢，使得界面與界面之間、界面上元素的出現(xiàn)和消失都盡量的流暢，通過大小、位置和透明度的變化，使用戶和產(chǎn)品的交互過程更流暢。
二、動(dòng)效的實(shí)現(xiàn)工具?
常見的動(dòng)效制作工具：PS 、AE、 principle
其他一些動(dòng)效制作工具： Flinto、 keynote、Hype 3、Origami
三、動(dòng)效做完后怎么和前端配合實(shí)現(xiàn)?
配合模式取決于動(dòng)效形式的不同，配合的方式也有所區(qū)別。
1. 啥也不提供，溝通就行，提供動(dòng)效展示效果
例如一個(gè)圓球的縮放動(dòng)畫，或者一個(gè)正方形的旋轉(zhuǎn)動(dòng)畫，設(shè)計(jì)師只需要把自己的思路告訴前端即可，如果他實(shí)在不明白也可以提供一個(gè)用于預(yù)覽的動(dòng)效展示。
2. 只需提供一張png素材圖，溝通，并提供動(dòng)效展示效果
類似下圖的“加載中”效果
3. 提供GIF格式
做好的動(dòng)效導(dǎo)出gif格式提供給前端直接使用。
4. 提供PNG序列
做好的動(dòng)效導(dǎo)出png序列圖片(一幀一張圖)，給前端，讓其安裝一定的速度進(jìn)行依次播放。
5. 提供SVGA格式
常見于直播類產(chǎn)品刷禮物動(dòng)效效果制作。制作工具SVGA-AEConverter-master
6. 提供JSON文件格式
Lottie 是Airbnb開源的一個(gè)面向 iOS、Android、React Native 的動(dòng)畫庫(kù)，能分析 Adobe After Effects 導(dǎo)出的動(dòng)畫。 制作工具Bodymovin。
使用教程https://www.zcool.com.cn/article/ZOTE3ODM2.html
更多關(guān)于“UI培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時(shí)歡迎你來試聽。
京公網(wǎng)安備 11010802030320號(hào)