編輯導語：産品在設計過程中需要站在用戶的角度看待問題，一定程度上保障用戶的使用體驗，進而才能推動後續用戶的留存、甚至轉化。那麼，若想在動效層上提高用戶體驗，應該怎麼做呢？本文作者就對該問題做了闡述，一起來看一下。

騰訊ISUX在《2021-2022 設計趨勢ISUX報告 · 動态篇》中指出：“動态能激發用戶的情緒，為靜态的視覺設計注入活力與生命力，在不久的将來勢必席卷所有人的目光，是最好提升用戶體驗方法之一”。

一、動效的簡單常識

1. 為什麼說動效很重要

有研究顯示，當人們遇到不感興趣的事情時，他們的注意力隻會集中在10分鐘内，在短暫的休息之後，他們的注意力才會，再次回到7到10分鐘内。

基于上述原因，我們就要保證在用戶處于注意力集中的時間段，迅速地傳達有效信息，把用戶的需求解決完畢，讓用戶切實地感覺到我們是一款好用的産品。

2. 動效的表現形式

動效，現在已經成為了 APP和網頁的常見的表現形式了。

設計師經過精心設計，可以讓用戶在遊戲中的操作更加流暢，操作也更加流暢。

動效就像是産品的潤滑劑，通過動效可以更好地連接用戶，提升産品體驗。

動效一般都是指向性動效，能夠描述元素的運動軌迹、運動狀态和元素之間的邏輯關系。

常見的表現形式有滑動、放大、最小化、翻頁、平移、滾動、切換對象、展開堆疊、添加到列表等等。

下面這個就是我找到的關于滑動的案例，同樣是Banner區不同的産品對滑動動效的設計卻不相同。

二、動效果的制作和交付

動效大範圍興起始于扁平化設計之後，扁平化設計的好處在于用戶的注意力可以集中在界面的核心信息上。

将對用戶無效的設計元素去掉，不被設計所打擾分散注意力，使用體驗更加純粹自然。

1. 常用動效軟件

接下來我們就來看看繼扁平化之後，市場上都有哪些動效軟件可以使用。

1）AE：實現算是老牌的全能選手，幾乎可以制作任何你想要的效果。

包括圖标、交互的動效，但是操作相對複雜，第一次接觸的同學還是建議先看看教程。

2）Principle：操作簡單，效率高，可以和Sketch和Figma軟件同步使用。

适合制作快速展示用的demo或一些簡單交互動效設計。

3）Origami：這個軟件是Faceboook的開源工具，他的作用和Principle軟件很像。

但是它的操作方式很特别，所有的交互指令是需要拖動連接的。

而且Origami能現實的效果開發就可以實現，所以開發對設計師說“實現不了”這樣的借口了，在Origami面前是不成立的。

4）Figma：Figma是基于Jacascript開發的工具，Framer除了可以做設計稿之外。

他還是一個可交互的動效軟件，上手也比較簡單，是我的主力工具。

2. 動效的交付方式

在産品中，UI目前動效交付的方式主要有兩種，一種是文件交付，實現成本低，難度也比較低。

另外一種是參數交付方式，實現成本比較高，難度比較大。

1）文件交付方式：實現方式可以是Gif或者是Mp4，開發使用這種格式去實現其動态效果。

或者，給開發工程師提供一份動态格式的文件，為開發工程師展示動态效果，開發工程師在根據看到的效果找到相似的開源文件，在開源文件上進行微調整。

2）參數交付方式：開發工程師根據設計師動态運動的文字表述，利用代碼進行動效果還原。

3. Lottie是最實用的

Lottie說白了就是一個動畫庫，能分析 AE 導出的動畫 JSON 文件，開發通過動畫庫的内容來解釋JSON 文件。

然後再在産品上實現相同的動畫效果，是動效最為穩定的一種實現方式。

Lottie的優點在于穩定、文件體積較小，可以兼容 Android、iOS、Web平台。

并且實現出來的效果畫質相對品質較高是目前最受歡迎的一種動效實現方式。

當然了有優點也會有缺點，因為Lottie 需要先通過 bodymovin （AE插件）将 AE 動畫工程文件轉換為 JSON 格式的描述文件。

所以要求設計師要懂AE,前面講了AE是有學習成本的所以這是Lottie的一個門檻。

不過大家不用擔心，下面是我推薦的4個線上工具網站，分别是moko、Lottiefiles-Lottie player、Pixelture、FLOW，希望可以對學習Lottie的同學有所幫助。

1）moko：是一款在線實現Lottie的動畫效果，你可以通過簡單的操作就制作一個動圖，網站裡面也有簡單的教程，上手很容易。

2）Lottiefiles-Lottie player：是Lottie的實際預覽工具，你可以快速查看你的Lottie實現的動畫效果。

3）Pixelture：裡面有一百五十多種麻省理工學院許可的插圖和Lottie動畫，最難得的一點是，可以直接在商業項目中使用。

4）FLOW：這是一款可以直接從Sketch導入文件，并生成開發可以使用的lottie的js文件的工具。

三、盤點那些好用的動效方式

前面講了關于動效的一些常識，動效裡面還有一個不可忽視的知識點，那就是交互手勢。

交互手勢是使用移動設備最基本的手段，很多産品都是通過創新的交互響應來更友好地解決用戶的痛點。

如果你仔細對比，将不難發現，很多巨頭互聯網公司都是很注重交互手勢的。

比如谷歌就總結了下面在移動端常用的交互手勢，那麼接下來，我就挑3種交互手勢，來盤點一下咱們身邊産品好的交互動效設計點。

1. 長按發現更多驚喜

長按發現更多驚喜，比如在淘寶首頁場景，如果進行下拉手勢，淘寶根據拖拽距離産生兩種交互結果：正常短距離下拉提示“松開刷新”，而持續下拉則會進入淘寶二樓承接頁。

這樣的方式給用戶一種驚喜感，也節省了很多Feed的展示空間。

前段時間，我還發現了網易雲音樂的一個小體驗點。

如果你從首頁進入排行榜，再從排行榜進入下一個層級的場景。

此時想回到首頁的（第一層級）場景，隻需要長按2秒的返回鍵，就可以回到首頁的，這樣的操作，讓我覺得産品很有效率。

2. 單指最便捷的操作

單指操作雖然是最常見的交互方式，但是也有産品玩出了花樣，提升了用戶體驗。

比如在QQ聊天中的消息列表内的小紅點快捷清空操作就非常有意思。

用戶可以直觀地将某條消息的未讀紅點直接拖拽删除，對于強迫症患者來說很友好，而且動效也很有趣。

在視頻播放器的産品上大家知道通過左右滑動、上下滑動以及區域長按等操作實現亮度、音量、快速進退和速率播放等功能。

但是優酷在此功能上進行了更貼心的設計，在全屏播放狀态通過左右滑動進行快進的同時，屏幕會出現一個小窗口來實時觀察快進到那裡的畫面，讓我覺得體驗很便捷。

3. 雙指很有趣的手勢

高德地圖在交互手勢上有很多可取的地方，比如，在地圖縮放這個功能上就有很多手勢對應不同場景的用戶需求。

1）單手場景：兩指搓動屏幕是縮放功能就不用介紹，很多帶地圖功能的産品都有。

2）雙手場景：但是單手場景下，雙擊屏幕，地圖可按一定比例放大地圖。

而雙按滑動又可以無縫縮放地圖，徹底解決單手對于縮放地圖的不友好體驗。

bilibili上有個有趣的功能，在全屏觀看視頻的狀态下，可以通過雙指操作讓用戶随心所欲地控制畫幅大小和角度，雖然我覺得沒什麼實質功能，但是也蠻有趣的。

講了這麼多，我們聚焦一下，什麼動效對用戶來說是好的？

國外一名設計師曾這樣定義好的動效“好的動效應該是隐形的，應該是以提高可用性為前提，并且以令人覺得自然含蓄的方式提供有效用戶反饋的一種機制”。

六、結尾

動效在UI設計中是一個很加分的技能，相對來說也算是有點門檻的知識點，大家還需要在實際工作中積攢自己的經驗。

#專欄作家#

斜杠7濕兄，公衆号：斜杠7濕兄，人人都是産品經理專欄作家。星光不問趕路人，時光不負有心人，勵志做一個知識的分享者。

本文原創發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部