經(jīng)驗(yàn)分享！如何準(zhǔn)確的向工程師傳達(dá)動(dòng)效設(shè)計(jì)？(4)

@TCWison （阿里高級(jí)視覺(jué)設(shè)計(jì)師）：隨著軟件與終端的發(fā)展，如今的用戶體驗(yàn)設(shè)計(jì)中動(dòng)效的作用正變得越發(fā)重要，也有越來(lái)越多的設(shè)計(jì)師開(kāi)始嘗試讓自己的作品“動(dòng)”起來(lái)。但在實(shí)際工作中，相信大家常會(huì)有這樣的疑問(wèn)：怎樣才能將自己精心設(shè)計(jì)的動(dòng)態(tài)效果，準(zhǔn)確的傳達(dá)給工程師，避免實(shí)現(xiàn)的偏差呢？下面我想根據(jù)自己的經(jīng)驗(yàn)，拋磚引玉，和大家聊一下這個(gè)話題。

試想一下，在一個(gè)沉靜的的夜晚，你正為一個(gè)界面的過(guò)渡動(dòng)畫(huà)而苦思冥想，突然一道靈感之光穿越你的腦海，完美的方案浮現(xiàn)眼前。此刻你最想做的，恐怕不是翻閱開(kāi)發(fā)文檔研究實(shí)現(xiàn)原理，“老子得立刻把它表現(xiàn)出來(lái)。”

沒(méi)錯(cuò)，我們是設(shè)計(jì)師，設(shè)計(jì)師要做的是可視化。對(duì)于動(dòng)效來(lái)說(shuō)，憑空描述永遠(yuǎn)是隔靴搔癢，將自己心中的設(shè)計(jì)最快速的可視化，是實(shí)現(xiàn)的第一步。

一、準(zhǔn)確展示：視頻Demo

視頻Demo是個(gè)不錯(cuò)的開(kāi)始，一段可以反復(fù)播放并在大部分設(shè)備上均可觀看的視頻，是讓別人快速理解自己想法的最佳媒介。制作視頻Demo，本人最常用的工具是After Effects。AE對(duì)于動(dòng)效的控制與表現(xiàn)能力，至今無(wú)人能出其右，是我心目中最佳的概念設(shè)計(jì)工具。

（不夸張的說(shuō)，通過(guò)對(duì)速度曲線與層級(jí)的控制，AE能實(shí)現(xiàn)你所見(jiàn)過(guò)任何的動(dòng)效）

除視頻外，AE的另一個(gè)優(yōu)勢(shì)是，它輸出的PNG序列幀素材可以直接應(yīng)用到一些PC甚至移動(dòng)端的軟件中，作為實(shí)現(xiàn)效果。

（Andriod L中一些控件動(dòng)畫(huà)的實(shí)現(xiàn)方式，就是通過(guò)程序直接播放設(shè)計(jì)好的序列幀素材）

二、操作體驗(yàn)：交互原型

視頻Demo的局限是無(wú)法交互，而很大一部分動(dòng)效都是在用戶與界面交互時(shí)觸發(fā)的。這部分動(dòng)效的啟動(dòng)時(shí)機(jī)，與手勢(shì)的關(guān)系，僅靠視頻Demo就無(wú)法100%準(zhǔn)確的傳達(dá)了。這時(shí)，如果能有一個(gè)可交互的原型，很多問(wèn)題就會(huì)迎刃而解。

對(duì)于可交互的原型（Prototype），網(wǎng)上已經(jīng)有很多文章在討論，制作工具也五花八門(mén)（Flash、Adobe Edge、Quartz Composer、Keynote、Framer、Pixate、Form…），我們?cè)撊绾芜x擇呢？對(duì)于這個(gè)問(wèn)題，我主要看兩個(gè)點(diǎn)：

制作好的原型是否便于多人分享是否可以直接輸出可用于開(kāi)發(fā)的參數(shù)

基于這兩點(diǎn)，我個(gè)人的第一個(gè)選擇是Flash。

（沒(méi)錯(cuò)，就是Adobe Flash，這個(gè)優(yōu)缺點(diǎn)都很鮮明的軟件）

由于Apple的原因，F(xiàn)lash如今的境況可算是江河日下。但作為一個(gè)動(dòng)效原型工具，它卻有一些獨(dú)特的優(yōu)勢(shì)。

優(yōu)勢(shì) 1：可以直接導(dǎo)入AE生成的序列幀素材。

對(duì)于我這種以AE作為動(dòng)效設(shè)計(jì)起始的人來(lái)說(shuō)，這點(diǎn)太重要了。它意味著無(wú)需任何重復(fù)勞動(dòng)，只需要在Flash中添加一些基于AS3.0的交互代碼，就可以完成原型的制作，并保證自己最初的設(shè)計(jì)思路在原型階段不打折扣的實(shí)現(xiàn)。

（Action Script是可視化很強(qiáng)的一門(mén)語(yǔ)言，結(jié)合AE的素材，你設(shè)計(jì)的動(dòng)效基本可以完美復(fù)現(xiàn)）

優(yōu)勢(shì)2：可以導(dǎo)出.apk或.ipa的安裝包，共享給任何有手機(jī)的人。

由于本人的工作經(jīng)常需要異地溝通，原型的可傳遞性就是個(gè)很關(guān)鍵的需求了（總不能把電腦快遞過(guò)去給人家看吧…）。Flash的打包發(fā)布功能，這時(shí)就派上了用場(chǎng)。做好的原型通過(guò)Air for Android打包一個(gè)apk文件，郵件發(fā)過(guò)去安裝在對(duì)方手機(jī)上，輕松又愉快。

（左一就是通過(guò)Flash打包生成的.apk文件，可以直接復(fù)制到手機(jī)上安裝）

另外一些可關(guān)注的工具，還有Pixate和Form，它們都可以通過(guò)共享工程文件的方式遠(yuǎn)程傳遞，還能通過(guò)官方App將原型投射在手機(jī)上實(shí)時(shí)預(yù)覽，缺點(diǎn)是只能做一些基礎(chǔ)的效果，創(chuàng)新一點(diǎn)兒的就搞不定了，不過(guò)他們都在不斷地迭代更新，尤其是后者，剛被Google收購(gòu)，未來(lái)說(shuō)不定會(huì)有快速的發(fā)展。

我個(gè)人的第二個(gè)工具選擇，是Framer Studio。當(dāng)我把制作好的原型拿給工程師看的時(shí)候，經(jīng)常被問(wèn)到這樣一個(gè)問(wèn)題：“能不能把源碼給我們看一下？”這時(shí)氣氛通常會(huì)比較尷尬，因?yàn)镕lash也好Form也罷，它們制作的原型只能起到演示的作用，而無(wú)法直接生成對(duì)開(kāi)發(fā)有幫助的代碼。此時(shí)，除了報(bào)班現(xiàn)學(xué)Android或iOS開(kāi)發(fā)外，還有沒(méi)有別的辦法呢？答案是：“有！” Framer Studio給了我們一線曙光。

Framer Studio是一個(gè)純編程實(shí)現(xiàn)的原型制作工具，有很強(qiáng)的動(dòng)效實(shí)現(xiàn)能力，它的語(yǔ)言是基于Javas cript衍生出的Coffees cript。雖然語(yǔ)法與AndroidiOS有不小的區(qū)別，但僅就動(dòng)效這塊，很多邏輯是可以共通的。

（Framer的界面，左側(cè)是代碼區(qū)，右側(cè)可以直接看到實(shí)現(xiàn)效果，很方便）

當(dāng)然，它的學(xué)習(xí)成本也會(huì)高一些，不過(guò)當(dāng)你拿著一段Framer的源碼給工程師看的話，當(dāng)中的一些動(dòng)畫(huà)參數(shù)和實(shí)現(xiàn)邏輯，多少能給到他們些實(shí)際的幫助，所以付出和回報(bào)還是成正比的。

另外，如果你專(zhuān)注于iOS平臺(tái)，也可以直接嘗試一下Origami，這是個(gè)由Facebook團(tuán)隊(duì)開(kāi)發(fā)的原型工具，通過(guò)鏈接節(jié)點(diǎn)式的操作，無(wú)需自己寫(xiě)代碼，在它最新的更新中，已經(jīng)支持導(dǎo)出可供iOS和Android使用的代碼

（Origami最新版支持代碼的導(dǎo)出，雖然可用性還有待提升，但絕對(duì)值得持續(xù)關(guān)注）

三、協(xié)助開(kāi)發(fā)：參數(shù)文檔

有了視頻Demo，有了交互原型，相信工程師們已經(jīng)理解你要做什么了，那他們是否就可以愉快的把動(dòng)效實(shí)現(xiàn)了呢？答案是：不一定。一些簡(jiǎn)單的動(dòng)效，工程師或許可以憑經(jīng)驗(yàn)搞定。如果你的動(dòng)效設(shè)計(jì)很復(fù)雜，涉及眾多的參數(shù)與速率變化，那僅憑你的描述與工程師肉眼的感覺(jué)，恐怕要出偏差。這時(shí)，就需要參數(shù)文檔的幫助了。

（譬如這段元素移動(dòng)很復(fù)雜的動(dòng)畫(huà)，工程師即使看明白了，也不一定能準(zhǔn)確的實(shí)現(xiàn)）

想要自己的設(shè)計(jì)能被精確的實(shí)現(xiàn)，就一定要對(duì)實(shí)現(xiàn)的原理有所了解。根據(jù)實(shí)現(xiàn)原理，把對(duì)應(yīng)的參數(shù)精確的寫(xiě)出來(lái)，這就是參數(shù)文檔。對(duì)于動(dòng)效來(lái)說(shuō)，基本參數(shù)無(wú)非這三類(lèi)：

動(dòng)畫(huà)的起始時(shí)間、持續(xù)時(shí)間（duration offset）變化的屬性（rotation position scale alpha）運(yùn)動(dòng)速率（interpolator）

iOS與Android各自的程序語(yǔ)法不太相同，大家可以去官網(wǎng)翻看一下它們的開(kāi)發(fā)者文檔，了解兩者在動(dòng)效實(shí)現(xiàn)上大概的語(yǔ)法格式，然后對(duì)應(yīng)著把這些參數(shù)標(biāo)好，傳遞給工程師，他們就真正可以愉快的開(kāi)發(fā)了。

（分享一下我的Andriod部分文檔，只要能把開(kāi)發(fā)所需的參數(shù)標(biāo)明，格式隨意）

當(dāng)然，開(kāi)發(fā)過(guò)程中少不了和工程師的不斷溝通（一些如像素位置、不同機(jī)型屏幕比例的細(xì)節(jié)，包括可能出現(xiàn)的誤差），換位思考，不能丟給他文檔或demo之后做甩手掌柜，那也是不負(fù)責(zé)任的表現(xiàn)。

總結(jié)：

簡(jiǎn)單的說(shuō)，要想準(zhǔn)確傳達(dá)自己的設(shè)計(jì)可以分三步。

第一步：要快速可視化

你可以選擇任何用的順手的工具，把自己的想法快速準(zhǔn)確的呈現(xiàn)出來(lái)，就已經(jīng)是成功的一半。

第二步：最大限度的還原使用場(chǎng)景

如果是PC端，就在電腦上演示。如果是移動(dòng)端，就在手機(jī)上演示。如果可操作，那最好做可交互的原型，當(dāng)然，是在時(shí)間成本允許的條件下。

第三步：把設(shè)計(jì)參數(shù)化，盡可能減少讓工程師憑感覺(jué)開(kāi)發(fā)的情況

相信我，如果你不希望工程師憑感覺(jué)調(diào)UI顏色，那么動(dòng)效同理。一份精確的文檔，是你專(zhuān)業(yè)性的體現(xiàn)。

最后我想提醒一下，本文提到了很多工具，而工具似乎有能讓人著迷的魔力。所以請(qǐng)注意了，千萬(wàn)不要在追求工具的過(guò)程中迷失了設(shè)計(jì)的本源。電影《夜行者》里有一句臺(tái)詞：“想贏彩票的話，你得先賺夠買(mǎi)彩票的錢(qián)。”同樣，我們是設(shè)計(jì)師，想要工程師實(shí)現(xiàn)出酷炫的動(dòng)效，你得先把它酷炫的設(shè)計(jì)出來(lái)。抓住一切機(jī)會(huì)提升自己的設(shè)計(jì)能力吧！那才是你最寶貴的東西。