作者：杏仁皮兒

來源：黑馬哥

本文將從用戶、產(chǎn)品、業(yè)務(wù) 3 個(gè)角度來剖析動(dòng)效的價(jià)值，并例舉使用場(chǎng)景，以下是目錄：

01、優(yōu)化用戶體驗(yàn)

動(dòng)效作為提高用戶體驗(yàn)中不可或缺的一個(gè)分支，通過加強(qiáng)用戶操作流暢度、提供高效的反饋、提升用戶操控感等手段，來增強(qiáng)用戶的滿意度。促使用戶愿意更深層次的探索產(chǎn)品，跑通產(chǎn)品各個(gè)功能分支，從而完成業(yè)務(wù)轉(zhuǎn)化。完成新用戶到老用戶的轉(zhuǎn)變、老用戶的留存，提升產(chǎn)品的品質(zhì)和競(jìng)爭(zhēng)力。

1.1 提供高效反饋

反饋包括操作前有預(yù)期，操作中有響應(yīng)，操作后有結(jié)果。

比如：系統(tǒng)的加載動(dòng)畫，輸入光標(biāo)的閃爍，按鈕從hover到點(diǎn)擊的狀態(tài)變化······這些都是反饋。

用戶的每個(gè)操作，流程的每個(gè)節(jié)點(diǎn)都要給到交待，是告訴用戶當(dāng)前系統(tǒng)的運(yùn)行狀態(tài)，降低用戶迷失感，給予用戶一定的心里預(yù)期。

而加入動(dòng)效的反饋，又能給產(chǎn)品增添幾分生氣。

1.1.1、更高效傳達(dá)信息

動(dòng)態(tài)化的反饋在某些場(chǎng)景下，能提供更高的效率。

案例：

相較于文字的反饋提醒方式，用動(dòng)態(tài)化的方式提示「已經(jīng)到底啦」「密碼輸入錯(cuò)誤啦」會(huì)更高效的讓用戶感知到系統(tǒng)想要傳達(dá)的信息；相對(duì)于常規(guī)用toast的提示方式也更擬人化一些，為冰冷的操作系統(tǒng)增加溫度。

1.1.2、為產(chǎn)品增加觸覺反饋

智能手機(jī)退化了實(shí)體按鈕。進(jìn)步的同時(shí)，也失去了一些實(shí)體按鈕帶來的真實(shí)觸覺反饋。這時(shí)候動(dòng)效就成為了重要的反饋途徑，我們可以通過動(dòng)效的方式去設(shè)計(jì)觸感。

案例：

當(dāng)鼠標(biāo)懸浮于按鈕時(shí)，按鈕放大，感覺被聚焦鎖定。當(dāng)按鈕被點(diǎn)擊時(shí)先縮小后恢復(fù)正常大小，模擬實(shí)體按鈕被按下去的觸感。

當(dāng)然，有些時(shí)候需要嚴(yán)謹(jǐn)設(shè)計(jì)的場(chǎng)合我們不能用大幅度的縮放效果來模擬觸感，比如B端界面中。這時(shí)候可以考慮用顏色來做空間上的區(qū)分，表達(dá)觸感。如下：

所以，除了能夠模擬觸感，當(dāng)動(dòng)效結(jié)合不同的設(shè)計(jì)方式也能體現(xiàn)當(dāng)前產(chǎn)品的質(zhì)感與性格。

1.2 溫柔的提示：

使用產(chǎn)品的過程中提示無處不在，幫助用戶做出更優(yōu)選擇。提示方式也多種多樣，如何在場(chǎng)景中用合適的提示方式也是設(shè)計(jì)師需要去思考的。合適的方式在提示用戶的同時(shí)最大程度降低對(duì)用戶的打擾，贏取用戶的好感。

1.2.1 新消息通知：

比如有新消息時(shí)，我們一般會(huì)選擇紅點(diǎn)做提醒，但怎么在信息量較多的界面中讓用戶注意到這個(gè)小元素的變化呢？

比起字體、顏色等靜態(tài)的視覺元素，icon動(dòng)態(tài)化可以讓通知圖標(biāo)在一排平級(jí)的靜態(tài)圖標(biāo)中脫穎而出，被用戶首先關(guān)注到。

當(dāng)帶有文本的提示框出現(xiàn)在用戶的視線中，我們一般也會(huì)加上動(dòng)效做為出現(xiàn)的過度修飾。比如以下兩個(gè)案例：

案例1：提示但不打擾當(dāng)前操作

用戶在當(dāng)前流程中時(shí)，有其他提示消息。一般是對(duì)用戶來說是重要不緊急的消息，用一個(gè)較弱的提示去進(jìn)行告知。

案例2：給當(dāng)前操作提供備用/更優(yōu)選擇

當(dāng)用戶當(dāng)前的操作有其他選擇，或者更優(yōu)的選擇時(shí)，對(duì)用戶進(jìn)行推薦提示。

1.3 降低學(xué)習(xí)成本：

加入動(dòng)態(tài)演示進(jìn)行敘述，使復(fù)雜的信息簡(jiǎn)單化進(jìn)行傳遞，讓用戶更好的理解產(chǎn)品想傳遞的內(nèi)容。這類型的動(dòng)畫一般出現(xiàn)在APP的新手引導(dǎo)、交互操作升級(jí)等提示場(chǎng)景。

1.3.1 信息動(dòng)態(tài)化演示

案例：

有時(shí)圖+文的詳細(xì)功能的講解，往往不如一個(gè)簡(jiǎn)單的交互動(dòng)畫效果更具吸引力。

1.4 緩解負(fù)面情緒：

用戶在使用產(chǎn)品的過程中，總有一些不可避免的問題導(dǎo)致會(huì)出現(xiàn)等待，長時(shí)間的等待，會(huì)讓用戶感到焦慮和煩躁。

動(dòng)態(tài)的設(shè)計(jì)能縮短用戶對(duì)時(shí)間的感知，趣味性的加載動(dòng)效能很大程度減緩用戶焦急的心理。如果把等待變得可視化/變得有趣，并且還能夠提升用戶對(duì)產(chǎn)品的好感。

1.4.1、告知當(dāng)前狀態(tài)，縮短對(duì)等待時(shí)間的感知

動(dòng)態(tài)的界面將當(dāng)前的運(yùn)行狀態(tài)及時(shí)的告知用戶：“界面在運(yùn)行加載中，不是卡住了哦”。用戶才能感覺到安全的正向反饋。

動(dòng)態(tài)化的元素還能在短時(shí)間內(nèi)讓我們保持專注，縮短對(duì)等待時(shí)間的感知，讓用戶愿意延長等待時(shí)間。趣味性的加載動(dòng)效能很大程度減緩用戶焦急的心理。

案例1：等待/加載

案例2：進(jìn)度條

因數(shù)據(jù)加載因素可能會(huì)超過 5s 的等待加上進(jìn)度顯示會(huì)更好。

比如上傳或下載，以及體積較大的項(xiàng)目加載。及時(shí)告知用戶當(dāng)前的進(jìn)程，避免“大霧中的半英里”故事發(fā)生。

1.4.2、體現(xiàn)產(chǎn)品差異性

通過加載動(dòng)畫，不僅能緩解用戶等待過程中的焦慮。

在產(chǎn)品同質(zhì)化嚴(yán)重的今天，還能通過這種方式露出象征自己產(chǎn)品特色的IP形象，來提升用戶體驗(yàn)，提現(xiàn)產(chǎn)品之間的差異化。

案例：

分別用象征自己產(chǎn)品性格的IP形象做加載，富有活力的同時(shí)體現(xiàn)產(chǎn)品差異性。

1.5 交代前后繼承關(guān)系，加強(qiáng)用戶方向感

界面中元素的出現(xiàn)與消失的方向可以暗示用戶空間關(guān)系，也就是從哪來的回哪去，加強(qiáng)用戶在使用產(chǎn)品過程中的方向感，對(duì)整體產(chǎn)品的結(jié)構(gòu)更清晰。

1.5.1、交代界面與元素之間的層級(jí)關(guān)系

使用變換焦距的方式，不僅能建立起界面前后元素之前的空間關(guān)系，交代當(dāng)前頁面與元素間的聯(lián)系，幫助用戶理解頁面間的變化和層級(jí)關(guān)系。還能增強(qiáng)界面與界面之間的延續(xù)感，元素與界面上下銜接的時(shí)候進(jìn)行視覺指引，提高瀏覽效率。

案例：

小紅書打開右下角的卡片時(shí)，會(huì)往中間進(jìn)行放大，將用戶的視線帶到界面頂部，引導(dǎo)用戶從上往下進(jìn)行閱讀。點(diǎn)擊返回時(shí)由中間縮放回到右下角，將用戶的視線帶回右下角，繼續(xù)從被打斷的位置向下瀏覽。

1.5.2、交代界面與界面之間的空間關(guān)系

簡(jiǎn)單說就是讓用戶清楚的知道自己當(dāng)前所在的位置。需要設(shè)計(jì)師表達(dá)清楚界面之間的上下左右層級(jí)關(guān)系。在動(dòng)效上的表現(xiàn)就是從哪來的回哪去，從而加強(qiáng)用戶在使用產(chǎn)品過程中的空間感、方向感。

案例：

1.5.3、空間視覺差

視差，是指界面中的不同元素以不同的速度與距離進(jìn)行運(yùn)動(dòng)。當(dāng)用戶滑動(dòng)界面時(shí)，視差能夠在二維空間中創(chuàng)造出空間層次感，塑造出前后空間關(guān)系。

這種視差的效果讓用戶在操作期間，能夠明確區(qū)分出各個(gè)元素之間的遠(yuǎn)近空間關(guān)系。移動(dòng)速度更快、移動(dòng)距離更長的元素會(huì)讓用戶感覺更近，而移動(dòng)速度更慢、移動(dòng)距離更短的元素用戶則感覺更遠(yuǎn)。

案例：

素材來源于 Daniel Tan

1.6 信息錯(cuò)峰，突出重點(diǎn)

在一些信息密度較大的頁面中，比如電商頁面。每個(gè)頁面承載功能入口較多，某段時(shí)期為了提高某個(gè)業(yè)務(wù)入口的指標(biāo) 或者 上線新功能的時(shí)候希望提高用戶的點(diǎn)擊率，我們需要對(duì)信息做一個(gè)層級(jí)突出的時(shí)候，動(dòng)效就成為了較好的解決方案。對(duì)需要突出的功能入口進(jìn)行動(dòng)態(tài)化設(shè)計(jì)，吸引用戶的注意力，對(duì)信息進(jìn)行錯(cuò)峰展示，在界面中營造視覺焦點(diǎn)。

1.61 突出界面中的重點(diǎn)信息

案例：

左：主要突出「寄件服務(wù)」；右：主要突出「簽到領(lǐng)好禮」

1.7 擴(kuò)展界面空間，將信息從二維界面延伸到三維

設(shè)計(jì)師需要在有限的界面屏幕中合理的布局各個(gè)功能信息，來保持界面的簡(jiǎn)潔。顯然二維空間中的思考有限，于是便從二維延伸到了三維。從有限的平面廣度中延伸出了z軸向作為空間深度。

像一些不常用的功能，便把他隱藏在三維空間中，通過操作手勢(shì)將它們喚出，降低誤觸概率。

案例：

1.8 提升信息傳遞比

當(dāng)界面模塊中需要展示的信息較多時(shí)，需要用戶進(jìn)行關(guān)注，又不能將信息全部平鋪在界面中，對(duì)用戶視覺造成閱讀壓力。用輪播的方式讓信息動(dòng)起來也不失為一種優(yōu)秀的解決方案。比如電商首頁的banner圖，一些操作流程中的通知話術(shù)等。

1.81 傳遞更多信息

對(duì)信息進(jìn)行分類，收納后合理的展示，讓用戶在有限的界面空間中可以看到更多產(chǎn)品想傳達(dá)的信息。

案例：

1.9 增強(qiáng)用戶操縱感、帶入感

在設(shè)計(jì)交互的過程中，設(shè)計(jì)師可以通過迎合用戶的意識(shí)認(rèn)知，用一些模擬現(xiàn)實(shí)世界的動(dòng)效，用戶并不需要學(xué)習(xí)就能理解整個(gè)交互過程。也能增強(qiáng)用戶的操控感跟代入感。

案例：

餓了么把選購的物品添加到保溫箱這個(gè)動(dòng)作通過動(dòng)效可視化出來，讓用戶看到自己挑選的商品被放進(jìn)保溫箱，能夠增強(qiáng)用戶在「選購-外賣員配送-收到外賣」整個(gè)閉環(huán)中的操控感。

還能增加用戶的操作行為記憶性，手指重復(fù)點(diǎn)擊可能會(huì)讓用戶形成慣性，忘記自己點(diǎn)了哪些商品，通過讓大腦看到商品被添加的過程，進(jìn)行二次確認(rèn)能加深用戶的記憶。

網(wǎng)易讀書的翻頁效果是貼近生活中真實(shí)書本的翻頁效果，能讓用戶在閱讀過程中的代入感更強(qiáng)一些。

02 提升產(chǎn)品價(jià)值：

2.1 引導(dǎo)用戶操作：

引導(dǎo)類動(dòng)效就是通過動(dòng)效的方式聚焦用戶的視線，引導(dǎo)用戶進(jìn)入某一個(gè)流程的操作。目的是助力業(yè)務(wù)達(dá)成指標(biāo)，或者是促使用戶跑通新功能。產(chǎn)品中常見的就是新手引導(dǎo)、新功能提示等。

2.11 對(duì)用戶進(jìn)行指引

案例：

2.2 體現(xiàn)產(chǎn)品差異化：

在產(chǎn)品高度同質(zhì)化的今天，我們也能通過動(dòng)態(tài)的表達(dá)方式拉開差異性，比如在一些加載的場(chǎng)景中，露出象征產(chǎn)品的IP、Logo等。

2.21、用象征產(chǎn)品的IP、Logo進(jìn)行動(dòng)態(tài)設(shè)計(jì)案例：

案例：

同樣都是外賣的產(chǎn)品，功能上、界面布局結(jié)構(gòu)上相似的情況下，視覺上可以拉開產(chǎn)品的差異化。比如美團(tuán)首頁的設(shè)計(jì)，主題色的露出，下拉刷新袋鼠IP動(dòng)畫，打開當(dāng)前界面就能知道“哦～我當(dāng)前打開的是美團(tuán)外賣啊”

2.22、用不同的動(dòng)效質(zhì)感來體現(xiàn)產(chǎn)品的性格、調(diào)性

不同的動(dòng)效節(jié)奏能體現(xiàn)不同的質(zhì)感，比如下面的3個(gè)小球，分別體現(xiàn)他們不同的質(zhì)感。

雖然外觀都一樣，但是第一個(gè)輕盈的讓人感覺可能是一個(gè)皮球；第二個(gè)柔軟富有彈性的感覺像一個(gè)裝滿水的氣球；第三個(gè)則沉重的像一個(gè)鉛球。

同樣應(yīng)用在我門商業(yè)設(shè)計(jì)中，我們可以通過不同的動(dòng)效質(zhì)感來區(qū)分產(chǎn)品的性格，以下為3個(gè)不同質(zhì)感的彈窗：

左：

加入彈性動(dòng)畫，傳達(dá)出可愛、活潑、靈動(dòng)的感覺，適合應(yīng)用在一些少兒教育、娛樂、游戲產(chǎn)品的界面中。

中：

中規(guī)中矩的國度出現(xiàn)，傳達(dá)出嚴(yán)肅、商務(wù)、專業(yè)的感覺，適合一些B端、金融、G端產(chǎn)品的界面中。

右：

像一封信件打開的方式，加上高光元素，傳達(dá)出時(shí)尚、高端的感覺，適合一些高端電商、資訊、VIP展示等界面中。

同等的例子還有很多，關(guān)于怎么用節(jié)奏把控不同的質(zhì)感又是另一個(gè)話題了，感興趣可以留言～有空我另外出一篇文章一起討論。

2.3 為產(chǎn)品注入活力：

2.3.1、增加情感共鳴

IP形象通常具有情感屬性，能夠引發(fā)消費(fèi)者的共鳴，建立情感聯(lián)系增加粘性。在業(yè)務(wù)中融入動(dòng)態(tài)化的IP元素能更優(yōu)的發(fā)揮IP形象的作用。

案例：

2.3.2、提升產(chǎn)品趣味性，給用戶一點(diǎn)小驚喜

適當(dāng)?shù)脑诋a(chǎn)品交互過程中添加一點(diǎn)趣味性的小驚喜，能給用戶留下不一樣的印象。激發(fā)用戶探索產(chǎn)品的欲望，促進(jìn)用戶跑通產(chǎn)品更多功能。

案例：

滴滴出行在反饋按鈕上增加了彩蛋，豐富有趣的同時(shí)也能給用戶創(chuàng)造一些小驚喜，適當(dāng)?shù)捏@喜有時(shí)候能加強(qiáng)用戶對(duì)產(chǎn)品的探索欲。

微博的點(diǎn)贊行為上增加了表達(dá)情緒的玩法。除了直接點(diǎn)擊后顯示點(diǎn)贊動(dòng)效外，長按icon還可以觸發(fā)多個(gè)表態(tài)行為，增加產(chǎn)品趣味性和可玩性，滿足用戶個(gè)性化表達(dá)需求，提升用戶爽感。也能增加社區(qū)中的用戶 參與度 與 活躍度，相較于花一分鐘編輯評(píng)論發(fā)表看法，選擇一個(gè)表情包的時(shí)間成本是不是更低呢？

2.4 視覺動(dòng)線設(shè)計(jì)：

用戶的目光在接觸屏幕內(nèi)容時(shí)，會(huì)沿著一定的線路移動(dòng)。設(shè)計(jì)師合理安排頁面的布局，對(duì)用戶的視覺動(dòng)線進(jìn)行設(shè)計(jì)，可以讓用戶更加輕松地閱讀，提高用戶的瀏覽效率和體驗(yàn)。

2.4.1、動(dòng)態(tài)引導(dǎo)視線

當(dāng)頁面產(chǎn)生過度變化的時(shí)候，需要對(duì)用戶的視線進(jìn)行引導(dǎo)。以便用戶進(jìn)行高效的瀏覽與操作。

案例：

當(dāng)手指輕觸輸入框時(shí)，輸入框底部會(huì) 從下往上 推出輸入鍵盤，以及閃縮的光標(biāo)。將用戶的視線從底部的輸入框帶到閃爍的光標(biāo)處，讓用戶能很自然的在「新布局頁面」進(jìn)行“輸入文字”這個(gè)操作。

小紅書詳情頁與卡片之間的變化也是同樣的道理，通過放大將用戶的視線帶到頁面上方，用戶可以順著閱讀習(xí)慣從上到下進(jìn)行閱讀。點(diǎn)擊返回時(shí)，視線跟隨著縮放回到剛才的閱讀位置，這樣又可以繼續(xù)向下瀏覽了，提高了瀏覽的效率。

2.4.2、動(dòng)態(tài)區(qū)分層級(jí)

在相同元素中，人眼首先會(huì)被動(dòng)態(tài)的元素吸引。在一群人中，如果有一位向你招手，那一樣會(huì)被優(yōu)先注意到。在界面中也是同樣的道理，當(dāng)我們需要對(duì)界面元素做一個(gè)優(yōu)先級(jí)區(qū)分時(shí)，動(dòng)態(tài)的設(shè)計(jì)手法也不失為一種友好的方式。

案例：

打開網(wǎng)易考拉整個(gè)界面打開時(shí)，視線會(huì)先被上方大塊面性的「考拉會(huì)員」卡片吸引，然后順著從上到下的閱讀順序注意到「簽到領(lǐng)好禮」模塊，然后再是界面中的其他靜態(tài)元素。動(dòng)態(tài)的參與讓「簽到領(lǐng)好禮」模塊往上突出了一個(gè)層級(jí)。

2.5 品牌類動(dòng)效：

品牌類動(dòng)效一般出現(xiàn)在LOGO、品牌宣傳視頻、開機(jī)頁面、引導(dǎo)頁、加載頁當(dāng)中。通過動(dòng)態(tài)的手法，將產(chǎn)品核心與特點(diǎn)進(jìn)行展示，加深用戶的記憶，起到品牌宣傳的目的。

2.5.1 常見的大品牌動(dòng)效

2.5.2 品牌動(dòng)效在界面中的應(yīng)用

03 助力業(yè)務(wù)完成指標(biāo)：

從「業(yè)務(wù)」的角度來說，與文章上面描述的「產(chǎn)品」角度相關(guān)的作用是由些許重疊的，是相輔相成的。這個(gè)章節(jié)我們從業(yè)務(wù)的角度再來看這些手法。

3.1、輔助解決業(yè)務(wù)問題：

新穎的方式能激發(fā)用戶對(duì)產(chǎn)品的探索欲，讓用戶更愿意嘗試著參與到當(dāng)前功能中，也能提升新功能的使用率，加深用戶對(duì)產(chǎn)品的印象。

在解決業(yè)務(wù)問題的通知融入動(dòng)效元素，能讓用戶參與感更強(qiáng)。

案例：

餓了么在解決用戶「吃啥」這個(gè)問題的時(shí)候，在搜索外賣頁頂部搜索框下出現(xiàn)彈幕推薦，給用戶不同的選擇，讓搜索這個(gè)場(chǎng)景下從以往常規(guī)的填空題變成選擇題。加入動(dòng)態(tài)的IP形象進(jìn)行互動(dòng)，提升產(chǎn)品溫度，讓用戶產(chǎn)生與產(chǎn)品互動(dòng)、探索產(chǎn)品的欲望。

3.2、促進(jìn)用戶跑通產(chǎn)品功能

3.2.1、增加功能入口曝光度

如「信息錯(cuò)峰」中說到的，動(dòng)態(tài)化元素可以拉開層級(jí)，突出某個(gè)核心功能，提高點(diǎn)擊率。

案例：

3.2.2、引導(dǎo)用戶進(jìn)行體驗(yàn)

對(duì)于用戶來說，初次打開一個(gè)營銷頁、新功能界面是陌生的，這個(gè)時(shí)候如果有一個(gè)指引告訴用戶進(jìn)行哪些操作，相信用戶去體驗(yàn)的意愿度是會(huì)比較高的。這個(gè)時(shí)候，融入動(dòng)效的方式，可以讓這個(gè)切入點(diǎn)更加柔軟，讓用戶更好理解跟接受。

案例：

3.3、促進(jìn)用戶轉(zhuǎn)化

3.3.1、增加商品曝光量

動(dòng)態(tài)化的展示，在二維的X、Y軸向基礎(chǔ)上加入了時(shí)間維度，可以將有限的界面空間合理利用起來。

將更多的商品推到用戶面前，提高命中用戶喜好的概率。--「款款是精品，總有一款適合您?」

案例：

餓了么頂部banner的露出，中間店鋪卡片中熱門商品的橫向滾動(dòng)，都在露出更多的信息。將原先需要點(diǎn)進(jìn)二級(jí)頁面中的內(nèi)容前置到一級(jí)列表進(jìn)行展示，增加了商品的曝光度，提升用戶點(diǎn)擊進(jìn)入二級(jí)詳情頁的概率。

3.3.2、挽留用戶，避免流失

當(dāng)用戶的行為不能被馬上響應(yīng)時(shí)，就有可能造成用戶的流失。這個(gè)時(shí)候動(dòng)態(tài)化的方式可以減少用戶流失，減弱用戶的等待感。就像電梯里的視頻宣傳廣告能吸引注意力，縮短乘梯時(shí)間感；兒童在剪頭發(fā)時(shí)看動(dòng)畫片能安撫下來配合理發(fā)。

簡(jiǎn)單來說，就是當(dāng)前安排了輕松的內(nèi)容打發(fā)時(shí)間，可以降低對(duì)時(shí)間的感知，減緩等待感。

案例：

滴滴打車的發(fā)送訂單頁有7s的時(shí)長，可以在用車高峰的時(shí)候在時(shí)間上給了用戶「一張7秒的占位圖」，這個(gè)等待的時(shí)間不再是一個(gè)「空白頁」，而是一個(gè)及時(shí)反饋打車狀態(tài)「安撫頁」。

右側(cè)QQ音樂的加載進(jìn)度也是一樣的原理，及時(shí)反饋當(dāng)前的狀態(tài)，安撫用戶等待的焦慮。撥開迷霧，避免用戶因?yàn)槊允?，在距離終點(diǎn)半英里放棄。

總結(jié)：

動(dòng)效在用戶體驗(yàn)中扮演著重要的角色，可以為用戶創(chuàng)造更加愉悅和無縫的體驗(yàn)，幫助用戶建立對(duì)產(chǎn)品的認(rèn)知，提升產(chǎn)品的品質(zhì)和競(jìng)爭(zhēng)力。而關(guān)于它的使用場(chǎng)景也會(huì)越來越多，本文希望拋磚引玉讓更多人思考它的價(jià)值。