編輯導(dǎo)語：產(chǎn)品在設(shè)計(jì)過程中需要站在用戶的角度看待問題，一定程度上保障用戶的使用體驗(yàn)，進(jìn)而才能推動(dòng)后續(xù)用戶的留存、甚至轉(zhuǎn)化。那么，若想在動(dòng)效層上提高用戶體驗(yàn)，應(yīng)該怎么做呢？本文作者就對(duì)該問題做了闡述，一起來看一下。

騰訊ISUX在《2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告 · 動(dòng)態(tài)篇》中指出：“動(dòng)態(tài)能激發(fā)用戶的情緒，為靜態(tài)的視覺設(shè)計(jì)注入活力與生命力，在不久的將來勢(shì)必席卷所有人的目光，是最好提升用戶體驗(yàn)方法之一”。

一、動(dòng)效的簡(jiǎn)單常識(shí)

1. 為什么說動(dòng)效很重要

有研究顯示，當(dāng)人們遇到不感興趣的事情時(shí)，他們的注意力只會(huì)集中在10分鐘內(nèi)，在短暫的休息之后，他們的注意力才會(huì)，再次回到7到10分鐘內(nèi)。

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

2. 動(dòng)效的表現(xiàn)形式

動(dòng)效，現(xiàn)在已經(jīng)成為了 APP和網(wǎng)頁的常見的表現(xiàn)形式了。

設(shè)計(jì)師經(jīng)過精心設(shè)計(jì)，可以讓用戶在游戲中的操作更加流暢，操作也更加流暢。

動(dòng)效就像是產(chǎn)品的潤(rùn)滑劑，通過動(dòng)效可以更好地連接用戶，提升產(chǎn)品體驗(yàn)。

動(dòng)效一般都是指向性動(dòng)效，能夠描述元素的運(yùn)動(dòng)軌跡、運(yùn)動(dòng)狀態(tài)和元素之間的邏輯關(guān)系。

常見的表現(xiàn)形式有滑動(dòng)、放大、最小化、翻頁、平移、滾動(dòng)、切換對(duì)象、展開堆疊、添加到列表等等。

下面這個(gè)就是我找到的關(guān)于滑動(dòng)的案例，同樣是Banner區(qū)不同的產(chǎn)品對(duì)滑動(dòng)動(dòng)效的設(shè)計(jì)卻不相同。

二、動(dòng)效果的制作和交付

動(dòng)效大范圍興起始于扁平化設(shè)計(jì)之后，扁平化設(shè)計(jì)的好處在于用戶的注意力可以集中在界面的核心信息上。

將對(duì)用戶無效的設(shè)計(jì)元素去掉，不被設(shè)計(jì)所打擾分散注意力，使用體驗(yàn)更加純粹自然。

1. 常用動(dòng)效軟件

接下來我們就來看看繼扁平化之后，市場(chǎng)上都有哪些動(dòng)效軟件可以使用。

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

包括圖標(biāo)、交互的動(dòng)效，但是操作相對(duì)復(fù)雜，第一次接觸的同學(xué)還是建議先看看教程。

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

適合制作快速展示用的demo或一些簡(jiǎn)單交互動(dòng)效設(shè)計(jì)。

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

但是它的操作方式很特別，所有的交互指令是需要拖動(dòng)連接的。

而且Origami能現(xiàn)實(shí)的效果開發(fā)就可以實(shí)現(xiàn)，所以開發(fā)對(duì)設(shè)計(jì)師說“實(shí)現(xiàn)不了”這樣的借口了，在Origami面前是不成立的。

4）Figma：Figma是基于Jacascript開發(fā)的工具，F(xiàn)ramer除了可以做設(shè)計(jì)稿之外。

他還是一個(gè)可交互的動(dòng)效軟件，上手也比較簡(jiǎn)單，是我的主力工具。

2. 動(dòng)效的交付方式

在產(chǎn)品中，UI目前動(dòng)效交付的方式主要有兩種，一種是文件交付，實(shí)現(xiàn)成本低，難度也比較低。

另外一種是參數(shù)交付方式，實(shí)現(xiàn)成本比較高，難度比較大。

1）文件交付方式：實(shí)現(xiàn)方式可以是Gif或者是Mp4，開發(fā)使用這種格式去實(shí)現(xiàn)其動(dòng)態(tài)效果。

或者，給開發(fā)工程師提供一份動(dòng)態(tài)格式的文件，為開發(fā)工程師展示動(dòng)態(tài)效果，開發(fā)工程師在根據(jù)看到的效果找到相似的開源文件，在開源文件上進(jìn)行微調(diào)整。

2）參數(shù)交付方式：開發(fā)工程師根據(jù)設(shè)計(jì)師動(dòng)態(tài)運(yùn)動(dòng)的文字表述，利用代碼進(jìn)行動(dòng)效果還原。

3. Lottie是最實(shí)用的

Lottie說白了就是一個(gè)動(dòng)畫庫(kù)，能分析 AE 導(dǎo)出的動(dòng)畫 JSON 文件，開發(fā)通過動(dòng)畫庫(kù)的內(nèi)容來解釋JSON 文件。

然后再在產(chǎn)品上實(shí)現(xiàn)相同的動(dòng)畫效果，是動(dòng)效最為穩(wěn)定的一種實(shí)現(xiàn)方式。

Lottie的優(yōu)點(diǎn)在于穩(wěn)定、文件體積較小，可以兼容 Android、iOS、Web平臺(tái)。

并且實(shí)現(xiàn)出來的效果畫質(zhì)相對(duì)品質(zhì)較高是目前最受歡迎的一種動(dòng)效實(shí)現(xiàn)方式。

當(dāng)然了有優(yōu)點(diǎn)也會(huì)有缺點(diǎn)，因?yàn)長(zhǎng)ottie 需要先通過 bodymovin （AE插件）將 AE 動(dòng)畫工程文件轉(zhuǎn)換為 JSON 格式的描述文件。

所以要求設(shè)計(jì)師要懂AE,前面講了AE是有學(xué)習(xí)成本的所以這是Lottie的一個(gè)門檻。

不過大家不用擔(dān)心，下面是我推薦的4個(gè)線上工具網(wǎng)站，分別是moko、Lottiefiles-Lottie player、Pixelture、FLOW，希望可以對(duì)學(xué)習(xí)Lottie的同學(xué)有所幫助。

1）moko：是一款在線實(shí)現(xiàn)Lottie的動(dòng)畫效果，你可以通過簡(jiǎn)單的操作就制作一個(gè)動(dòng)圖，網(wǎng)站里面也有簡(jiǎn)單的教程，上手很容易。

2）Lottiefiles-Lottie player：是Lottie的實(shí)際預(yù)覽工具，你可以快速查看你的Lottie實(shí)現(xiàn)的動(dòng)畫效果。

3）Pixelture：里面有一百五十多種麻省理工學(xué)院許可的插圖和Lottie動(dòng)畫，最難得的一點(diǎn)是，可以直接在商業(yè)項(xiàng)目中使用。

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

三、盤點(diǎn)那些好用的動(dòng)效方式

前面講了關(guān)于動(dòng)效的一些常識(shí)，動(dòng)效里面還有一個(gè)不可忽視的知識(shí)點(diǎn)，那就是交互手勢(shì)。

交互手勢(shì)是使用移動(dòng)設(shè)備最基本的手段，很多產(chǎn)品都是通過創(chuàng)新的交互響應(yīng)來更友好地解決用戶的痛點(diǎn)。

如果你仔細(xì)對(duì)比，將不難發(fā)現(xiàn)，很多巨頭互聯(lián)網(wǎng)公司都是很注重交互手勢(shì)的。

比如谷歌就總結(jié)了下面在移動(dòng)端常用的交互手勢(shì)，那么接下來，我就挑3種交互手勢(shì)，來盤點(diǎn)一下咱們身邊產(chǎn)品好的交互動(dòng)效設(shè)計(jì)點(diǎn)。

1. 長(zhǎng)按發(fā)現(xiàn)更多驚喜

長(zhǎng)按發(fā)現(xiàn)更多驚喜，比如在淘寶首頁場(chǎng)景，如果進(jìn)行下拉手勢(shì)，淘寶根據(jù)拖拽距離產(chǎn)生兩種交互結(jié)果：正常短距離下拉提示“松開刷新”，而持續(xù)下拉則會(huì)進(jìn)入淘寶二樓承接頁。

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

前段時(shí)間，我還發(fā)現(xiàn)了網(wǎng)易云音樂的一個(gè)小體驗(yàn)點(diǎn)。

如果你從首頁進(jìn)入排行榜，再?gòu)呐判邪襁M(jìn)入下一個(gè)層級(jí)的場(chǎng)景。

此時(shí)想回到首頁的（第一層級(jí)）場(chǎng)景，只需要長(zhǎng)按2秒的返回鍵，就可以回到首頁的，這樣的操作，讓我覺得產(chǎn)品很有效率。

2. 單指最便捷的操作

單指操作雖然是最常見的交互方式，但是也有產(chǎn)品玩出了花樣，提升了用戶體驗(yàn)。

比如在QQ聊天中的消息列表內(nèi)的小紅點(diǎn)快捷清空操作就非常有意思。

用戶可以直觀地將某條消息的未讀紅點(diǎn)直接拖拽刪除，對(duì)于強(qiáng)迫癥患者來說很友好，而且動(dòng)效也很有趣。

在視頻播放器的產(chǎn)品上大家知道通過左右滑動(dòng)、上下滑動(dòng)以及區(qū)域長(zhǎng)按等操作實(shí)現(xiàn)亮度、音量、快速進(jìn)退和速率播放等功能。

但是優(yōu)酷在此功能上進(jìn)行了更貼心的設(shè)計(jì)，在全屏播放狀態(tài)通過左右滑動(dòng)進(jìn)行快進(jìn)的同時(shí)，屏幕會(huì)出現(xiàn)一個(gè)小窗口來實(shí)時(shí)觀察快進(jìn)到那里的畫面，讓我覺得體驗(yàn)很便捷。

3. 雙指很有趣的手勢(shì)

高德地圖在交互手勢(shì)上有很多可取的地方，比如，在地圖縮放這個(gè)功能上就有很多手勢(shì)對(duì)應(yīng)不同場(chǎng)景的用戶需求。

1）單手場(chǎng)景：兩指搓動(dòng)屏幕是縮放功能就不用介紹，很多帶地圖功能的產(chǎn)品都有。

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

而雙按滑動(dòng)又可以無縫縮放地圖，徹底解決單手對(duì)于縮放地圖的不友好體驗(yàn)。

bilibili上有個(gè)有趣的功能，在全屏觀看視頻的狀態(tài)下，可以通過雙指操作讓用戶隨心所欲地控制畫幅大小和角度，雖然我覺得沒什么實(shí)質(zhì)功能，但是也蠻有趣的。

講了這么多，我們聚焦一下，什么動(dòng)效對(duì)用戶來說是好的？

國(guó)外一名設(shè)計(jì)師曾這樣定義好的動(dòng)效“好的動(dòng)效應(yīng)該是隱形的，應(yīng)該是以提高可用性為前提，并且以令人覺得自然含蓄的方式提供有效用戶反饋的一種機(jī)制”。

六、結(jié)尾

動(dòng)效在UI設(shè)計(jì)中是一個(gè)很加分的技能，相對(duì)來說也算是有點(diǎn)門檻的知識(shí)點(diǎn)，大家還需要在實(shí)際工作中積攢自己的經(jīng)驗(yàn)。

#專欄作家#

斜杠7濕兄，公眾號(hào)：斜杠7濕兄，人人都是產(chǎn)品經(jīng)理專欄作家。星光不問趕路人，時(shí)光不負(fù)有心人，勵(lì)志做一個(gè)知識(shí)的分享者。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。