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