動效設(shè)計本身已經(jīng)是大家耳熟能詳甚至廣泛運用的設(shè)計手法，但是卻長期以來只是做到動效最基本的吸引用戶注意力的輔助效果，本次分享將通過攜程火車票實際項目，看看如何做到讓用戶怦然心“動”。

那么我們就開始吧！

更多動效干貨：

一、動效金字塔模型

首先回憶一下我們通常看到的動效，大概都是這個的樣子：彈窗按鈕放大縮小，duangduang 的效果，或者一個元素上下漂浮。運用的其實都是位移、縮放、旋轉(zhuǎn)、透明度等最基礎(chǔ)的效果。

目前市面上大部分的效果其實只做到了動效金字塔模型最基礎(chǔ)的階段，就是吸引注意力。由基礎(chǔ)到深入分別是：吸引注意力、貼合場景、賦能業(yè)務(wù)、和情感價值。動效的作用又基礎(chǔ)到情感滿足

那么我們就來一起看看，如何做到情感滿足，也就是我們的主題：如何讓用戶怦然心動。

二、心動四連擊

讓用戶怦然心動也是有套路的，接下來我們就一起看看這個心動四連擊

他們分別是動效框架：我們需要確定動效的落點與框架，動態(tài)聯(lián)想：設(shè)計師需要帶入場景，確定動效的運動方式，動效節(jié)奏：控制節(jié)奏制造爆點，點燃用戶的情緒，動效編排：處理多個動效聯(lián)動的主次關(guān)系

1. 動效框架

我們先來看看第一擊，動效框架

說白話就是，哪里需要做動效，需要做幾個階段的動效

接下來我們會帶入火車票的實際動效案例，去拆解四連擊。

①動效落點

在做動效的第一步不是著手開始制作，而是先梳理需求，確定動畫框架與落點，下方的框架就是我們一般營銷頁面的大體架構(gòu)，會分為標(biāo)題區(qū)域、主體物、按鈕、和中景與背景層。那么哪些地方是我們可以做動效的地方呢？

其實我們每一個點位都可以加動效，只是如何編排讓整體頁面既豐富又不亂而已，具體的編排方法我會讓在最后一擊詳細講述。

在 22 年春運的活動中，我們動效落點選擇的是：主體物（老虎）、行動點（按鈕和基金球），還有中景與背景的氛圍

②動效層級

確定了哪里需要做動效，接下來就是看看動效如何分階段，就是我們的動效層級。

春運是火車票一年一度的 S 級活動，22 年虎年春運的主要玩法是任務(wù)體系，在分會場做任務(wù)得基金，就是頁面上漂浮的圓球，主會場用戶收集基金球，最終抵火車票價。所以收集基金是一個一定會出現(xiàn)的數(shù)字增加的強化動效

那有了強化動效就結(jié)束了嗎，想象一下，如果這個營銷頁面就只是一個靜態(tài)的現(xiàn)在的樣子，當(dāng)用戶收集基金球之后出現(xiàn)數(shù)字增長，其實會略顯死板，并不是說頁面視覺設(shè)計的不夠好，而是我們可以通過動效去畫龍點睛，也就是增加老虎的常規(guī)循環(huán)動效，為了讓整體頁面更加的真實、靈動自然

最終我們的老虎動效就分為了 2 層，一個循環(huán)的動效和數(shù)字增長的動效

那么動效的層級就一定得在主體物上嗎？其實也不一定，比如右側(cè)的春運購票日歷，根據(jù)日歷的玩法，用戶的主要行為是每日抽獎，所以抽獎的交互動效便是最主要的動效，以及抽獎完成的獲得獎品動效。

2. 動態(tài)聯(lián)想

確定好了動效框架與落點，第二擊就是動態(tài)聯(lián)想，說白了就是，我們知道哪里需要動效，那么怎么動呢？

就需要用到我們動態(tài)聯(lián)想的方法：——主題聯(lián)想、環(huán)境聯(lián)想。主題聯(lián)想就是根據(jù)活動的主題、玩法去聯(lián)想；環(huán)境聯(lián)想就是根據(jù)畫面元素去聯(lián)想

接下來會用 3 個案例來拆解一下如何實施，第一個是 23 年的春運。23 年春運的玩法和 22 年類似，都是完成任務(wù)解鎖獎勵，但頁面核心是火車進化論，由 22 年的老虎變?yōu)榱藬y程的 yoyo 開火車。那么火車如何動呢？

第一個需要確定的就是火車的運動方式，為了凸顯差異化，有別于常規(guī)的橫向移動，與增強視覺沖擊力，我們沒有選擇橫向穿過畫面，而是選擇了火車迎面駛向用戶的視角。既然是迎面而來，運動是絕對的靜止是相對的，如果鏡頭固定在火車頭，為了表達運動感，我們需要做的就是景物、車軌的向后運動，而為了凸顯速度感，豐富畫面我們便增加了速度的線條粒子效果。下方就是為了頁面循環(huán)而增加的火車周圍景物的建模

前面提到我們的活動是火車進化，就是在解鎖下一階段的時候，整個場景需要完全切換以達到進化的效果。想到進化，結(jié)合之前火車運動的方式，就聯(lián)想到讓火車的速度加到極限，引發(fā)了進化，所以加速會帶來的效果就是有光的動效、沖擊波、時光隧道等等。

最后因為火車這個核心的主體物如果是純靜態(tài)會有點呆板，所以增加了 yoyo 的運動，車燈的閃爍，以及火車會慢慢的前后運動

第二個還是我們的 22 年春運，前面有提到基金球是一定會出現(xiàn)的動效，方案一是類似螞蟻森林的做法，基金球直接飛入老虎體內(nèi)，數(shù)字增長，但是有一些呆板，少了一些生動。所以我們在老虎草圖的基礎(chǔ)上，根據(jù)他微微張嘴仰面慵懶的原插畫，索性讓嘴巴張大一些，脖子伸長一點，夸張?zhí)幚恚缘艋鹎颉?/p>

以及老虎的常規(guī)狀態(tài)動效，因為這是春運的活動，溫暖柔和就是活動的主旋律，雖然是老虎 IP，但需要往萌萌的方向引導(dǎo)，IP 雖然是老虎，其實更像一只胖貓，而想到貓，再結(jié)合過年的吉祥的氛圍，何不做一只可愛的招財虎的動畫呢？

第三個案例是搶票日歷，玩法是每日抽獎，為了節(jié)約屏效，我們選擇了日歷與刮獎區(qū)域翻轉(zhuǎn)交互的方式，以及上方小日歷的翻轉(zhuǎn)效果，去暗示我們抽獎的交互

雖然動效是依托于靜態(tài)的內(nèi)容產(chǎn)出的視覺效果，但不等于說，只是幫助插畫或者頁面動一動，起到一個點綴的作用，而是可以提前介入到靜態(tài)內(nèi)容的產(chǎn)出上，共創(chuàng)最終的呈現(xiàn)效果。特別在配合作戰(zhàn)時，理解需求，根據(jù)需求去想象動畫的呈現(xiàn)方式，反哺靜態(tài)頁面的設(shè)計師如何修改畫面內(nèi)容，一起合力，起到 1+1 大于 2 的效果。

所以動效的介入階段其實最晚是在視覺的草圖階段，如果在視覺設(shè)計師已經(jīng)完成了頁面再去修改內(nèi)容，那么合作成本就會很高。比如老虎的動態(tài)姿勢，火車的運動方式

3. 動效節(jié)奏

第三擊是動效節(jié)奏，運動方式有了，我們?nèi)绾稳娀瘎有c燃用戶情緒。

其實關(guān)于動效節(jié)奏我感覺最形象的一個現(xiàn)實類比就是射箭這項運動

抬手舉弓就是動效的預(yù)備動作，拉弓就是蓄力階段，拉的越滿，用戶的情緒會被吊的越高，松手放箭，瞬間釋放的弓箭和前面的緩慢拉弓形成強烈的對比

回到春運動畫本身，預(yù)備動作就是火車后退，拉弓的動作就是速度的加快，去渲染情緒，最終瞬間釋放，切換場景。如果沒有前面 2 趴的渲染，最后的切換就會顯得非常的突兀和難受。

我們需要刻意去欲揚先抑制造引爆點，常規(guī)狀態(tài)與特殊狀態(tài)的強烈對比，會讓整個動效更加生動。常規(guī)招財?shù)氖孢m自然甚至略帶緩慢的處理都是為了讓大橘吃基金球的特殊狀態(tài)帶給用戶怦然心動的感受。

4. 動效編排

最后一擊是動效編排，當(dāng)我們頁面有那么多的動效都在動，如何才能顯得合理有序？

第一個就是主次區(qū)分，給動效內(nèi)容分級，所有的動效需要服務(wù)于第一優(yōu)先級的內(nèi)容，其余會適當(dāng)弱化，比如火車、老虎、與抽獎區(qū)域

接下來就是需要考慮編排的方式，一般會有 2 種，一種是節(jié)奏的同頻，我們需要全局動效一起考慮，比如左側(cè)的日歷和按鈕是同一個節(jié)奏，他們的觸發(fā)間隔是一致的

如果節(jié)奏不同頻會出現(xiàn)一個追一個的錯亂感，比如 A 和 B 跑步，A 先跑，B 后跑，但是 B 比 A 跑得快，就會出現(xiàn) B 追上并超過 A 的一種混亂感

另一種編排的方式是先后運動，用于引導(dǎo)用戶的視線，比如右側(cè)的靠窗動效，yoyo 先出現(xiàn)，接著出現(xiàn)氣泡告知我們想讓用戶知道的場景是靠窗，緊接著是窗外場景的點亮效果與風(fēng)景運動。

那我們來回顧一下，我們的心動四連擊，通過動效框架確定動效的落點，需要加在什么地方，然后去動態(tài)聯(lián)想動效具體的運動方式，之后通過動效節(jié)奏加強動效，點燃用戶情緒，最后整合編排動效讓整體動效豐富而有序

歡迎關(guān)注作者微信公眾號：「TripDesign」