前言

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

動效的價值

1. 滿足用戶的心理預(yù)期

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

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

彈性

空間

變形

案例說明

這是部分線上案例的動效展示，分別模擬了抽獎機(jī)抽獎；工廠機(jī)器運(yùn)轉(zhuǎn)；雷達(dá)掃描的現(xiàn)實(shí)感。使得用戶可以快速將現(xiàn)實(shí)認(rèn)知帶入產(chǎn)品之中。

2. 引導(dǎo)用戶注意力

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

在實(shí)踐中我們發(fā)現(xiàn)，用戶對動態(tài)的元素關(guān)注度是最高的，其次是色彩最后是明度。通過這樣一個簡單的優(yōu)先級關(guān)系，我們可以初步的對頁面的層級進(jìn)行梳理。

案例說明

通過合理的優(yōu)先級規(guī)劃，可以有效的吸引用戶注意力，讓他們關(guān)注設(shè)計(jì)師想讓他們關(guān)注的東西。優(yōu)化用戶在體驗(yàn)產(chǎn)品時候的視覺動線，幫助用戶分清主次。在下面的實(shí)例中動態(tài)的按鈕和金額就是設(shè)計(jì)師希望用戶最關(guān)注的東西。

3. 情感化設(shè)計(jì)

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

案例說明

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

面臨的挑戰(zhàn)

為了應(yīng)對以上挑戰(zhàn)，設(shè)計(jì)師、運(yùn)營、產(chǎn)品、開發(fā)也提出了很多解決方案，而動效組件化就是其中之一。

動效組件化的優(yōu)勢

1. 統(tǒng)一體驗(yàn)

統(tǒng)一用戶體驗(yàn)的好處是可以保證兩個產(chǎn)品或者同個產(chǎn)品相關(guān)界面的設(shè)計(jì)風(fēng)格和樣式上保持一致。用戶體驗(yàn)產(chǎn)品時可以保持一個視覺體驗(yàn)的流暢性。

案例說明

在京友圈中各類活動中紅包動效出現(xiàn)次數(shù)非常頻繁，如果不進(jìn)行樣式統(tǒng)一，整個產(chǎn)品會顯得非常雜亂，用戶的體驗(yàn)會很零碎不夠整體。

2. 提高效率

動效的模塊化可以顯著提高動工作效率。主要可以體現(xiàn)在動效設(shè)計(jì)師本身在設(shè)計(jì)大量同類動效時。模塊化設(shè)計(jì)可以減少重復(fù)設(shè)計(jì)，減輕設(shè)計(jì)師工作量。

案例說明

該說明案例為“東東萌寵”卡通形象動效設(shè)計(jì)。該模塊運(yùn)用了組件化設(shè)計(jì)思維，大大提高了工作效率。在該項(xiàng)目中的多名設(shè)計(jì)師輸出的動效也保持了高度的統(tǒng)一性。

3. 降低成本

降低成本主要是指降低動效開發(fā)成本。因?yàn)閯有в袝r候做出來很酷炫但是開發(fā)排期有時候并不允許，所以類似的效果就需要用組件化來提高代碼復(fù)用性。

案例說明

在諸多營銷運(yùn)營類動效中都會用到的數(shù)字滾動效果，該效果可以引導(dǎo)用戶注意力，體現(xiàn)金額變化，強(qiáng)化用戶獲得感。該效果開發(fā)完成后在不同的項(xiàng)目中均可復(fù)用。

組件化系統(tǒng)

1. 明確設(shè)計(jì)原則

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

2. 運(yùn)用設(shè)計(jì)語言

為了實(shí)現(xiàn)一個高質(zhì)量的動效，需要熟悉幾種動效的基本屬性和運(yùn)動方式。以下幾種工具的熟練運(yùn)用就可以滿足現(xiàn)有大部分動效的需求。

• 錨點(diǎn)：控制旋轉(zhuǎn)的中心點(diǎn)位置。實(shí)際設(shè)計(jì)中可以做出自轉(zhuǎn)和公轉(zhuǎn)的效果。
• 位置：最常用的工具，表現(xiàn)物體移動。
• 縮放：多用于按鈕呼吸效果，或者物體的強(qiáng)化感知。
• 旋轉(zhuǎn)：表現(xiàn)物體旋轉(zhuǎn)，可以表現(xiàn)物體方向。
• 透明度：可以表現(xiàn)物體強(qiáng)弱，或者用于轉(zhuǎn)場淡入淡出效果。

以下是動效設(shè)計(jì)中常見的幾種運(yùn)用態(tài)勢，他們之間細(xì)微的差別就是體現(xiàn)設(shè)計(jì)細(xì)節(jié)滿足用戶心理預(yù)期的關(guān)鍵所在，每種運(yùn)動態(tài)度所蘊(yùn)含的情緒是完全不同的。

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

3. 建立組件庫

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

動效導(dǎo)出

1. 提供靜態(tài)圖及動效說明

設(shè)計(jì)軟件：Sketch PS

開發(fā)成本：★★★☆☆

簡單動效比如縮放，旋轉(zhuǎn)，位移等，提供JPG或PNG的靜態(tài)圖及動效說明，由開發(fā)實(shí)現(xiàn)動態(tài)效果。其優(yōu)點(diǎn)是效果流暢且體積小。關(guān)于動效說明，如果簡單的話可以用圖文表示，復(fù)雜的話需要結(jié)合動效Demo動態(tài)展示效果，以及具體參數(shù)

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

2. 提供 GIF 圖片

設(shè)計(jì)軟件：Sketch、AE、principle、PS、Flinto 等

開發(fā)成本：★☆☆☆☆

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

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

設(shè)計(jì)軟件：Sketch

開發(fā)成本：★★★★☆

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

4. 提供 Json 文件

設(shè)計(jì)軟件：Sketch、AE

開發(fā)成本：★★★☆☆

用AE做好動效后，導(dǎo)出Json文件給開發(fā)，其優(yōu)點(diǎn)是還原度高，能節(jié)省一定內(nèi)存，不過也需要注意Json雖然好用，但過多使用會耗設(shè)備的性能，尤其對一些低端設(shè)備造成較大的負(fù)擔(dān)，特別是一些較大的動畫，容易造成卡頓，所以json還是比較適合小范圍的動畫?？傮w來說實(shí)現(xiàn)的方法還是挺多的，我們可以先做動效Demo，然后與開發(fā)的同學(xué)探討選擇出最佳實(shí)現(xiàn)方案，確定后再去著手準(zhǔn)備交付物。

小結(jié)

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

歡迎關(guān)注「京東設(shè)計(jì)中心JDC」的微信公眾號：