Material Design Animation

Authentic motion 真實(shí)的運(yùn)動(dòng)

運(yùn)動(dòng)以一種優(yōu)美流動(dòng)的形式描述了空間關(guān)系,功能和目的.

Mass?and weight: 質(zhì)量和重量

在物理世界中,一個(gè)物體要運(yùn)動(dòng),必須有力施加在它身上. 力的強(qiáng)度和持續(xù)時(shí)間規(guī)定了物體的加速度或者運(yùn)動(dòng)方向的改變. 即便是最急促的開始和結(jié)束也不是瞬時(shí)發(fā)生的, 因?yàn)槲矬w的加速或者減速都是需要一定的時(shí)間的. 所以,當(dāng)動(dòng)畫有著生硬的開始或者結(jié)束,或者唐突地改變方向,它們就會(huì)看起來很不自然.

Material design中的運(yùn)動(dòng)應(yīng)該在不失高雅簡(jiǎn)潔和美感的情況下,盡可能地貼近真實(shí)的物理運(yùn)動(dòng)和真實(shí)世界的行為.

自然的加速和減速

加速和減速的變化應(yīng)該在動(dòng)畫持續(xù)時(shí)間內(nèi)平滑變化.

為了特定的目的,要吸引對(duì)某個(gè)物體的注意,或者要給某一個(gè)動(dòng)畫增加特征,可以在開始和結(jié)束的時(shí)候改變它的加速度.

不對(duì)稱的加速和減速會(huì)創(chuàng)造出一種更加自然和愉悅的運(yùn)動(dòng).

當(dāng)加速和減速不平滑的時(shí)候,運(yùn)動(dòng)會(huì)顯示出機(jī)械性,速度和方向上的突兀的改變看起來會(huì)不和諧,引起注意.

這就是為什么不對(duì)稱的曲線變化比線性的變化要好,線性的變化總是會(huì)出現(xiàn)突兀的拐點(diǎn),所以應(yīng)該避免線性變化.

?

入口和出口

物體速度和方向的變化會(huì)引起用戶的注意.

一個(gè)物體在進(jìn)入和退出幀的時(shí)候變化速度,預(yù)示著它運(yùn)動(dòng)的距離.

比如,一個(gè)物體在退出的時(shí)候減速,會(huì)引起注意,暗示著它將停在畫面幀外邊框不遠(yuǎn)處.

特別地,在轉(zhuǎn)場(chǎng)動(dòng)畫的時(shí)候,需要考慮入口或出口的哪一部分應(yīng)該獲得最多的注意.?在入口和出口處都應(yīng)該采用一個(gè)近乎常量的速度,來減小注意力.

不要在進(jìn)入的時(shí)候加速,退出的時(shí)候減速,這樣會(huì)吸引很多不必要的焦點(diǎn),分散用戶的注意力.

做出調(diào)整

不是所有的物體都是以同樣的方式運(yùn)動(dòng)的. 輕或者小的物體可以運(yùn)動(dòng)得更快,因?yàn)樗鼈冃枰牧Ω?而大或者重的物體需要更多地時(shí)間來加速.

使用曲線型的運(yùn)動(dòng),避免線性分段的路徑. 找出最適合物體的運(yùn)動(dòng)特性,然后相應(yīng)地表達(dá)出來.

曲線表現(xiàn)了一種在特定值的范圍內(nèi),隨時(shí)間的變化. 找出最適合你想描述的運(yùn)動(dòng)的曲線.

?

Responsive Interaction 響應(yīng)式交互

User Input

觸摸,聲音,鼠標(biāo)和鍵盤是同等重要的用戶輸入.

UI元素看起來都是可觸摸的,視覺和運(yùn)動(dòng)線索應(yīng)該及時(shí)承認(rèn)用戶輸入,并且應(yīng)該以一種像是被直接操縱的形式動(dòng)畫.

Surface reaction

收到輸入事件后,系統(tǒng)應(yīng)該在接觸點(diǎn)上提供即時(shí)的視覺確認(rèn)線索,比如: 手指點(diǎn)擊的地方, 聲音輸入的mic, 鍵盤點(diǎn)擊的合適的字段.

表達(dá)這種接觸的核心視覺機(jī)制是:"點(diǎn)擊波紋”, 即”Touch Ripple”.

設(shè)備表達(dá)了一個(gè)點(diǎn)擊事件的方法和持續(xù)事件,也可以用來表達(dá)其他的動(dòng)態(tài)變量,比如音量或者點(diǎn)擊壓力.

?

最佳實(shí)踐: 從輸入的接觸點(diǎn)(比如指尖的接觸點(diǎn)或者聲音mic的icon)開始,讓視覺反應(yīng)徑向(輻射狀,放射式)傳播.

?

Material response

除了墨水式的表面反應(yīng), 材料在被點(diǎn)擊的時(shí)候可以抬起來,標(biāo)識(shí)出一種活躍狀態(tài).

通過點(diǎn)擊,用戶可以生成新的材料,或者轉(zhuǎn)換已經(jīng)存在的材料,或者直接通過拖拽或者快劃來操縱材料.

材料可以被線性或者徑向改變大小.

在狀態(tài)轉(zhuǎn)換的時(shí)候顯示動(dòng)畫: http://developer.android.com/training/material/animations.html#ViewState

?

原點(diǎn): 當(dāng)用戶觸發(fā)生成新的材料的時(shí)候,它應(yīng)該從輸入點(diǎn)開始,進(jìn)行尺寸增長(zhǎng). 這樣就在輸入和生成之間建立了聯(lián)系.

?

點(diǎn)擊升高: 當(dāng)一個(gè)card或者一個(gè)可分離的元素被激活的時(shí)候, 這個(gè)card應(yīng)該升高,標(biāo)識(shí)它處于一個(gè)激活狀態(tài).

為你的View指定高度:? http://developer.android.com/training/material/shadows-clipping.html#Elevation

?

Radial Action: 徑向行為

應(yīng)該給用戶輸入加上視覺反應(yīng)使之更加清晰.

墨水從輸入點(diǎn)向四面散開的視覺波紋就是一種徑向行為.

輸入事件是可視化的: 輸入事件和屏幕上事件之間的聯(lián)系應(yīng)該是視覺上綁定的.?對(duì)于觸摸事件或者鼠標(biāo)來說, 這個(gè)發(fā)生在接觸點(diǎn)上, 對(duì)于聲音來說,則是麥克風(fēng)的icon. 一個(gè)touch ripple標(biāo)識(shí)著touch發(fā)生的位置還有時(shí)間,另外它也標(biāo)識(shí)著點(diǎn)擊輸入被接收到了.

?

連接輸入和行為: 輸入事件觸發(fā)的轉(zhuǎn)換或者行為動(dòng)作, 應(yīng)該與輸入事件有視覺聯(lián)系. 震中附近的波紋反應(yīng)比遠(yuǎn)處的反應(yīng)要發(fā)生的快, 比如: 1.一系列的內(nèi)容變化:?很多圖片的出現(xiàn)或消失; 2.一系列的材料運(yùn)動(dòng): 卡片移入或者移出屏幕.

Use?the reveal effect:? http://developer.android.com/training/material/animations.html#Reveal

?

Meaningful transitions 有意義的轉(zhuǎn)換

運(yùn)動(dòng)設(shè)計(jì)可以通過通知和取悅的兩種方式有效地引導(dǎo)用戶的注意力.

使用運(yùn)動(dòng)可以: 讓用戶在導(dǎo)航上下文之間平滑轉(zhuǎn)換, 解釋屏幕上元素的排布, 加強(qiáng)元素繼承體系的概念.

?

Visual continuity 視覺連續(xù)性

兩種視覺狀態(tài)間的轉(zhuǎn)換應(yīng)當(dāng)是清晰, 平滑, 并且輕松不費(fèi)力的.

一個(gè)設(shè)計(jì)良好的轉(zhuǎn)換可以告訴用戶應(yīng)該把注意力放在哪里.

?

轉(zhuǎn)換類型和行為:

Incoming elements: 新生成的或新轉(zhuǎn)換成的項(xiàng)目被引進(jìn)或者重新建立.

Outgoing elements: 與上下文不再相關(guān)的元素被移除.

Shared elements: 轉(zhuǎn)換期間存在的元素, 可以是微小的(一個(gè)圖標(biāo)), 或者占據(jù)主導(dǎo)位置的(一個(gè)gallary圖像慢慢增長(zhǎng)到占據(jù)整個(gè)屏幕).

?

自定義Activity轉(zhuǎn)場(chǎng):? http://developer.android.com/training/material/animations.html#Transitions

?

注意事項(xiàng):

設(shè)計(jì)動(dòng)畫時(shí),注意以下幾個(gè)方面:

1.引導(dǎo)用戶的注意力. 用戶的注意力應(yīng)該被引導(dǎo)到哪里? 什么元素和運(yùn)動(dòng)可以達(dá)到這種目的? 轉(zhuǎn)換過程中, incoming, outgoing, shared元素都應(yīng)該如何被強(qiáng)調(diào)或者去強(qiáng)調(diào)?

2.視覺上連接轉(zhuǎn)換. 在轉(zhuǎn)換狀態(tài)之間創(chuàng)建視覺聯(lián)系,可以通過顏色或者持續(xù)性的元素.

3.使用精確的運(yùn)動(dòng). 考慮如何運(yùn)動(dòng)一個(gè)特定的元素給轉(zhuǎn)換增加清晰度和愉悅感.

?

Hierarchical timing

當(dāng)建立一個(gè)轉(zhuǎn)換時(shí), 要注意元素運(yùn)動(dòng)的順序和時(shí)間. 要確保運(yùn)動(dòng)支持信息繼承關(guān)系, 通過為視線建立一個(gè)路徑來傳達(dá)最重要的內(nèi)容.

然而, 這并不是一個(gè)簡(jiǎn)單的公式, 說最重要的東西最先運(yùn)動(dòng), 最不重要的最后運(yùn)動(dòng).?

轉(zhuǎn)換元素的時(shí)間應(yīng)該平滑地流動(dòng), 避免脫節(jié)的感覺.

Consistent choreography

轉(zhuǎn)換中的元素應(yīng)該協(xié)調(diào)地運(yùn)動(dòng). 元素運(yùn)動(dòng)經(jīng)過的路徑應(yīng)該有意義并且有序. 偶然性的運(yùn)動(dòng)會(huì)分散注意力.

當(dāng)轉(zhuǎn)移中的元素都很協(xié)調(diào)的時(shí)候, 會(huì)幫助用戶更好地理解應(yīng)用.

Use curved motion:? http://developer.android.com/training/material/animations.html#CurvedMotion

?

最佳實(shí)踐:

1. 盡量避免線性的路徑. 但是當(dāng)運(yùn)動(dòng)被限制在一個(gè)軸上的時(shí)候, 或者運(yùn)動(dòng)是朝向或者離開某個(gè)點(diǎn)的時(shí)候例外.

2. 讓方向性的元素在轉(zhuǎn)換期間的運(yùn)動(dòng)保持一致. 避免沖突的運(yùn)動(dòng)和重疊的路徑.

3. 元素運(yùn)動(dòng)的深度是多少以及為什么?

4. 如果所有運(yùn)動(dòng)的元素都跟隨它們?cè)谄聊簧系穆窂? 看起來會(huì)美觀并且有序嗎? 是否能夠描繪出一幅清晰的圖, 指示應(yīng)該往哪里看?

5. 通過一致的進(jìn)入和移出運(yùn)動(dòng)來強(qiáng)調(diào)元素間的空間關(guān)系.

?

Delightful details

動(dòng)畫可以存在于一個(gè)app中的所有元素組件, 不論規(guī)模, 從一個(gè)細(xì)節(jié)的icon, 到關(guān)鍵性的轉(zhuǎn)換和動(dòng)作.

所有的元素一起工作, 來構(gòu)建一個(gè)滴水不漏的體驗(yàn)和一個(gè)有功能并且漂亮的app.

?

動(dòng)畫最基本的用法是在轉(zhuǎn)換中, 但是一個(gè)app如果能在一些微小的地方使用動(dòng)畫真的能夠取悅用戶.

一個(gè)可以變成箭頭或者播放鍵的菜單按鈕, 控制了一個(gè)平滑轉(zhuǎn)換, 同時(shí)具有兩種功能: 通知了用戶, 也讓app本身在這一刻充滿了驚喜和設(shè)計(jì)感.

?

?

?

參考資料

Material Design Animation:? http://www.google.com/design/spec/animation/authentic-motion.html

?