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

簡單說就是設計師交付給研發的一套，以還原實際動畫效果為目的的高效便捷的標注系統。

更多干貨：

這個系統已經在我從事過的互聯網公司中 toB 和 toC 不同項目的桌面端及移動端，在動效交付實踐過程中得到了多年有效的驗證。之前在 Figma 就已經完成了組件化，后續還會繼續優化，目前已經滿足大部分動效交付的場景，得益于 Figma 的在線組件系統，所以目前我也將它稱為一個相對成熟的“系統”，因為早期是一個較為簡陋的版本，這次更新優化了視覺組件的細節等等，因此升級為了 Polyphony 2.0，之前一直沒有想到可以分享這個系統，最近更新后就覺得分享出來能幫助到需要的人是非常有價值的一件事情。

下面就具體介紹一下這個系統和使用方法，其實非常簡單，只不過有些地方我會多做一些標記說明。

目前已公開到 Figma 社區，保留原創設計的權利，可以直接在 Figma 社區中的鏈接地址點擊查看。

一、什么是 Polyphony 動效標注交付系統?

這套系統可以在不同的交互動效設計軟件中，將相應動畫的關鍵具體參數，快速、清晰地展示出來，減少在動畫實現過程中的高溝通成本，并且可以將產品內固定參數的動畫更新到 Figma 的設計系統中（如果有對應的設計系統）。

二、Polyphony 動效標注的優點

上圖中左側為頁面中交互動效變化的不同對象標記，右側為對應的不同對象具體動效參數，時間軸中同一 ms 數開始運動的對象為縱向排列，這樣可以將每個對象的動效參數在一個“較小的面板”中展示出來，并在一個時間節點中可以直觀的看到涉及的動效對象。

1. Polyphony 優點是：

1. 每個對象的運動參數在視覺上可讀性較高。
2. 不同對象在對應的時間節點相對直觀。
3. 對象標簽在設計稿與動效標注中一一對應，容易查找。
4. 涉及的可實現文件可在對象標簽下添加鏈接方便直接下載。
5. 觸發條件以及備注說明讓動效交付避免很多溝通成本。

2. 面板細節

三、市面上傳統 “AE 式”時間軸交付方法的缺點

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

1. “AE 式”時間軸的缺點體現：

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

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

四、Polyphony 動效標注系統面板拆解

1. 對象標記面板拆解

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

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

標記的標簽目前分為：

1. 框型
2. 線型

2. 動效參數面板拆解

動效參數面板包括，一個時間軸以及時間節點下包含的所有對象面板。

3. 對象面板內的參數分別有：

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

面板中“對象”區塊

4. 對象面板 - 區塊拆解包括：

1. 時間軸的起始 ms 數值
2. 對象名稱
3. 可執行動畫格式標簽
4. 運動說明
5. 可執行文件名
6. 文件下載地址

面板中“總時長”區塊

5. 對象面板 - 區塊拆解包括：

總時長

6. 對象面板 - 區塊拆解包括：

1. 不同屬性的參數
2. 不同參數的具體數值
3. 用于區分不同屬性的參數分割條

7. 對象面板 - 區塊拆解包括：

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

五、Polyphony 使用說明

1. 對象標記面板 - 使用說明

對象標記面板中目前兩類標記方式：線型、框型，可根據不同需要采用對應的標記組件，如需要轉折線等可以靈活自定義標記。

1. 首先羅列設計稿前后頁面的變化
2. 標記涉及動效的對象

2. 動效參數面板- 使用說明

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

3. 面板使用的小技巧

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

4. 多個設計稿場景

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

六、AE 的參數導出插件

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

具體使用安裝方式請點擊跳轉下載插件

七、未來計劃

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

如果你遇到什么問題，或者任何有關于“設計”的，都可以添加我的微信一起交流。