[[150606]]

“這是一篇material design 文檔動(dòng)畫(huà)部分的學(xué)習(xí)筆記，當(dāng)你把交互設(shè)計(jì)以動(dòng)圖的形式呈現(xiàn)出來(lái)并且變成作品集里面的一部分時(shí)，可以大大增加招生官的吸引力，從而提高錄取機(jī)會(huì)。下面就讓我們看一下這些幫助你做好交互設(shè)計(jì)的內(nèi)容吧。”

Summary

• Material Design動(dòng)畫(huà)交互

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

• 3種交互方式

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

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

1、Material Design動(dòng)畫(huà)交互

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

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

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

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

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

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

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

1. 動(dòng)畫(huà)應(yīng)該有快有慢，我們要認(rèn)識(shí)到線性的速度會(huì)使用戶感到疲倦。

那怎么做到有快有慢?

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

請(qǐng)這樣做?？梢悦黠@感覺(jué)到綠球快進(jìn)，慢出。

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

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

3、種交互方式

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

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

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

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

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

• 物體本身的回饋（Material response）

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

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

不要??！從中間亂入，切斷了與觸控點(diǎn)的聯(lián)系。
再如，觸控上升效果：

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

• 放射性動(dòng)畫(huà)效果（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)畫(huà)效果，應(yīng)該隨著與中心點(diǎn)的距離增加，前進(jìn)式地引發(fā)動(dòng)畫(huà)，就像建立一個(gè)漣漪動(dòng)畫(huà)。以上文字是我抄的，簡(jiǎn)單如例：

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

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

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

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

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

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

老濕，我知道：

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

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

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

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

注意：

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

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

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

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

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

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

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

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

a.階層式的時(shí)間差：

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

b.一致性的方向：

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

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

充滿創(chuàng)意的動(dòng)畫(huà)細(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)站

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

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

Behance ：同上

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