大家好，我是大E。這是一篇material design 文檔動(dòng)畫部分的學(xué)習(xí)筆記，標(biāo)題什么的是我瞎編的，看在我中學(xué)被發(fā)了50張好人卡的份上原諒我吧?？诤Y(jié)束，接下來(lái)是正文：

Summary:

Material Design動(dòng)畫交互

動(dòng)畫速度的3個(gè)原則

3種交互方式

如何設(shè)計(jì)有意義的動(dòng)畫

使人高興的動(dòng)畫細(xì)節(jié)

1 | Material Design動(dòng)畫交互

谷歌上一代設(shè)計(jì)語(yǔ)言是卡片設(shè)計(jì)，而這一代作為卡片的延伸，Material Design 以紙片與墨水作為靈感，由紙片與墨水組成的設(shè)計(jì)隱喻貫穿整個(gè)material design 的所有細(xì)節(jié)，動(dòng)畫設(shè)計(jì)也不例外。具體體現(xiàn)在哪？客官不急，聽我一一道來(lái)：

首先，動(dòng)畫設(shè)計(jì)的出發(fā)點(diǎn)，我歌認(rèn)為每個(gè)動(dòng)畫效果應(yīng)該都是要有意義的。動(dòng)效的重要性可以簡(jiǎn)單的體現(xiàn)在這個(gè)三個(gè)方面：

動(dòng)效可以有效的暗示引導(dǎo)用戶操作。

動(dòng)效的目的是為了吸引用戶的注意力。

轉(zhuǎn)場(chǎng)的動(dòng)畫應(yīng)該高效，清晰。

以上是道，何為術(shù)？

2 | 動(dòng)畫速度的3個(gè)原則

1, 動(dòng)畫應(yīng)該有快有慢，我們要認(rèn)識(shí)到線性的速度會(huì)使用戶感到疲倦。（我就不舉九淺一深的例子了，你們自己體會(huì)( ′_ゝ`)(T_T)）

那怎么做到有快有慢?

2, 速度應(yīng)該遵循快入慢出的原則?？焖俚倪M(jìn)入，平緩的移出，會(huì)使用戶有愉悅感。 如下圖所示意的速度對(duì)照：

請(qǐng)這樣做.可以明顯感覺(jué)到綠球快進(jìn)，慢出。

請(qǐng)不要這樣做！紅球進(jìn)和出都是一個(gè)速度，不和諧。

3,不同的元件，動(dòng)畫的速度應(yīng)該是不同的。遵循真實(shí)世界的物理規(guī)律，個(gè)頭小的元件可以在短時(shí)間內(nèi)完成加速和減速動(dòng)作，而個(gè)頭大元件則應(yīng)用更多的時(shí)間完成加速和減速動(dòng)作。淺層次可以把它理解為小快大慢。

3 | 3種交互方式

我歌認(rèn)為用戶的每一個(gè)操作都應(yīng)該得到反饋的。而當(dāng)用戶得到極具漂亮與邏輯性的動(dòng)畫效果時(shí)，用戶會(huì)產(chǎn)生愉悅。(我家貓：鏟屎的，快來(lái)愉悅朕→_→)而這會(huì)鼓舞用戶對(duì)軟件進(jìn)行進(jìn)一步的探索：如果按了這個(gè)會(huì)發(fā)生什么事？我在點(diǎn)點(diǎn)另一個(gè)好了。

谷歌官方介紹了三種交互實(shí)例：

1, 表層的交互設(shè)計(jì)（surface reaction）

表層的交互設(shè)計(jì)是最常見的一種交互方式了，最古老應(yīng)該可以追溯到鼠標(biāo)懸停/點(diǎn)擊鏈接變色。而在material design 中，借用墨水的隱喻，墨水是覆蓋在每一張紙上的表層現(xiàn)象，所以，點(diǎn)擊時(shí)，就像蓋了一層墨水上去。谷歌實(shí)例了一種優(yōu)雅的做法是點(diǎn)擊漣漪效果

這里一個(gè)細(xì)節(jié)是漣漪散開的中心點(diǎn)。這個(gè)中心永遠(yuǎn)都是手指點(diǎn)擊的交互點(diǎn)，或鼠標(biāo)移入的點(diǎn)。

2, 物體本身的回饋（Material response）

Surface reaction 來(lái)自于墨水的隱喻。但material 里的元素，如按鈕，本身也能做出反饋，如顯示隱藏菜單：

正確的做法。物體從觸控點(diǎn)出現(xiàn)，視覺(jué)上可以感覺(jué)到彈出菜單與按鈕的視覺(jué)連接。

雅美蝶！從中間亂入，切斷了與觸控點(diǎn)的聯(lián)系。

再如，觸控上升效果：

如果你細(xì)心發(fā)現(xiàn)，日常APP中的很多交互效果都可以歸類為“物體本身的回饋（Material response）”。如微信點(diǎn)贊，愛心變大。微博點(diǎn)贊，大拇指變大。強(qiáng)烈的反饋能帶來(lái)身心得愉悅。

3, 放射性動(dòng)畫效果（Radial action）

使用者的操作行為會(huì)有一個(gè)中心點(diǎn)，透過(guò)這個(gè)中心點(diǎn)，使用者將他們的操作意圖輸入這個(gè)系統(tǒng)。與使用者的輸入點(diǎn)建立強(qiáng)烈視覺(jué)連結(jié)，可以讓使用者更清楚知道他所做的動(dòng)作，不論是從手指觸控螢?zāi)换蚴菑柠溈孙L(fēng)輸入聲音。橫跨螢?zāi)坏膭?dòng)畫效果，應(yīng)該隨著與中心點(diǎn)的距離增加，前進(jìn)式地引發(fā)動(dòng)畫，就像建立一個(gè)漣漪動(dòng)畫。以上文字是我抄的，簡(jiǎn)單如栗：

4 | 如何設(shè)計(jì)有意義的動(dòng)畫

我們?cè)O(shè)計(jì)交互動(dòng)畫，說(shuō)白了就是在導(dǎo)演下列三種元素：

進(jìn)入的元件：可能是直接新增的元件或從其他位置轉(zhuǎn)變過(guò)來(lái)的，這些元件有各自被引進(jìn)或再製造的方式。

離開的元件：與新內(nèi)容不再相關(guān)的元件必須透過(guò)適當(dāng)?shù)姆绞揭瞥?/p>

共用的元件：從漸變動(dòng)畫開始到結(jié)束都持續(xù)存在的元件，可能是細(xì)小的icon圖示或顯眼的大型圖片，透過(guò)動(dòng)畫改變成符合螢?zāi)坏某叽纭?/p>

立flag：機(jī)智的小伙伴們，觀看下面谷神的例子說(shuō)出它們分別是啥？

老濕，我知道：

進(jìn)入元件：歌手背景寫真，專輯信息，播放按鈕，專輯曲目，返回按鈕，黃色轉(zhuǎn)場(chǎng)動(dòng)畫

離開元件：漢堡圖標(biāo)，黃色轉(zhuǎn)場(chǎng)動(dòng)畫

共用元件：專輯封面，歌曲播放控制條，搜索，更多目錄

get了這個(gè)，下次小伙伴們?cè)诜治鰟?dòng)畫的時(shí)候可以從這三個(gè)維度進(jìn)行分析。

注意：

當(dāng)你在設(shè)計(jì)你的動(dòng)畫時(shí)，請(qǐng)注意以下幾件事：

思考使用者的注意力應(yīng)該如何被引導(dǎo)？什麼樣的元件或動(dòng)作能夠協(xié)助這個(gè)目標(biāo)？動(dòng)畫過(guò)程中，要進(jìn)入、離開或共用的元件，要如何安排強(qiáng)調(diào)或弱化？

設(shè)計(jì)畫面時(shí)，思考動(dòng)畫前后的狀態(tài)，在漸變的過(guò)程中透過(guò)顏色及共用的元件，找到機(jī)會(huì)創(chuàng)造視覺(jué)關(guān)聯(lián)性。

審慎地加入動(dòng)作：思考如何透過(guò)移動(dòng)一個(gè)元件，使動(dòng)畫漸變的過(guò)程更加清晰流暢。

如下面的一個(gè)示范：

這樣做：

通過(guò)上下彈出動(dòng)畫，就像幕布一般，觸碰點(diǎn)與新場(chǎng)景創(chuàng)造了視覺(jué)的關(guān)聯(lián)性。

別這樣：

無(wú)動(dòng)畫過(guò)渡，新場(chǎng)景的出現(xiàn)顯得莫名其妙。

2個(gè)可利用的方法：

1, 階層式的時(shí)間差：

更加有層次的展示動(dòng)畫，能引導(dǎo)用戶注意力，分清主次。

2, 一致性的方向：

創(chuàng)造了視覺(jué)關(guān)聯(lián)系，并且動(dòng)畫效果清晰流暢。

5 | 使人高興的動(dòng)畫細(xì)節(jié)

充滿創(chuàng)意的動(dòng)畫細(xì)節(jié)會(huì)使用戶有驚喜感：谷歌提供的關(guān)于圖標(biāo)細(xì)節(jié)的兩個(gè)例子：

這些細(xì)節(jié)的創(chuàng)造需要靈感，而靈感需要積累，在你創(chuàng)造前，欣賞很重要。下面分享幾個(gè)積累交互靈感的干貨資源：

Capptivate：Capptivate是一個(gè)聚合APP動(dòng)效Design Pattern的網(wǎng)站

http://capptivate.co/

LitterBigDetail：LitterBigDetail是一個(gè)匯總微設(shè)計(jì)的網(wǎng)站

http://littlebigdetails.com/

Dribbble：大名鼎鼎的設(shè)計(jì)師網(wǎng)站

https://dribbble.com/

Behance：同上

https://www.behance.net/

學(xué)習(xí)資料：

Google Material Design 繁體中文版

http://wcc723.gitbooks.io/google_design_translate/content/

極客學(xué)院Material Design

http://www.jikexueyuan.com/course/124.html

谷歌官方文檔（英文版）

http://www.google.com/design/spec/material-design/introduction.html

再扯幾句：小的英語(yǔ)只過(guò)4級(jí)，看官方文檔著實(shí)吃力。這里推薦一下干貨：

在gitbook 上有臺(tái)灣人民眾包翻譯的繁體中文版，那流暢度和質(zhì)量不知道比內(nèi)地的好多版本高到哪里去了，推薦閱讀。

極客學(xué)院的是視頻課程，聽著里面大叔咸濕的嗓音，比較不悶。

但以上兩份資料內(nèi)容上有些不齊全，因?yàn)楣雀栉臋n隨時(shí)會(huì)更新內(nèi)容，所以本文中的所舉例子都是英文版的最新實(shí)例。而且排版上官方確實(shí)是最棒的，內(nèi)地有些翻譯文檔因?yàn)閳D文排版錯(cuò)誤，導(dǎo)致不知所云。所以還是對(duì)照著學(xué)習(xí)，效果最好。

PS: 官方演示視頻是用webm 格式的。因微信不支持，我用gif 代替，一些顏色上的偏差請(qǐng)不要在意這些細(xì)節(jié)。請(qǐng)打開谷歌官方文檔（英文版）欣賞原視頻。