高效免費(fèi)！超好用的動效落地交付解決方案 Polyphony 2.0

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

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

更多干貨：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 框型
2. 線型

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

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

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

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

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

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

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

面板中“總時長”區(qū)塊

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

總時長

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

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

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

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

五、Polyphony 使用說明

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

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

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

2. 動效參數(shù)面板- 使用說明

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

3. 面板使用的小技巧

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

4. 多個設(shè)計(jì)稿場景

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

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

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

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

七、未來計(jì)劃

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

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