在使用者體驗設計領域，動效設計是提升使用者界面活力和互動體驗的重要手段。本文詳細介紹了如何建立一套有效的動效規範，包括記錄、梳理、參考和制定規範的四個關鍵步驟，旨在幫助設計師和團隊提升動效設計的專業性和實用性。
這篇文章，我會以我負責過的愛奇藝app 的設計大改版為例，講解我是如何梳理并建立起一套真實有用的動效規範。
一、記錄
當時愛奇藝 app 中，很多頁面都沒有動效，導緻頁面的操作顯得很生硬。
另外，也有很多動效，明明是同一種，但在不同的頁面，它們卻長得不一樣。
是以，要建立一套規範，我要首先摸清楚， app 裡到底都需要哪些動效？
于是我開始地毯式搜尋。
我走查了 app 裡所有主要的頁面，然後在 Excel 表格裡，記錄下所有我發現的動效
二、梳理
有了這些「原料」，我就可以開始進行梳理了。我對記錄下來的所有動效進行歸類。
遇到不能被劃分到已有類别的動效，則新立一個類别，直到所有的動效都被歸到某個類别裡。
梳理之後，對這些類别進行确認，看一下是否有可以整合的類别。
通過以上步驟，我明确了 app 裡需要的所有的動效類别。
三、參考
有了類别，我需要對每個類别的規範進行定義。就跟平時我們做設計，都需要競品分析一樣，做設計規範，也需要這一步。
我仔細研究了谷歌等大廠的動效設計規範，研究他們的規範中，都包含哪些子產品、每個子產品中包含哪些内容。
這個過程，可以讓我很清晰，我的規範應該是怎樣的結構。
四、制定規範
首先定義規範在應用中可以發揮的作用都有哪些，應該遵循的基本原則都有哪些。
然後，根據第 2 步裡梳理得到的動效類别，逐個進行定義。
這樣就得到了一套真正能落地的、對我們的 app 最适用的動效規範。
下面是其中一個類别的動效，詳細的定義
最後，因為當時我是負責設計改版的任務，是以還有第五步：
根據規範，把頁面中不符合規範的動效都挑出來，然後發給相應的開發，進行優化。
在這個過程中，由于愛奇藝 app裡包含的頁面類型非常多、動效特别複雜，上司也幫我指派了别的設計師來協助我完成。
我作為負責人，制定了整體思路，并進行了任務配置設定和跟進。
最後組織了 5 位設計師共同完成了這個大工程。這樣的項目，也讓我鍛煉了管理能力。上司對項目的結果很滿意，也讓我開始負責最核心的視訊業務的互動團隊，開啟了我的管理之路。
總結一下，今天為大家介紹了工作中建立一套有效的動效規範的 4 個步驟：
本文由人人都是産品經理作者【沐風】，微信公衆号：【沐風的UX充電站】，原創/授權 釋出于人人都是産品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協定。