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

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

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

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

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

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

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

二、Polyphony 動效標注的優(yōu)點

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

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

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

2. 面板細節(jié)

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

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

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

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

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

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

1. 對象標記面板拆解

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

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

標記的標簽目前分為：

1. 框型
2. 線型

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

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

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

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

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

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

1. 時間軸的起始 ms 數(shù)值
2. 對象名稱
3. 可執(zhí)行動畫格式標簽
4. 運動說明
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. 對象標記面板 - 使用說明

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

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

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

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

3. 面板使用的小技巧

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

4. 多個設計稿場景

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

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

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

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

七、未來計劃

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

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

Milessssss