POST TIME:2018-12-03 21:02
1. 為什么需要動效設計?
什么是動效設計?
動效在產品設計的作用
動效設計的好尺度
2. 如何設計動效?
6 個構思動效的方法
6 個實現動效的方法
3. 動效的類別
4. 常用的動效軟件
5. 讓動效落地的 4 個方法
為什么需要設計動效?我最開始接觸動效設計,只是覺得又炫,又酷,翻滾的,旋轉的,爆炸的。只是覺得新鮮,好玩,,可以炫技。可以讓設計更加酷炫。可能大部分同學,在做剛開始接觸的時候多多少少都會有和我差不久不多的想法。這就是我們做動效設計的目的嗎?應該不是。
解決為什么要做動效設計這個問題,就要搞清楚什么是動效設計?動效設計有什么作用?
1. 什么是動效設計呢?
動效大范圍興起,大概始于扁平化設計之后,扁平化設計的好處在于用戶的注意力可以集中在界面的核心信息上,將對用戶無效的設計元素去掉,不被設計所打擾分散注意力,使用體驗更加純粹自然。這個思路是對的,回歸了產品設計的素質,就是提供更好的使用體驗,而不是提供更標致的界面設計。但是,過于扁平化的設計,也帶來了新的問題,一些復雜層級關系如何展現?用戶如何被引導和吸引?這與用戶在現實3D世界中的自然感受很紛歧致。所以Google推出了Material Design設計語言。
Material design 設計規范中,將動效設計這一章命名為「Animation」,動畫,活潑的意思。
動詞 Animate 是「賦予生命」的意思,動效可以定義為使用類似動畫的手法,賦予界面生命和活力。
前面我們說過Material design設計語言,一部分作用是為了解決過于扁平化設計所帶來的毛病,復雜層級關系如何展現,用戶如何被引導和代入。為了解決這個問題,Material design 設計風格,充分利用Z軸,通過分層設計以及動效相配合的方式,在扁平化基礎上提供給用戶更好理解的層級關系,賦予設計以情感增加用戶使用過程中的參與度。
2. 動效設計對于產品設計有什么作用?
動效設計的作用
如上圖所示,動效對于產品設計的作用包羅:
傳遞層級信息 ;
傳遞狀態信息;
提示隱藏信息功能;
傳遞情感化信息。
知道了這些,那么,我們為什么需要動效設計?
通過上面說的,結合我們自身產品設計的特性,我們可以總結出動效設計的動機主要有如下幾點:
使等待不枯燥;
使變革不生硬;
使反饋不僅調;
使體驗有情感;
使用戶更愉悅。
好的動效是什么?知道為什么做動效設計,那我們應該做什么樣的動效設計?或者說好的動效設計是什么呢?是炫酷的,翻滾的,旋轉的,爆炸的嗎? 復雜程度是評判好與壞的尺度嗎?
國外一位著名的一線設計師,曾經在分享會上對于好的動效下過這樣一個定義:
好的動效應該是隱形的,好的動效應該是以提高可用性為前提,而且以令人覺得自然含蓄的方式提供有效用戶反饋的一種機制。
這句話其實就是,好的動效設計是合適的,是對于用戶使用體驗的提升,最終辦事的是體驗而不是展示你的動畫設計。
既然如此 ,那么讓我們總結一下好的動效設計的尺度。
首先要具備一下幾點特性:
快速且流暢;
恰到好處的反饋;
提升操作感受;
提供良好的視覺效果。
動效設計尺度
其次,好的動效設計應該是首先辦事于體驗,其次適當設計(考慮全面,如性能,實現成本,是否干擾用戶等),再次就是要讓用戶感受到你輸出的情感互動,最后也是最基本的就是要具有視覺上的美感。