[[150606]]

“這是一篇material design 文檔動畫部分的學習筆記，當你把交互設計以動圖的形式呈現出來并且變成作品集里面的一部分時，可以大大增加招生官的吸引力，從而提高錄取機會。下面就讓我們看一下這些幫助你做好交互設計的內容吧。”

Summary

• Material Design動畫交互

• 動畫速度的3個原則

• 3種交互方式

• 如何設計有意義的動畫

• 使人高興的動畫細節

1、Material Design動畫交互

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

首先，動畫設計的出發點，我個人認為每個動畫效果應該都是要有意義的。動效的重要性可以簡單的體現在這個三個方面：

• 動效可以有效的暗示引導用戶操作。

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

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

以上是道，何為術？

2、動畫速度的3個原則

1. 動畫應該有快有慢，我們要認識到線性的速度會使用戶感到疲倦。

那怎么做到有快有慢?

2. 速度應該遵循快入慢出的原則。快速的進入，平緩的移出，會使用戶有愉悅感。 如下圖所示意的速度對照：

請這樣做。可以明顯感覺到綠球快進，慢出。

請不要這樣做！ 紅球進和出都是一個速度，不和諧。

3. 不同的元件，動畫的速度應該是不同的。遵循真實世界的物理規律，個頭小的元件可以在短時間內完成加速和減速動作，而個頭大元件則應用更多的時間完成加速和減速動作。淺層次可以把它理解為小快大慢。

3、種交互方式

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

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

• 表層的交互設計（surface reaction）

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

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

• 物體本身的回饋（Material response）

Surface reaction 來自于墨水的隱喻。但material 里的元素，如按鈕，本身也能做出反饋，如顯示隱藏菜單：

正確的做法。物體從觸控點出現，視覺上可以感覺到彈出菜單與按鈕的視覺連接。

不要啊！從中間亂入，切斷了與觸控點的聯系。
再如，觸控上升效果：

細心的你一定發現了，日常APP中的很多交互效果都可以歸類為“物體本身的回饋”。如微信點贊，愛心變大。微博點贊，大拇指變大。強烈的反饋能帶來身心得愉悅。

• 放射性動畫效果（Radial action）

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

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

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

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

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

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

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

老濕，我知道：

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

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

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

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

注意：

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

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

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

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

如下面的一個示范：

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

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

2個可利用的方法：

a.階層式的時間差：

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

b.一致性的方向：

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

5、使人高興的動畫細節

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

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

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

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

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

Behance ：同上

但以上兩份資料內容上有些不齊全，因為谷歌文檔隨時會更新內容，所以本文中的所舉例子都是英文版的最新實例。而且排版上官方確實是最棒的，內地有些翻譯文檔因為圖文排版錯誤，導致不知所云。所以還是對照著學習，效果最好。