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

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

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

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

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

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

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

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

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

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

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

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

落地的UI動效原則

１、有效

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

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

２、適度

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

Material Motion

３、性能優(yōu)先

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

４、開發(fā)效率

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

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

５、意外的驚喜

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

Twitter的點(diǎn)贊效果

動效輸出規(guī)范

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

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

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

KUDC動效庫部分截圖

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

Twitter

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

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

關(guān)鍵幀圖例

２、運(yùn)動參數(shù)

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

每個(gè)元素的運(yùn)動時(shí)間和透明度變化

３、緩動曲線

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

常用緩動曲線

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

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

　　貝塞爾參數(shù)值

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

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

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

４、高保真交互demo

借助強(qiáng)大的交互工具，制作帶交互的demo。

有了高保真參考，再也不用擔(dān)心說不清楚了

５、png序列

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

用的動效交互工具推薦

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

１、Principle

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

２、Flinto

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

３、Framer

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

４、Hype3

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

５、After Effects

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

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

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

作者：圓早

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