編輯導語：一個優秀的動效設計，可以吸引到用戶的注意力，帶給用戶更高質量的體驗，然而也不是所有的産品都要做動效。那什麼時候才該做動效呢？做到什麼程度才比較好？一起來看一下吧。

在産品設計中構成界面的三大元素：「形狀、顔色和動效」，其中動效最能夠第一時間吸引用戶的注意力，傳統的用戶靜态界面設計，受限于時間的關系，很難闡述表達用戶想要的某個點，但動效設計不僅可以表達頁面的時間關系，還可以叙述因果關系。

目前動效設計已成各類産品的設計趨勢，一個優秀的動效設計能賦能産品價值，能帶給用戶更高質量的體驗；但是當大家人雲亦雲都知道動效好，為了動效本身去做動效，那麼帶來的結果往往适得其反。

産品設計中為什麼要做動效？什麼時候該做動效？到底動到怎樣的程度才夠好？在接觸了長達一年多的産品動效設計後，總結了這篇文章來告訴你如何利用産品思維，去使用動效解決設計遇到的問題。

全篇内容脫離技術層面的讨論，實現手段有不同的方法，達到最終的目标即可。

一、動效設計的意義

為什麼要做動效設計？當然是能夠為産品帶來價值才會去投入資源去做。那麼帶來的價值是什麼？在大多數的認知裡，動效能吸引用戶的注意，那麼自然能為産品帶來點擊或跳轉等價值，但這僅僅是動效賦能産品價值中的其中一種，動效的意義針對産品和用整體可以分為兩塊：

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

舉個簡單的例子，POP 彈窗的設計大家都不會陌生，POP 彈窗的出現往往目的是為了引導用戶點擊跳轉至新的模塊，最終目标都是引導用戶去點擊彈窗上的行動點。

上圖示意的靜态彈窗往往是市面上大部分彈窗的出現方式，很明顯的對比下動态彈窗和行動點讓人的點擊欲望更強烈，固然結果自然是動态的點擊率比靜态的要好。

到這有人就會說了，你廢話半天都是我們知道的東西啊，會動的當然比不會動的點擊感要強啊！别着急，我這裡隻是簡單的說明了動效的價值和意義，具體怎麼去做動效設計首先還需要了解動效的種類~

二、動效的種類

動效的種類大緻可以分為四種：轉場類、展示類、引導類和反饋類。很多産品設計中我們最常見的往往是以這四類動效或衍伸的動效為主，下面給大家介紹不同種類動效的樣式和意義。

1. 轉場類

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

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

經常用到的手法以縮放、透明度、旋轉等平滑的效果為主，來搭建層級與層級間的關系和切換。

Driiible作者：tubik

2. 展示類

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

Driiible作者：Robert Berki

3. 引導類

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

4. 反饋類

反饋類動效是在用戶進行行為後及時給出相應的反饋，更多偏向于用戶體驗側；底層邏輯是以視覺表現的形式傳達給用戶當前時下的操作反饋，給予用戶一定的心理預期。

Driiible作者：tubik

三、動效設計思維的建設

前面介紹完動效的種類和意義，接下來整點幹貨。我們在産品設計中接手動效之前，除去明确的業務目标（譬如業務明确某個模塊進行動效制作：“我就要這個按鈕動一動來提升CTR！”等此類情況），作為一名體驗設計師應該建立一套完整的動效設計思維。

以整個産品設計的周期細分下來，建立具體的動效設計思維是以「分析」>「執行」>「跟蹤」為主要流程。

前期通過分析業務邏輯和場景，通過了解動效設計背後的目的和商業策略；然後制定視覺稿和動效方案定稿，執行并且交付給程序猿小哥哥開發走查；最後通過數據驗證沉澱并且制定一系列的規範。

1. 分析

設計師是用來解決問題的，通過動效去解決問題，要具體分析解決怎樣的問題。前期設計分析可以通過拆解成三個緯度去分析：業務屬性、業務目标和場景劃分。

首先是業務屬性，一個産品的動效必然是貼合産品本身的屬性，在心智層面便于用戶的認知。

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

所以分析首要的點，是要提煉當前業務歸屬的屬性，這一步是确定動效設計策略的方向。

接着是業務的目标，前面提到過，除去本身業務有特别明确的動效需求可以直接執行，但是往往設計師在負責某款産品的時候，業務很難提出相關明确的動效需求。除非之前有類似的案例并且驗證可行，否則業務方也是一臉懵逼：“為啥會出現這種問題啊？”、“怎麼解決啊？”等等。

作為體驗設計師，在分析業務問題之後，明确目标是什麼，是否需要用到動效的手段去解決是在這一步判斷的。

舉個例子：在某個母嬰電商産品會場模塊上線後，轉化不是很好，唯一的入口就是首頁的彈窗，在具體的業務分析後，發現問題出現在點擊轉化上，得出的設計策略是強化行動點以便提升點擊率，于是提升入口的點擊率就是當前業務的目标。

提煉了業務屬性、有了明确的業務目标後，最後是場景的劃分了，還是接上面的例子：知道了母嬰類産品是可愛Q彈有活力的屬性，業務目标是提升唯一入口的點擊率，那麼接下來得出具體的動效設計策略就要考慮到場景的劃分。

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

衆所周知設計是需要克制的，動效又是最能吸引用戶視覺焦點的，為了避免用戶在視覺上被幹擾，所以在「彈窗出現」這樣的意義不是很大的動效上應該被弱化，主力的動效應該交給行動點的強化，所以彈窗出現隻是彈一下，而行動點的強化是彈兩下——這就是對動效「度」的把控。

最後貼合場景将直角改為圓角，植入品牌色做整體視覺上的優化得出最終的方案。

2. 執行

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

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

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

3. 跟蹤

前面更多的是關于動效的執行和上線，那怎麼才能驗證是因為這個動效才解決了問題呢？就需要持續的跟蹤和數據驗證。

在産品設計當中數據驗證往往很常見，同樣在動效設計中數據驗證使用最多的也是分類測試法，控制條件不同，分批次進行測試對比來驗證動效設計。

在上線後切A/B test，控制文案-樣式-時間等不變量，分别投放靜态和動态樣式，監控兩者的數據以此來辨别優劣，并加以沉澱為今後的方案。

當然這個例子隻是很簡單的案例，往往實際項目中有很多複雜的因素，有時候可能會分ABCD甚至EFG類别的測試來驗證每個動效的可行性，最後取均值最高的一項作全面投放。

四、以産品思維看動效設計

以上建立了自己完善的動效設計思維，但僅僅是基于執行層面上的，隻滿足于産出很好的動效方案，但是作為一名體驗設計師是遠遠不夠的，我們應該帶着産品思維去看待動效設計。

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

1. 動效的一緻性

産品設計當中除了顔色、品牌等視覺層面的表達需要統一性外，動效也是需要有一緻性的，隻不過用戶很難直觀地從視覺上感知到，但是作為一款成熟的産品，強化用戶對品牌産品的印象，動效的一緻性是不可缺少的。

縱觀整個産品側，可能部分模塊無法清晰感知，但是隻有确定了動效的一緻性，才能使産品整體看起來更加統一和完整。

比如TIM，在整個産品中統一了動效的形式和速率，以及貼合了産品品牌的表達，在整體的操作體驗上有了關聯和一緻性，體現了動效設計對于産品來說真正的價值。

2. 規範&組件化

産品設計當中為了解決疊代、開發或者合作效率等問題，常常會制定一系列相對應的規範和建立組件庫，動效也有相對應的規範和組件庫，而在關系上規範和動效組件是制約産品動效一緻性的。制定動效規範和組件的緯度分為：速率和時間。

首先是速率，一般情況是使用軟件和開發語言裡自帶默認的速率，比如常見的緩動、緩入緩出等，但有一些産品為了拉開差異化會自行定義速率的參數來表達，然後整個産品都遵循這個參數來制定動效。

比如全局的參數定義，甚至能細化到 POP 動效的參數定義、點擊态動效的參數定義等。

其次就是時間，控制每一個模塊的時間，包含内容的出現消失、什麼時候該強化、什麼時候循環或者靜止，針對不同的場景劃分進行統一規範，甚至可以制定相對應的模版，之後進行動效産出的時候，既保持了産品的一緻性，也能提高工作上的效率。

3. 全局思考

設計服務行業，那麼針對不同的行業需要考慮的點不僅僅是當下的場景，保持對産品全局的思考才能對動效設計有全新的認知。

了解當下動效設計的「前置鍊路」、「當前行為」和「後置鍊路」，用戶在喚醒動效前的動機是什麼，為什麼會觸發動效的行為，觸發動效之後用戶想達到怎樣的目的等要做全局的考量。

正因為有了對産品的全局思考，才讓當下産品越來越「人性化」，往往你隻是做了第一步操作，就衍生出了後續的選項，讓用戶感到「省心省力」。動效隻是這其中的一個環節，作用都是錦上添花的，所以更加說明全局思考的重要性。

需要考慮到周期、成本、實現、用戶行為、用戶心理、是否真真确切要用到動效設計等等因素，最後才能敲定動效的設計策略。

在2019的Google I/O大會上，Google Lens展示的AR點菜功能可以智能識别用戶掃描的菜單并将美食網站上的相關推薦直接呈現在屏幕上。

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

五、再說兩句

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

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

原創不易，謝謝閱讀～

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

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

,

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

查看全部