前言

互動營銷類產品作為各大電商拉新、引流的重要手段，其核心目標是吸引盡可能多的用戶來參與活動。本篇文章嘗試從動效設計的意義出發分析視覺設計師如何更好的為產品進行賦能，以及提高動效設計效率節約開發成本的思考。

動效的價值

1. 滿足用戶的心理預期

我們生活在一個物理世界，任何事物的運動都是符合物理世界的客觀規律的。因此人對于事物的觀察和理解都是出于對物理規律的理解。而虛擬界面上的元素都是現實世界中并不存在的東西，會讓用戶有陌生感。

通過合理的動效。讓虛擬界面模擬物理世界的規律，例如慣性、視差等等，可以讓這個虛擬的世界與物理世界產生交集。用戶會把自己對物理世界的認知映射到對產品的認知上。下面會列舉幾種常見的模擬真實環境的動效。

彈性

空間

變形

案例說明

這是部分線上案例的動效展示，分別模擬了抽獎機抽獎；工廠機器運轉；雷達掃描的現實感。使得用戶可以快速將現實認知帶入產品之中。

2. 引導用戶注意力

一個營銷運營類產品往往承載著巨量的信息，對于用戶而言可能會造成視覺動線混亂。用戶可能會不知道頁面重點在哪里，從而導致頁面核心利益點傳達效率低下。而梳理這些頁面信息的層級關系就可以通過合理的動效來實現。

在實踐中我們發現，用戶對動態的元素關注度是最高的，其次是色彩最后是明度。通過這樣一個簡單的優先級關系，我們可以初步的對頁面的層級進行梳理。

案例說明

通過合理的優先級規劃，可以有效的吸引用戶注意力，讓他們關注設計師想讓他們關注的東西。優化用戶在體驗產品時候的視覺動線，幫助用戶分清主次。在下面的實例中動態的按鈕和金額就是設計師希望用戶最關注的東西。

3. 情感化設計

情感化設計的目標是在用戶接觸和使用產品的過程中，激發用戶的正向情感，比如愉快、信任、滿足，避免用戶產生負向情感，比如失望、挫折感、痛苦。正向的情感會使用戶更樂于使用產品，遇到使用過程的一些小問題也更加包容。

案例說明

在萌寵項目中用戶點擊狗狗，狗狗會撓癢作為反饋。這種反饋沒有功能上的作用但是可以愉悅用戶，讓用戶覺得和虛擬的狗狗產生一種情感聯系，最終可以提高用戶粘度。

面臨的挑戰

為了應對以上挑戰，設計師、運營、產品、開發也提出了很多解決方案，而動效組件化就是其中之一。

動效組件化的優勢

1. 統一體驗

統一用戶體驗的好處是可以保證兩個產品或者同個產品相關界面的設計風格和樣式上保持一致。用戶體驗產品時可以保持一個視覺體驗的流暢性。

案例說明

在京友圈中各類活動中紅包動效出現次數非常頻繁，如果不進行樣式統一，整個產品會顯得非常雜亂，用戶的體驗會很零碎不夠整體。

2. 提高效率

動效的模塊化可以顯著提高動工作效率。主要可以體現在動效設計師本身在設計大量同類動效時。模塊化設計可以減少重復設計，減輕設計師工作量。

案例說明

該說明案例為“東東萌寵”卡通形象動效設計。該模塊運用了組件化設計思維，大大提高了工作效率。在該項目中的多名設計師輸出的動效也保持了高度的統一性。

3. 降低成本

降低成本主要是指降低動效開發成本。因為動效有時候做出來很酷炫但是開發排期有時候并不允許，所以類似的效果就需要用組件化來提高代碼復用性。

案例說明

在諸多營銷運營類動效中都會用到的數字滾動效果，該效果可以引導用戶注意力，體現金額變化，強化用戶獲得感。該效果開發完成后在不同的項目中均可復用。

組件化系統

1. 明確設計原則

設計的本質是為了解決問題，制定設計原則時需要建立在這個設計的中心思想之上。其核心可劃分為兩個維度：審美交互維度、開發實現維度。設計師在滿足審美維度的同時也應該考慮到開發實現的難度，畢竟最后動效的落地離不開開發的努力。

2. 運用設計語言

為了實現一個高質量的動效，需要熟悉幾種動效的基本屬性和運動方式。以下幾種工具的熟練運用就可以滿足現有大部分動效的需求。

• 錨點：控制旋轉的中心點位置。實際設計中可以做出自轉和公轉的效果。
• 位置：最常用的工具，表現物體移動。
• 縮放：多用于按鈕呼吸效果，或者物體的強化感知。
• 旋轉：表現物體旋轉，可以表現物體方向。
• 透明度：可以表現物體強弱，或者用于轉場淡入淡出效果。

以下是動效設計中常見的幾種運用態勢，他們之間細微的差別就是體現設計細節滿足用戶心理預期的關鍵所在，每種運動態度所蘊含的情緒是完全不同的。

• 節奏：有著比較強烈的變化，給人視覺沖擊力最大，最能吸引注意。
• 線性：整體平穩，毫無波瀾，沒有任何變化。
• 緩動：細分的話也有幾種模式，分別是 Ease In、Ease Out 和 Ease Both。緩動具有節奏感和韻律感，相比于線性的勻速顯得更加優雅生動，是使用較多的類型。
• 慣性：效果自然，恰到好處。不會給人感覺突兀又不失豐富的細節。

3. 建立組件庫

組件庫的建立對視覺設計的效率提升、成果展示、團隊成員間互相提高、共享信息有著非常重要的作用。對開發提高代碼復用減少開發成本也有很好的促進效果。

動效導出

1. 提供靜態圖及動效說明

設計軟件：Sketch PS

開發成本：★★★☆☆

簡單動效比如縮放，旋轉，位移等，提供JPG或PNG的靜態圖及動效說明，由開發實現動態效果。其優點是效果流暢且體積小。關于動效說明，如果簡單的話可以用圖文表示，復雜的話需要結合動效Demo動態展示效果，以及具體參數

在將數據提供給開發時，可以選擇用下面的表格的形式。這樣有助于提高開發工作效率和還原度。

2. 提供 GIF 圖片

設計軟件：Sketch、AE、principle、PS、Flinto 等

開發成本：★☆☆☆☆

復雜動效，比如生長、形狀變化，組合變化等，我們可以直接生成GIF圖交給開發，這樣實現起來成本最低，所有的動效由設計內部消化了，對于開發的同學來說點擊只需要替換圖片就可以，很受他們歡迎。但GIF也不是完全沒有問題，它最主要的問題是文件較大，畫質越清晰的文件則越大，而且響應速度相比其他形式偏慢，如果是復雜一些的圖就需要在畫質和文件大小之間找平衡了。

3. 提供 SVG 圖片及動效說明

設計軟件：Sketch

開發成本：★★★★☆

SVG圖片其實就是用腳本寫好的矢量圖，Sketch可以直接導出SVG格式，所以對于設計師來說是比較方便的。而且SVG是最小最靈活的，可以很好地擴展，同樣的圖形動效SVG比GIF小約95％。而且與JPG或PNG不同，由于是矢量的所以SVG圖片不會失真，可以支持生長、變形等效果的，開發同學能根據我們提供的動效說明用代碼還原實現。但它也有自身的限制，一是開發成本較高，二是如果需要在web使用，IE瀏覽器是不支持的，如果產品在web使用的話還需要考慮到這一點。

4. 提供 Json 文件

設計軟件：Sketch、AE

開發成本：★★★☆☆

用AE做好動效后，導出Json文件給開發，其優點是還原度高，能節省一定內存，不過也需要注意Json雖然好用，但過多使用會耗設備的性能，尤其對一些低端設備造成較大的負擔，特別是一些較大的動畫，容易造成卡頓，所以json還是比較適合小范圍的動畫。總體來說實現的方法還是挺多的，我們可以先做動效Demo，然后與開發的同學探討選擇出最佳實現方案，確定后再去著手準備交付物。

小結

動效設計在營銷運營類產品中的重要性越來越高，動效設計的意義也越來越被認可。如何平衡運營、設計師、開發關于動效實現層面的矛盾是接下來我們需要一起思考和解決的。設計師們在日常的需求中積累的經驗和模板可以搭建一個共享的組件庫，對后續提高工作效率，相互學習進步都有著很好的促進作用，從而更好地為產品進行賦能，為用戶提供更高質量的體驗。

歡迎關注「京東設計中心JDC」的微信公眾號：