material design動畫

這是一篇material design 文檔動畫部分的學習！

 

Summary:

1. Material Design動畫交互

2. 動畫速度的3個原則

3. 3種交互方式

4. 如何設計有意義的動畫

5. 令人高興的動畫細節

 

1 | Material Design動畫交互

谷歌上一代設計語言是卡片設計，而這一代做爲卡片的延伸，Material Design 以紙片與墨水做爲靈感，由紙片與墨水組成的設計隱喻貫穿整個material design 的全部細節，動畫設計也不例外。具體體如今哪？客官不急，聽我一一道來：

 

首先，動畫設計的出發點，我歌認爲每一個動畫效果應該都是要有意義的。動效的重要性能夠簡單的體如今這個三個方面：

• 動效能夠有效的暗示引導用戶操做。

• 動效的目的是爲了吸引用戶的注意力。

• 轉場的動畫應該高效，清晰。

 

以上是道，何爲術？

 

2 | 動畫速度的2個原則

 

1, 針對動畫的進退場，若是進入和離開的速度不一致會給人遲疑，不乾脆，拖泥帶水的不和諧感。當物體進場時，確保他以最高速度進入相同地，當物體退場時，請保持它的速度，這樣的做法會比下降速度退場好。（感謝站酷用戶：@beapig 的指正） 以下圖所示意的速度對照：

 

 

請這樣作.以高速進退場。這顆球以高速進退場時，會給人有自信的感受。。

 

 

請不要這樣作！ 進場時加快速度或退場時減速，不要用沒必要要的速度變化來分散使用者的注意力。

 

2, 不一樣的元件，動畫的速度應該是不一樣的。遵循真實世界的物理規律，個頭小的元件能夠在短期內完成加速和減速動做，而個頭大元件則應用更多的時間完成加速和減速動做。淺層次能夠把它理解爲小快大慢。

 

3 | 3種交互方式

我歌認爲用戶的每個操做都應該獲得反饋的。而當用戶獲得極具漂亮與邏輯性的動畫效果時，用戶會產生愉悅。(我家貓：鏟屎的，快來愉悅朕→_→)而這會鼓舞用戶對軟件進行進一步的探索：若是按了這個會發生什麼事？我在點點另外一個好了。

 

谷歌官方介紹了三種交互實例：

 

1, 表層的交互設計（surface reaction）

 

 

 

 

表層的交互設計是最多見的一種交互方式了，最古老應該能夠追溯到鼠標懸停/點擊連接變色。而在material design 中，借用墨水的隱喻，墨水是覆蓋在每一張紙上的表層現象，因此，點擊時，就像蓋了一層墨水上去。谷歌實例了一種優雅的作法是點擊漣漪效果

 

 

這裏一個細節是漣漪散開的中心點。這個中心永遠都是手指點擊的交互點，或鼠標移入的點。

 

 

2, 物體自己的回饋（Material response）

 

Surface reaction 來自於墨水的隱喻。但material 裏的元素，如按鈕，自己也能作出反饋，如顯示隱藏菜單：

 

 

正確的作法。物體從觸控點出現，視覺上能夠感受到彈出菜單與按鈕的視覺鏈接。

 

 

 

雅美蝶！從中間亂入，切斷了與觸控點的聯繫。

 

 

再如，觸控上升效果：

 

細心的你必定發現了，平常APP中的不少交互效果均可以歸類爲「物體自己的回饋」。如微信點贊，愛心變大。微博點贊，大拇指變大。強烈的反饋能帶來身心得愉悅。

 

3, 放射性動畫效果（Radial action）

使用者的操做行爲會有一箇中心點，透過這個中心點，使用者將他們的操做意圖輸入這個系統。與使用者的輸入點創建強烈視覺連結，可讓使用者更清楚知道他所作的動做，不管是從手指觸控螢幕或是從麥克風輸入聲音。橫跨螢幕的動畫效果，應該隨着與中心點的距離增長，前進式地引起動畫，就像創建一個漣漪動畫。以上文字是我抄的，簡單如慄：

 

 

 

4 | 如何設計有意義的動畫

咱們設計交互動畫，說白了就是在導演下列三種元素：

• 進入的元件：多是直接新增的元件或從其餘位置轉變過來的，這些元件有各自被引進或再製造的方式。

• 離開的元件：與新內容再也不相關的元件必須透過適當的方式移除。

• 共用的元件：從漸變更畫開始到結束都持續存在的元件，多是細小的icon圖示或顯眼的大型圖片，透過動畫改變成符合螢幕的尺寸。

 

立flag：機智的小夥伴們，觀看下面穀神的例子說出它們分別是啥？

 

 

老溼，我知道：

進入元件：歌手背景寫真，專輯信息，播放按鈕，專輯曲目，返回按鈕，黃色轉場動畫

離開元件：漢堡圖標，黃色轉場動畫

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

 

get了這個，下次小夥伴們在分析動畫的時候能夠從這三個維度進行分析。

 

注意：

 

當你在設計你的動畫時，請注意如下幾件事：

1. 思考使用者的注意力應該如何被引導？什麼樣的元件或動做可以協助這個目標？動畫過程當中，要進入、離開或共用的元件，要如何安排強調或弱化？

2. 設計畫面時，思考動畫先後的狀態，在漸變的過程當中透過顏色及共用的元件，找到機會創造視覺關聯性。

3. 審慎地加入動做：思考如何透過移動一個元件，使動畫漸變的過程更加清晰流暢。

 

以下面的一個示範：

 

 

請這樣作。經過上下彈出動畫，就像幕布通常，觸碰點與新場景創造了視覺的關聯性。

 

雅美蝶！無動畫過渡，新場景的出現顯得莫名其妙。

 

 

2個可利用的方法：

 

1, 階層式的時間差：

更加有層次的展現動畫，能引導用戶注意力，分清主次。

 

 

2, 一致性的方向：

創造了視覺關聯繫，而且動畫效果清晰流暢。

 

5 | 令人高興的動畫細節

充滿創意的動畫細節會使用戶有驚喜感：谷歌提供的關於圖標細節的兩個例子：

 

 

 

這些細節的創造須要靈感，而靈感須要積累，在你創造前，欣賞很重要。下面分享幾個積累交互靈感的乾貨資源：

 

Capptivate ：Capptivate是一個聚合APP動效Design Pattern的網站

 

littlebigdetails : LitterBigDetail是一個彙總微設計的網站

 

Dribbble : 大名鼎鼎的設計師網站