Material Design-Motion1（譯）

在Material Design的世界裡，動效是用來表現美麗流暢的空間關係和功能意圖的。

為何動效如此重要？

動效能夠顯示一款APP是如何構成的，以及它能夠做什麼？

動效能夠給你提供：

• 引導用戶的視覺焦點
• 當用戶完成操作時，向他們展示會發生的事件
• 展示元素之間的層級和空間關係
• 提供屏幕後所發生事情的線索（比如內容的獲取，載入下一視圖）
• 獨特，考究，愉悅

Material是如何運動的？

Material的環境來源於真實的世界，比如重力，摩擦。而這些都會反映到用戶在屏幕上對元素的點擊以及這些元素會如何反饋用戶的操作。

及時反饋

Material充滿了能量。它可以迅速反饋用戶的點擊操作。

在移動設備中，長動效一般是300-400ms.小動效是150-200ms之間。動效時間長於或短於這些都會讓用戶覺得遲鈍或難於理解。

https://www.zhihu.com/video/895626240013238272

當用戶進行點擊時，卡片會從觸摸點立即產生漣漪效果。卡片的升高代表了其處於點擊狀態。

https://www.zhihu.com/video/895627014114021376

顯示新的頁面層級與元素或行為的關係。

自然

基於真實的世界，Material可以表現出自然的運動狀態。

https://www.zhihu.com/video/895639868783337472

在真實的世界中，由於受到重力和摩擦，一個元素可以快速加速和緩慢的減速。同樣，開始和結束在Material中不會立即生硬的出現。

https://www.zhihu.com/video/895640013914648576

基於真實世界中的地心引力，一個元素的運動軌跡不會是直線，而是弧形的。

https://www.zhihu.com/video/895640398607831040

Material的變換遵循弧形的運動軌跡。

https://www.zhihu.com/video/895640487489339392

當一個新元素進入屏幕，它和它周圍的環境會以定義它們關係的方式來進行安排。

https://www.zhihu.com/video/895640579759816704

可以擠開其它元素。

https://www.zhihu.com/video/895640648261197824

當一個元素接近另一個元素，它可以吸收它們。

有意義的

在正確的時出現在正確的位置。

https://www.zhihu.com/video/895640875231756288

流暢的過渡可以指導用戶進行下一步交互。

動效可以傳達不同的信號，比如說一個操作是無法完成的。

動效可以引導用戶的注意力。

推薦閱讀：