資深淘寶人教你如何高效設(shè)計(jì)動(dòng)畫效果

在手機(jī)淘寶中，大至鏈路的銜接，小至一個(gè)按鈕的點(diǎn)擊響應(yīng)，動(dòng)效是體驗(yàn)無處不在的潤滑劑，為用戶每一步的操作提供了合理的預(yù)期與過渡。而通過動(dòng)效銜接不同界面或不同響應(yīng)狀態(tài)，無論對流暢直觀地表達(dá)流程意圖，還是精雕細(xì)琢讓體驗(yàn)更絲滑的微動(dòng)效，動(dòng)效設(shè)計(jì)都是淘寶設(shè)計(jì)師日常工作中非常重要的一環(huán)。

▲ 動(dòng)效是體驗(yàn)鏈路散點(diǎn)間的“領(lǐng)路人”

針對項(xiàng)目不同階段、不同使用需要，針對性地選用的工具，輔以便于理解的交付方式，是設(shè)計(jì)和落地環(huán)節(jié)溝通提效的關(guān)鍵。

相比提及動(dòng)效首先都會(huì)想到的巨無霸AE而言，F(xiàn)linto、Principle、Kite、Adobe XD等許多專門為體驗(yàn)設(shè)計(jì)量身打造的輕量級(jí)工具，更聚焦在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)的高頻功能上，多數(shù)工具都能快速輸出視頻或GIF，以及在移動(dòng)端上進(jìn)行實(shí)際的交互體驗(yàn)。

▲ 為體驗(yàn)設(shè)計(jì)量身打造的輕量級(jí)工具

這些工具在原型和動(dòng)效快速表達(dá)方面獨(dú)特的敏捷、高效的優(yōu)勢，讓它們逐漸成為迭代頻繁的國內(nèi)互聯(lián)網(wǎng)行業(yè)許多設(shè)計(jì)團(tuán)隊(duì)的新寵。

上述工具的核心功能都比較接近，各有千秋，差異多在于時(shí)間與屬性之間關(guān)聯(lián)的展現(xiàn)形式上，這里不做過多展開，也不做任何孰優(yōu)孰劣的判斷。畢竟工具只是兵器，提起趁手的兵器快刀斬亂麻，才是設(shè)計(jì)功力的體現(xiàn)。

本文將結(jié)合手機(jī)淘寶的動(dòng)效設(shè)計(jì)實(shí)際案例，介紹淘寶設(shè)計(jì)師們在項(xiàng)目過程中進(jìn)行動(dòng)效設(shè)計(jì)、并與開發(fā)高效溝通的經(jīng)驗(yàn)。

針對不同階段，選把趁手的兵器

▲ 產(chǎn)品設(shè)計(jì)的2大不同階段

那么在不同階段，選用怎樣的工具更符合我們對“高效”的追求？下面將按階段拆分問題，分別進(jìn)行分析：
 

01. 廣義的動(dòng)效：流程Demo設(shè)計(jì)階段

產(chǎn)品流程、交互行為的設(shè)計(jì)與串聯(lián)，無論是作為可以實(shí)際體驗(yàn)的可交互原型，還是純用作展示，實(shí)際上也是一種最基礎(chǔ)的廣義動(dòng)效。

曾幾何時(shí)，交互流程的設(shè)計(jì)輸出物是用流程箭頭清晰標(biāo)注每個(gè)控件交互行為的交互稿。

但在淘寶內(nèi)各子產(chǎn)品“小步快跑”的版本迭代極度頻繁，每天提案、評審這類快速碰撞不斷的情況下，即使經(jīng)過了合理的流程拆解、耦合度不是非常高的交互稿，對設(shè)計(jì)師而言改動(dòng)返工量依然巨大。

更何況無論業(yè)務(wù)方還是設(shè)計(jì)內(nèi)部評審時(shí)，其實(shí)沒有人有時(shí)間仔細(xì)閱讀你精心撰寫的交互說明。

▲ 只適合在交付開發(fā)階段采用的靜態(tài)交互文檔

（鞋類測碼功能為例）

因此，這類交互稿如今最大的用途只在交付開發(fā)的環(huán)節(jié)。在快速碰撞方案的階段，通過輕量級(jí)的動(dòng)效工具迅速產(chǎn)出可交互原型是目前團(tuán)隊(duì)內(nèi)更同行的做法。在評審中直接演示，可以幫助團(tuán)隊(duì)成員更好地對方案實(shí)際效果有一個(gè)更直觀的體驗(yàn)。

在流程設(shè)計(jì)階段，F(xiàn)linto是一個(gè)非常好用的工具。同為體驗(yàn)設(shè)計(jì)專屬的輕量級(jí)設(shè)計(jì)軟件，F(xiàn)linto和Principle有很多共通之處，也經(jīng)常被一起比較，但底層思路都是通過定義元素的各項(xiàng)屬性變化來實(shí)現(xiàn)過渡。不過，兩者在定義方式上卻有比較大的不同，簡單概括來說，F(xiàn)linto是通過元素的附加事件，而Principle則是通過不同畫板間的屬性差。

▲ Flinto更擅長流程級(jí)表達(dá)

這點(diǎn)上的不同，決定了Flinto優(yōu)勢在于流程級(jí)表達(dá)，而Principle更擅長界面級(jí)（或很短的流程級(jí)）交互細(xì)節(jié)表達(dá)。

以分享寶貝、邀請好友出主意的“幫我選”功能中的新建清單流程為例：

▲ 「幫我選」新建清單流程Demo

流程對應(yīng)的Flinto實(shí)現(xiàn)方式如下：

▲ 「幫我選」新建清單流程對應(yīng)的Flinto工程文件

產(chǎn)出流程Demo時(shí)，只需要表達(dá)基本的頁面結(jié)構(gòu)與跳轉(zhuǎn)關(guān)系即可。轉(zhuǎn)場無需表達(dá)得很準(zhǔn)確，以不引起誤解為原則即可，時(shí)間有限的情況下，最簡單的處理方式就是統(tǒng)一用漸隱漸現(xiàn)。

各種與頁面滾動(dòng)位置有關(guān)的動(dòng)效也暫時(shí)不用表達(dá)，例如下滑時(shí)頂欄的狀態(tài)過渡。同樣，也完全沒有必要讓每個(gè)元素都可點(diǎn)擊，這些交互細(xì)節(jié)以及分支用例，都更建議在交付開發(fā)階段通過交互說明表達(dá)，寥寥數(shù)語可能就足夠準(zhǔn)確傳達(dá)了。

▲ 與頁面滾動(dòng)位置聯(lián)動(dòng)的動(dòng)效，可以在界面級(jí)設(shè)計(jì)中細(xì)化

02. 微交互動(dòng)效：界面級(jí)設(shè)計(jì)階段

當(dāng)產(chǎn)品流程確定后，進(jìn)入界面級(jí)設(shè)計(jì)階段，就輪到對局部微動(dòng)效逐一進(jìn)行細(xì)化。

對不涉及位置聯(lián)動(dòng)的交互動(dòng)效而言，在Flinto和Principle中的制作成本相差無幾。例如純粹由點(diǎn)擊觸發(fā)的事件：

▲ 不涉及位置聯(lián)動(dòng)的動(dòng)效

但對于涉及位置聯(lián)動(dòng)的動(dòng)效，Principle就比Flinto的表現(xiàn)優(yōu)秀很多了。

Principle中，時(shí)間軸和位置聯(lián)動(dòng)的設(shè)置比Flinto自由度更高，可以快速進(jìn)行精細(xì)的設(shè)計(jì)和調(diào)整。例如在頁面上滑過程中，導(dǎo)航欄跟隨手指上滑動(dòng)作而上移隱藏的動(dòng)效：

▲ 導(dǎo)航欄隨手指上滑動(dòng)作而上移隱藏

下面是一些來自淘寶近年已上線項(xiàng)目有趣的動(dòng)效示例：

案例一：手機(jī)淘寶導(dǎo)購產(chǎn)品“有好貨”的商品列表中，會(huì)穿插視頻及知識(shí)內(nèi)容，在這些特殊內(nèi)容滑動(dòng)到用戶視線中時(shí)會(huì)動(dòng)態(tài)擴(kuò)展，將內(nèi)容自身特點(diǎn)完全呈現(xiàn)。注意，這些動(dòng)效只能應(yīng)用在特殊內(nèi)容數(shù)量少、質(zhì)量高的場景，否則會(huì)過于干擾。

▲ 視頻形態(tài)擴(kuò)展動(dòng)效
 

▲ 知識(shí)形態(tài)擴(kuò)展動(dòng)效

案例二：用戶在手淘中關(guān)注某個(gè)頻道后，手淘首頁會(huì)提供進(jìn)入該頻道的快捷入口，這個(gè)邏輯通過文案很難清晰的表達(dá)，因而采用了直觀的動(dòng)效呈現(xiàn)。

▲ 關(guān)注頻道后的提示

依據(jù)設(shè)計(jì)稿所起的作用，大致分為3種：

▲ 3個(gè)階段的不同產(chǎn)出物

 

1、用于實(shí)操的demo：根據(jù)自己所希望表達(dá)的側(cè)重點(diǎn)（流程還是細(xì)節(jié)？）選用一種工具完成全部設(shè)計(jì)；

2、用于演示的視頻：可以同時(shí)使用兩種工具完成不同部分的設(shè)計(jì)，分別錄制視頻再合并；

3、用于開發(fā)的方案：對需要?jiǎng)討B(tài)呈現(xiàn)的部分單獨(dú)提供動(dòng)效設(shè)計(jì)稿及說明等產(chǎn)出物，然后再將所有設(shè)計(jì)以Keynote等載體整合起來。

手淘在動(dòng)效設(shè)計(jì)過程中，也摸索出了一套便于與開發(fā)同學(xué)溝通、最優(yōu)最快實(shí)現(xiàn)設(shè)計(jì)效果的設(shè)計(jì)產(chǎn)出方法。產(chǎn)出物包括2部分：

1、效果演示demo和視頻：使開發(fā)同學(xué)快速了解設(shè)計(jì)效果；以寶貝詳情主圖的擴(kuò)容與評價(jià)聯(lián)動(dòng)氣泡為例：

▲ 效果演示和視頻

2、動(dòng)效參數(shù)文檔：將自己在設(shè)計(jì)動(dòng)效時(shí)所設(shè)置的全部參數(shù)，翻譯為開發(fā)可以輕松讀懂的圖形表達(dá)方式。對于比較復(fù)雜的動(dòng)效，雖在撰寫文檔時(shí)會(huì)多花一些功夫，但能夠讓開發(fā)一次性還原出理想的設(shè)計(jì)效果，免去后期反復(fù)溝通修改的麻煩。

下面以手機(jī)淘寶首頁的2018年雙11主會(huì)場入口為例，說明動(dòng)效設(shè)計(jì)的輸出方式。

我們選用Principle制作了所有動(dòng)效，整體效果如下：

▲ 手機(jī)淘寶首頁的2018年雙11主會(huì)場入口
 

可以看出，動(dòng)效包含以下幾個(gè)部分：

1、主會(huì)場入口背景圖旋轉(zhuǎn)

2、主會(huì)場商品圖及按鈕出現(xiàn)

3、“立即搶購”按鈕文案切換

我們要分別輸出以上3部分的視頻示意以及具體的動(dòng)效參數(shù)。以其中相對復(fù)雜的第2部分“主會(huì)場商品圖的出現(xiàn)和切換”為例，提供給開發(fā)的視頻如下。注意在這個(gè)案例中，因?yàn)殚_發(fā)是針對圖形元素的容器來編寫動(dòng)效，所以我們需要將圖形抽象為容器。

▲ 經(jīng)抽象為圖形元素容器的交付版本
 

同時(shí)需要提供給開發(fā)的是動(dòng)效參數(shù)。下圖是我們使用的參數(shù)圖形化表達(dá)方式，縱向?yàn)楦鱾€(gè)元素，橫向?yàn)閯?dòng)效時(shí)間軸。

▲ 動(dòng)效參數(shù)產(chǎn)出物

實(shí)際上，各位同學(xué)也可以根據(jù)自己的實(shí)際情況來繪制，原則是清晰明確即可。

從合理的工具選型，到嚴(yán)謹(jǐn)清晰的文檔交付，技法層面的干貨就寫到這里。文章的最后，筆者想談的是互聯(lián)網(wǎng)產(chǎn)品中動(dòng)效初心。

動(dòng)效并非炫技的手段，而是實(shí)實(shí)在在用于銜接用戶在各個(gè)體驗(yàn)散點(diǎn)之間的潤滑劑，符合用戶心理預(yù)期、不打擾用戶，甚至讓用戶幾乎無所察覺的動(dòng)效，才是真正優(yōu)秀的動(dòng)效。

許多創(chuàng)意網(wǎng)站上初見確實(shí)驚艷的動(dòng)效，如果在用戶實(shí)際使用中過度使用，輕則有拖沓之感，重則引起焦躁。這一原則對于旨在讓用戶“買買買”更高效的淘寶而言，尤為重要。

動(dòng)效技法只是基本功，在“不打擾”中體現(xiàn)同理心和精巧的構(gòu)思，是動(dòng)效設(shè)計(jì)更重要的導(dǎo)向。重劍無鋒，大巧不工，與所有Motion designers共勉~~