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