一個新的設計風格的確立一定會提出他特有的設計原則。而如今設計原則越來越多的關注到了動效的定義。甚至在 Android L 的 Material Design 中直接將動效寫入的設計原則中：Motion provides meaning (動畫表達含義) 。這裡我們就透過一些業界成熟案例來簡單說明下動效是怎麼在設計原則的基礎上定義出來的。
先，我們看下 iOS7 上的案例。眾所周知，iOS7 相對於 6 設計更加的扁平，去掉了很多質感，保留一些微弱的質感，避免對內容的干擾。這一點遵循了 iOS7 新的設計理念，內容優先 (Defer to Content)，透氣 (Provide Clarity) 。基於內容優先和透氣的原則，對之前繁複的 UI 進行減負，剔除多餘元素，有主次的保留，並統一介面裡的質感。
iOS 的 6 到 7，外界都評價為設計由擬物到扁平，其實並不準確。 iOS7 還在延續擬物的設計，從介面到動效上有主次的保留了擬物的元素。
時間設定控制元件可以很清楚的說明這個問題，新舊兩版都是模擬波輪這個物體。只是新版為了更加突出內容，放棄了多餘的質感，內容的呈現依然用波輪的方式表現。甚至在您波動波輪時會發現，已選狀態上依然保留了玻璃的特性，在邊緣會有一個折射效果。由此可以看出，iOS7 的簡潔還是保留了相當多的擬物細節的。
另一個細節是在開關控制元件的設計上，新版同樣放棄了原有的光澤的材質，而使用了更加柔和的材質，讓介面更加的主次分明。如果說之前的材質是金屬或者硬塑膠的話，那新的材質更加柔和，類似純色的橡膠，更軟，有韌性，可延展。由於材質發生了根本的變化，那麼所顯現的動態效果也將是不同的。
以上這些都是基於內容優先和透氣來做的。 iOS7 還有一個設計原則是：有層次的表達 (Use Depth to Communicate) 。在 ui 介面上表現為前後層次的區分，透過縱深感表達內容之間的關係。
在動效方面，動畫轉場是對內容層次關係知名的詮釋。透過模擬的縱深效果，讓多使用者清晰的知道頁面之間的從屬關係。
雖然 iOS6 也有類似功能的動畫效果，透過抽屜開啟的形式表現層級不關係。但很顯然，新版的效果與確定的設計原則更吻合。
參考： iOS Human Interface Guidelines
說完 iOS，說說 Android 。材料設計 (Material Design) 是 google 釋出的系統 Android L 裡提出的設計觀點。其核心設計原則是，材質的隱喻 (Material is the metaphor) 。
關於材質的隱喻，簡單一點說就是將物理界中不同的材質特性提煉，再按需要結合在一起使用的方法。單從視覺上看，材質的隱喻更多落在卡片式設計上。但材質的特性更多需要透過行為上的互動才能體現出來。透過物件給出不同的反饋，可以瞭解到它的材質特性。這就需要透過動效的手法來體現。
這裡我們舉三個點選反饋的案例，來說明 Android 是怎麼詮釋材質的隱喻這一設計原則的。
這三個效果都是點選觸發的，彼此之間有共同點，但又都不完全相同。我們可以將反饋動畫分解，能更好的說明問題。
漣漪效果+區塊變暗
漣漪效果+陰影變大
漣漪效果+內容閃白
這時，我們可以發現，反饋動效都用到了漣漪效果，同時它又是以手指的觸碰位置確定起始位置的。結合起來，很容易就可以想到，這是引用了水的特質：手指觸碰平靜水面，產生圈狀漣漪。
除了漣漪，我們再來分析下另外三個不同的動效：
區塊變暗 > 內容下沉效果 > 按鈕按下
陰影變大 > 區塊浮動效果 > 被磁力或意念之類的抓起
內容閃白 > 閃光照射效果 > 拍照時的閃光燈
同樣都是點選，為什麼要賦予內容不同的材質特性呢? 這我們就要看下使用場景了。
wifi 的選擇選單，點選結束後即關閉了;
卡片式的內容區塊，選擇後應該會展開更多內容;
相簿照片，與拍照的閃光燈可以自然的聯想到一塊。
所以，結論就是，點選手勢賦予內容水的材質; 而根據不同場景又分別賦予了內容按鈕、懸浮、閃光燈的材質。這就很好的詮釋了材質的隱喻這一概念，根據不同需要將不同的材質特性賦予一個物件。
ok，關於動效與設計原則之間的關係，我們先說到這裡，下次我們將會結合自己的案例詳細說下怎麼基於設計原則打造適合自己產品的動效。