用戶體驗(yàn)設(shè)計(jì)的發(fā)展日趨完善，優(yōu)秀的動效是完善用戶體驗(yàn)中不可或缺的一環(huán)，優(yōu)秀的界面動態(tài)設(shè)計(jì)可以讓產(chǎn)品的用戶體驗(yàn)錦上添花……

你會說，這些道理我都懂，但是動效做起來真的很麻煩啊。直接切入到大家常見的問題吧：

一般情況下，在溝通界面動效的過程中，工程師會希望設(shè)計(jì)師使用更具體的表達(dá)方式。這里所謂「具體」的意思是：接近代碼。然而同樣的一套動效，在設(shè)計(jì)工具上和 Web 端上實(shí)現(xiàn)邏輯可能完全不一樣。

沒有了精確的參數(shù)描述。設(shè)計(jì)師很難跟開發(fā)解釋清楚要做一個什么樣的動效。而只有簡單的口頭描述的話、開發(fā)做起來也很痛苦，導(dǎo)致最終開發(fā)效率低下。以至于知乎上出現(xiàn)了這樣的問題：在APP的開發(fā)過程中，作為設(shè)計(jì)師，如何說服程序去實(shí)現(xiàn)動效？

看到這里也許你會很抓狂。好消息是隨著卻越來越多優(yōu)秀開源庫的誕生，動效的實(shí)現(xiàn)也變得越來越簡單。甚至以后設(shè)計(jì)師都不用說服工程師了，自己可以直接上手在端上實(shí)現(xiàn)動畫了。舉個例子 San ：https://baidu.github.io/san/

這個例子中卡片 Hover 動效的設(shè)計(jì)和開發(fā)都是我做的。

雖然只是一個很簡單的細(xì)節(jié)，卻給人以驚喜，一定程度提高了網(wǎng)站的品質(zhì)感。

本篇教程會分為兩個部分來詳細(xì)闡述：

• 上篇：在界面設(shè)計(jì)中，什么樣的動效是好動效？
• 下篇：從前端的角度來講，有哪些便捷的方法實(shí)現(xiàn)這些動效？

一、什么樣的動效是好動效

動效并不是設(shè)計(jì)師為了炫技設(shè)計(jì)出來的東西，它是有很多現(xiàn)實(shí)意義的。為了更加高效（心甘情愿）的去實(shí)現(xiàn)動效（做苦力）。我們首先需要知道什么動效是好動效。

簡單來講。動效有以下三個方面的價(jià)值。

1. 滿足用戶的心理預(yù)期

我們生活在一個物理世界，任何事物的運(yùn)動都是符合物理世界的客觀規(guī)律的。因此，人對于事物的觀察和理解都是出于對物理規(guī)律的理解。而虛擬界面上的元素都是現(xiàn)實(shí)世界中并不存在的東西，會讓用戶有陌生感。

通過合理的動效，讓虛擬界面模擬物理世界的規(guī)律，例如慣性、視差等等，可以讓這個虛擬的世界與物理世界產(chǎn)生交集。用戶會把自己對物理世界的認(rèn)知映射到對產(chǎn)品的認(rèn)知上。

下面舉兩個例子來說說具體是怎么映射的：

質(zhì)量

物體都擁有質(zhì)量，質(zhì)量帶來了我們最常見的物理現(xiàn)象：慣性。在這個例子中、方塊在界面上通過加速、減速、反彈、過沖等等動態(tài)來模擬所謂的重量感，讓這個簡單的界面元素有了實(shí)在感。

空間

我們所處的世界是三維的，然而受顯示設(shè)備的影響，目前大家接觸的大部分人機(jī)界面還是二維的，如何通過一個二維平面來模擬三維的世界呢？

在這個例子中，近處的方塊運(yùn)動的快，遠(yuǎn)處的方塊運(yùn)動的遠(yuǎn)。通過這樣的視差的效果，整個屏幕有縱深感，不再是一個簡單的二維平面。我們很容易感受到，方塊間的層疊順序。同理，類似簡單的動效，可以很輕易的表達(dá)元素的層級。

小結(jié)：合理的動效可以滿足用戶的心理預(yù)期，越是符合人對物理世界認(rèn)知的設(shè)計(jì)，就越容易幫助用戶去預(yù)判或者理解產(chǎn)品的交互邏輯。

2. 引導(dǎo)用戶注意力

如果把一個界面上的所有元素，按照明顯程度來排序，顯而易見我們會得到這樣一個順序：動態(tài) > 色彩 > 明度。

所以通過合理的動效，可以低成本的抓取人的注意力，讓他們關(guān)注設(shè)計(jì)師想讓他們關(guān)注的東西。

網(wǎng)易新聞的刷新動畫，就是一個很優(yōu)秀的例子：

在這個例子中，左上角有一個非常簡單的白色線狀 icon，并不會干擾整個頁面的主功能，顏色，以及視覺。但是通過小的動畫，提升了 icon 的視覺層級。讓我們很容易注意到它，起到了非常好的提示效果。

3. 情感化設(shè)計(jì)

情感話設(shè)計(jì)的目標(biāo)是在用戶接觸和使用產(chǎn)品的過程中，激發(fā)用戶的正向情感，比如愉快，信任，滿足；避免用戶產(chǎn)生負(fù)向情感，比如失望，挫折感，痛苦。正向的情感會使用戶更樂于使用產(chǎn)品，遇到使用過程的一些小問題也更加包容。

而優(yōu)良的界面動效可以打磨產(chǎn)品的品質(zhì)感，下面就是動效在情感化設(shè)計(jì)中的優(yōu)秀例子：

twitter 點(diǎn)贊后，心會亮起的同時，還有一個小小的禮花效果。雖然完全沒必要加上這個禮花效果，但是這種豐富的細(xì)節(jié)會讓用戶對產(chǎn)品產(chǎn)生一個正向的情感關(guān)聯(lián)，而這種關(guān)聯(lián)最終將贏得用戶對產(chǎn)品的認(rèn)同。

Facebook 點(diǎn)贊之后，可以表達(dá)你的態(tài)度，比如流淚，憤怒或者是贊。雖然在功能上來說，這些表情有靜態(tài)的就可以了。但是正是動畫中豐富的表情細(xì)節(jié)，進(jìn)一步引導(dǎo)用戶愿意去表態(tài)。不僅給人以驚喜，也顯著的提升表態(tài)的使用量。

動效的價(jià)值就講到這里，接下來，基于以上三點(diǎn)，我會說一說怎樣去構(gòu)建一個合理高效的動效體系。

二、優(yōu)秀的界面動效體系

優(yōu)秀的界面動效體系符合以下四點(diǎn)原則：

• 通過動效暗示二維界面暗含的三維層級關(guān)系，及其暗含的操作邏輯。
• 引導(dǎo)用戶的注意力向界面重點(diǎn)元素。
• 通過動態(tài)設(shè)計(jì)讓情感化設(shè)計(jì)變得更生動。
• 動效的視覺效果統(tǒng)一，控制數(shù)量，不濫用。

接下來用 iOS 系統(tǒng)動效來舉例子，眾所周知 iOS 的動效系統(tǒng)經(jīng)過了多次的迭代，已經(jīng)做的非常完美，而上述四點(diǎn)，在接下來的例子中都有體現(xiàn)。

層級暗示

切換界面的時候，所有打開的 APP 界面覆蓋在剛才的主界面上面，同時主界面模糊，內(nèi)容區(qū)域的縮小，共同營造出原來界面往深處后退的效果。很直觀的表達(dá)了主界面和 APP 界面的層級關(guān)系。

在鍵盤機(jī)的時代，通過菜單進(jìn)入一個新頁面的時候，通常做法是整個頁面刷新一下，但是這樣操作久了，打開菜單太多，很容易讓人有一種「迷路」的困惑。在這個動畫中，通過界面的左滑、右滑來表達(dá)不同界面之間的層級關(guān)系。即使看不到主菜單，你也知道自己是從哪兒進(jìn)來的。

操作暗示

在這個例子中，長按一個 圖標(biāo)進(jìn)入編輯模式，所有圖標(biāo)都會開始晃動。雖然整個頁面并沒有任何文字提示說明「現(xiàn)在圖標(biāo)可以拖動的」，但是這種抖動的不穩(wěn)定感很直觀的表達(dá)了設(shè)計(jì)者的意圖。

當(dāng)輸入密碼錯誤的時候，密碼輸入欄會顯示出一個搖頭的效果。完全可以想象，假設(shè)用一個錯誤提示的彈窗，不僅會中斷用戶的操作流程，引起人的反感，而且很容易讓人受挫。通過動效，設(shè)計(jì)者用一種更友好簡單的方式達(dá)到了提示的目的。

趣味

這里是開關(guān)狀態(tài)的過度，我們可以看到月亮?xí)杏?，鎖的狀態(tài)有鎖上和開啟兩種。這些有趣味的細(xì)節(jié)動效給用戶帶來驚喜，提升界面的品質(zhì)。

克制

舉了那么多正面例子，下面也說兩個反例。這兩張圖都是我在 dribbble 找到的點(diǎn)贊量非常高的圖。但是實(shí)際上，完全不推薦在產(chǎn)品中使用這樣的效果。

動效不能濫用，要控制數(shù)量。在這頁面中，所有東西都在動。很難讓人抓住視覺重心。當(dāng)菜單欄下滑的時候，每一個菜單都會有一個抖動的效果。我們并不知道這個菜單為什么要這樣顫，看起來作者只是為了炫技這么做，實(shí)際上并沒有傳達(dá)任何的內(nèi)容，還會無形的增加了用戶的操作負(fù)擔(dān)。

好的動效要控制在0.3~0.5秒，本例中，菜單出現(xiàn)幾乎花費(fèi)了一秒。頻繁打開菜單很容易引起人的疲倦，可以說是畫蛇添足了。

小結(jié)

上篇就講到這里，本篇里面我們了解了界面動效的價(jià)值：

• 滿足用戶心理預(yù)期
• 引導(dǎo)用戶注意力
• 情感化設(shè)計(jì)

也接觸到一下優(yōu)秀的界面動效實(shí)例：

• 通過動效暗示二維界面暗含的三維層級關(guān)系，及其暗含的操作邏輯。
• 引導(dǎo)用戶的注意力向界面重點(diǎn)元素。
• 通過動態(tài)設(shè)計(jì)讓情感化設(shè)計(jì)變得更生動。
• 動效的視覺效果統(tǒng)一，控制數(shù)量，不濫用。

在下篇中我會講講有哪些便捷的方式去實(shí)現(xiàn)這些優(yōu)秀動效。其實(shí)我們平時看到的那些天花亂墜的效果，背后涉及到的設(shè)計(jì)參數(shù)非常簡單，只有三個。敬請期待吧。

作者介紹：綠Lvgreen，前端圈的設(shè)計(jì)師，不定期在知乎更新學(xué)習(xí)筆記，歡迎關(guān)注：https://www.zhihu.com/people/xianchan/activities

「動效設(shè)計(jì)精選」

• 動效設(shè)計(jì)科普：《超全面！產(chǎn)品動效設(shè)計(jì)全方位科普手冊》
• 動效設(shè)計(jì)技巧：《7個實(shí)用技巧，讓你的動效變得更優(yōu)秀！》
• 動效設(shè)計(jì)工具：《針對不同設(shè)計(jì)階段，如何選擇合適的動效工具？》
• 動效設(shè)計(jì)教程：《雞爺：那些酷炫的UI動效可不是動一動那么簡單》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com