攜程火車票設(shè)計(jì)項(xiàng)目，總結(jié)了一套動(dòng)效方法論

動(dòng)效設(shè)計(jì)本身已經(jīng)是大家耳熟能詳甚至廣泛運(yùn)用的設(shè)計(jì)手法，但是卻長(zhǎng)期以來(lái)只是做到動(dòng)效最基本的吸引用戶注意力的輔助效果，本次分享將通過(guò)攜程火車票實(shí)際項(xiàng)目，看看如何做到讓用戶怦然心“動(dòng)”（全文2925字 閱讀約8分鐘）

動(dòng)效金字塔模型

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

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

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

心動(dòng)四連擊

讓用戶怦然心動(dòng)也是有套路的，接下來(lái)我們就一起看看這個(gè)心動(dòng)四連擊。

他們分別是動(dòng)效框架：我們需要確定動(dòng)效的落點(diǎn)與框架，

動(dòng)態(tài)聯(lián)想：設(shè)計(jì)師需要帶入場(chǎng)景，確定動(dòng)效的運(yùn)動(dòng)方式，

動(dòng)效節(jié)奏：控制節(jié)奏制造爆點(diǎn)，點(diǎn)燃用戶的情緒，

動(dòng)效編排：處理多個(gè)動(dòng)效聯(lián)動(dòng)的主次關(guān)系

1. 動(dòng)效框架

我們先來(lái)看看第一擊，動(dòng)效框架

說(shuō)白話就是，哪里需要做動(dòng)效，需要做幾個(gè)階段的動(dòng)效

接下來(lái)我們會(huì)帶入火車票的實(shí)際動(dòng)效案例，去拆解四連擊。

· 動(dòng)效落點(diǎn)

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

其實(shí)我們每一個(gè)點(diǎn)位都可以加動(dòng)效，只是如何編排讓整體頁(yè)面既豐富又不亂而已，具體的編排方法我會(huì)讓在最后一擊詳細(xì)講述。

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

· 動(dòng)效層級(jí)

確定了哪里需要做動(dòng)效，接下來(lái)就是看看動(dòng)效如何分階段，就是我們的動(dòng)效層級(jí)。

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

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

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

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

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

確定好了動(dòng)效框架與落點(diǎn)，第二擊就是動(dòng)態(tài)聯(lián)想，說(shuō)白了就是，我們知道哪里需要?jiǎng)有В敲丛趺磩?dòng)呢？

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

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

第一個(gè)需要確定的就是火車的運(yùn)動(dòng)方式，為了凸顯差異化，有別于常規(guī)的橫向移動(dòng)，與增強(qiáng)視覺(jué)沖擊力，我們沒(méi)有選擇橫向穿過(guò)畫面，而是選擇了火車迎面駛向用戶的視角。

既然是迎面而來(lái)，運(yùn)動(dòng)是絕對(duì)的靜止是相對(duì)的，如果鏡頭固定在火車頭，為了表達(dá)運(yùn)動(dòng)感，我們需要做的就是景物、車軌的向后運(yùn)動(dòng)，而為了凸顯速度感，豐富畫面我們便增加了速度的線條粒子效果。

下方就是為了頁(yè)面循環(huán)而增加的火車周圍景物的建模。

前面提到我們的活動(dòng)是火車進(jìn)化，就是在解鎖下一階段的時(shí)候，整個(gè)場(chǎng)景需要完全切換以達(dá)到進(jìn)化的效果。

想到進(jìn)化，結(jié)合之前火車運(yùn)動(dòng)的方式，就聯(lián)想到讓火車的速度加到極限，引發(fā)了進(jìn)化，所以加速會(huì)帶來(lái)的效果就是有光的動(dòng)效、沖擊波、時(shí)光隧道等等。

最后因?yàn)榛疖囘@個(gè)核心的主體物如果是純靜態(tài)會(huì)有點(diǎn)呆板，所以增加了yoyo的運(yùn)動(dòng)，車燈的閃爍，以及火車會(huì)慢慢的前后運(yùn)動(dòng)。

第二個(gè)還是我們的22年春運(yùn)，前面有提到基金球是一定會(huì)出現(xiàn)的動(dòng)效，方案一是類似螞蟻森林的做法，基金球直接飛入老虎體內(nèi)，數(shù)字增長(zhǎng)，但是有一些呆板，少了一些生動(dòng)。

所以我們?cè)诶匣⒉輬D的基礎(chǔ)上，根據(jù)他微微張嘴仰面慵懶的原插畫，索性讓嘴巴張大一些，脖子伸長(zhǎng)一點(diǎn)，夸張?zhí)幚?，吃掉基金球?/span>

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

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

雖然動(dòng)效是依托于靜態(tài)的內(nèi)容產(chǎn)出的視覺(jué)效果，但不等于說(shuō)，只是幫助插畫或者頁(yè)面動(dòng)一動(dòng)，起到一個(gè)點(diǎn)綴的作用，而是可以提前介入到靜態(tài)內(nèi)容的產(chǎn)出上，共創(chuàng)最終的呈現(xiàn)效果。

特別在配合作戰(zhàn)時(shí)，理解需求，根據(jù)需求去想象動(dòng)畫的呈現(xiàn)方式，反哺靜態(tài)頁(yè)面的設(shè)計(jì)師如何修改畫面內(nèi)容，一起合力，起到1+1大于2的效果。

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

3. 動(dòng)效節(jié)奏

第三擊是動(dòng)效節(jié)奏，運(yùn)動(dòng)方式有了，我們?nèi)绾稳?qiáng)化動(dòng)效點(diǎn)燃用戶情緒。

其實(shí)關(guān)于動(dòng)效節(jié)奏我感覺(jué)最形象的一個(gè)現(xiàn)實(shí)類比就是射箭這項(xiàng)運(yùn)動(dòng)。

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

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

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

4. 動(dòng)效編排

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

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

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

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

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

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

---

????如何領(lǐng)取本期讀者資源？先將“UXD筆記”公眾號(hào)設(shè)為??星標(biāo)，然后在后臺(tái)回復(fù)以下關(guān)鍵詞，即可實(shí)現(xiàn)無(wú)套路領(lǐng)取。

【1】回復(fù)“動(dòng)效”——領(lǐng)交互動(dòng)效開發(fā)交付標(biāo)注模板（源文件）+動(dòng)效落地方法66頁(yè)培訓(xùn)PPT，UI視覺(jué)設(shè)計(jì)師必備手冊(cè)。

【2】如何加入大廠內(nèi)推群和設(shè)計(jì)交流群？不定期分享求職面試相關(guān)資料，以及最新的內(nèi)推信息。掃描下方二維碼加小編，進(jìn)大廠內(nèi)推群備注“內(nèi)推”，進(jìn)設(shè)計(jì)交流群備注“交流”。

與84182位讀者一起成長(zhǎng)

---

??來(lái)自 UXD筆記 的溫馨提示：因公眾號(hào)消息推送機(jī)制改版，如果你沒(méi)有給我們加??星標(biāo)，將有可能無(wú)法收到 UXD筆記 的大封面推送，導(dǎo)致在信息流里錯(cuò)過(guò)精彩內(nèi)容。

為防止走失，我們邀請(qǐng)你做一個(gè)小小的動(dòng)作，給 UXD筆記 微信公眾號(hào)加個(gè)??星標(biāo)，方便你及時(shí)獲取大廠UX知識(shí)推送。