我的博客地址：www.viggoz.com

動(dòng)效設(shè)計(jì)中的標(biāo)注規(guī)范 - Motion Measurement

注：此文章適合UI設(shè)計(jì)寶寶參考音五，研發(fā)寶寶也可以參考并順手轉(zhuǎn)給設(shè)計(jì)寶寶

本文來聊聊 動(dòng)效設(shè)計(jì)標(biāo)注奖亚，先看看我隨手寫的一個(gè)情景在線（本故事純屬虛構(gòu)，如有雷同艾船，那你肯定是個(gè)沒有看過這篇文章的設(shè)計(jì)師）

設(shè)計(jì)師在做好動(dòng)效之后，打包炫酷屌炸天的動(dòng)效預(yù)覽.mov和切圖文件.png丟給研發(fā)寶寶高每，轉(zhuǎn)頭去生成了一張800px*600px文件丟上自己的dribbble主頁(yè)屿岂。在設(shè)計(jì)師看著dribbble上的點(diǎn)贊數(shù)的同時(shí)，研發(fā)寶寶正一幀一幀地看丟過去的.mov文件不下100次鲸匿，等到產(chǎn)品提測(cè)爷怀，設(shè)計(jì)師去問測(cè)試寶寶要了個(gè)release包安裝上看看效果，看完之后點(diǎn)點(diǎn)頭"恩带欢，果然不出所料运授，研發(fā)寶寶的審美也就是這樣了，做出的動(dòng)畫沒有我的效果那樣看上去流暢乔煞，炫酷吁朦。沒事可以理解，我司研發(fā)寶寶能力就這樣吧渡贾，發(fā)包上線"

這個(gè)情況其實(shí)很好理解逗宜，在設(shè)計(jì)師設(shè)計(jì)動(dòng)效需求的時(shí)候經(jīng)常出現(xiàn)。主要問題就是在設(shè)計(jì)師交付給研發(fā)寶寶的文件少了一個(gè)標(biāo)注文件。做平面UI標(biāo)注文件很好做纺讲，ps的標(biāo)注文件可以直接使用pxcook或者其他插件擂仍，sketch方法就很多了，我司的Android標(biāo)注文檔我基本是用Zeplin這個(gè)sketch插件刻诊，也有其他好的解決方法防楷，后面我會(huì)專門寫一篇文章講述AppUI和webUI的標(biāo)注方法。

話說回來则涯，動(dòng)效的標(biāo)注文件應(yīng)該是怎樣的复局，很多設(shè)計(jì)師還是和做靜態(tài)UI時(shí)候一樣，只是把動(dòng)畫的其中幾個(gè)關(guān)鍵頁(yè)面做靜態(tài)標(biāo)注粟判。然后讓研發(fā)寶寶參照視頻動(dòng)畫預(yù)覽自由發(fā)揮亿昏，然后剩下的就是設(shè)計(jì)師用嘴皮子和研發(fā)寶寶指點(diǎn)江山。

很顯然這樣并不能準(zhǔn)確的把動(dòng)效描述清楚档礁。比較準(zhǔn)確的給UI開發(fā)工程師表述自己所做的動(dòng)畫也是非常重要的一步角钩，這也是決定最終動(dòng)畫實(shí)現(xiàn)質(zhì)量的決定性因素，沒有一個(gè)完整的標(biāo)注文檔呻澜，光靠嘴皮子和研發(fā)哥哥交流是很難百分之百做到和自己的動(dòng)效一致的效果递礼。研發(fā)寶寶想要的是你就告訴我這個(gè)地方間距幾dp，色值多少羹幸，你給我一個(gè)含糊的視頻我怎么知道這個(gè)動(dòng)畫一共幾幀脊髓，或者第5幀什么狀態(tài)？大多設(shè)計(jì)師不會(huì)去研究代碼是怎么實(shí)現(xiàn)的栅受，但是在動(dòng)效設(shè)計(jì)中簡(jiǎn)單理解動(dòng)效的實(shí)現(xiàn)原理對(duì)于UI設(shè)計(jì)師交付輸出一份邏輯清楚将硝，簡(jiǎn)單實(shí)用的標(biāo)注文件是很有幫助的。

這里我根據(jù)自己做的項(xiàng)目小需求簡(jiǎn)單整理了一下屏镊。在解釋貝塞爾曲線在設(shè)計(jì)中的應(yīng)用的同時(shí)依疼，也總結(jié)了如何給UI開發(fā)工程師交付一份完整、具體而芥、可讀性好的動(dòng)效標(biāo)注文件律罢。

動(dòng)效制作流程

本文我以一個(gè)非常簡(jiǎn)單的應(yīng)用開屏引導(dǎo)動(dòng)畫這個(gè)栗子來簡(jiǎn)單說明流程。這個(gè)動(dòng)畫是在兩個(gè)頁(yè)面之間滑動(dòng)的時(shí)候元素位移和透明度發(fā)生變化棍丐，非常簡(jiǎn)單的動(dòng)畫弟翘。

首先看一下我的文檔目錄結(jié)構(gòu)，本篇文章主要講述'motion'這個(gè)文件夾里的故事骄酗，關(guān)于目錄結(jié)構(gòu)我會(huì)單獨(dú)整理一篇文章，有空再寫吧悦冀。

1. 拿到需求文檔

2. 用sketch等軟件設(shè)計(jì)UI

注意這里趋翻，平時(shí)在做UI時(shí)候盡量規(guī)范命名，動(dòng)效制作這里必須嚴(yán)格規(guī)范命名盒蟆，并且能用控件都用控件踏烙。類似這種簡(jiǎn)單動(dòng)畫我是用principle來做师骗，principle是可以無縫兼容sketch源文件的，在做動(dòng)畫的時(shí)候他每個(gè)畫板之間元素的變化是按照元素名來判斷的讨惩，相當(dāng)于一個(gè)元素在項(xiàng)目中必須是只有一個(gè)ID辟癌。還有一點(diǎn)要注意的是，如果動(dòng)效頁(yè)面不是特別多的情況可以把所有和動(dòng)效相關(guān)的頁(yè)面全部放在一個(gè)sketch畫板中荐捻，這樣在principle中可以更高效的制作動(dòng)畫黍少。

3. 使用principle制作動(dòng)畫

制作動(dòng)畫用到的工具可以根據(jù)難易程度和動(dòng)畫的作用來選擇，AE無疑是動(dòng)效軟件的老大处面，但是在一些小的動(dòng)畫需求中并不需要用這么復(fù)雜的軟件去做厂置，principle還是非常容易上手的，操作非常簡(jiǎn)單魂角，只需要理解【聯(lián)動(dòng)】和【動(dòng)效】這兩個(gè)時(shí)間軸的關(guān)系就好昵济。相關(guān)教程可以去看官方教程Principle - Learn或者YouTube，國(guó)內(nèi)教程的質(zhì)量實(shí)在是不敢恭維野揪。

4. 導(dǎo)出動(dòng)畫

這里提一下導(dǎo)出gif的問題访忿，AE里可以使用插件gifgun這個(gè)插件，也可以導(dǎo)出動(dòng)畫視頻之后去這里轉(zhuǎn)換成gif斯稳，可以調(diào)整導(dǎo)出gif的質(zhì)量尺寸幀數(shù)等海铆，相對(duì)比較好用。Video to animated GIF converter

5. 導(dǎo)出切圖標(biāo)注文件

這里我是用sketch的插件Zeplin平挑。這個(gè)要說一下的是zeplin的標(biāo)注在網(wǎng)頁(yè)和windows客戶端上訪問比較慢游添，翻啊墻都是不行，估計(jì)是zeplin服務(wù)器速度硬傷通熄，你也可以選擇使用sketch mesaure一鍵導(dǎo)出切圖文件唆涝，缺點(diǎn)就是不能實(shí)時(shí)在線更新，一旦丟給研發(fā)寶寶你在要改標(biāo)注就比較麻煩唇辨，個(gè)人感覺還是zeplin相對(duì)好用一些廊酣。

6. 導(dǎo)出動(dòng)效標(biāo)注文件

這里就是本文的重點(diǎn)了，在參考了很多動(dòng)效標(biāo)注之后赏枚，我用sketch畫了一個(gè)簡(jiǎn)單的動(dòng)畫標(biāo)注模板亡驰，其實(shí)一般不需用sketch這樣子去設(shè)計(jì)一個(gè)標(biāo)注文檔，你可以直接使用word或者一些表格制作軟件就能解釋清楚饿幅。

簡(jiǎn)單解釋一下為什么這么去標(biāo)注凡辱，扯會(huì)之前寫的這篇文章，Android/iOS/Web開發(fā)中的動(dòng)效設(shè)計(jì)與實(shí)現(xiàn)文章最前面講到的兩個(gè)概念栗恩，【動(dòng)畫】和【過渡】的概念透乾。元素的形狀、位置、大小乳乌、顏色捧韵、透明度在某段時(shí)間產(chǎn)生的變化就是動(dòng)畫；某個(gè)元素在兩個(gè)狀態(tài)之間是如何變化的稱之為過渡

我們來橫向看這個(gè)表格汉操，表格里的'觸發(fā)條件'就是用來分解整個(gè)動(dòng)畫再来，在每個(gè)動(dòng)作觸發(fā)時(shí)所涉及到的元素稱之為一個(gè)'對(duì)象元素'，后面就是解釋這些對(duì)象分別有哪些屬性在這個(gè)'觸發(fā)條件'下發(fā)生了哪些變化磷瘤。'貝塞爾曲線數(shù)值'就是告訴研發(fā)寶寶某個(gè)元素在某個(gè)時(shí)間段變化的緩動(dòng)曲線芒篷，也就是第二個(gè)概念【過渡】。

7. 打包設(shè)計(jì)文件發(fā)給研發(fā)寶寶

END

下一篇文章我會(huì)寫關(guān)于設(shè)計(jì)師的項(xiàng)目目錄結(jié)構(gòu)梭伐，本文中有提到。

注：本文轉(zhuǎn)載請(qǐng)注明原文地址：http://viggoz.com/2017/08/15/2017-08-18-motionMeasurement/

本文參考：

Principle - Learn
MartinRGB/MTGuideline: Some Design Guideline I made.