作為交互設(shè)計的延伸，動效設(shè)計成果物除了提供必要的動效資源、萬能的GIF圖片，也需要提供一些類似“設(shè)計說明”的注釋。這些注釋用來對動效的整個過程進行說明，指導(dǎo)開發(fā)實現(xiàn)動效設(shè)計，特別是在轉(zhuǎn)場類動效中，提供的動效說明文檔就顯得格外重要。

動效設(shè)計本質(zhì)是界面元素在觸發(fā)源的觸發(fā)下，相關(guān)元素（包括自身）經(jīng)過一系列的變化，最終靜止的整個過程。整個動效過程包含了的三個部分：起因、經(jīng)過與結(jié)果。動效成果物規(guī)范，實質(zhì)上就是對這三部分的要求與說明。

成果物規(guī)范主要包含了六部分內(nèi)容，分別是動效Demo，Demo關(guān)鍵幀、觸發(fā)行為、運動對象、運動參數(shù)、運動曲線。

1. 動效Demo

動效Demo是整體動效設(shè)計的展示效果，可以是關(guān)鍵幀動畫、GIF、視頻，也可以是可交互的動效文檔。動效成果物比較適合以單個功能或操作為單元，將動效動畫切割成，減少查看效果時的等待時間。

在所有的Demo格式中，GIF的格式最好?？梢詫崿F(xiàn)一個Demo的循環(huán)展示，減少了預(yù)覽人員的操作。在視頻播放器中，單個視頻多為一次播放，需要設(shè)置才能實現(xiàn)循環(huán)播放，預(yù)覽人員需要對每個視頻進行設(shè)置，才能重復(fù)查看一個動畫的效果。對于可交互的動效文檔，一方面需要對設(shè)計方案比較熟悉的人員來進行操作，另一方面，在開發(fā)過程中，該形式的成果也容易漏掉一些細節(jié)動效。因此，可交互的動效文檔不適宜直接提供給開發(fā)同事，更多的是在動效設(shè)計評審中使用。

本文以新浪微博的舵式導(dǎo)航的動畫效果作為案例進行說明。

新浪微博的導(dǎo)航動效

2. Demo關(guān)鍵幀

對于無限循環(huán)的動效Demo，若沒有明確標出動效的開始與結(jié)束，容易造成混淆。因此在文檔中，需標明動效的起始狀態(tài)，并對中間幀作以標識，便于明確在最小的動效單元中的運動順序。在明確整體動畫效果后，將Demo的關(guān)鍵幀抽離出來并進行標識，可高效的指導(dǎo)開發(fā)過程，同時實現(xiàn)文檔的統(tǒng)一性。

Demo關(guān)鍵幀

3. 觸發(fā)行為

觸發(fā)行為包含三個要素，包括觸發(fā)源、觸發(fā)對象、觸發(fā)方式，在動效規(guī)范文檔中要明確闡述三者的聯(lián)動關(guān)系。

觸發(fā)行為

在當(dāng)前的互聯(lián)網(wǎng)產(chǎn)品中，常見的觸發(fā)源有四種，手指、鼠標、鍵盤以及條件觸發(fā)源。觸發(fā)對象是界面中觸發(fā)源的作用對象，是產(chǎn)生整個動效的起點。

觸發(fā)方式即設(shè)備的操作方式，依據(jù)平臺不同，觸發(fā)方式也不同。觸控設(shè)備的觸發(fā)方式多為手勢操作或感應(yīng)器觸發(fā)等。針對PC電腦而言，觸發(fā)方式多鼠標點擊與鍵盤輸入等；針對電視設(shè)備而言，觸發(fā)方式多為按鍵操作等。

觸控平臺的手勢操作

4. 運動對象

運動對象指的是觸發(fā)動作發(fā)出后，發(fā)生屬性變化的頁面元素。其中，屬性包含了形狀、顏色、位置、旋轉(zhuǎn)角度、透明度、大小等。在動效設(shè)計成果物中，可以在頁面中將運動對象通過序號標識出來，作為其在接下來的運動參數(shù)進行對應(yīng)。一方面使成果物更加整潔；另一方面，通過對其編號，可以有效的減少運動對象的遺漏，使運動對象的表達更加完整。

運動對象

5. 運動參數(shù)

運動參數(shù)是動效過程的數(shù)據(jù)化的體現(xiàn)形式，是動效實現(xiàn)的基本條件。因此，在整個動效規(guī)范中，基于統(tǒng)一的時間起點，將運動對象的屬性值一一映射到時間軸上，形成運動對象的運動參數(shù)表格。在基于同一時間起點，繪制出每一個運動對象延遲時間以及運動的時長，并將不同屬性在起止時間點標識出來，使時間變量與屬性變量對應(yīng)起來，使運動參數(shù)直觀化。

注：根據(jù)動效設(shè)計原則，一般的動效持續(xù)時間不超過0.5s。

運動參數(shù)

6. 運動曲線

運動參數(shù)只表現(xiàn)出了運動對象的起止時間、運動時長以及屬性變化的量，但是沒有展示運動過程中的變化。因此，最后需要展示運動參數(shù)變化的曲線。

運動曲線是動效過程節(jié)奏的體現(xiàn)，也是其質(zhì)量的保證。在完成動效時間的基礎(chǔ)上，標識出其運動的節(jié)奏可以有效的指導(dǎo)開發(fā)對動效過程的表達。

常見的運動曲線有五種，直線、緩出、緩入、緩動以及彈性運動。動效過程的節(jié)奏都是由這五種運動形式的演變或組合而成。根據(jù)當(dāng)前的開發(fā)動效庫，要提供一定的參數(shù)。不同的開發(fā)方式，提供的參數(shù)有所不同，其中一種是提供運動曲線手柄的坐標，彈性曲線提供張力與摩擦力。在AE軟件中，可以根據(jù)插件Flow來標記運動曲線。

常見的運動曲線

在案例中，共涉及兩種運動形式以及演變形式。

例子中的運動曲線

文中所描述的動效設(shè)計成果物規(guī)范，只是最常用的一種，不同的動效制作軟件平臺有不同的參數(shù)表述方式。例如在AE中，可以通過BodyMovie來提供與開發(fā)的資源對接，在這里就不一一介紹。

相對而言，動效設(shè)計的實現(xiàn)較為簡單，不管是移動端應(yīng)用或是Web應(yīng)用，其常規(guī)的動效組件庫都較為成熟與規(guī)范。優(yōu)秀的動效設(shè)計不僅僅需要設(shè)計師在在動效細節(jié)的把控與專注，也需要設(shè)計師將動效過程清晰、明確的參數(shù)化展示出來，因此，詳盡的動效規(guī)范文檔是推動動效方案落地的關(guān)鍵因素。