在Material design的世界中侥涵，動(dòng)效用一種優(yōu)雅、流動(dòng)的方式來(lái)描述空間關(guān)系儡嘶、功能喇聊、和意向。

為什么說(shuō)動(dòng)效很重要蹦狂？

動(dòng)效可以向我們展示一個(gè)App 是如何構(gòu)成和用途誓篱。

動(dòng)效可以做到：

不同視圖之間的焦點(diǎn)引導(dǎo)。

當(dāng)用戶(hù)完成了一個(gè)手勢(shì)后凯楔，提示用戶(hù)將會(huì)發(fā)生什么

明確元素之間的層級(jí)和空間關(guān)系

當(dāng)程序在后臺(tái)運(yùn)行時(shí)窜骄，分散用戶(hù)的注意力（例如獲取內(nèi)容或載入下一個(gè)視圖）

潤(rùn)色整個(gè)app：個(gè)性化、令人愉悅

如何制作材料設(shè)計(jì)的動(dòng)效摆屯？

材料設(shè)計(jì)的運(yùn)動(dòng)吸取了一些真實(shí)世界的力學(xué)元素邻遏，例如重力和摩擦力。這些力反應(yīng)的是虐骑，用戶(hù)對(duì)屏幕操作的影響准验，以及這些元素是如何相互反饋的。

材料設(shè)計(jì)的運(yùn)動(dòng)具有以下幾個(gè)特征：

1. 響應(yīng)式的

材料設(shè)計(jì)的動(dòng)效是充滿活力的廷没。它能迅速精確響應(yīng)用戶(hù)用戶(hù)所觸發(fā)的內(nèi)容糊饱。

在移動(dòng)設(shè)備上的長(zhǎng)動(dòng)畫(huà)大約是300-400ms，短動(dòng)畫(huà)大概是150-200ms颠黎。過(guò)長(zhǎng)的動(dòng)畫(huà)讓人感覺(jué)遲鈍另锋，過(guò)短的動(dòng)畫(huà)讓人覺(jué)得難以看明白滞项。

用戶(hù)觸摸屏幕時(shí)，通過(guò)漪漣動(dòng)畫(huà)能使用戶(hù)確認(rèn)輸入砰蠢”推耍卡片上升表示該卡片處于激活狀態(tài)。

顯示觸發(fā)元件或動(dòng)作和創(chuàng)建出的新的卡片之間的聯(lián)系台舱。

2.?自然的

材料設(shè)計(jì)的動(dòng)效通過(guò)模仿真實(shí)世界的力律杠，而展現(xiàn)了自然的運(yùn)動(dòng)過(guò)程。

在真實(shí)的世界中竞惋，一個(gè)物體可以被重量柜去、表面摩擦力影響很快的加速或減速。同樣的拆宛，材料設(shè)計(jì)的動(dòng)效也是不會(huì)發(fā)生突然停止嗓奢，或者突然啟動(dòng)，都是會(huì)有一個(gè)加速度或者減速度浑厚。（紅色沒(méi)緩動(dòng)股耽，藍(lán)色有緩動(dòng)）

真實(shí)世界中的力，例如重力钳幅，能使一個(gè)元素沿曲線運(yùn)動(dòng)而非直線運(yùn)動(dòng)物蝙。

材料設(shè)計(jì)的動(dòng)效轉(zhuǎn)場(chǎng)是沿著一個(gè)弧線的。

3.?可察覺(jué)的

材料設(shè)計(jì)的動(dòng)效是可以被周?chē)h(huán)境察覺(jué)的敢艰，包括用戶(hù)和周?chē)渌脑匚芷颉Ｋ梢员晃矬w吸引，并且恰當(dāng)?shù)幕貞?yīng)用戶(hù)的意圖钠导。

作為過(guò)渡元素震嫉，他們和他們周?chē)氐倪\(yùn)動(dòng)是精心安排的，可以通過(guò)這個(gè)過(guò)程看出他們之間的關(guān)系牡属。

卡片可以推動(dòng)其他卡片票堵，讓他們給自己讓開(kāi)路。

元素可能會(huì)吸引其他元素加入逮栅，當(dāng)他們相互接近時(shí)合為一體换衬。

4. 有引導(dǎo)意向的

材料設(shè)計(jì)的動(dòng)效能使焦點(diǎn)在對(duì)的時(shí)間聚焦在對(duì)的點(diǎn)。

轉(zhuǎn)場(chǎng)動(dòng)畫(huà)有助于引導(dǎo)用戶(hù)進(jìn)行下一步的交互证芭。

運(yùn)動(dòng)可以傳遞不同的信號(hào)，例如担映，一個(gè)操作是否不可用废士。

動(dòng)畫(huà)能使用戶(hù)關(guān)注特定對(duì)象。

如何設(shè)計(jì)一個(gè)好的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)蝇完？

好的動(dòng)效設(shè)計(jì)應(yīng)該遵從以下幾點(diǎn)：

1. 動(dòng)效是很快的

一個(gè)交互動(dòng)作不應(yīng)該讓用戶(hù)做不必要的等待官硝。

正確：動(dòng)畫(huà)一定要快矗蕊，用戶(hù)無(wú)須等待動(dòng)畫(huà)完成。

錯(cuò)誤：很多元素磨磨蹭蹭很慢的運(yùn)動(dòng)氢架，令動(dòng)畫(huà)時(shí)長(zhǎng)延長(zhǎng)傻咖。

2.?動(dòng)效是明確的

轉(zhuǎn)場(chǎng)動(dòng)畫(huà)應(yīng)該明確，簡(jiǎn)單岖研，一致卿操。應(yīng)該避免一次有太多的元素動(dòng)效。

由于動(dòng)圖太大孙援，上傳到網(wǎng)盤(pán)害淤，麻煩大家查看：http://pan.baidu.com/s/1pLGM0en

正確：保持清晰的路徑進(jìn)入下一個(gè)視圖，最好元件都編排成一個(gè)組拓售。

由于動(dòng)圖太大已傳窥摄，單擊可見(jiàn)：http://www.uisdc.com

錯(cuò)誤：多個(gè)元素移動(dòng)到不同的方向或者交叉路徑，會(huì)造成轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的混亂础淤。

3.?動(dòng)效是統(tǒng)一的

材料設(shè)計(jì)的動(dòng)效是由速度崭放、響應(yīng)性、和意向所統(tǒng)一的鸽凶。在App 中的任何自定義動(dòng)效體驗(yàn)都應(yīng)該貫穿整一個(gè)App币砂。

即使這些app有著不同的功能，但是他們相似的動(dòng)畫(huà)體驗(yàn)讓人感覺(jué)他們是有關(guān)聯(lián)的吱瘩。

動(dòng)效的意義

動(dòng)效的好處可以從以下兩個(gè)例子中明顯看出：其中一個(gè)app遵從這些模式道伟，而另一個(gè)沒(méi)有遵從。

正確：在轉(zhuǎn)場(chǎng)的過(guò)程總使碾，用戶(hù)被引導(dǎo)到了下一個(gè)視圖蜜徽。表層的轉(zhuǎn)場(chǎng)清晰的傳達(dá)出層級(jí)關(guān)系。loading的過(guò)程在后臺(tái)進(jìn)行票摇，以減少延遲時(shí)間拘鞋。

錯(cuò)誤：轉(zhuǎn)場(chǎng)的發(fā)生點(diǎn)沒(méi)有一個(gè)清晰的焦點(diǎn)，所以看不出來(lái)新的頁(yè)面和舊的頁(yè)面之間的聯(lián)系矢门。沒(méi)有感覺(jué)到有任何層級(jí)的關(guān)系盆色，loading用一個(gè)轉(zhuǎn)圈的半圓表現(xiàn)太明顯了，令人感到延遲感祟剔。

原文地址：google.com? ?譯者：@平行煎餅