2017 Material design 第二章第一節《Material動效》

D27發表於2017-07-25

第二章節《動效》

一、Material動效(Material motion)

在material design中,動效被用於描述空間關係,功能展現和體現流暢性和絢麗的效果。

動效為什麼這麼重要?

動效向我們展示了一個應用是如何運作的,以及它能做什麼。

動效的作用:

  • 引導使用者關注
  • 當使用者完成輸入後暗示使用者將會發生什麼
  • 強調元件之間的層次和空間關係
  • 緩解使用者等待焦慮(如內容抓取或載入下一個檢視)
  • 為使用者帶來個性、精良、愉悅的視覺感受

相關: Making Motion Meaningful(Motion designers from around Google share some of their most moving product features.)

Material是如何運動的?

整個material環境的搭建靈感來源於現實世界,其中借鑑了現實中的重力和摩擦力。這些力在material環境中主要體現在使用者輸入的方式對元件的影響和多個元件之間如何互動。

Material的動效具備以下特點:

響應
Material是充滿活力的物質。當使用者觸發、輸入的時候它能夠迅速作出響應。

在移動端上,篇幅長的動效時長在300-400ms之間。篇幅短的動效時長在150-200ms之間。動效時長如果少於或者超過以上建議時長的話,使用者就會感到動效運動緩慢或者動效運動太快導致肉眼難以捕捉。
在移動端上,篇幅長的動效時長在300-400ms之間。篇幅短的動效時長在150-200ms之間。動效時長如果少於或者超過以上建議時長的話,使用者就會感到動效運動緩慢或者動效運動太快導致肉眼難以捕捉。

更多資訊請看 常見的動效持續時間

墨水逐漸擴散的動效被用於確認使用者輸入。同時卡片(card)高度抬起暗示使用者已經觸發。
墨水逐漸擴散的動效被用於確認使用者輸入。同時卡片(card)高度抬起暗示使用者已經觸發。

更多資訊請看 徑向反饋

向使用者表明使用者觸發、輸入和創造之間的聯絡,或者說是整個創造的過程。
向使用者表明使用者觸發、輸入和創造之間的聯絡,或者說是整個創造的過程。

更多資訊請看 創造

自然
因為參考了現實世界中力對物體的影響,所以Material的動效自然並貼近現實。

在現實世界中,一個物體運動不管加速還是減速都會受到重力和摩擦力的影響。同理,在material design中,物件的運動不會突然的啟動和停止。
在現實世界中,一個物體運動不管加速還是減速都會受到重力和摩擦力的影響。同理,在material design中,物件的運動不會突然的啟動和停止。

更多資訊請看 持續時間和緩動效果
譯者注:什麼是Easing,請點選瞭解

受重力影響,material物件沿弧線運動。
受重力影響,material物件沿弧線運動。

更多資訊請看 運動

Material的變化同樣沿弧線變化。
Material的變化同樣沿弧線變化。

更多資訊請看 material的變化

認知
Material具備認知周邊環境(包括使用者和其他material物件)的能力。它能夠聯合其他material物件一同回應使用者需求。
更多資訊請看 編排

當轉場的時候,為了確定相互之間的關係,這些material的動效按編排好的方式運動。
當轉場的時候,為了確定相互之間的關係,這些material的動效按編排好的方式運動。

在擁擠的環境中變化大小,Material能夠從中擠開合適的空間。
在擁擠的環境中變化大小,Material能夠從中擠開合適的空間。

Material物件間能夠相互吸引並結合。
Material物件間能夠相互吸引並結合。

目的性
Material的動效能夠引導使用者在正確的時間上關注正確的點。
更多資訊請看 連續性

過渡動效有助於指導使用者下一步的互動。
過渡動效有助於指導使用者下一步的互動。

不同的動效可以幫助使用者理解當前的活動。比如當前手勢對元件是否可用。
不同的動效可以幫助使用者理解當前的活動。比如當前手勢對元件是否可用。

動效可以引導使用者關注他們需要關注的地方。
動效可以引導使用者關注他們需要關注的地方。

好的過渡是怎樣的?

成功的動效設計具備以下特點:

快速、流暢
一個快速、流暢的動效不會讓使用者覺得在等待時間。

一個快速、流暢的動效不會讓使用者覺得在等待時間。
一個快速、流暢的動效不會讓使用者覺得在等待時間。

可行

一個節奏緩慢的動效讓使用者覺得好像等了一個世紀。
一個節奏緩慢的動效讓使用者覺得好像等了一個世紀。

不可行

清晰、連貫
過渡應清晰,簡明和條理清楚,避免做得過多。

保持一條清晰的運動路徑從一個檢視過渡到另一個檢視。
保持一條清晰的運動路徑從一個檢視過渡到另一個檢視。

可行

當過渡的時候每個元件朝著不同的方向或交叉的路徑變化,很容易使使用者疑惑。
當過渡的時候每個元件朝著不同的方向或交叉的路徑變化,很容易使使用者疑惑。

不可行

緊密、一致
在material design中,動效具備統一的速度、響應能力和目的。因此在你的應用中那些自定義的動效需要保持內在的連貫一致。

圖中是三個不同功能的應用,但是因它們有著看起來相似的動效,令人覺得它們之間有著某種聯絡。
圖中是三個不同功能的應用,但是因它們有著看起來相似的動效,令人覺得它們之間有著某種聯絡。

動效的暗示

關於動效的好處請看下面兩個例子。

通過過渡動效引導使用者進入下一個檢視。以生動的動效淡化資料載入帶來的等待時間,能有效的減輕使用者因等待而產生的焦慮感。
通過過渡動效引導使用者進入下一個檢視。以生動的動效淡化資料載入帶來的等待時間,能有效的減輕使用者因等待而產生的焦慮感。

可行

因為沒有過渡動效發生和沒有一個清晰焦點引導,所以使用者不清楚上一個檢視和下一個檢視之間的聯絡。其中利用一個旋轉的圓形icon代表資料載入的狀態,這樣做會使得等待在使用者面前顯得更加凸顯,無疑增加了使用者等待帶來的焦慮感。
因為沒有過渡動效發生和沒有一個清晰焦點引導,所以使用者不清楚上一個檢視和下一個檢視之間的聯絡。其中利用一個旋轉的圓形icon代表資料載入的狀態,這樣做會使得等待在使用者面前顯得更加凸顯,無疑增加了使用者等待帶來的焦慮感。

不可行

相關文章