國際慣例， 在開始之前， 還是先來聊一聊我們設計中心在人機交互中對於動效的一些經驗和想法。
動效， 一直都存在於這個物理世界中。
手機終端也是如此。 在扁平化設計的時代中， 一個落地的手機介面的動態效果可以幫我們提升使用者體驗， 使產品顯得更加鮮活和統一的同時， 也提升用戶感知度並且進一步提升了產品的易用性。 優秀的動效設計更能讓用戶從中感到驚喜， 讓使用者感受到產品的溫度和調性。
越來越多設計師設計動效作品
優秀的動效是克制的產品表達
在UI領域中， 優秀的動效是一種克制的產品表達。 許多設計師在設計過程中都會遇到一個問題， 如何設計動效才算是輸出了一個優秀並且有價值的方案呢？
我們考慮的方向是， 優秀的動效設計不僅僅賦予了產品本身的調性和趣味， 其次還要充分體現產品的定位和特點。
示例來自網路
作為每天都得和產品打交道的設計師， 我們不僅僅在讓產品和使用者建立聯繫， 更需要在這種聯繫的場景中讓用戶保持著簡單愉快的任務體驗。
所以， 一個優秀的動效起的作用應該是基於用戶的交互行為（功能）作出恰當的回饋， 從而讓用戶更明確感知到發生了什麼， 並把用戶的注意力吸引到正確的位置， 讓用戶在不經意間快速養成對產品的使用習慣。
那麼， 設計師在設計過程中如何輸出一個更落地的動效呢？下面講述一些設計思路：
落地的UI動效原則１、有效
有效的動效提升操作感受並提供良好的視覺效果， 提升產品介面的靈動性、和帶入感， 增強使用者對產品的認知和情緒的帶入。
示例來自網路
２、適度
Ios10 和 Material motion 帶來很多優秀的動效，越來越多設計師熱衷於設計眾多的動畫效果，很多動效由於本身的複雜性和冗長的時間產生的拖遝，使得用戶產生不適，並失去產品的焦點。所以設計師在設計動效時，應該更克制，做到最短最高效，輕快流暢的交互表達。
Material Motion
３、性能優先
所有動效都不應犧牲產品本身的性能和回應時間，不僅起不了效果更影響用戶體驗，如果沒有找到更加簡明輕快的解決方案，那麼我們更建議不要輕易加入動畫效果。
４、開發效率
開發是真正的動效“設計師”。越複雜的動效，開發難度越大。沒有誰能阻止設計師天馬行空，但是要推動專案的進行，一定要考慮開發效率。對於最終實現的效果和完成的時間，這兩者一定要做好權衡。我們建議設計師在開始動手設計之前，可以先和開發蜀黍們評估一下開發的時間和成本。
示例來自網路
５、意外的驚喜
巧妙的動效設計，不僅能夠提升產品體驗，增加趣味性，甚至對完成產品目標和業務目標也有著事半功倍的效果。挖掘用戶的興趣點，提供超出用戶預期的愉悅體驗，是設計動效時需要思考的其中一個方向。比較有代表性的一個案例是Twitter的點贊效果。
Twitter的點贊效果
動效輸出規範
終於，一個好的idea有了，萬事俱備，只欠開發了。我們正在努力建立一套高效的動效輸出規範，讓動效更有效地進入開發環節。
如何把設計師的想法更準確的表達出來、並且工程師能準確理解，最終快速實現效果，這樣高效的流程才是我們想要的結果。
我們總結出一套專用的動效元件庫以及動效的輸出規範以供于內部設計人員使用，也希望未來能有機會公開這個庫供更多外部設計師使用。
KUDC動效庫部分截圖
下面我將著重講述動效的輸出規範。舉一個非常簡單的例子：
１、關鍵幀圖例
對於一些相對簡單的交互效果，我們可以用關鍵幀圖例說明，主要表現在動效的三個狀態，分別為操作前、操作時、操作後。這樣開發能清楚每個狀態下展現的效果及最終效果。
關鍵幀圖例
２、運動參數
運動參數主要包括動態元素運動的時間，元素出現或者消失的先後順序的時間點。參數的準確性決定了整個動畫的還原度。
每個元素的運動時間和透明度變化
３、緩動曲線
元素運動的加速度曲線，專業稱為貝塞爾運動曲線（Bezier）。建議設計師們每實現一次效果，都能沉澱一些通用的曲線，方便開發蜀黍下次直接套用。
常用緩動曲線
標準緩動曲線查詢網址：http://easings.net/zh-cn
緩動曲線中，需要注意的一點是，如何準確去描述出你設置好的運動曲線參數。通常在交互工具和AE當中，在調整曲線的時候會有四個值如下圖：
貝塞爾參數值
和開發溝通時，我們提供以上兩個軸的x、y參數值即可，稱貝塞爾參數值。
如圖，即cubic-bezier(0.25,0.1,0.25,0.1)
貝茲曲線預覽：http://cubic-bezier.com/
４、高保真交互demo
借助強大的交互工具，製作帶交互的demo。
有了高保真參考，再也不用擔心說不清楚了
５、png序列
適用於一些比較複雜的動畫，例如載入動畫，特殊的控制項動畫，啟動動畫。如果開發寫起來特別麻煩的，可以先用ae實現好效果，然後匯出png序列直接給開發使用。具體過程和方法小編在這裡不再贅述了，網上有許多相關教程可以參考。
用的動效交互工具推薦
以下推薦工具，網上教程也很豐富，具體操作這裡不展開來說了。
１、Principle
是一款非常簡單上手的交互原型工具，即使它已經很久沒有大版本反覆運算。具體到透明度變化，XY軸旋轉，XY軸位移，運動曲線調整，都能輕易做到，並且動畫的參數也非常具有參考意義。並且能和sketch直接配合，關聯到設計稿，即時改動設計圖。
２、Flinto
比Principle稍微難一丟丟，但是多了很多能變化的參數，除了基礎效果之外，還加入Z軸的旋轉，以及單個元素behavior的獨立調整，都比較方便。Flinto也能和sketch直接配合，關聯到設計稿，即時改動設計圖，非常方便。
３、Framer
更接近工程師思維的一款交互工具，交互效果也最接近原生效果，但是會涉及一些基礎代碼，不過最新版本已經支持自動生成代碼功能，有餘力的設計師可以嘗試一下。
４、Hype3
雖然放在推薦模組，但是他並沒有上面介紹的工具那麼簡單和方便，但是他的強大之處在於，做完了直接可以生成html檔，接入伺服器就可以直接上線了，做h5的一大利器。
５、After Effects
無所不能的AE，就不多說了，動畫能力強，對於比較複雜的動畫，可以用ae來完成，如果只是基本的交互動畫，建議還是用上面所推薦的工具更快出效果。
PS：用工具就像買汽車一樣，每年都有新車型，每年都有改款和新配置，不可能年年換的。許多設計師一開始都過度糾結於日新月異的工具，但其實在設計過程中，怎樣把自己的想法通過工具更準確的表達出來才是我們應該在意的。
隨著設備性能和網路頻寬的發展，使用者對視頻消費越來越多，對設計師動畫能力也要求越來越高，未來我們還會持續更新有關動效的知識～
作者：圓早
示例來自網路
２、適度
Ios10 和 Material motion 帶來很多優秀的動效，越來越多設計師熱衷於設計眾多的動畫效果，很多動效由於本身的複雜性和冗長的時間產生的拖遝，使得用戶產生不適，並失去產品的焦點。所以設計師在設計動效時，應該更克制，做到最短最高效，輕快流暢的交互表達。
Material Motion
３、性能優先
所有動效都不應犧牲產品本身的性能和回應時間，不僅起不了效果更影響用戶體驗，如果沒有找到更加簡明輕快的解決方案，那麼我們更建議不要輕易加入動畫效果。
４、開發效率
開發是真正的動效“設計師”。越複雜的動效，開發難度越大。沒有誰能阻止設計師天馬行空，但是要推動專案的進行，一定要考慮開發效率。對於最終實現的效果和完成的時間，這兩者一定要做好權衡。我們建議設計師在開始動手設計之前，可以先和開發蜀黍們評估一下開發的時間和成本。
示例來自網路
５、意外的驚喜
巧妙的動效設計，不僅能夠提升產品體驗，增加趣味性，甚至對完成產品目標和業務目標也有著事半功倍的效果。挖掘用戶的興趣點，提供超出用戶預期的愉悅體驗，是設計動效時需要思考的其中一個方向。比較有代表性的一個案例是Twitter的點贊效果。
Twitter的點贊效果
動效輸出規範
終於，一個好的idea有了，萬事俱備，只欠開發了。我們正在努力建立一套高效的動效輸出規範，讓動效更有效地進入開發環節。
如何把設計師的想法更準確的表達出來、並且工程師能準確理解，最終快速實現效果，這樣高效的流程才是我們想要的結果。
我們總結出一套專用的動效元件庫以及動效的輸出規範以供于內部設計人員使用，也希望未來能有機會公開這個庫供更多外部設計師使用。
KUDC動效庫部分截圖
下面我將著重講述動效的輸出規範。舉一個非常簡單的例子：
１、關鍵幀圖例
對於一些相對簡單的交互效果，我們可以用關鍵幀圖例說明，主要表現在動效的三個狀態，分別為操作前、操作時、操作後。這樣開發能清楚每個狀態下展現的效果及最終效果。
關鍵幀圖例
２、運動參數
運動參數主要包括動態元素運動的時間，元素出現或者消失的先後順序的時間點。參數的準確性決定了整個動畫的還原度。
每個元素的運動時間和透明度變化
３、緩動曲線
元素運動的加速度曲線，專業稱為貝塞爾運動曲線（Bezier）。建議設計師們每實現一次效果，都能沉澱一些通用的曲線，方便開發蜀黍下次直接套用。
常用緩動曲線
標準緩動曲線查詢網址：http://easings.net/zh-cn
緩動曲線中，需要注意的一點是，如何準確去描述出你設置好的運動曲線參數。通常在交互工具和AE當中，在調整曲線的時候會有四個值如下圖：
貝塞爾參數值
和開發溝通時，我們提供以上兩個軸的x、y參數值即可，稱貝塞爾參數值。
如圖，即cubic-bezier(0.25,0.1,0.25,0.1)
貝茲曲線預覽：http://cubic-bezier.com/
４、高保真交互demo
借助強大的交互工具，製作帶交互的demo。
有了高保真參考，再也不用擔心說不清楚了
５、png序列
適用於一些比較複雜的動畫，例如載入動畫，特殊的控制項動畫，啟動動畫。如果開發寫起來特別麻煩的，可以先用ae實現好效果，然後匯出png序列直接給開發使用。具體過程和方法小編在這裡不再贅述了，網上有許多相關教程可以參考。
用的動效交互工具推薦
以下推薦工具，網上教程也很豐富，具體操作這裡不展開來說了。
１、Principle
是一款非常簡單上手的交互原型工具，即使它已經很久沒有大版本反覆運算。具體到透明度變化，XY軸旋轉，XY軸位移，運動曲線調整，都能輕易做到，並且動畫的參數也非常具有參考意義。並且能和sketch直接配合，關聯到設計稿，即時改動設計圖。
２、Flinto
比Principle稍微難一丟丟，但是多了很多能變化的參數，除了基礎效果之外，還加入Z軸的旋轉，以及單個元素behavior的獨立調整，都比較方便。Flinto也能和sketch直接配合，關聯到設計稿，即時改動設計圖，非常方便。
３、Framer
更接近工程師思維的一款交互工具，交互效果也最接近原生效果，但是會涉及一些基礎代碼，不過最新版本已經支持自動生成代碼功能，有餘力的設計師可以嘗試一下。
４、Hype3
雖然放在推薦模組，但是他並沒有上面介紹的工具那麼簡單和方便，但是他的強大之處在於，做完了直接可以生成html檔，接入伺服器就可以直接上線了，做h5的一大利器。
５、After Effects
無所不能的AE，就不多說了，動畫能力強，對於比較複雜的動畫，可以用ae來完成，如果只是基本的交互動畫，建議還是用上面所推薦的工具更快出效果。
PS：用工具就像買汽車一樣，每年都有新車型，每年都有改款和新配置，不可能年年換的。許多設計師一開始都過度糾結於日新月異的工具，但其實在設計過程中，怎樣把自己的想法通過工具更準確的表達出來才是我們應該在意的。
隨著設備性能和網路頻寬的發展，使用者對視頻消費越來越多，對設計師動畫能力也要求越來越高，未來我們還會持續更新有關動效的知識～
作者：圓早