UI設計技巧:動效設計需要注意的事項

UI設計技巧:動效設計需要注意的事項 - 網頁設計, 網站設計, 網頁方案, Website Design, 網絡推廣

提起動效(Motion),相信大家都不陌生,市面上大多UI設計都會發現他的身影。但仍有不少人還不清楚,動效的起源與發展,在UI設計中應用場景,以及對產品的重要程度等。下面,小編將不同角度講述,動效的前世今生,希望對大家設計有創意的動效會有所啟發和幫助。

UI設計技巧:動效設計需要注意的事項
UI設計技巧

【動效的起源與發展】

動效設計的發展大致經歷三個階段:傳統動畫(紙筆)→CG動畫(離線渲染)→互動動畫(實時渲染)。

傳統動畫注重理論基礎及紮實的基本功,最典型的就是宮崎駿先生早期的手繪動畫,這張都純手繪製作,所以我們從宮崎駿先生的動畫中可以看到不同於純工業的動畫感覺。

CG動畫是隨着電影與遊戲行業一併發展的,但由於電影的工業化程度太高,技術積累深厚,所以遊戲行業製作動畫的工具與技術都偏向電影那套。不同的是電影使用的是離線渲染,一部短片渲染幾千個小時算是常事;而遊戲則是採用實時渲染,必須保證幀速率,所以遊戲行業最重要的技術核心是「改進遊戲引擎」。

互動動畫想必大家都比較熟悉,就是遊戲、web/app、VR/AR/AI、新媒體等領域的動畫,這篇文章講的就是web/app的動效設計。

【UI設計使用動效的原因】

很多設計產品都會用到動效,但要說到為什麼要用動效,十有八九是因為好看。難道動效除了好看就一無是處:

動效設計的優點一:加強體驗舒適度

UI設計技巧:動效設計需要注意的事項
UI設計技巧

簡單來說就是,利用動效讓用戶更流暢地使用你的產品。具體表現在:

1. 表現層級關係,讓用戶知道界面與界面之間的關係

2. 與用戶手勢結合,讓用戶感覺到自己能控制界面的動向

3. 在某些需要提醒的時候,符合用戶預期出現,並吸引他們的注意力

4. 在用戶預期之外增加驚喜,讓他們能感知產品的生命力,並保持持久的注意力

動效設計的優點二:減弱不可避免的不適感

UI設計技巧:動效設計需要注意的事項
UI設計技巧

雖然很多設計師都致力於將產品打造得更加優秀且完美,但難免會有些無法避免的問題,導致產品的體驗性下降,因此適當增加一些動效有效彌補這些不可避免的不適體驗,譬如:

1. 讓等待變得可視化

2. 用動效提示失敗

3. 利用動效增加界面與界面銜接的連續感

動效設計優點三:不易被察覺的動效

UI設計技巧:動效設計需要注意的事項
UI設計技巧

這些動效由於不容易被發現,普通用戶通常會忽略它們的存在,但很多時候這些小細節讓交互變得更加有趣,如:

1. 為用戶的操作提供有趣的正反饋

2. 去除用戶不再需要的元素

【動效在UI設計的應用場景】

web/app設計中,動效能支持實時交互的本質,創造出像現實生活中人們對物理對象交互一樣的情感,增加用戶的認同感。那麼動效多見於哪些UI設計的應用場景?

① 圖標動效

UI設計技巧:動效設計需要注意的事項
UI設計技巧

圖片動效多適用於APP的產品中,單個持續時間在100ms左右,最長不超過400-500ms。

圖標動效設計注重微弱變化帶來的趣味性及流暢性,常用於狀態反饋及導航引導。

② 界面交互

UI設計技巧:動效設計需要注意的事項
UI設計技巧

web/app的界面交互動效可讓用戶對產品產生深刻的印象,甚至帶來驚喜。此外,界面交互動效還可以幫助用戶減少預判誤差、增加界面層級信息的連貫性、強調界面重要信息的敘述,以及梳理層級清晰關係,以此增加產品的可用性。

③ 插畫動效

UI設計技巧:動效設計需要注意的事項
UI設計技巧

插畫動效常見於APP的引導頁、運營活動、空狀態頁面、錯誤頁面,以及展示型網站等。而在產品設計中,插畫動效一般有兩種形式:視頻或者動態圖片直接加載以及通過技術手段(如SVGA、lottile、apng等)實現。

【動效設計需要注意的事項】

看完上述內容,相信大家對動效設計都有大概的認識,最後小編整理了一些有關動效設計需要注意的事項,為本堂課畫上完美句號。

注意事項一:具備導向功能

UI設計技巧:動效設計需要注意的事項
UI設計技巧

精美的動效設計能使UI設計看起來更加靈動,並適當引導用戶的操作行為,避免用戶在操作過程中感到焦慮、無聊。另外,動效設計應盡量減少額外的圖形化說明,使操作界面更簡潔,更符合用戶的基本訪問需求。

注意事項二:賦予動效情感

UI設計技巧:動效設計需要注意的事項
UI設計技巧

動效和用戶操作之間的關係應該是互補的,好的動效能激發用戶積極的情緒反應,而平滑流暢的動效效果往往能帶給用戶舒適的愉悅感。

注意事項三:避免濫用動效

UI設計技巧:動效設計需要注意的事項
UI設計技巧

合理的動效能為UI設計增添亮點,使他更具吸引力。但界面動效太多容易讓用戶分散注意力,因此設計動效時需把握好這個微妙的平衡。要記住,動效的作用是引起用戶關注,引導用戶操作,而非為了動效而動效。


香港網頁提供一站式數碼營商方案服務,包括、網頁設計、網絡推廣、網頁管理與寄存、系統開發及其它增值服務,全方位滿足客戶的業務需要,歡迎隨時聯絡我們,香港網頁是您開拓網路商機的最佳伙伴。

聯絡電話: 37499734
電郵地址: [email protected]
網址: www.hkweb.com.hk