Hello, 大家好！給大家免費(fèi)分享一下我多年以來(lái)原創(chuàng)使用的一套動(dòng)效交付的解決方案。

簡(jiǎn)單說(shuō)就是設(shè)計(jì)師交付給研發(fā)的一套，以還原實(shí)際動(dòng)畫(huà)效果為目的的高效便捷的標(biāo)注系統(tǒng)。

這個(gè)系統(tǒng)已經(jīng)在我從事過(guò)的互聯(lián)網(wǎng)公司中 toB 和 toC 不同項(xiàng)目的桌面端及移動(dòng)端，在動(dòng)效交付實(shí)踐過(guò)程中得到了多年有效的驗(yàn)證。之前在 Figma 就已經(jīng)完成了組件化，后續(xù)還會(huì)繼續(xù)優(yōu)化，目前已經(jīng)滿足大部分動(dòng)效交付的場(chǎng)景，得益于 Figma 的在線組件系統(tǒng)，所以目前我也將它稱為一個(gè)相對(duì)成熟的“系統(tǒng)”，因?yàn)樵缙谑且粋€(gè)較為簡(jiǎn)陋的版本，這次更新優(yōu)化了視覺(jué)組件的細(xì)節(jié)等等，因此升級(jí)為了 Polyphony 2.0，之前一直沒(méi)有想到可以分享這個(gè)系統(tǒng)，最近更新后就覺(jué)得分享出來(lái)能幫助到需要的人是非常有價(jià)值的一件事情。

下面就具體介紹一下這個(gè)系統(tǒng)和使用方法，其實(shí)非常簡(jiǎn)單，只不過(guò)有些地方我會(huì)多做一些標(biāo)記說(shuō)明。

目前已公開(kāi)到 Figma 社區(qū)，保留原創(chuàng)設(shè)計(jì)的權(quán)利，可以直接在 Figma 社區(qū)中的鏈接地址點(diǎn)擊查看。

一、什么是 Polyphony 動(dòng)效標(biāo)注交付系統(tǒng)?

這套系統(tǒng)可以在不同的交互動(dòng)效設(shè)計(jì)軟件中，將相應(yīng)動(dòng)畫(huà)的關(guān)鍵具體參數(shù)，快速、清晰地展示出來(lái)，減少在動(dòng)畫(huà)實(shí)現(xiàn)過(guò)程中的高溝通成本，并且可以將產(chǎn)品內(nèi)固定參數(shù)的動(dòng)畫(huà)更新到 Figma 的設(shè)計(jì)系統(tǒng)中（如果有對(duì)應(yīng)的設(shè)計(jì)系統(tǒng)）。

二、Polyphony 動(dòng)效標(biāo)注的優(yōu)點(diǎn)

上圖中左側(cè)為頁(yè)面中交互動(dòng)效變化的不同對(duì)象標(biāo)記，右側(cè)為對(duì)應(yīng)的不同對(duì)象具體動(dòng)效參數(shù)，時(shí)間軸中同一 ms 數(shù)開(kāi)始運(yùn)動(dòng)的對(duì)象為縱向排列，這樣可以將每個(gè)對(duì)象的動(dòng)效參數(shù)在一個(gè)“較小的面板”中展示出來(lái)，并在一個(gè)時(shí)間節(jié)點(diǎn)中可以直觀的看到涉及的動(dòng)效對(duì)象。

1. Polyphony 優(yōu)點(diǎn)是：

1. 每個(gè)對(duì)象的運(yùn)動(dòng)參數(shù)在視覺(jué)上可讀性較高。
2. 不同對(duì)象在對(duì)應(yīng)的時(shí)間節(jié)點(diǎn)相對(duì)直觀。
3. 對(duì)象標(biāo)簽在設(shè)計(jì)稿與動(dòng)效標(biāo)注中一一對(duì)應(yīng)，容易查找。
4. 涉及的可實(shí)現(xiàn)文件可在對(duì)象標(biāo)簽下添加鏈接方便直接下載。
5. 觸發(fā)條件以及備注說(shuō)明讓動(dòng)效交付避免很多溝通成本。

2. 面板細(xì)節(jié)

三、市面上傳統(tǒng) “AE 式”時(shí)間軸交付方法的缺點(diǎn)

目前除了我通過(guò) AE 插件生成參數(shù)摸索出來(lái)的這套原創(chuàng) Polyphony 動(dòng)效標(biāo)注以外，市面上很早之前就有一套 “AE 時(shí)間軸式”的標(biāo)注方法，這種方法看起來(lái)參數(shù)較為全面，但實(shí)際無(wú)論是閱讀效率，還是不同節(jié)點(diǎn)中對(duì)象發(fā)生的變化都不夠直觀，所以也是我在研究動(dòng)效交付方案中設(shè)計(jì)新系統(tǒng)的原因之一。

1. “AE 式”時(shí)間軸的缺點(diǎn)體現(xiàn)：

1. 以對(duì)象進(jìn)行交互說(shuō)明，而不應(yīng)該以觸發(fā)方式。
2. 實(shí)際項(xiàng)目時(shí)間軸跨度較大橫向閱讀體驗(yàn)非常差，圖中僅僅是理想狀態(tài)。
3. 不同對(duì)象的屬性變化無(wú)區(qū)分，閱讀時(shí)也容易看錯(cuò)行。
4. 當(dāng)備注或其他屬性參數(shù)過(guò)長(zhǎng)會(huì)導(dǎo)致整個(gè)面板空白較多閱讀效率較低。
5. 表格新增內(nèi)容會(huì)涉及單元格的變化，制作與維護(hù)成本都較高。

這種 UI 方式較為符合設(shè)計(jì)人員在軟件的設(shè)計(jì)中，但對(duì)于交付研發(fā)的具體參數(shù)，有諸多限制。

四、Polyphony 動(dòng)效標(biāo)注系統(tǒng)面板拆解

1. 對(duì)象標(biāo)記面板拆解

對(duì)象標(biāo)簽面板包括，設(shè)計(jì)稿中一個(gè)完整的頁(yè)面切換，或交互后的元素變化中涉及到的所有不同對(duì)象，一般來(lái)講都是頁(yè)面變化前和變化后的對(duì)比，目的是交付給研發(fā)時(shí)，能夠直觀看到有哪些元素需要實(shí)現(xiàn)動(dòng)效。

此組件由于目前 Figma 的一些限制，標(biāo)記可以靈活采用各種形式的線，而不僅僅受限目前的標(biāo)記組件。

標(biāo)記的標(biāo)簽?zāi)壳胺譃椋?/p>

1. 框型
2. 線型

2. 動(dòng)效參數(shù)面板拆解

動(dòng)效參數(shù)面板包括，一個(gè)時(shí)間軸以及時(shí)間節(jié)點(diǎn)下包含的所有對(duì)象面板。

3. 對(duì)象面板內(nèi)的參數(shù)分別有：

1. 對(duì)象標(biāo)簽（或帶有可執(zhí)行動(dòng)畫(huà)文件格式，例如 PAG、Lottie 的 Json 等）
2. 包含可執(zhí)行動(dòng)畫(huà)文件的名稱和下載鏈接
3. 對(duì)象標(biāo)簽運(yùn)動(dòng)說(shuō)明（例如上移或出現(xiàn)等）
4. 每個(gè)對(duì)象的運(yùn)動(dòng)總時(shí)長(zhǎng)
5. 每個(gè)對(duì)象包含的所有屬性和具體參數(shù)
   每個(gè)對(duì)象的觸發(fā)條件
6. 每個(gè)對(duì)象的額外說(shuō)明

面板中“對(duì)象”區(qū)塊

4. 對(duì)象面板 - 區(qū)塊拆解包括：

1. 時(shí)間軸的起始 ms 數(shù)值
2. 對(duì)象名稱
3. 可執(zhí)行動(dòng)畫(huà)格式標(biāo)簽
4. 運(yùn)動(dòng)說(shuō)明
5. 可執(zhí)行文件名
6. 文件下載地址

面板中“總時(shí)長(zhǎng)”區(qū)塊

5. 對(duì)象面板 - 區(qū)塊拆解包括：

總時(shí)長(zhǎng)

6. 對(duì)象面板 - 區(qū)塊拆解包括：

1. 不同屬性的參數(shù)
2. 不同參數(shù)的具體數(shù)值
3. 用于區(qū)分不同屬性的參數(shù)分割條

7. 對(duì)象面板 - 區(qū)塊拆解包括：

1. 不同的觸發(fā)條件
2. 觸發(fā)的對(duì)象或操作
3. 額外說(shuō)明

五、Polyphony 使用說(shuō)明

1. 對(duì)象標(biāo)記面板 - 使用說(shuō)明

對(duì)象標(biāo)記面板中目前兩類標(biāo)記方式：線型、框型，可根據(jù)不同需要采用對(duì)應(yīng)的標(biāo)記組件，如需要轉(zhuǎn)折線等可以靈活自定義標(biāo)記。

1. 首先羅列設(shè)計(jì)稿前后頁(yè)面的變化
2. 標(biāo)記涉及動(dòng)效的對(duì)象

2. 動(dòng)效參數(shù)面板- 使用說(shuō)明

1. 在動(dòng)效參數(shù)面板中按照出現(xiàn)時(shí)間將對(duì)應(yīng)對(duì)象依次排布
2. 涉及同一開(kāi)始時(shí)間的對(duì)象縱向排列即可
3. 對(duì)象動(dòng)效參數(shù)面板中的屬性欄目可以直接 Ctrl/Cmd + D 復(fù)制后進(jìn)行增刪

3. 面板使用的小技巧

先按住 Cmd 鼠標(biāo)進(jìn)行“透選”，選中一個(gè)組件后，松開(kāi) Cmd 鼠標(biāo)即可自由選擇同一層級(jí)的其它組件。

4. 多個(gè)設(shè)計(jì)稿場(chǎng)景

每個(gè)交互動(dòng)效的標(biāo)注都分為上圖中左右兩個(gè)面板，當(dāng)有多個(gè)新頁(yè)面的動(dòng)效標(biāo)注時(shí)，縱向羅列即可。

六、AE 的參數(shù)導(dǎo)出插件

在 AE 中可以使用一個(gè)插件快捷復(fù)制具體參數(shù)，其它動(dòng)效設(shè)計(jì)軟件中好像暫時(shí)沒(méi)有相關(guān)插件，不過(guò)作為動(dòng)效交付具體參數(shù)還是比較容易填寫的。

具體使用安裝方式請(qǐng)點(diǎn)擊跳轉(zhuǎn)下載插件

七、未來(lái)計(jì)劃

未來(lái)會(huì)不斷優(yōu)化動(dòng)效標(biāo)注組件，如果大家在使用中有任何問(wèn)題或建議都可以聯(lián)系我或評(píng)論留言，如果能幫助到你在團(tuán)隊(duì)中提高動(dòng)效交付的效率，那么它就是有價(jià)值的。

如果你遇到什么問(wèn)題，或者任何有關(guān)于“設(shè)計(jì)”的，都可以添加我的微信一起交流。

Milessssss