編輯導語：產(chǎn)品在設計過程中需要站在用戶的角度看待問題，一定程度上保障用戶的使用體驗，進而才能推動后續(xù)用戶的留存、甚至轉化。那么，若想在動效層上提高用戶體驗，應該怎么做呢？本文作者就對該問題做了闡述，一起來看一下。
騰訊ISUX在《2021-2022 設計趨勢ISUX報告 · 動態(tài)篇》中指出：“動態(tài)能激發(fā)用戶的情緒，為靜態(tài)的視覺設計注入活力與生命力，在不久的將來勢必席卷所有人的目光，是最好提升用戶體驗方法之一”。
一、動效的簡單常識
1. 為什么說動效很重要
有研究顯示，當人們遇到不感興趣的事情時，他們的注意力只會集中在10分鐘內(nèi)，在短暫的休息之后，他們的注意力才會，再次回到7到10分鐘內(nèi)。
基于上述原因，我們就要保證在用戶處于注意力集中的時間段，迅速地傳達有效信息，把用戶的需求解決完畢，讓用戶切實地感覺到我們是一款好用的產(chǎn)品。
2. 動效的表現(xiàn)形式
動效，現(xiàn)在已經(jīng)成為了 APP和網(wǎng)頁的常見的表現(xiàn)形式了。
設計師經(jīng)過精心設計，可以讓用戶在游戲中的操作更加流暢，操作也更加流暢。
動效就像是產(chǎn)品的潤滑劑，通過動效可以更好地連接用戶，提升產(chǎn)品體驗。
動效一般都是指向性動效，能夠描述元素的運動軌跡、運動狀態(tài)和元素之間的邏輯關系。
常見的表現(xiàn)形式有滑動、放大、最小化、翻頁、平移、滾動、切換對象、展開堆疊、添加到列表等等。
下面這個就是我找到的關于滑動的案例，同樣是Banner區(qū)不同的產(chǎn)品對滑動動效的設計卻不相同。
二、動效果的制作和交付
動效大范圍興起始于扁平化設計之后，扁平化設計的好處在于用戶的注意力可以集中在界面的核心信息上。
將對用戶無效的設計元素去掉，不被設計所打擾分散注意力，使用體驗更加純粹自然。
1. 常用動效軟件
接下來我們就來看看繼扁平化之后，市場上都有哪些動效軟件可以使用。
1）AE：實現(xiàn)算是老牌的全能選手，幾乎可以制作任何你想要的效果。
包括圖標、交互的動效，但是操作相對復雜，第一次接觸的同學還是建議先看看教程。
2）Principle：操作簡單，效率高，可以和Sketch和Figma軟件同步使用。
適合制作快速展示用的demo或一些簡單交互動效設計。
3）Origami：這個軟件是Faceboook的開源工具，他的作用和Principle軟件很像。
但是它的操作方式很特別，所有的交互指令是需要拖動連接的。
而且Origami能現(xiàn)實的效果開發(fā)就可以實現(xiàn)，所以開發(fā)對設計師說“實現(xiàn)不了”這樣的借口了，在Origami面前是不成立的。
4）Figma：Figma是基于Jacascript開發(fā)的工具，F(xiàn)ramer除了可以做設計稿之外。
他還是一個可交互的動效軟件，上手也比較簡單，是我的主力工具。
2. 動效的交付方式
在產(chǎn)品中，UI目前動效交付的方式主要有兩種，一種是文件交付，實現(xiàn)成本低，難度也比較低。
另外一種是參數(shù)交付方式，實現(xiàn)成本比較高，難度比較大。
1）文件交付方式：實現(xiàn)方式可以是Gif或者是Mp4，開發(fā)使用這種格式去實現(xiàn)其動態(tài)效果。
或者，給開發(fā)工程師提供一份動態(tài)格式的文件，為開發(fā)工程師展示動態(tài)效果，開發(fā)工程師在根據(jù)看到的效果找到相似的開源文件，在開源文件上進行微調(diào)整。
2）參數(shù)交付方式：開發(fā)工程師根據(jù)設計師動態(tài)運動的文字表述，利用代碼進行動效果還原。
3. Lottie是最實用的
Lottie說白了就是一個動畫庫，能分析 AE 導出的動畫 JSON 文件，開發(fā)通過動畫庫的內(nèi)容來解釋JSON 文件。
然后再在產(chǎn)品上實現(xiàn)相同的動畫效果，是動效最為穩(wěn)定的一種實現(xiàn)方式。
Lottie的優(yōu)點在于穩(wěn)定、文件體積較小，可以兼容 Android、iOS、Web平臺。
并且實現(xiàn)出來的效果畫質(zhì)相對品質(zhì)較高是目前最受歡迎的一種動效實現(xiàn)方式。
當然了有優(yōu)點也會有缺點，因為Lottie 需要先通過 bodymovin （AE插件）將 AE 動畫工程文件轉換為 JSON 格式的描述文件。
所以要求設計師要懂AE,前面講了AE是有學習成本的所以這是Lottie的一個門檻。
不過大家不用擔心，下面是我推薦的4個線上工具網(wǎng)站，分別是moko、Lottiefiles-Lottie player、Pixelture、FLOW，希望可以對學習Lottie的同學有所幫助。
1）moko：是一款在線實現(xiàn)Lottie的動畫效果，你可以通過簡單的操作就制作一個動圖，網(wǎng)站里面也有簡單的教程，上手很容易。
2）Lottiefiles-Lottie player：是Lottie的實際預覽工具，你可以快速查看你的Lottie實現(xiàn)的動畫效果。
3）Pixelture：里面有一百五十多種麻省理工學院許可的插圖和Lottie動畫，最難得的一點是，可以直接在商業(yè)項目中使用。
4）FLOW：這是一款可以直接從Sketch導入文件，并生成開發(fā)可以使用的lottie的js文件的工具。
三、盤點那些好用的動效方式
前面講了關于動效的一些常識，動效里面還有一個不可忽視的知識點，那就是交互手勢。
交互手勢是使用移動設備最基本的手段，很多產(chǎn)品都是通過創(chuàng)新的交互響應來更友好地解決用戶的痛點。
如果你仔細對比，將不難發(fā)現(xiàn)，很多巨頭互聯(lián)網(wǎng)公司都是很注重交互手勢的。
比如谷歌就總結了下面在移動端常用的交互手勢，那么接下來，我就挑3種交互手勢，來盤點一下咱們身邊產(chǎn)品好的交互動效設計點。
1. 長按發(fā)現(xiàn)更多驚喜
長按發(fā)現(xiàn)更多驚喜，比如在淘寶首頁場景，如果進行下拉手勢，淘寶根據(jù)拖拽距離產(chǎn)生兩種交互結果：正常短距離下拉提示“松開刷新”，而持續(xù)下拉則會進入淘寶二樓承接頁。
這樣的方式給用戶一種驚喜感，也節(jié)省了很多Feed的展示空間。
前段時間，我還發(fā)現(xiàn)了網(wǎng)易云音樂的一個小體驗點。
如果你從首頁進入排行榜，再從排行榜進入下一個層級的場景。
此時想回到首頁的（第一層級）場景，只需要長按2秒的返回鍵，就可以回到首頁的，這樣的操作，讓我覺得產(chǎn)品很有效率。
2. 單指最便捷的操作
單指操作雖然是最常見的交互方式，但是也有產(chǎn)品玩出了花樣，提升了用戶體驗。
比如在QQ聊天中的消息列表內(nèi)的小紅點快捷清空操作就非常有意思。
用戶可以直觀地將某條消息的未讀紅點直接拖拽刪除，對于強迫癥患者來說很友好，而且動效也很有趣。
在視頻播放器的產(chǎn)品上大家知道通過左右滑動、上下滑動以及區(qū)域長按等操作實現(xiàn)亮度、音量、快速進退和速率播放等功能。
但是優(yōu)酷在此功能上進行了更貼心的設計，在全屏播放狀態(tài)通過左右滑動進行快進的同時，屏幕會出現(xiàn)一個小窗口來實時觀察快進到那里的畫面，讓我覺得體驗很便捷。
3. 雙指很有趣的手勢
高德地圖在交互手勢上有很多可取的地方，比如，在地圖縮放這個功能上就有很多手勢對應不同場景的用戶需求。
1）單手場景：兩指搓動屏幕是縮放功能就不用介紹，很多帶地圖功能的產(chǎn)品都有。
2）雙手場景：但是單手場景下，雙擊屏幕，地圖可按一定比例放大地圖。
而雙按滑動又可以無縫縮放地圖，徹底解決單手對于縮放地圖的不友好體驗。
bilibili上有個有趣的功能，在全屏觀看視頻的狀態(tài)下，可以通過雙指操作讓用戶隨心所欲地控制畫幅大小和角度，雖然我覺得沒什么實質(zhì)功能，但是也蠻有趣的。
講了這么多，我們聚焦一下，什么動效對用戶來說是好的？
國外一名設計師曾這樣定義好的動效“好的動效應該是隱形的，應該是以提高可用性為前提，并且以令人覺得自然含蓄的方式提供有效用戶反饋的一種機制”。
六、結尾
動效在UI設計中是一個很加分的技能，相對來說也算是有點門檻的知識點，大家還需要在實際工作中積攢自己的經(jīng)驗。
#專欄作家#
斜杠7濕兄，公眾號：斜杠7濕兄，人人都是產(chǎn)品經(jīng)理專欄作家。星光不問趕路人，時光不負有心人，勵志做一個知識的分享者。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載。
題圖來自Unsplash，基于CC0協(xié)議。
版權聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 舉報，一經(jīng)查實，本站將立刻刪除。
