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

動效設計中的標注規范 - Motion Measurement

注：此文章適合UI設計寶寶參考，研發寶寶也可以參考并順手轉給設計寶寶

本文來聊聊 動效設計標注，先看看我隨手寫的一個情景在線（本故事純屬虛構，如有雷同，那你肯定是個沒有看過這篇文章的設計師）

設計師在做好動效之后，打包炫酷屌炸天的動效預覽.mov和切圖文件.png丟給研發寶寶，轉頭去生成了一張800px*600px文件丟上自己的dribbble主頁。在設計師看著dribbble上的點贊數的同時，研發寶寶正一幀一幀地看丟過去的.mov文件不下100次，等到產品提測，設計師去問測試寶寶要了個release包安裝上看看效果，看完之后點點頭"恩，果然不出所料，研發寶寶的審美也就是這樣了，做出的動畫沒有我的效果那樣看上去流暢，炫酷。沒事可以理解，我司研發寶寶能力就這樣吧，發包上線"

這個情況其實很好理解，在設計師設計動效需求的時候經常出現。主要問題就是在設計師交付給研發寶寶的文件少了一個標注文件。做平面UI標注文件很好做，ps的標注文件可以直接使用pxcook或者其他插件，sketch方法就很多了，我司的Android標注文檔我基本是用Zeplin這個sketch插件，也有其他好的解決方法，后面我會專門寫一篇文章講述AppUI和webUI的標注方法。

話說回來，動效的標注文件應該是怎樣的，很多設計師還是和做靜態UI時候一樣，只是把動畫的其中幾個關鍵頁面做靜態標注。然后讓研發寶寶參照視頻動畫預覽自由發揮，然后剩下的就是設計師用嘴皮子和研發寶寶指點江山。

很顯然這樣并不能準確的把動效描述清楚。比較準確的給UI開發工程師表述自己所做的動畫也是非常重要的一步，這也是決定最終動畫實現質量的決定性因素，沒有一個完整的標注文檔，光靠嘴皮子和研發哥哥交流是很難百分之百做到和自己的動效一致的效果。研發寶寶想要的是你就告訴我這個地方間距幾dp，色值多少，你給我一個含糊的視頻我怎么知道這個動畫一共幾幀，或者第5幀什么狀態？大多設計師不會去研究代碼是怎么實現的，但是在動效設計中簡單理解動效的實現原理對于UI設計師交付輸出一份邏輯清楚，簡單實用的標注文件是很有幫助的。

這里我根據自己做的項目小需求簡單整理了一下。在解釋貝塞爾曲線在設計中的應用的同時，也總結了如何給UI開發工程師交付一份完整、具體、可讀性好的動效標注文件。

動效制作流程

本文我以一個非常簡單的應用開屏引導動畫這個栗子來簡單說明流程。這個動畫是在兩個頁面之間滑動的時候元素位移和透明度發生變化，非常簡單的動畫。

首先看一下我的文檔目錄結構，本篇文章主要講述'motion'這個文件夾里的故事，關于目錄結構我會單獨整理一篇文章，有空再寫吧。

1. 拿到需求文檔

2. 用sketch等軟件設計UI

注意這里，平時在做UI時候盡量規范命名，動效制作這里必須嚴格規范命名，并且能用控件都用控件。類似這種簡單動畫我是用principle來做，principle是可以無縫兼容sketch源文件的，在做動畫的時候他每個畫板之間元素的變化是按照元素名來判斷的，相當于一個元素在項目中必須是只有一個ID。還有一點要注意的是，如果動效頁面不是特別多的情況可以把所有和動效相關的頁面全部放在一個sketch畫板中，這樣在principle中可以更高效的制作動畫。

3. 使用principle制作動畫

制作動畫用到的工具可以根據難易程度和動畫的作用來選擇，AE無疑是動效軟件的老大，但是在一些小的動畫需求中并不需要用這么復雜的軟件去做，principle還是非常容易上手的，操作非常簡單，只需要理解【聯動】和【動效】這兩個時間軸的關系就好。相關教程可以去看官方教程Principle - Learn或者YouTube，國內教程的質量實在是不敢恭維。

4. 導出動畫

這里提一下導出gif的問題，AE里可以使用插件gifgun這個插件，也可以導出動畫視頻之后去這里轉換成gif，可以調整導出gif的質量尺寸幀數等，相對比較好用。Video to animated GIF converter

5. 導出切圖標注文件

這里我是用sketch的插件Zeplin。這個要說一下的是zeplin的標注在網頁和windows客戶端上訪問比較慢，翻啊墻都是不行，估計是zeplin服務器速度硬傷，你也可以選擇使用sketch mesaure一鍵導出切圖文件，缺點就是不能實時在線更新，一旦丟給研發寶寶你在要改標注就比較麻煩，個人感覺還是zeplin相對好用一些。

6. 導出動效標注文件

這里就是本文的重點了，在參考了很多動效標注之后，我用sketch畫了一個簡單的動畫標注模板，其實一般不需用sketch這樣子去設計一個標注文檔，你可以直接使用word或者一些表格制作軟件就能解釋清楚。

簡單解釋一下為什么這么去標注，扯會之前寫的這篇文章，Android/iOS/Web開發中的動效設計與實現文章最前面講到的兩個概念，【動畫】和【過渡】的概念。元素的形狀、位置、大小、顏色、透明度在某段時間產生的變化就是動畫；某個元素在兩個狀態之間是如何變化的稱之為過渡

我們來橫向看這個表格，表格里的'觸發條件'就是用來分解整個動畫，在每個動作觸發時所涉及到的元素稱之為一個'對象元素'，后面就是解釋這些對象分別有哪些屬性在這個'觸發條件'下發生了哪些變化。'貝塞爾曲線數值'就是告訴研發寶寶某個元素在某個時間段變化的緩動曲線，也就是第二個概念【過渡】。

7. 打包設計文件發給研發寶寶

END

下一篇文章我會寫關于設計師的項目目錄結構，本文中有提到。

注：本文轉載請注明原文地址：http://viggoz.com/2017/08/15/2017-08-18-motionMeasurement/

本文參考：

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