編者按：今年很多設計師開始玩動效，不過想讓你的動效設計落地，遠不是會AE 就能解決的。本文總結了讓動效落地的整體解決思路，附動效軟件推薦，建議閱讀。

國際慣例，在開始之前，還是先來聊一聊我們設計中心在人機交互中對于動效的一些經驗和想法。

動效，一直都存在于這個物理世界中。隨著技術的不斷進步和設備性能的不斷提高，以及帶有動效行為設計的不斷優化，改變了我們在人機交互過程中原本復雜而無聊的交流過程，暫且不考慮它的作用，最直觀的就是用戶已經習慣了在電腦中體驗絲般順滑的動畫效果（流暢性）。

手機終端也是如此。在扁平化設計的時代中，一個落地的手機界面的動態效果可以幫我們提升用戶體驗，使產品顯得更加鮮活和統一的同時，也提升用戶感知度并且進一步提升了產品的易用性。優秀的動效設計更能讓用戶從中感到驚喜，讓用戶感受到產品的溫度和調性。

△ 越來越多設計師設計動效作品

優秀的動效是克制的產品表達

在UI領域中，優秀的動效是一種克制的產品表達。許多設計師在設計過程中都會遇到一個問題，如何設計動效才算是輸出了一個優秀并且有價值的方案呢？

我們考慮的方向是，優秀的動效設計不僅僅賦予了產品本身的調性和趣味，其次還要充分體現產品的定位和特點。它的發生并非是讓用戶去在意動效的本身，而是旨在讓用戶感知到它原本就是你產品的一部分，從而體現品牌的價值。

作為每天都得和產品打交道的設計師，我們不僅僅在讓產品和用戶建立聯系，更需要在這種聯系的場景中讓用戶保持著簡單愉快的任務體驗。作為身經百戰的設計師，我們很清楚用戶在有明確需求的場景下并不會馬上去分辨一個產品的美與否，而是直接希望快速達成任務，就像是「好無聊，聽首歌兒吧！」或「好餓，點個外賣吧！」然后就會直接打開一個APP去完成任務了。這些行為都有著十分明確的目的，可以看出用戶思維就是最簡單的思維。所以不以真正的用戶體驗（場景）為基礎來設計的產品，可能對于用戶來說都是耍流氓。

所以一個優秀的動效起的作用應該是基于用戶的交互行為（功能）作出恰當的反饋，從而讓用戶更明確感知到發生了什么，并把用戶的注意力吸引到正確的位置，讓用戶在不經意間快速養成對產品的使用習慣。當設計師不斷思考并優化各種體驗的同時，產品的粘性也大大增強了。

那么，設計師在設計過程中如何輸出一個更落地的動效呢？下面講述一些設計思路：

落地的UI動效原則

一、有效

有效的動效提升操作感受并提供良好的視覺效果，提升產品界面的靈動性、和帶入感，增強用戶對產品的認知和情緒的帶入。

二、適度

Ios10 和 Material motion 帶來很多優秀的動效，越來越多設計師熱衷于設計眾多的動畫效果，很多動效由于本身的復雜性和冗長的時間產生的拖沓，使得用戶產生不適，并失去產品的焦點。所以設計師在設計動效時，應該更克制，做到最短最高效，輕快流暢的交互表達。

三、性能優先

所有動效都不應犧牲產品本身的性能和響應時間，不僅起不了效果更影響用戶體驗，如果沒有找到更加簡明輕快的解決方案，那么我們更建議不要輕易加入動畫效果。

四、開發效率

開發是真正的動效“設計師”。越復雜的動效，開發難度越大。沒有誰能阻止設計師天馬行空，但是要推動項目的進行，一定要考慮開發效率。對于最終實現的效果和完成的時間，這兩者一定要做好權衡。我們建議設計師在開始動手設計之前，可以先和開發蜀黍們評估一下開發的時間和成本。

五、意外的驚喜

巧妙的動效設計，不僅能夠提升產品體驗，增加趣味性，甚至對完成產品目標和業務目標也有著事半功倍的效果。挖掘用戶的興趣點，提供超出用戶預期的愉悅體驗，是設計動效時需要思考的其中一個方向。比較有代表性的一個案例是Twitter的點贊效果。

△ Twitter的點贊效果

動效輸出規范

終于，一個好的idea有了，萬事俱備，只欠開發了。我們正在努力建立一套高效的動效輸出規范，讓動效更有效地進入開發環節。

如何把設計師的想法更準確的表達出來、并且工程師能準確理解，最終快速實現效果，這樣高效的流程才是我們想要的結果。

我們總結出一套專用的動效組件庫以及動效的輸出規范以供于內部設計人員使用，也希望未來能有機會公開這個庫供更多外部設計師使用。

△ KUDC動效庫部分截圖

下面我將著重講述動效的輸出規范。舉一個非常簡單的例子：

△ Twitter

一、關鍵幀圖例

對于一些相對簡單的交互效果，我們可以用關鍵幀圖例說明，主要表現在動效的三個狀態，分別為操作前、操作時、操作后。這樣開發能清楚每個狀態下展現的效果及最終效果。

△ 關鍵幀圖例

二、運動參數

運動參數主要包括動態元素運動的時間，元素出現或者消失的先后順序的時間點。參數的準確性決定了整個動畫的還原度。

△ 每個元素的運動時間和透明度變化

三、緩動曲線

元素運動的加速度曲線，專業稱為貝塞爾運動曲線（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:用工具就像買汽車一樣，每年都有新車型，每年都有改款和新配置，不可能年年換的。許多設計師一開始都過度糾結于日新月異的工具，但其實在設計過程中，怎樣把自己的想法通過工具更準確的表達出來才是我們應該在意的。

隨著設備性能和網絡帶寬的發展，用戶對視頻消費越來越多，對設計師動畫能力也要求越來越高，未來我們還會持續更新有關動效的文章或者工作中的動效入門&進階教程，希望大家持續關注我們！

歡迎關注優酷土豆用戶體驗設計中心的微信公眾號：

「動效設計三步走」

1. 先學會分析：《動效丨七何分析法幫你全面分析界面動效》
2. 動效設計方法：《改善你的UX設計！值得參考的四個動效使用方法》
3. 提升用戶體驗：《5個小技巧，用動效提升界面的用戶體驗就這么簡單》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量190萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com