在2015年澳大利亞CSSConf上 ,Benjamin De Cock，一個在動效設計上有優先權的互動設計師，分享了多年來的洞見 。他現在是一個在Stripe工作的使用者介面設計師，Stripe是一個非常流行的、支付處理平臺。Benjamin De Cock，提供了超越UI設計的領域，他擴充和提供了動效設計的最佳練習。
提供最好的練習
在早期我們探索過使用者介面的過於浮誇的動效後，De Cock 開始欣賞沉穩的設計傳遞出來的力量。這是那些發現動效設計有趣的人非常熟悉的過程。最初，你想讓一切動起來，卻從來不問問自己是否應該動。
所以，在什麼時候你應該讓一些東西動起來呢？
好的動效設計當然是經過互動經驗專業的打磨，De Cock 相信，動效UI設計的重要性有兩大主要原因：
1、動效設計幫助使用者瞭解控制元件之間的互動關係。
2、動效設計能讓你的程式感覺更快、更流暢。
在Stripe結賬APP 中，點選“記住我”，會啟用一個全新的介面設計，De Cock 非常謹慎的設計每一個UI控制元件，以確保使用者沒有迷失在啟用前和啟用後這兩個介面中。
在另一個例子中， De Cock 揭示了一個謊言，那就是Stripe 告訴使用者，他們什麼時候檢查了自己的賬戶。
雖然它看起來很像伺服器進行了處理資訊，並且通過驗證成功傳送了簡訊，在現實中，是動效設計支付了這個時間。
Stripe沒有任何渠道可以知道短息是不是已經收到了，只是把動效的時間設定的足夠長，長到簡訊已經被接受的概率很高的時候。
四條網頁設計規則
對於使用者介面設計來說，效能和速度就是一切。就像De Cock 說的那樣：
如果你的動效設計有一部分，沒有以每秒60幀的速度運轉，這基本上會毀了整個動效的流暢感——不要只為了特殊的部分做動效。很不幸，人類的眼睛對這些不流暢是極度敏感的。
De Cock 已經擴充出UI動效設計的四條簡單規則，他照顧到了現有的實時渲染的侷限性。
- 動效設計包括不透明度和其他屬性轉換的設計（動效的其他屬性，像是寬高，要求很多控制元件推動力量，並且可以降低控制元件速度）
- 保持動效迅速（一般大約300ms）
- 保持動畫獨立性
- 保持使用自定義曲線
最後一條規則可以應用於所有一般的動效設計中， De Cock建議避免使用儲存在軟體中自帶的動畫曲線，取而代之的是你自己創造的動畫曲線。在播放動畫設計的世界中，精通圖形編輯（在任何動效包裝中，不僅僅是AE），並且學習如何從數學上掌握你的動效，這是突破普通動效設計技巧的關鍵。
擬物化設計和動效
擬物化設計是在數字介面中，模擬現實世界物品的外觀和感覺的實踐。Apple 曾經有很長一段時間對擬物化設計十分青睞，在早期設計中，像日曆和找到我的朋友的app設計就是證據。
仿皮革紋理和照片般逼真的拼接都是擬物化設計的元素，他們試圖在數碼環境中創造模擬現實世界材質的錯覺。而在最近幾年，設計師已經拒絕擬物化設計，像谷歌的Material Design， 轉移到“扁平化”的設計語言中。
但是De Cock 警告我們說，我們不應該不分良莠，好壞一起丟掉。
在現實世界中，顯然沒有什麼是平坦的。而我認為在軟體設計中，丟失這種元素是一種十分可惜的過度簡化。
3D實際上幫助了實際上有助於理解物件的行為以及它們之間的相互關係。因此，擬物化設計用來激發我們現實世界中的靈感，以構建我們的介面設計，似乎是一個很好的辦法。
優秀的UI動效設計可以是固有的擬物化設計，他可以達到使用者熟悉的感覺，因為它使用的是真實世界的物理學原理。而物理是永恆的——不是一個路過的風格。
舉個例子，當你操作錯誤的時候，在Stripe中這種微妙地3D側旋的互動響應，就像是現實世界中一個人在搖頭一樣。當你使用擬物化設計的時候這幾乎是潛意識的為APP植入人性化動效，在潛意識層面增加和藹和友善。
掀開這層迷紗
如果你想了解CSS動效的真相，你可以觀看整個演講。大約在10分鐘左右，他開始講解產生微妙地、有效的動效，如何通過具體的程式碼操作，以達到最好的效能展示。他同時呼籲要擁抱JavaScript ，JavaScript 協調基於CSS的呈現，並且作為觸發扳機和事件框架。
連結