設計師如何定義 UI 里的動態效果？效果背後的邏輯又應該是怎樣的？

大家這幾年開始對動效設計(Transitions)的重視程度慢慢提高，一方面是用戶們對這一方面的要求和期待越來越高，另一方面，動效也為UI設計提供了另一個緯度，讓很多靠靜態的平面設計很難處理的問題得到優雅的解決。甚至有很多優秀的APP都是靠獨樹一幟的動效設計得以脫穎而出的（Flipboard, Path, Paper By 53, Storehouse）。這些APP的動效設計和整個app高度整合，可以想像他們是在被設計之初就已經被考慮在內了，而不是在做完所有靜態設計之後加上去的一點噱頭。

所以設計師是如何定義這些動效的？在講這個問題之前，我想先引用一下Disney公司在上世紀30年代就已經總結出來12條原則。設計師Cento Lodigiani把這些法則做了生動的演示，大家有興趣可以先看下。https://vimeo.com/93206523

我想在此提幾個我認為最重要的。所有的12個原則可以去這裡看（原文 12 basic principles of animation）：1，擠壓和伸展（Squash Stretch）。想像貓和老鼠裡面各種人物落地時候的樣子。2，預備動作（Anticipation）。從一個動作到下一個動作之間，角色往往會做一些預備的動作。比如人在起跳前先要微微下蹲，要向前出拳時先要往後拉伸等等。3，跟隨動作（Follow Through）。因為慣性，自然運動一般都不會驟然停止。4，漸入漸出。也是類似前一點，自然的運動都是有過渡的。5，弧線。生物移動的軌跡大多是帶弧線的，而很少有直線的機械軌跡。6，附屬運動（Secondary Action）。比如跑步時候頭髮和衣服也會跟著軀幹擺動，而這些細節的缺失會讓主體的運動顯得僵硬。7，時機控制（Timing）所有跟時間相關的媒體，Timing都是非常非常重要的。動作的先後順序，持續長短，差別零點幾秒就會造成非常大的感官差異。

現在回到做UI的部分。雖然Apple也許開啟了UI上大量運用模擬的動效的先河，但我覺得關於這方面定義最完整清晰的還是google今年發布的Material Design設計規範：

http://www.google.com/design/spec/animation/authentic-motion.html

規範裡面提到的很多點其實和Disney的原則是一致的。比如Mass Weight，基本講的就是屏幕上的物體在移動的時候要有重量感，要有加速，減速和慣性，避免線性的移動等等。

所以做UI的動效，有相當一部分的原則和傳統動畫是相通的。

但是，在做motion graphic類的動畫時，大多數時間追求的會是視覺刺激的豐富性和層次感，但做UI的動效，主要目的是為了更好的解釋軟體的邏輯，空間關係，層次和架構。本來用靜態需要很久才能讓人明白的東西，通過0.2秒的動作讓你明白。目的不同，手法也會有差別。所以在Material Design的規範里也有很多他們自己的東西，比如Responsive Interacition和Meaningful Transitions章節提到的那些，基本都是為了讓用戶可以理解他們的隱喻（Metaphor），快速掌握UI背後的邏輯的。比如ios長按圖標後刪除的動作，會讓那些圖標開始抖動。這很直白的告訴了使用者現在它們處在一個鬆動的狀態，所以你可以隨意移動它們。

所以我們在設計定義UI的動效時，最先考慮的就是整個UI的空間、層級，和邏輯上的相互關係，以及需要帶給用戶的主觀感受，來賦予它一個合適的隱喻和原則。接下來，我們還要考慮這些動效出現的時機、頻率和作用，以確定動效的類型和持續長短。

先拋磚講這麼多。另外網上也有很多同學做了很好的總結，下面是兩個比較有名的：

Motion Ui Design Principles

http://www.ui-transitions.com （好像暫時不能訪問）

動效流行了一段時間，並且仍在流行，看到許多同學為了動效而動效，陷入了炫酷屌炸天的陷阱了，更令人鬱悶的是，竟然總是能獲得大把的贊，因此，有一段時間我也在想這個問題——何時需要動效、怎樣的動效可以認為是優秀的？