在用戶體驗設(shè)計領(lǐng)域，動效設(shè)計是提升用戶界面活力和交互體驗的重要手段。本文詳細介紹了如何建立一套有效的動效規(guī)范，包括記錄、梳理、參考和制定規(guī)范的四個關(guān)鍵步驟，旨在幫助設(shè)計師和團隊提升動效設(shè)計的專業(yè)性和實用性。

這篇文章，我會以我負責(zé)過的愛奇藝app 的設(shè)計大改版為例，講解我是如何梳理并建立起一套真實有用的動效規(guī)范。

 一、記錄

當時愛奇藝 app 中，很多頁面都沒有動效，導(dǎo)致頁面的操作顯得很生硬。

另外，也有很多動效，明明是同一種，但在不同的頁面，它們卻長得不一樣。

因此，要建立一套規(guī)范，我要首先摸清楚， app 里到底都需要哪些動效？

于是我開始地毯式搜索。

我走查了 app 里所有主要的頁面，然后在 Excel 表格里，記錄下所有我發(fā)現(xiàn)的動效

二、梳理

有了這些「原料」，我就可以開始進行梳理了。我對記錄下來的所有動效進行歸類。

遇到不能被劃分到已有類別的動效，則新立一個類別，直到所有的動效都被歸到某個類別里。

梳理之后，對這些類別進行確認，看一下是否有可以整合的類別。

通過以上步驟，我明確了 app 里需要的所有的動效類別。

三、參考

有了類別，我需要對每個類別的規(guī)范進行定義。就跟平時我們做設(shè)計，都需要競品分析一樣，做設(shè)計規(guī)范，也需要這一步。

我仔細研究了谷歌等大廠的動效設(shè)計規(guī)范，研究他們的規(guī)范中，都包含哪些模塊、每個模塊中包含哪些內(nèi)容。

這個過程，可以讓我很清晰，我的規(guī)范應(yīng)該是怎樣的結(jié)構(gòu)。

四、制定規(guī)范

首先定義規(guī)范在應(yīng)用中可以發(fā)揮的作用都有哪些，應(yīng)該遵循的基本原則都有哪些。

然后，根據(jù)第 2 步里梳理得到的動效類別，逐個進行定義。

這樣就得到了一套真正能落地的、對我們的 app 最適用的動效規(guī)范。

下面是其中一個類別的動效，詳細的定義

最后，因為當時我是負責(zé)設(shè)計改版的任務(wù)，所以還有第五步：

根據(jù)規(guī)范，把頁面中不符合規(guī)范的動效都挑出來，然后發(fā)給相應(yīng)的開發(fā)，進行優(yōu)化。

在這個過程中，由于愛奇藝 app里包含的頁面類型非常多、動效特別復(fù)雜，領(lǐng)導(dǎo)也幫我指派了別的設(shè)計師來協(xié)助我完成。

我作為負責(zé)人，制定了整體思路，并進行了任務(wù)分配和跟進。

最后組織了 5 位設(shè)計師共同完成了這個大工程。這樣的項目，也讓我鍛煉了管理能力。領(lǐng)導(dǎo)對項目的結(jié)果很滿意，也讓我開始負責(zé)最核心的視頻業(yè)務(wù)的交互團隊，開啟了我的管理之路。

總結(jié)一下，今天為大家介紹了工作中建立一套有效的動效規(guī)范的 4 個步驟：

1. 記錄所有動效
2. 梳理動效類型
3. 參考大廠規(guī)范?
4. 制定動效規(guī)范