編輯導(dǎo)語：一個優(yōu)秀的動效設(shè)計，可以吸引到用戶的注意力，帶給用戶更高質(zhì)量的體驗，然而也不是所有的產(chǎn)品都要做動效。那什么時候才該做動效呢？做到什么程度才比較好？一起來看一下吧。

在產(chǎn)品設(shè)計中構(gòu)成界面的三大元素：「形狀、顏色和動效」，其中動效最能夠第一時間吸引用戶的注意力，傳統(tǒng)的用戶靜態(tài)界面設(shè)計，受限于時間的關(guān)系，很難闡述表達(dá)用戶想要的某個點，但動效設(shè)計不僅可以表達(dá)頁面的時間關(guān)系，還可以敘述因果關(guān)系。

目前動效設(shè)計已成各類產(chǎn)品的設(shè)計趨勢，一個優(yōu)秀的動效設(shè)計能賦能產(chǎn)品價值，能帶給用戶更高質(zhì)量的體驗；但是當(dāng)大家人云亦云都知道動效好，為了動效本身去做動效，那么帶來的結(jié)果往往適得其反。

產(chǎn)品設(shè)計中為什么要做動效？什么時候該做動效？到底動到怎樣的程度才夠好？在接觸了長達(dá)一年多的產(chǎn)品動效設(shè)計后，總結(jié)了這篇文章來告訴你如何利用產(chǎn)品思維，去使用動效解決設(shè)計遇到的問題。

全篇內(nèi)容脫離技術(shù)層面的討論，實現(xiàn)手段有不同的方法，達(dá)到最終的目標(biāo)即可。

一、動效設(shè)計的意義

為什么要做動效設(shè)計？當(dāng)然是能夠為產(chǎn)品帶來價值才會去投入資源去做。那么帶來的價值是什么？在大多數(shù)的認(rèn)知里，動效能吸引用戶的注意，那么自然能為產(chǎn)品帶來點擊或跳轉(zhuǎn)等價值，但這僅僅是動效賦能產(chǎn)品價值中的其中一種，動效的意義針對產(chǎn)品和用整體可以分為兩塊：

其中很多因素是互動或者呈因果關(guān)系的，比如引導(dǎo)用戶操作可以減少用戶對產(chǎn)品的認(rèn)知成本，提升產(chǎn)品易用性也變相提升了用戶和產(chǎn)品的互動性，為產(chǎn)品注入活力也會讓用戶減少部分不可避免的不適感等等，兩者是相輔相成的。

舉個簡單的例子，POP 彈窗的設(shè)計大家都不會陌生，POP 彈窗的出現(xiàn)往往目的是為了引導(dǎo)用戶點擊跳轉(zhuǎn)至新的模塊，最終目標(biāo)都是引導(dǎo)用戶去點擊彈窗上的行動點。

上圖示意的靜態(tài)彈窗往往是市面上大部分彈窗的出現(xiàn)方式，很明顯的對比下動態(tài)彈窗和行動點讓人的點擊欲望更強(qiáng)烈，固然結(jié)果自然是動態(tài)的點擊率比靜態(tài)的要好。

到這有人就會說了，你廢話半天都是我們知道的東西啊，會動的當(dāng)然比不會動的點擊感要強(qiáng)??！別著急，我這里只是簡單的說明了動效的價值和意義，具體怎么去做動效設(shè)計首先還需要了解動效的種類~

二、動效的種類

動效的種類大致可以分為四種：轉(zhuǎn)場類、展示類、引導(dǎo)類和反饋類。很多產(chǎn)品設(shè)計中我們最常見的往往是以這四類動效或衍伸的動效為主，下面給大家介紹不同種類動效的樣式和意義。

1. 轉(zhuǎn)場類

轉(zhuǎn)場類動效用于頁面層級的跳轉(zhuǎn)或場景切換，幫助用戶理解界面間的變化和層級關(guān)系，也讓界面更加真實生動，避免頁面場景的瞬間切換導(dǎo)致用戶產(chǎn)生變化盲視（視覺刺激的突兀變化會阻止用戶注意到新的信息）。

簡單來說就是在產(chǎn)品頁面切換中讓用戶有一個心理預(yù)期，看到哪些東西變了，新增了哪些東西要注意的，而且整體切換看上去非常的絲滑舒適。

經(jīng)常用到的手法以縮放、透明度、旋轉(zhuǎn)等平滑的效果為主，來搭建層級與層級間的關(guān)系和切換。

Driiible作者：tubik

2. 展示類

展示類動效更多的如字面意思——常規(guī)場景用作展示，其目的是能夠在第一時間吸引到用戶的視覺，突出產(chǎn)品核心功能和特點，引導(dǎo)用戶的視覺流向，去幫助用戶更好的理解產(chǎn)品。主要在產(chǎn)品的KV版頭、網(wǎng)頁以及品牌傳播等場景中出現(xiàn)。

Driiible作者：Robert Berki

3. 引導(dǎo)類

引導(dǎo)類動效底層邏輯為通過界面中某些元素的變化，拉開與不動的元素的視差，引導(dǎo)用戶進(jìn)行下一步操作，能夠自然而然地聚焦用戶視線，降低其他視覺元素的干擾，目的是幫助業(yè)務(wù)達(dá)成某個模塊的KPI，或者引導(dǎo)用戶相關(guān)的操作，產(chǎn)品中常見的就是新手引導(dǎo)、Toast提示等。

4. 反饋類

反饋類動效是在用戶進(jìn)行行為后及時給出相應(yīng)的反饋，更多偏向于用戶體驗側(cè)；底層邏輯是以視覺表現(xiàn)的形式傳達(dá)給用戶當(dāng)前時下的操作反饋，給予用戶一定的心理預(yù)期。

Driiible作者：tubik

三、動效設(shè)計思維的建設(shè)

前面介紹完動效的種類和意義，接下來整點干貨。我們在產(chǎn)品設(shè)計中接手動效之前，除去明確的業(yè)務(wù)目標(biāo)（譬如業(yè)務(wù)明確某個模塊進(jìn)行動效制作：“我就要這個按鈕動一動來提升CTR！”等此類情況），作為一名體驗設(shè)計師應(yīng)該建立一套完整的動效設(shè)計思維。

以整個產(chǎn)品設(shè)計的周期細(xì)分下來，建立具體的動效設(shè)計思維是以「分析」>「執(zhí)行」>「跟蹤」為主要流程。

前期通過分析業(yè)務(wù)邏輯和場景，通過了解動效設(shè)計背后的目的和商業(yè)策略；然后制定視覺稿和動效方案定稿，執(zhí)行并且交付給程序猿小哥哥開發(fā)走查；最后通過數(shù)據(jù)驗證沉淀并且制定一系列的規(guī)范。

1. 分析

設(shè)計師是用來解決問題的，通過動效去解決問題，要具體分析解決怎樣的問題。前期設(shè)計分析可以通過拆解成三個緯度去分析：業(yè)務(wù)屬性、業(yè)務(wù)目標(biāo)和場景劃分。

首先是業(yè)務(wù)屬性，一個產(chǎn)品的動效必然是貼合產(chǎn)品本身的屬性，在心智層面便于用戶的認(rèn)知。

舉個例子：金融類產(chǎn)品的給用戶的心智是安全可靠的，如果在動效的表現(xiàn)上使用抖動等效果，給用戶的認(rèn)知是不安全的，那么必然會造成認(rèn)知偏差；或者電商類產(chǎn)品，你是賣奢侈品的，業(yè)務(wù)屬性應(yīng)該是高端大氣上檔次，但是如果你的動效是Q彈可愛的，那一樣的不符合情理。

所以分析首要的點，是要提煉當(dāng)前業(yè)務(wù)歸屬的屬性，這一步是確定動效設(shè)計策略的方向。

接著是業(yè)務(wù)的目標(biāo)，前面提到過，除去本身業(yè)務(wù)有特別明確的動效需求可以直接執(zhí)行，但是往往設(shè)計師在負(fù)責(zé)某款產(chǎn)品的時候，業(yè)務(wù)很難提出相關(guān)明確的動效需求。除非之前有類似的案例并且驗證可行，否則業(yè)務(wù)方也是一臉懵逼：“為啥會出現(xiàn)這種問題?。俊?、“怎么解決??？”等等。

作為體驗設(shè)計師，在分析業(yè)務(wù)問題之后，明確目標(biāo)是什么，是否需要用到動效的手段去解決是在這一步判斷的。

舉個例子：在某個母嬰電商產(chǎn)品會場模塊上線后，轉(zhuǎn)化不是很好，唯一的入口就是首頁的彈窗，在具體的業(yè)務(wù)分析后，發(fā)現(xiàn)問題出現(xiàn)在點擊轉(zhuǎn)化上，得出的設(shè)計策略是強(qiáng)化行動點以便提升點擊率，于是提升入口的點擊率就是當(dāng)前業(yè)務(wù)的目標(biāo)。

提煉了業(yè)務(wù)屬性、有了明確的業(yè)務(wù)目標(biāo)后，最后是場景的劃分了，還是接上面的例子：知道了母嬰類產(chǎn)品是可愛Q彈有活力的屬性，業(yè)務(wù)目標(biāo)是提升唯一入口的點擊率，那么接下來得出具體的動效設(shè)計策略就要考慮到場景的劃分。

首先是出現(xiàn)的場景是在首頁，作為電商的首頁都是視覺沖擊很強(qiáng)烈的，即便在彈窗上加了一層黑色透明的蒙層，也難以掩蓋首頁的動效（如Banner的滾動、核心模塊入口的動效等）。

眾所周知設(shè)計是需要克制的，動效又是最能吸引用戶視覺焦點的，為了避免用戶在視覺上被干擾，所以在「彈窗出現(xiàn)」這樣的意義不是很大的動效上應(yīng)該被弱化，主力的動效應(yīng)該交給行動點的強(qiáng)化，所以彈窗出現(xiàn)只是彈一下，而行動點的強(qiáng)化是彈兩下——這就是對動效「度」的把控。

最后貼合場景將直角改為圓角，植入品牌色做整體視覺上的優(yōu)化得出最終的方案。

2. 執(zhí)行

在設(shè)計方案完成后，就是交付給程序猿小哥哥開發(fā)上線了～有些同學(xué)一直在同個公司的話，對接的開發(fā)比較穩(wěn)定，不容易出現(xiàn)變化，所以對接方式磨合固定了之后一般很難改變。但是有些在規(guī)模稍微大一點公司里的同學(xué)，尤其是以 UED 的形式存在的團(tuán)隊，對接的開發(fā)就可能不是很穩(wěn)定，所以大概要了解幾種常見的動效對接格式：

• GIF：目前最常見也是最主流的動效格式，很多網(wǎng)頁移動端的動效實現(xiàn)的格式，容易和開發(fā)溝通對接
• APNG：需要借助 isparta 軟件，目前來說本人體驗最好的格式，輸出效果最佳，占用資源也最小
• SVGA：目前市場上大多酷炫的直播禮物就是這個格式開發(fā)的

• Lottie：有一些公司在使用，因為最終輸出的是 .json 文件，開發(fā)更容易編入代碼內(nèi)部
• WEBP：少部分的團(tuán)隊在使用，優(yōu)點比較多，但是相較于其他內(nèi)存資源占用很高于是不能被接受
• MP4：部分場景仍然會需要用到視頻的情況

3. 跟蹤

前面更多的是關(guān)于動效的執(zhí)行和上線，那怎么才能驗證是因為這個動效才解決了問題呢？就需要持續(xù)的跟蹤和數(shù)據(jù)驗證。

在產(chǎn)品設(shè)計當(dāng)中數(shù)據(jù)驗證往往很常見，同樣在動效設(shè)計中數(shù)據(jù)驗證使用最多的也是分類測試法，控制條件不同，分批次進(jìn)行測試對比來驗證動效設(shè)計。

在上線后切A/B test，控制文案-樣式-時間等不變量，分別投放靜態(tài)和動態(tài)樣式，監(jiān)控兩者的數(shù)據(jù)以此來辨別優(yōu)劣，并加以沉淀為今后的方案。

當(dāng)然這個例子只是很簡單的案例，往往實際項目中有很多復(fù)雜的因素，有時候可能會分ABCD甚至EFG類別的測試來驗證每個動效的可行性，最后取均值最高的一項作全面投放。

四、以產(chǎn)品思維看動效設(shè)計

以上建立了自己完善的動效設(shè)計思維，但僅僅是基于執(zhí)行層面上的，只滿足于產(chǎn)出很好的動效方案，但是作為一名體驗設(shè)計師是遠(yuǎn)遠(yuǎn)不夠的，我們應(yīng)該帶著產(chǎn)品思維去看待動效設(shè)計。

什么？產(chǎn)品思維還能和動效設(shè)計沾邊兒？開玩笑吧！但實際上U1S1，產(chǎn)品思維涵蓋面很廣，涵蓋了全局的思考性以及方方面面，所以動效設(shè)計要真正意義上的對產(chǎn)品產(chǎn)生價值，還是需要依附產(chǎn)品思維去做設(shè)計。

1. 動效的一致性

產(chǎn)品設(shè)計當(dāng)中除了顏色、品牌等視覺層面的表達(dá)需要統(tǒng)一性外，動效也是需要有一致性的，只不過用戶很難直觀地從視覺上感知到，但是作為一款成熟的產(chǎn)品，強(qiáng)化用戶對品牌產(chǎn)品的印象，動效的一致性是不可缺少的。

縱觀整個產(chǎn)品側(cè)，可能部分模塊無法清晰感知，但是只有確定了動效的一致性，才能使產(chǎn)品整體看起來更加統(tǒng)一和完整。

比如TIM，在整個產(chǎn)品中統(tǒng)一了動效的形式和速率，以及貼合了產(chǎn)品品牌的表達(dá)，在整體的操作體驗上有了關(guān)聯(lián)和一致性，體現(xiàn)了動效設(shè)計對于產(chǎn)品來說真正的價值。

2. 規(guī)范&組件化

產(chǎn)品設(shè)計當(dāng)中為了解決迭代、開發(fā)或者合作效率等問題，常常會制定一系列相對應(yīng)的規(guī)范和建立組件庫，動效也有相對應(yīng)的規(guī)范和組件庫，而在關(guān)系上規(guī)范和動效組件是制約產(chǎn)品動效一致性的。制定動效規(guī)范和組件的緯度分為：速率和時間。

首先是速率，一般情況是使用軟件和開發(fā)語言里自帶默認(rèn)的速率，比如常見的緩動、緩入緩出等，但有一些產(chǎn)品為了拉開差異化會自行定義速率的參數(shù)來表達(dá)，然后整個產(chǎn)品都遵循這個參數(shù)來制定動效。

比如全局的參數(shù)定義，甚至能細(xì)化到 POP 動效的參數(shù)定義、點擊態(tài)動效的參數(shù)定義等。

其次就是時間，控制每一個模塊的時間，包含內(nèi)容的出現(xiàn)消失、什么時候該強(qiáng)化、什么時候循環(huán)或者靜止，針對不同的場景劃分進(jìn)行統(tǒng)一規(guī)范，甚至可以制定相對應(yīng)的模版，之后進(jìn)行動效產(chǎn)出的時候，既保持了產(chǎn)品的一致性，也能提高工作上的效率。

3. 全局思考

設(shè)計服務(wù)行業(yè)，那么針對不同的行業(yè)需要考慮的點不僅僅是當(dāng)下的場景，保持對產(chǎn)品全局的思考才能對動效設(shè)計有全新的認(rèn)知。

了解當(dāng)下動效設(shè)計的「前置鏈路」、「當(dāng)前行為」和「后置鏈路」，用戶在喚醒動效前的動機(jī)是什么，為什么會觸發(fā)動效的行為，觸發(fā)動效之后用戶想達(dá)到怎樣的目的等要做全局的考量。

正因為有了對產(chǎn)品的全局思考，才讓當(dāng)下產(chǎn)品越來越「人性化」，往往你只是做了第一步操作，就衍生出了后續(xù)的選項，讓用戶感到「省心省力」。動效只是這其中的一個環(huán)節(jié)，作用都是錦上添花的，所以更加說明全局思考的重要性。

需要考慮到周期、成本、實現(xiàn)、用戶行為、用戶心理、是否真真確切要用到動效設(shè)計等等因素，最后才能敲定動效的設(shè)計策略。

在2019的Google I/O大會上，Google Lens展示的AR點菜功能可以智能識別用戶掃描的菜單并將美食網(wǎng)站上的相關(guān)推薦直接呈現(xiàn)在屏幕上。

——《2020-2021設(shè)計趨勢ISUX報告·用戶體驗篇》

五、再說兩句

動效設(shè)計不是萬能的，除去特殊情況，往往很多場景下動效在產(chǎn)品設(shè)計中只起到錦上添花的輔助效果，對產(chǎn)品的好壞沒有決定性的作用。

就好比一個人連小兵都不會補(bǔ)，就和他談團(tuán)戰(zhàn)思路，談滾雪球運營等等，那顯然是天方夜譚。作為產(chǎn)品體驗設(shè)計師最重要的能力是洞察本質(zhì)和全局思考的能力，通過闡述如何用動效去解決問題，最終想要表達(dá)作為一名設(shè)計師，應(yīng)該時刻保持對事物的思考和觀察，培養(yǎng)自己的硬性思維，才能在自身成長的道路上不斷超越自己。

原創(chuàng)不易，謝謝閱讀～

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

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