最全最好用的動(dòng)效落地方法，都幫你總結(jié)好了上

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

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

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

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

看到這里大概你會(huì)很抓狂。好新聞是隨著卻越來越多良好開源庫的誕生，動(dòng)效的實(shí)現(xiàn)也變得越來越簡(jiǎn)單。甚至以后設(shè)計(jì)師都不用說服工程師了，本身可以直接上手在端上實(shí)現(xiàn)動(dòng)畫了。舉個(gè)例子 San ：https://baidu.github.io/san/

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

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

本篇教程會(huì)分為兩個(gè)部分來細(xì)致闡述：

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

一、什么樣的動(dòng)效是好動(dòng)效

動(dòng)效并不是設(shè)計(jì)師為了炫技設(shè)計(jì)出來的東西，它是有許多實(shí)際意義的。為了更加高效（毫不勉強(qiáng)）的去實(shí)現(xiàn)動(dòng)效（做苦力）。我們首先必要知道什么動(dòng)效是好動(dòng)效。

簡(jiǎn)單來講。動(dòng)效有以下三個(gè)方面的價(jià)值。

1. 知足用戶的生理預(yù)期

我們生活在一個(gè)物理世界，任何事物的運(yùn)動(dòng)都是吻合物理世界的客觀規(guī)律的。因此，人對(duì)于事物的觀察和理解都是出于對(duì)物理規(guī)律的理解。而假造界面上的元素都是實(shí)際世界中并不存在的東西，會(huì)讓用戶有陌生感。

通過合理的動(dòng)效，讓假造界面模仿物理世界的規(guī)律，例如慣性、視差等等，可以讓這個(gè)假造的世界與物理世界產(chǎn)生交集。用戶會(huì)把本身對(duì)物理世界的認(rèn)知映射到對(duì)產(chǎn)品的認(rèn)知上。

下面舉兩個(gè)例子來說說詳細(xì)是怎么映射的：

質(zhì)量

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

空間

我們所處的世界是三維的，然而受表現(xiàn)設(shè)備的影響，目前大家接觸的大部分人機(jī)界面照舊二維的，如何通過一個(gè)二維平面來模仿三維的世界呢？

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

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

2. 指導(dǎo)用戶細(xì)致力

假如把一個(gè)界面上的所有元素，按照顯明程度來排序，顯而易見我們會(huì)得到如許一個(gè)順序：動(dòng)態(tài) > 色彩 > 明度。

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

網(wǎng)易消息的刷新動(dòng)畫，就是一個(gè)很良好的例子：

在這個(gè)例子中，左上角有一個(gè)特別很是簡(jiǎn)單的白色線狀 icon，并不會(huì)干擾整個(gè)網(wǎng)頁的主功能，顏色，以及視覺。但是通過小的動(dòng)畫，提拔了 icon 的視覺層級(jí)。讓我們很容易細(xì)致到它，起到了特別很是好的提醒結(jié)果。

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

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

而精良的界面動(dòng)效可以打磨產(chǎn)品的品質(zhì)感，下面就是動(dòng)效在情感化設(shè)計(jì)中的良好例子：

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

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

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

二、良好的界面動(dòng)效系統(tǒng)

良好的界面動(dòng)效系統(tǒng)吻合以下四點(diǎn)原則：

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

接下來用 iOS 體系動(dòng)效來舉例子，眾所周知 iOS 的動(dòng)效體系經(jīng)過了多次的迭代，已經(jīng)做的特別很是完善，而上述四點(diǎn)，在接下來的例子中都有表現(xiàn)。

層級(jí)暗示

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

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

操作暗示

在這個(gè)例子中，長按一個(gè) 圖標(biāo)進(jìn)入編輯模式，所有圖標(biāo)都會(huì)開始晃動(dòng)。雖然整個(gè)網(wǎng)頁并沒有任何筆墨提醒說明「如今圖標(biāo)可以拖動(dòng)的」，但是這種抖動(dòng)的不穩(wěn)固感很直觀的表達(dá)了設(shè)計(jì)者的意圖。

當(dāng)輸入密碼錯(cuò)誤的時(shí)候，密碼輸入欄會(huì)表現(xiàn)出一個(gè)搖頭的結(jié)果。完全可以想象，假設(shè)用一個(gè)錯(cuò)誤提醒的彈窗，不僅會(huì)停止用戶的操作流程，引起人的反感，而且很容易讓人受挫。通過動(dòng)效，設(shè)計(jì)者用一種更友愛簡(jiǎn)單的體例達(dá)到了提醒的目的。

趣味

這里是開關(guān)狀況的過度，我們可以看到玉輪會(huì)有盈虧，鎖的狀況有鎖上和開啟兩種。這些風(fēng)趣味的細(xì)節(jié)動(dòng)效給用戶帶來驚喜，提拔界面的品質(zhì)。

脅制

舉了那么多正面例子，下面也說兩個(gè)反例。這兩張圖都是我在 dribbble 找到的點(diǎn)贊量特別很是高的圖。但是現(xiàn)實(shí)上，完全不保舉在產(chǎn)品中使用如許的結(jié)果。

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

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

小結(jié)

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

• 知足用戶生理預(yù)期
• 指導(dǎo)用戶細(xì)致力
• 情感化設(shè)計(jì)

也接觸到一下良好的界面動(dòng)效實(shí)例：

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

在下篇中我會(huì)講講有哪些便捷的體例去實(shí)現(xiàn)這些良好動(dòng)效。其實(shí)我們平時(shí)看到的那些信口開河的結(jié)果，背后涉及到的設(shè)計(jì)參數(shù)特別很是簡(jiǎn)單，只有三個(gè)。敬請(qǐng)期待吧。

作者介紹：綠Lvgreen