本文介紹了動(dòng)效設(shè)計(jì)成果物規(guī)范的六個(gè)部分：動(dòng)效Demo，Demo關(guān)鍵幀、觸發(fā)行為、運(yùn)動(dòng)對(duì)象、運(yùn)動(dòng)參數(shù)、運(yùn)動(dòng)曲線。

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

動(dòng)效設(shè)計(jì)本質(zhì)是：界面元素在觸發(fā)源的觸發(fā)下，相關(guān)元素（包括自身）經(jīng)過(guò)一系列的變化，最終靜止的整個(gè)過(guò)程。

整個(gè)動(dòng)效過(guò)程包含了的三個(gè)部分：起因、經(jīng)過(guò)與結(jié)果。動(dòng)效成果物規(guī)范，實(shí)質(zhì)上就是對(duì)這三部分的要求與說(shuō)明。

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

一、 動(dòng)效Demo

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

在所有的Demo格式中，GIF的格式最好，可以實(shí)現(xiàn)一個(gè)Demo的循環(huán)展示，減少了預(yù)覽人員的操作。

在視頻播放器中，單個(gè)視頻多為一次播放，需要設(shè)置才能實(shí)現(xiàn)循環(huán)播放，預(yù)覽人員需要對(duì)每個(gè)視頻進(jìn)行設(shè)置，才能重復(fù)查看一個(gè)動(dòng)畫的效果。

對(duì)于可交互的動(dòng)效文檔，一方面需要對(duì)設(shè)計(jì)方案比較熟悉的人員來(lái)進(jìn)行操作，另一方面，在開(kāi)發(fā)過(guò)程中，該形式的成果也容易漏掉一些細(xì)節(jié)動(dòng)效。因此，可交互的動(dòng)效文檔不適宜直接提供給開(kāi)發(fā)同事，更多的是在動(dòng)效設(shè)計(jì)評(píng)審中使用。

本文以新浪微博的舵式導(dǎo)航的動(dòng)畫效果作為案例進(jìn)行說(shuō)明：

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

二、Demo關(guān)鍵幀

對(duì)于無(wú)限循環(huán)的動(dòng)效Demo，若沒(méi)有明確標(biāo)出動(dòng)效的開(kāi)始與結(jié)束，容易造成混淆。

因此，在文檔中，需標(biāo)明動(dòng)效的起始狀態(tài)，并對(duì)中間幀作以標(biāo)識(shí)，便于明確在最小的動(dòng)效單元中的運(yùn)動(dòng)順序。在明確整體動(dòng)畫效果后，將Demo的關(guān)鍵幀抽離出來(lái)并進(jìn)行標(biāo)識(shí)，可高效的指導(dǎo)開(kāi)發(fā)過(guò)程，同時(shí)實(shí)現(xiàn)文檔的統(tǒng)一性。

Demo關(guān)鍵幀

三、觸發(fā)行為

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

觸發(fā)行為

在當(dāng)前的互聯(lián)網(wǎng)產(chǎn)品中，常見(jiàn)的觸發(fā)源有四種：手指、鼠標(biāo)、鍵盤以及條件觸發(fā)源。

觸發(fā)對(duì)象是界面中觸發(fā)源的作用對(duì)象，是產(chǎn)生整個(gè)動(dòng)效的起點(diǎn)。

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

觸控平臺(tái)的手勢(shì)操作

四、運(yùn)動(dòng)對(duì)象

運(yùn)動(dòng)對(duì)象指的是：觸發(fā)動(dòng)作發(fā)出后，發(fā)生屬性變化的頁(yè)面元素。

其中，屬性包含了形狀、顏色、位置、旋轉(zhuǎn)角度、透明度、大小等。在動(dòng)效設(shè)計(jì)成果物中，可以在頁(yè)面中將運(yùn)動(dòng)對(duì)象通過(guò)序號(hào)標(biāo)識(shí)出來(lái)。

作為其在接下來(lái)的運(yùn)動(dòng)參數(shù)進(jìn)行對(duì)應(yīng)，一方面使成果物更加整潔；另一方面，通過(guò)對(duì)其編號(hào)，可以有效的減少運(yùn)動(dòng)對(duì)象的遺漏，使運(yùn)動(dòng)對(duì)象的表達(dá)更加完整。

運(yùn)動(dòng)對(duì)象

五、運(yùn)動(dòng)參數(shù)

運(yùn)動(dòng)參數(shù)是動(dòng)效過(guò)程的數(shù)據(jù)化的體現(xiàn)形式，是動(dòng)效實(shí)現(xiàn)的基本條件。

因此，在整個(gè)動(dòng)效規(guī)范中，基于統(tǒng)一的時(shí)間起點(diǎn)，將運(yùn)動(dòng)對(duì)象的屬性值一一映射到時(shí)間軸上，形成運(yùn)動(dòng)對(duì)象的運(yùn)動(dòng)參數(shù)表格。

在基于同一時(shí)間起點(diǎn)，繪制出每一個(gè)運(yùn)動(dòng)對(duì)象延遲時(shí)間以及運(yùn)動(dòng)的時(shí)長(zhǎng)，并將不同屬性在起止時(shí)間點(diǎn)標(biāo)識(shí)出來(lái)，使時(shí)間變量與屬性變量對(duì)應(yīng)起來(lái)，使運(yùn)動(dòng)參數(shù)直觀化。

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

運(yùn)動(dòng)參數(shù)

六、運(yùn)動(dòng)曲線

運(yùn)動(dòng)參數(shù)只表現(xiàn)出了運(yùn)動(dòng)對(duì)象的起止時(shí)間、運(yùn)動(dòng)時(shí)長(zhǎng)以及屬性變化的量，但是沒(méi)有展示運(yùn)動(dòng)過(guò)程中的變化。因此，最后需要展示運(yùn)動(dòng)參數(shù)變化的曲線。

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

常見(jiàn)的運(yùn)動(dòng)曲線有五種：直線、緩出、緩入、緩動(dòng)以及彈性運(yùn)動(dòng)。

動(dòng)效過(guò)程的節(jié)奏都是由這五種運(yùn)動(dòng)形式的演變或組合而成，根據(jù)當(dāng)前的開(kāi)發(fā)動(dòng)效庫(kù)，要提供一定的參數(shù)。

不同的開(kāi)發(fā)方式，提供的參數(shù)有所不同，其中一種是提供運(yùn)動(dòng)曲線手柄的坐標(biāo)，彈性曲線提供張力與摩擦力。在AE軟件中，可以根據(jù)插件Flow來(lái)標(biāo)記運(yùn)動(dòng)曲線。

常見(jiàn)的運(yùn)動(dòng)曲線

在案例中，共涉及兩種運(yùn)動(dòng)形式以及演變形式。

例子中的運(yùn)動(dòng)曲線

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

相對(duì)而言，動(dòng)效設(shè)計(jì)的實(shí)現(xiàn)較為簡(jiǎn)單，不管是移動(dòng)端應(yīng)用或是Web應(yīng)用，其常規(guī)的動(dòng)效組件庫(kù)都較為成熟與規(guī)范。

優(yōu)秀的動(dòng)效設(shè)計(jì)不僅僅需要設(shè)計(jì)師在動(dòng)效細(xì)節(jié)的把控與專注，也需要設(shè)計(jì)師將動(dòng)效過(guò)程清晰、明確的參數(shù)化展示出來(lái)。

因此，詳盡的動(dòng)效規(guī)范文檔是推動(dòng)動(dòng)效方案落地的關(guān)鍵因素。

#專欄作家#

弘毅道，公眾號(hào)：UIUX設(shè)計(jì)工作坊，人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注to B業(yè)務(wù)，尤其擅長(zhǎng)后臺(tái)程序界面設(shè)計(jì)，包括需求溝通，原型設(shè)計(jì)以及后期的設(shè)計(jì)評(píng)審等。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議