動(dòng)效相關(guān)問題

　　一、動(dòng)效的作用?

　　總結(jié)下來(lái)就是：友好、有趣、反饋、過渡、引導(dǎo)

　　在可用性良好的前提下，通過細(xì)節(jié)設(shè)計(jì)和交互方式創(chuàng)新為產(chǎn)品增加亮點(diǎn)，可以帶來(lái)更驚喜的體驗(yàn)和表達(dá)產(chǎn)品的氣質(zhì)與態(tài)度。

　　較少用戶在操作等待過程中的焦慮。

　　通過動(dòng)效的方式來(lái)進(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)來(lái)學(xué)會(huì)操作APP里的一些功能。

　　我們可以通過動(dòng)效的設(shè)計(jì)，來(lái)告訴用戶當(dāng)前APP正在處在那種狀態(tài)，可以通過平移、放大、縮小刪除等等動(dòng)效的方式來(lái)給用戶做及時(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萬(wàn)人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時(shí)歡迎你來(lái)試聽。