全安卓 Material Design Animation Guildline 動(dòng)畫原則分析
適用人群:UI 設(shè)計(jì)從業(yè)人員 以及相關(guān)UI 動(dòng)效愛(ài)好者。
轉(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)。
視覺(jué)設(shè)計(jì)師對(duì)于整個(gè)語(yǔ)言的定義是我們要做真實(shí),讓用戶愉悅的動(dòng)畫感受,定了這么一套規(guī)范。對(duì)象之間的動(dòng)畫不能直接穿插,什么是穿插?就是我前面一個(gè)人,我絕對(duì)不能從他背面直接穿過(guò)他背面來(lái)。所以在真實(shí)世界中不可能發(fā)生的情況,在這里也絕對(duì)不可能發(fā)生。一句總結(jié)就是:我們希望用戶的真實(shí)世界和手機(jī)的數(shù)字世界只有一屏之隔。
第二,對(duì)象(Object) 在運(yùn)動(dòng)過(guò)程中不能瞬間開始或者急停,不自然的運(yùn)動(dòng)方式容易給用戶造成不愉快的感受 。
這里的對(duì)象,就是我們所有的原生組建,可能是一個(gè)航天的容器,或者一個(gè)表單等等,這些系統(tǒng)的官方組建我們稱為對(duì)象。下面這句話什么意思呢?你看到它跑得快并不會(huì)氣得把手機(jī)摔了,每個(gè)物體奔跑之前都有個(gè)加速度,這個(gè)都是理解。它在移動(dòng)的例子來(lái)告訴大家,真實(shí)的例子在啟動(dòng)到加速的過(guò)程中不是純線性的,它會(huì)有啟動(dòng)代步的加速度,隨著距離越來(lái)越長(zhǎng),它的加速度會(huì)越來(lái)越高,所以我們看到這個(gè)東西會(huì)覺(jué)得習(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)就可以了。
我們來(lái)看兩組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ái),而藍(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)形式
接下來(lái)講它的表現(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ì)于其它所有的來(lái)講都具有這樣一種屬性,所以你們發(fā)現(xiàn)很多東西后面有個(gè)淡淡的陰影,這就是做Z軸動(dòng)畫的時(shí)候的一個(gè)表現(xiàn)形式。
同樣兩個(gè)物體,這個(gè)物體在這個(gè)物體前面,后面這個(gè)物體是不是被前面物體產(chǎn)生的陰影遮擋一部分,所以體現(xiàn)出前景是重要的,這也符合我們的一個(gè)邏輯。 。這里有一個(gè)不允許的地方,還是我們剛才說(shuō)的穿插,我不能直接穿插過(guò)這個(gè)物體。
------------------------------------------------------------------
第二個(gè)就是平面動(dòng)畫。
當(dāng)我們觸發(fā)一個(gè)交互行為的時(shí)候,要么就是縮放,要么就是透明度,這些基本屬性全部包含在平面動(dòng)畫里頭。
第一個(gè)是變形,從方形變成圓形,它的動(dòng)畫大概是這樣的。第二個(gè)就是融合類,比如說(shuō)我在收到一堆短信息的時(shí)候,我想把其中第二條刪掉,當(dāng)我刪掉這一塊之后,一般來(lái)講第三條會(huì)往上走,跟第一條合并在一起,這個(gè)過(guò)度柔和自然。
還有一個(gè)是鏡像反映,當(dāng)我點(diǎn)擊觸發(fā)一個(gè)頁(yè)面的時(shí)候,頁(yè)面是不是會(huì)經(jīng)常出現(xiàn)跳轉(zhuǎn),我點(diǎn)擊進(jìn)去之后,當(dāng)我要回來(lái)之后,我除了要點(diǎn)擊首頁(yè)之后,右上角一般會(huì)出現(xiàn)一個(gè)鏡頭,這是返回的意思。切換中從抬頭點(diǎn)擊一下變成了Applicotion,這種東西就是提升用戶愉悅度的體驗(yàn)。
動(dòng)畫分類定義:(這里挺重要的哦~)
動(dòng)畫闡述:
1 (變形類) Material can change shape.
*目前體驗(yàn)結(jié)果來(lái)看,除了基本幾何形體的變形之外,基本沒(méi)有發(fā)現(xiàn)特異圖形的變形。
下圖中的步驟演示的是從放行變形到圓形的一個(gè)過(guò)程動(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)畫樣式,此類型操作多見(jiàn)于卡片,相冊(cè)等相關(guān)有Click操作的場(chǎng)景下。 是最為常見(jiàn)的一種交互動(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)向性的視覺(jué)連貫(Visual Continuity)
*清晰、快速、有序的動(dòng)態(tài)過(guò)渡。是提升用戶關(guān)注度和集中注意力的關(guān)鍵。
新進(jìn)元素(Incoming elements)應(yīng)當(dāng)被引入到新的場(chǎng)景中,或在新的場(chǎng)景中被重新建立。
*去除的元素(Outgoing elements)當(dāng)此類元素與上下文再無(wú)關(guān)聯(lián)時(shí),應(yīng)選擇適時(shí)的方式去除,以免擾亂用戶注意力。
*持續(xù)性的共享元素(Shared elements)當(dāng)連貫整個(gè)交互流程的元素(ICON,或者圖形,圖片等)允許持續(xù)性的出現(xiàn),增大到合適的尺寸顯示。
注意我標(biāo)紅的地方。以頁(yè)面當(dāng)中某一個(gè)元素連貫持續(xù)的出現(xiàn),作為引導(dǎo)用戶的合理存在。
2.有意義的動(dòng)畫轉(zhuǎn)換(Meaningful transitions)
頁(yè)面之間的轉(zhuǎn)換更傾向于上層劃入的動(dòng)畫方式進(jìn)行轉(zhuǎn)換(如下圖),點(diǎn)擊觸發(fā)后,圖片位移劃入頁(yè)面(方向多為從右至左,或從下至上),完成轉(zhuǎn)換,若要返回上層,則方向相反劃出頁(yè)面。
3. 一致性的順序編排(Consistent choreography)
就像集體舞蹈一樣,動(dòng)作的編排除了新穎之外,更加重要的就是順序的一致性,直白的說(shuō)就是“誰(shuí)先,誰(shuí)后,我負(fù)責(zé)什么,你負(fù)責(zé)什么”
把時(shí)間切分成若干個(gè)單元,在每個(gè)單元里進(jìn)行操作,這樣才不會(huì)出現(xiàn)一個(gè)時(shí)間單位里面有兩個(gè)甚至兩個(gè)以上的物體在同時(shí)動(dòng),這樣給人很零亂的感覺(jué),所以我們必須把時(shí)間理解成若干個(gè)單元,在一個(gè)單元時(shí)間內(nèi)只能有一個(gè)東西在動(dòng),這是它的靜態(tài)步驟,我們看看動(dòng)態(tài)的。
有序 無(wú)序,顯得雜亂
------------------------------------------------------------------
從上面可以看出,左邊的很有序,它就是把所有元素按照一定的步驟,挨個(gè)有序的放到它應(yīng)該放的位置,最后完成它應(yīng)該有的布局。這種情況大多數(shù)出現(xiàn)在什么時(shí)候?比方說(shuō)信息列表,或者九宮格的布局,或者某一個(gè)界面上面,可能信息元素非常多的時(shí)候,有圖片、文字、按鈕、輸入框等等,這種時(shí)候用這種方式會(huì)比較合理,而不是像里面放一個(gè)鞭炮炸爛了四面八方濺得到處都是。
寫到這里,我突然覺(jué)得自己做了一件挺有意義的事情。我是老畢,下回見(jiàn)。