作者：杏仁皮兒

來源：黑馬哥

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

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

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

1.1 提供高效反饋

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

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

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

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

1.1.1、更高效傳達信息

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

案例：

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

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

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

案例：

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

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

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

1.2 溫柔的提示：

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

1.2.1 新消息通知：

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

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

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

案例1：提示但不打擾當前操作

用戶在當前流程中時，有其他提示消息。一般是對用戶來說是重要不緊急的消息，用一個較弱的提示去進行告知。

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

當用戶當前的操作有其他選擇，或者更優(yōu)的選擇時，對用戶進行推薦提示。

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

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

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

案例：

有時圖+文的詳細功能的講解，往往不如一個簡單的交互動畫效果更具吸引力。

1.4 緩解負面情緒：

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

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

1.4.1、告知當前狀態(tài)，縮短對等待時間的感知

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

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

案例1：等待/加載

案例2：進度條

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

比如上傳或下載，以及體積較大的項目加載。及時告知用戶當前的進程，避免大霧中的半英里故事發(fā)生。

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

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

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

案例：

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

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

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

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

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

案例：

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

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

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

案例：

1.5.3、空間視覺差

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

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

案例：

素材來源于 Daniel Tan

1.6 信息錯峰，突出重點

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

1.61 突出界面中的重點信息

案例：

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

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

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

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

案例：

1.8 提升信息傳遞比

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

1.81 傳遞更多信息

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

案例：

1.9 增強用戶操縱感、帶入感

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

案例：

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

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

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

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

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

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

2.11 對用戶進行指引

案例：

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

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

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

案例：

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

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

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

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

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

左：

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

中：

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

右：

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

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

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

2.3.1、增加情感共鳴

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

案例：

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

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

案例：

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

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

2.4 視覺動線設(shè)計：

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

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

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

案例：

當手指輕觸輸入框時，輸入框底部會 從下往上 推出輸入鍵盤，以及閃縮的光標。將用戶的視線從底部的輸入框帶到閃爍的光標處，讓用戶能很自然的在「新布局頁面」進行輸入文字這個操作。

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

2.4.2、動態(tài)區(qū)分層級

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

案例：

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

2.5 品牌類動效：

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

2.5.1 常見的大品牌動效

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

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

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

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

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

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

案例：

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

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

3.2.1、增加功能入口曝光度

如「信息錯峰」中說到的，動態(tài)化元素可以拉開層級，突出某個核心功能，提高點擊率。

案例：

3.2.2、引導(dǎo)用戶進行體驗

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

案例：

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

3.3.1、增加商品曝光量

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

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

案例：

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

3.3.2、挽留用戶，避免流失

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

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

案例：

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

右側(cè)QQ音樂的加載進度也是一樣的原理，及時反饋當前的狀態(tài)，安撫用戶等待的焦慮。撥開迷霧，避免用戶因為迷失，在距離終點半英里放棄。

總結(jié)：

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