工作中如何建立一套有效的動效規范

0 評論 4109 瀏覽 4 收藏 5 分鐘

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

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

 一、記錄

當時愛奇藝 app 中,很多頁面都沒有動效,導致頁面的操作顯得很生硬。

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

因此,要建立一套規范,我要首先摸清楚, app 里到底都需要哪些動效?

于是我開始地毯式搜索。

我走查了 app 里所有主要的頁面,然后在 Excel 表格里,記錄下所有我發現的動效

二、梳理

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

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

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

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

三、參考

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

我仔細研究了谷歌等大廠的動效設計規范,研究他們的規范中,都包含哪些模塊、每個模塊中包含哪些內容。

這個過程,可以讓我很清晰,我的規范應該是怎樣的結構。

四、制定規范

首先定義規范在應用中可以發揮的作用都有哪些,應該遵循的基本原則都有哪些。

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

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

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

最后,因為當時我是負責設計改版的任務,所以還有第五步:

根據規范,把頁面中不符合規范的動效都挑出來,然后發給相應的開發,進行優化。

在這個過程中,由于愛奇藝 app里包含的頁面類型非常多、動效特別復雜,領導也幫我指派了別的設計師來協助我完成。

我作為負責人,制定了整體思路,并進行了任務分配和跟進。

最后組織了 5 位設計師共同完成了這個大工程。這樣的項目,也讓我鍛煉了管理能力。領導對項目的結果很滿意,也讓我開始負責最核心的視頻業務的交互團隊,開啟了我的管理之路。

總結一下,今天為大家介紹了工作中建立一套有效的動效規范的 4 個步驟:

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

本文由人人都是產品經理作者【沐風】,微信公眾號:【沐風的UX充電站】,原創/授權 發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!