精細(xì)而恰當(dāng)?shù)膭?dòng)畫效果可以傳達(dá)狀態(tài)，增強(qiáng)用戶對(duì)于直接操縱的感知，通過視覺化的方式向用戶呈現(xiàn)操作結(jié)果。

一、什么是動(dòng)效及作用？

動(dòng)效是物體空間關(guān)系與功能有意識(shí)的流動(dòng)之美，它讓用戶更了解交互。

在IOS7官方guideline中，給動(dòng)效賦予了一個(gè)新的定義：精細(xì)而恰當(dāng)?shù)膭?dòng)畫效果可以傳達(dá)狀態(tài)，增強(qiáng)用戶對(duì)于直接操縱的感知，通過視覺化的方式向用戶呈現(xiàn)操作結(jié)果。

為什么現(xiàn)在的產(chǎn)品越來越注重動(dòng)效了那？我們先從人對(duì)于產(chǎn)品元素的感知。

順序來看？不難看出人們對(duì)動(dòng)態(tài)的信息感知是最強(qiáng)的。

那么動(dòng)效能給給產(chǎn)品設(shè)計(jì)帶來什么好處那？

1. 讓體驗(yàn)更連貫：幫助用戶理解界面之間的關(guān)系，縮短用戶和界面之間的鴻溝。消除屏幕傷的跳變。告訴用戶元素從哪來到哪去。
2. 消化引導(dǎo)流程，降低學(xué)習(xí)成本：在最恰當(dāng)?shù)臅r(shí)機(jī)給用戶有意義的引導(dǎo)。減輕認(rèn)知負(fù)擔(dān)，讓體驗(yàn)更愉快。
3. 空間擴(kuò)展：讓當(dāng)下用戶不需要的信息隱藏，適當(dāng)?shù)臅r(shí)機(jī)出現(xiàn)。
4. 賦予設(shè)計(jì)趣味和活力：讓錯(cuò)誤不那么沮喪，讓等待不那么無聊，讓你的產(chǎn)品看起來更具活力。

二、動(dòng)效是不是越多越酷炫越好那？

在平時(shí)項(xiàng)目中，我們有些設(shè)計(jì)師經(jīng)常為了追求酷炫，生硬的在產(chǎn)品中展現(xiàn)。一個(gè)好的動(dòng)效應(yīng)該是自然，舒適，錦上添花絕對(duì)不是為了僅僅去吸引眼球，生拉硬套。所以要把握好動(dòng)效的輕與重，先考慮用戶使用的場(chǎng)景、頻繁程度來確定動(dòng)效的注目程度，其次重視整體性的編排。

下面我們來看一下經(jīng)常在APP里面使用動(dòng)效的場(chǎng)景：

1. 開機(jī)啟動(dòng)圖

強(qiáng)化產(chǎn)品品牌，動(dòng)畫短小。僅為簡單變形，旨在突出產(chǎn)品logo。因?yàn)殚_啟啟動(dòng)圖時(shí)間非常短，復(fù)雜的動(dòng)畫延遲了界面的過渡。

2. poplayer動(dòng)畫

強(qiáng)調(diào)驚喜，有創(chuàng)意的，有互動(dòng)性的動(dòng)（手淘的雙十一活動(dòng)）

3. 界面之間切換跳轉(zhuǎn)

幫助用戶理解界面剛發(fā)生的變化，讓用戶知道自己在哪。例如頁面之間的轉(zhuǎn)場(chǎng)，彈出等。

4. 擴(kuò)展空間場(chǎng)景

強(qiáng)調(diào)關(guān)聯(lián)性的場(chǎng)景，展開，放大縮小，翻轉(zhuǎn)等。

5. 強(qiáng)調(diào)狀態(tài)

抓住用戶注意力，也可以說是分散用戶注意力，例如加載時(shí)，出錯(cuò)時(shí)等。

6. 聚合入口

7. 突出元素，增加情趣 （播放器播放暫停案件）

三、我們?cè)陧?xiàng)目中是怎么推進(jìn)動(dòng)效落地的？

我什么我們覺得超酷超美的UI動(dòng)效，似乎很少在真實(shí)的App上看到它們被實(shí)現(xiàn)。技術(shù)門檻降低了這些UI 動(dòng)效的可行性也許是最大的一個(gè)原因；除此之外，設(shè)計(jì)師們?cè)谔岢鲞@些UI動(dòng)效時(shí)，往往都缺乏使用情境。切記為了漂亮而漂亮。

常用的一些小技巧：

1. 羅列全局動(dòng)效改進(jìn)點(diǎn)列表
2. 提出概念方案，向團(tuán)隊(duì)推介
3. 不同情況下的原型復(fù)雜程度取舍，簡單可以直接拿樣品和技術(shù)溝通，標(biāo)志性動(dòng)效細(xì)膩還原。有些動(dòng)效可能比較簡單，如果我們能用線上的例子說明你所需的動(dòng)效效果，可以節(jié)省你做demo的時(shí)間，把重點(diǎn)放在重點(diǎn)細(xì)膩動(dòng)效上。
4. 視覺和交互的通力合作

我們?cè)黾觿?dòng)效是為了更好的闡述產(chǎn)品邏輯，它與交互緊密相關(guān)，所以跟你團(tuán)隊(duì)一起推進(jìn)動(dòng)效的產(chǎn)出事半功倍。

五、動(dòng)效的工具

雖然身為設(shè)計(jì)師，可以定義非?？犰诺膭?dòng)效，但是由于技術(shù)成本限制可能被摒棄。所以作為設(shè)計(jì)師同樣需要理解技術(shù)實(shí)現(xiàn)的基本原理。下面為大家介紹以下工具：

1. 交互性動(dòng)效

如果你做了案例，動(dòng)效只是為了說明你的設(shè)計(jì)，闡述你的交互邏輯，那么下面四款都可以滿足的你的基本需求。Principle和Flinto都可以直接置入你的sketch設(shè)計(jì)稿，跟你的設(shè)計(jì)產(chǎn)生聯(lián)動(dòng)。頁面也很簡單，完成轉(zhuǎn)場(chǎng)的交互極其便捷，另外還可以做一些基本時(shí)間軸動(dòng)畫， 調(diào)節(jié)單個(gè)元素的曲線變量等。Hype3實(shí)現(xiàn)的效果可能不那么精致，但是可以直接導(dǎo)出對(duì)應(yīng)的代碼。

Pixate除了一些基礎(chǔ)的控件供你使用，特殊的動(dòng)效可能需要一定的代碼才能完成，可能對(duì)于沒有語言基礎(chǔ)的設(shè)計(jì)而言效果過于簡單。

2. 復(fù)合型動(dòng)效

Origami是一款基于Quartz Composer的插件，它提供了很多自定義的控件。但界面相對(duì)設(shè)計(jì)師而言不夠友好。

3. 創(chuàng)意性動(dòng)效工具

如果你要做一個(gè)很酷的開機(jī)動(dòng)畫，那么你可以選擇AE或者C4D。你可以專注在你的創(chuàng)意上而不被代碼表達(dá)式干擾。

很多新手會(huì)問，哪個(gè)軟件是最好的？其實(shí)并沒有完全的類比，在恰當(dāng)?shù)男枨笙逻x擇恰當(dāng)?shù)能浖?，用最低的成本完成你的需求就好。你可能?huì)用AE去做 一個(gè)復(fù)雜的開機(jī)動(dòng)效，用flinto展現(xiàn)了交互邏輯都是ok的。

最后，推薦一些值得參考的站：

1. Capptivate
2. UI animation
3. LitterBigDetail

作者：卜妮

來源：微信公眾號(hào)【優(yōu)酷土豆用戶體驗(yàn)設(shè)計(jì)中心】

版權(quán)聲明：人人都是產(chǎn)品經(jīng)理尊重行業(yè)規(guī)范，所轉(zhuǎn)載的文章都注明作者和來源，若標(biāo)注有誤，請(qǐng)聯(lián)系主編QQ：419297645更改。