優(yōu)秀的動效設(shè)計更能讓用戶從中感到驚喜，讓用戶感受到產(chǎn)品的溫度和調(diào)性。

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

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

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

越來越多設(shè)計師設(shè)計動效作品

優(yōu)秀的動效是克制的產(chǎn)品表達

在UI領(lǐng)域中，優(yōu)秀的動效是一種克制的產(chǎn)品表達。許多設(shè)計師在設(shè)計過程中都會遇到一個問題，如何設(shè)計動效才算是輸出了一個優(yōu)秀并且有價值的方案呢？

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

示例來自網(wǎng)絡(luò)

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

所以，一個優(yōu)秀的動效起的作用應(yīng)該是基于用戶的交互行為（功能）作出恰當?shù)姆答仯瑥亩層脩舾鞔_感知到發(fā)生了什么，并把用戶的注意力吸引到正確的位置，讓用戶在不經(jīng)意間快速養(yǎng)成對產(chǎn)品的使用習(xí)慣。當設(shè)計師不斷思考并優(yōu)化各種體驗的同時，產(chǎn)品的粘性也大大增強了。

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

落地的UI動效原則

１、有效

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

示例來自網(wǎng)絡(luò)

２、適度

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

Material Motion

３、性能優(yōu)先

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

４、開發(fā)效率

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

示例來自網(wǎng)絡(luò)

５、意外的驚喜

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

Twitter的點贊效果

動效輸出規(guī)范

終于，一個好的idea有了，萬事俱備，只欠開發(fā)了。我們正在努力建立一套高效的動效輸出規(guī)范，讓動效更有效地進入開發(fā)環(huán)節(jié)。

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

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

KUDC動效庫部分截圖

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

Twitter

１、關(guān)鍵幀圖例

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

關(guān)鍵幀圖例

２、運動參數(shù)

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

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

３、緩動曲線

元素運動的加速度曲線，專業(yè)稱為貝塞爾運動曲線（Bezier）。建議設(shè)計師們每實現(xiàn)一次效果，都能沉淀一些通用的曲線，方便開發(fā)蜀黍下次直接套用。

常用緩動曲線

標準緩動曲線查詢網(wǎng)址：http://easings.net/zh-cn

緩動曲線中，需要注意的一點是，如何準確去描述出你設(shè)置好的運動曲線參數(shù)。通常在交互工具和AE當中，在調(diào)整曲線的時候會有四個值如下圖：

　　貝塞爾參數(shù)值

和開發(fā)溝通時，我們提供以上兩個軸的x、y參數(shù)值即可，稱貝塞爾參數(shù)值。

如圖，即cubic-bezier(0.25,0.1,0.25,0.1)

貝塞爾曲線預(yù)覽：http://cubic-bezier.com/

４、高保真交互demo

借助強大的交互工具，制作帶交互的demo。

有了高保真參考，再也不用擔心說不清楚了

５、png序列

適用于一些比較復(fù)雜的動畫，例如加載動畫，特殊的控件動畫，啟動動畫。如果開發(fā)寫起來特別麻煩的，可以先用ae實現(xiàn)好效果，然后導(dǎo)出png序列直接給開發(fā)使用。具體過程和方法小編在這里不再贅述了，網(wǎng)上有許多相關(guān)教程可以參考。

用的動效交互工具推薦

以下推薦工具，網(wǎng)上教程也很豐富，具體操作這里不展開來說了。

１、Principle

是一款非常簡單上手的交互原型工具，即使它已經(jīng)很久沒有大版本迭代。具體到透明度變化，XY軸旋轉(zhuǎn)，XY軸位移，運動曲線調(diào)整，都能輕易做到，并且動畫的參數(shù)也非常具有參考意義。并且能和sketch直接配合，關(guān)聯(lián)到設(shè)計稿，實時改動設(shè)計圖。

２、Flinto

比Principle稍微難一丟丟，但是多了很多能變化的參數(shù)，除了基礎(chǔ)效果之外，還加入Z軸的旋轉(zhuǎn)，以及單個元素behavior的獨立調(diào)整，都比較方便。Flinto也能和sketch直接配合，關(guān)聯(lián)到設(shè)計稿，實時改動設(shè)計圖，非常方便。

３、Framer

更接近工程師思維的一款交互工具，交互效果也最接近原生效果，但是會涉及一些基礎(chǔ)代碼，不過最新版本已經(jīng)支持自動生成代碼功能，有余力的設(shè)計師可以嘗試一下。

４、Hype3

雖然放在推薦模塊，但是他并沒有上面介紹的工具那么簡單和方便，但是他的強大之處在于，做完了直接可以生成html文件，接入服務(wù)器就可以直接上線了，做h5的一大利器。

５、After Effects

無所不能的AE，就不多說了，動畫能力強，對于比較復(fù)雜的動畫，可以用ae來完成，如果只是基本的交互動畫，建議還是用上面所推薦的工具更快出效果。

PS：用工具就像買汽車一樣，每年都有新車型，每年都有改款和新配置，不可能年年換的。許多設(shè)計師一開始都過度糾結(jié)于日新月異的工具，但其實在設(shè)計過程中，怎樣把自己的想法通過工具更準確的表達出來才是我們應(yīng)該在意的。

隨著設(shè)備性能和網(wǎng)絡(luò)帶寬的發(fā)展，用戶對視頻消費越來越多，對設(shè)計師動畫能力也要求越來越高，未來我們還會持續(xù)更新有關(guān)動效的知識～

作者：圓早

來源：優(yōu)酷土豆用戶體驗設(shè)計中心