全安卓 Material Design Animation Guildline  動(dòng)畫原則分析

適用人群：UI 設(shè)計(jì)從業(yè)人員 以及相關(guān)UI 動(dòng)效愛好者。

 

轉(zhuǎn)發(fā)的朋友請(qǐng)標(biāo)明出處，尊重原創(chuàng)內(nèi)容，謝謝。
 

------------------------------------------------------------------

Android Material Design  UI Animation Guildline 對(duì)于用戶體驗(yàn)愉悅感的提升。

將整個(gè)動(dòng)效規(guī)范進(jìn)行拆解。普及系統(tǒng)層面的 UI 動(dòng)畫知識(shí)，

幫助大家真正的理解 UI 動(dòng)畫的一些具體細(xì)則。

                                   

                    解讀背景

                    一、原則闡述

                    二、影響動(dòng)畫的客觀屬性

                    三、Material Design動(dòng)畫體現(xiàn)形式

                    四、Material Design動(dòng)畫設(shè)計(jì)中應(yīng)當(dāng)注意的

                              ------------------------------------------------------------------

原則闡述:

                                                

第一，真實(shí)，愉悅的動(dòng)效，注重真實(shí)空間的層次，對(duì)象之間的動(dòng)畫不能直接穿插（CROSS Through）。

      視覺設(shè)計(jì)師對(duì)于整個(gè)語言的定義是我們要做真實(shí)，讓用戶愉悅的動(dòng)畫感受，定了這么一套規(guī)范。對(duì)象之間的動(dòng)畫不能直接穿插，什么是穿插？就是我前面一個(gè)人，我絕對(duì)不能從他背面直接穿過他背面來。所以在真實(shí)世界中不可能發(fā)生的情況，在這里也絕對(duì)不可能發(fā)生。一句總結(jié)就是：我們希望用戶的真實(shí)世界和手機(jī)的數(shù)字世界只有一屏之隔。

 

第二，對(duì)象(Object) 在運(yùn)動(dòng)過程中不能瞬間開始或者急停，不自然的運(yùn)動(dòng)方式容易給用戶造成不愉快的感受 。

       這里的對(duì)象，就是我們所有的原生組建，可能是一個(gè)航天的容器，或者一個(gè)表單等等，這些系統(tǒng)的官方組建我們稱為對(duì)象。下面這句話什么意思呢？你看到它跑得快并不會(huì)氣得把手機(jī)摔了，每個(gè)物體奔跑之前都有個(gè)加速度，這個(gè)都是理解。它在移動(dòng)的例子來告訴大家，真實(shí)的例子在啟動(dòng)到加速的過程中不是純線性的，它會(huì)有啟動(dòng)代步的加速度，隨著距離越來越長(zhǎng)，它的加速度會(huì)越來越高，所以我們看到這個(gè)東西會(huì)覺得習(xí)慣，因?yàn)樗褪且粋€(gè)真實(shí)物理的性質(zhì)，或者一條定律。這個(gè)就是這里所描述的不愉悅的感受，因?yàn)椴徽鎸?shí)，所以不愉悅。

 

------------------------------------------------------------------

影響動(dòng)畫的客觀屬性
 

        Property，這里提到三個(gè)量，質(zhì)量、重量、體量，這個(gè)并不是你的手機(jī)重量，而是你的容器、表單，怎么樣理解它有重量或者是質(zhì)量呢？我們先做一個(gè)假設(shè)，同樣密度下，體積越大的物體，質(zhì)量會(huì)越大；體積越小的物體，質(zhì)量越小，明白了這點(diǎn)就可以了。 
 

 

       我們來看兩組Cuned Modion曲線的動(dòng)態(tài)圖，大家先看上面這個(gè)，你們認(rèn)為這兩個(gè)球哪個(gè)比較真實(shí)？紅色比較真實(shí)。因?yàn)槲覀兛催@個(gè)線條，藍(lán)色其實(shí)是純線性運(yùn)動(dòng)，但是你注意看紅色的地方，它在頂部接近最頂端的時(shí)候有一個(gè)阻力效應(yīng)，最后停了下來，而藍(lán)色直接到了這里，它少了物體在剎車之前的減速度。

 

關(guān)于入畫和出畫的解讀（幫助大家理解）

我們講到入畫和出畫，這句話怎么理解？假設(shè)這是一個(gè)畫框，我是一個(gè)元素，我不可能到這里才開始動(dòng)，我可能從這里已經(jīng)開始起跑，所以當(dāng)我沖到畫面當(dāng)中的時(shí)候，你其實(shí)看到的不是我的起跑速度，不是我最初從0加速到某一個(gè)速度點(diǎn)的速度，而是我從0到30的速度，等我到畫面里的時(shí)候，你看到是我40以上的速度。

                

                                         ------------------------------------------------------------------
 

 

Material Design動(dòng)畫體現(xiàn)形式

接下來講它的表現(xiàn)形式，第一個(gè)就是Z軸動(dòng)畫。

軸動(dòng)畫我把它定義為用戶產(chǎn)生的空間層次的動(dòng)畫效果，它是一個(gè)空間層次動(dòng)畫效果，它主要是指Z軸深度發(fā)生變化的動(dòng)畫。什么意思呢？看下面這圖。

 

        它不是X軸或者Y軸二維空間的動(dòng)畫，它應(yīng)該是Z軸。我們從頂上看，它可能往這里走，但如果從側(cè)面看是空間里面上下。而且還有一個(gè)細(xì)節(jié)，它有陰影的。如果我們現(xiàn)在看到的這個(gè)內(nèi)容，環(huán)境當(dāng)中應(yīng)該是有燈光的，如果這個(gè)東西產(chǎn)生了陰影，它絕對(duì)是在三維空間里面發(fā)生的動(dòng)畫。

 

這是我對(duì)它兩個(gè)狀態(tài)的描述，第一個(gè)是靜止?fàn)顟B(tài)，第二個(gè)是交互觸發(fā)。同理，對(duì)于其它所有的來講都具有這樣一種屬性，所以你們發(fā)現(xiàn)很多東西后面有個(gè)淡淡的陰影，這就是做Z軸動(dòng)畫的時(shí)候的一個(gè)表現(xiàn)形式。

 

同樣兩個(gè)物體，這個(gè)物體在這個(gè)物體前面，后面這個(gè)物體是不是被前面物體產(chǎn)生的陰影遮擋一部分，所以體現(xiàn)出前景是重要的，這也符合我們的一個(gè)邏輯。 。這里有一個(gè)不允許的地方，還是我們剛才說的穿插，我不能直接穿插過這個(gè)物體。

------------------------------------------------------------------

 

第二個(gè)就是平面動(dòng)畫。

 

當(dāng)我們觸發(fā)一個(gè)交互行為的時(shí)候，要么就是縮放，要么就是透明度，這些基本屬性全部包含在平面動(dòng)畫里頭。

 

第一個(gè)是變形，從方形變成圓形，它的動(dòng)畫大概是這樣的。第二個(gè)就是融合類，比如說我在收到一堆短信息的時(shí)候，我想把其中第二條刪掉，當(dāng)我刪掉這一塊之后，一般來講第三條會(huì)往上走，跟第一條合并在一起，這個(gè)過度柔和自然。

 

還有一個(gè)是鏡像反映，當(dāng)我點(diǎn)擊觸發(fā)一個(gè)頁面的時(shí)候，頁面是不是會(huì)經(jīng)常出現(xiàn)跳轉(zhuǎn)，我點(diǎn)擊進(jìn)去之后，當(dāng)我要回來之后，我除了要點(diǎn)擊首頁之后，右上角一般會(huì)出現(xiàn)一個(gè)鏡頭，這是返回的意思。切換中從抬頭點(diǎn)擊一下變成了Applicotion，這種東西就是提升用戶愉悅度的體驗(yàn)。

 

 

 

動(dòng)畫分類定義：(這里挺重要的哦~)

 

動(dòng)畫闡述：

1 (變形類) Material can change shape.  

*目前體驗(yàn)結(jié)果來看，除了基本幾何形體的變形之外，基本沒有發(fā)現(xiàn)特異圖形的變形。

下圖中的步驟演示的是從放行變形到圓形的一個(gè)過程動(dòng)畫.

 

 

2 (融合類)  join together to become a single  

*卡片被切割開之后，會(huì)自動(dòng)融合一體，并且形成一個(gè)全新的個(gè)體。同時(shí)也可再次分割。

3 (突顯類) spontaneously generated 

*對(duì)象可以突然性的出現(xiàn)和消失，并且可以在場(chǎng)景中的任意位置出現(xiàn)

      

 

 

4 (點(diǎn)擊漣漪) Touch Ripple

*多使用在對(duì)于卡片的點(diǎn)擊之后，卡片表面所產(chǎn)生的伴隨手指點(diǎn)擊位置而延展開的MASK+漣漪狀動(dòng)畫樣式,此類型操作多見于卡片，相冊(cè)等相關(guān)有Click操作的場(chǎng)景下。 是最為常見的一種交互動(dòng)畫樣式。 

 

 

 

5（起源點(diǎn)）Point of Origin

*當(dāng)點(diǎn)擊Option按鈕或“更多”類操作時(shí)，會(huì)以所點(diǎn)擊的“點(diǎn)（Touch Point）”為軸心進(jìn)行擴(kuò)大形成浮層的動(dòng)畫形式。

------------------------------------------------------------------

 

Material Design動(dòng)畫 設(shè)計(jì)中應(yīng)當(dāng)注意的

 

 

1.帶有導(dǎo)向性的視覺連貫（Visual Continuity）

 

*清晰、快速、有序的動(dòng)態(tài)過渡。是提升用戶關(guān)注度和集中注意力的關(guān)鍵。

新進(jìn)元素（Incoming elements）應(yīng)當(dāng)被引入到新的場(chǎng)景中，或在新的場(chǎng)景中被重新建立。

 

*去除的元素（Outgoing elements）當(dāng)此類元素與上下文再無關(guān)聯(lián)時(shí)，應(yīng)選擇適時(shí)的方式去除，以免擾亂用戶注意力。

 

*持續(xù)性的共享元素（Shared elements）當(dāng)連貫整個(gè)交互流程的元素（ICON,或者圖形，圖片等）允許持續(xù)性的出現(xiàn)，增大到合適的尺寸顯示。

 

 

注意我標(biāo)紅的地方。以頁面當(dāng)中某一個(gè)元素連貫持續(xù)的出現(xiàn)，作為引導(dǎo)用戶的合理存在。

 

 

 

2.有意義的動(dòng)畫轉(zhuǎn)換（Meaningful transitions）

頁面之間的轉(zhuǎn)換更傾向于上層劃入的動(dòng)畫方式進(jìn)行轉(zhuǎn)換（如下圖），點(diǎn)擊觸發(fā)后，圖片位移劃入頁面(方向多為從右至左，或從下至上)，完成轉(zhuǎn)換，若要返回上層，則方向相反劃出頁面。

 

3. 一致性的順序編排（Consistent choreography）

就像集體舞蹈一樣，動(dòng)作的編排除了新穎之外，更加重要的就是順序的一致性，直白的說就是“誰先，誰后，我負(fù)責(zé)什么，你負(fù)責(zé)什么”

 

把時(shí)間切分成若干個(gè)單元，在每個(gè)單元里進(jìn)行操作，這樣才不會(huì)出現(xiàn)一個(gè)時(shí)間單位里面有兩個(gè)甚至兩個(gè)以上的物體在同時(shí)動(dòng)，這樣給人很零亂的感覺，所以我們必須把時(shí)間理解成若干個(gè)單元，在一個(gè)單元時(shí)間內(nèi)只能有一個(gè)東西在動(dòng)，這是它的靜態(tài)步驟，我們看看動(dòng)態(tài)的。 

 

                                                        有序                                  無序,顯得雜亂

 

------------------------------------------------------------------

 

 

        從上面可以看出，左邊的很有序，它就是把所有元素按照一定的步驟，挨個(gè)有序的放到它應(yīng)該放的位置，最后完成它應(yīng)該有的布局。這種情況大多數(shù)出現(xiàn)在什么時(shí)候？比方說信息列表，或者九宮格的布局，或者某一個(gè)界面上面，可能信息元素非常多的時(shí)候，有圖片、文字、按鈕、輸入框等等，這種時(shí)候用這種方式會(huì)比較合理，而不是像里面放一個(gè)鞭炮炸爛了四面八方濺得到處都是。

 

寫到這里，我突然覺得自己做了一件挺有意義的事情。我是老畢，下回見。