MaterialDesignAnimation_html/css

Authentic motion 真實的運(yùn)動

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

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

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

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

自然的加速和減速

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

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

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

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

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

入口和出口

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

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

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

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

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

做出調(diào)整

不是所有的物體都是以同樣的方式運(yùn)動的. 輕或者小的物體可以運(yùn)動得更快,因為它們需要的力更小,而大或者重的物體需要更多地時間來加速.

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

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

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

User Input

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

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

Surface reaction

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

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

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

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

Material response

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

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

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

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

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

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

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

Radial Action: 徑向行為

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

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

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

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

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

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

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

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

Visual continuity 視覺連續(xù)性

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

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

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

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

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

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

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

注意事項:

設(shè)計動畫時,注意以下幾個方面:

1.引導(dǎo)用戶的注意力. 用戶的注意力應(yīng)該被引導(dǎo)到哪里? 什么元素和運(yùn)動可以達(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)動. 考慮如何運(yùn)動一個特定的元素給轉(zhuǎn)換增加清晰度和愉悅感.

Hierarchical timing

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

然而, 這并不是一個簡單的公式, 說最重要的東西最先運(yùn)動, 最不重要的最后運(yùn)動.

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

Consistent choreography

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

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

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

最佳實踐:

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

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

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

4. 如果所有運(yùn)動的元素都跟隨它們在屏幕上的路徑, 看起來會美觀并且有序嗎? 是否能夠描繪出一幅清晰的圖, 指示應(yīng)該往哪里看?

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

Delightful details

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

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

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

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

參考資料

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com