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

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

 一、記錄

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

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

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

于是我開始地毯式搜索。

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

二、梳理

有了這些「原料」，我就可以開始進(jìn)行梳理了。我對(duì)記錄下來的所有動(dòng)效進(jìn)行歸類。

遇到不能被劃分到已有類別的動(dòng)效，則新立一個(gè)類別，直到所有的動(dòng)效都被歸到某個(gè)類別里。

梳理之后，對(duì)這些類別進(jìn)行確認(rèn)，看一下是否有可以整合的類別。

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

三、參考

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

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

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

四、制定規(guī)范

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

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

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

下面是其中一個(gè)類別的動(dòng)效，詳細(xì)的定義

最后，因?yàn)楫?dāng)時(shí)我是負(fù)責(zé)設(shè)計(jì)改版的任務(wù)，所以還有第五步：

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

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

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

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

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

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