Material Design Animation
Authentic motion 真實的運動
運動以一種優美流動的形式描述了空間關係,功能和目的.
Mass and weight: 質量和重量
在物理世界中,一個物體要運動,必須有力施加在它身上. 力的強度和持續時間規定了物體的加速度或者運動方向的改變. 即便是最急促的開始和結束也不是瞬時發生的, 因為物體的加速或者減速都是需要一定的時間的. 所以,當動畫有著生硬的開始或者結束,或者唐突地改變方向,它們就會看起來很不自然.
Material design中的運動應該在不失高雅簡潔和美感的情況下,儘可能地貼近真實的物理運動和真實世界的行為.
自然的加速和減速
加速和減速的變化應該在動畫持續時間內平滑變化.
為了特定的目的,要吸引對某個物體的注意,或者要給某一個動畫增加特徵,可以在開始和結束的時候改變它的加速度.
不對稱的加速和減速會創造出一種更加自然和愉悅的運動.
當加速和減速不平滑的時候,運動會顯示出機械性,速度和方向上的突兀的改變看起來會不和諧,引起注意.
這就是為什麼不對稱的曲線變化比線性的變化要好,線性的變化總是會出現突兀的拐點,所以應該避免線性變化.
入口和出口
物體速度和方向的變化會引起使用者的注意.
一個物體在進入和退出幀的時候變化速度,預示著它運動的距離.
比如,一個物體在退出的時候減速,會引起注意,暗示著它將停在畫面幀外邊框不遠處.
特別地,在轉場動畫的時候,需要考慮入口或出口的哪一部分應該獲得最多的注意. 在入口和出口處都應該採用一個近乎常量的速度,來減小注意力.
不要在進入的時候加速,退出的時候減速,這樣會吸引很多不必要的焦點,分散使用者的注意力.
做出調整
不是所有的物體都是以同樣的方式運動的. 輕或者小的物體可以運動得更快,因為它們需要的力更小,而大或者重的物體需要更多地時間來加速.
使用曲線型的運動,避免線性分段的路徑. 找出最適合物體的運動特性,然後相應地表達出來.
曲線表現了一種在特定值的範圍內,隨時間的變化. 找出最適合你想描述的運動的曲線.
Responsive Interaction 響應式互動
User Input
觸控,聲音,滑鼠和鍵盤是同等重要的使用者輸入.
UI元素看起來都是可觸控的,視覺和運動線索應該及時承認使用者輸入,並且應該以一種像是被直接操縱的形式動畫.
Surface reaction
收到輸入事件後,系統應該在接觸點上提供即時的視覺確認線索,比如: 手指點選的地方, 聲音輸入的mic, 鍵盤點選的合適的欄位.
表達這種接觸的核心視覺機制是:"點選波紋”, 即”Touch Ripple”.
裝置表達了一個點選事件的方法和持續事件,也可以用來表達其他的動態變數,比如音量或者點選壓力.
最佳實踐: 從輸入的接觸點(比如指尖的接觸點或者聲音mic的icon)開始,讓視覺反應徑向(輻射狀,放射式)傳播.
Material response
除了墨水式的表面反應, 材料在被點選的時候可以抬起來,標識出一種活躍狀態.
通過點選,使用者可以生成新的材料,或者轉換已經存在的材料,或者直接通過拖拽或者快划來操縱材料.
材料可以被線性或者徑向改變大小.
原點: 當使用者觸發生成新的材料的時候,它應該從輸入點開始,進行尺寸增長. 這樣就在輸入和生成之間建立了聯絡.
點選升高: 當一個card或者一個可分離的元素被啟用的時候, 這個card應該升高,標識它處於一個啟用狀態.
Radial Action: 徑向行為
應該給使用者輸入加上視覺反應使之更加清晰.
墨水從輸入點向四面散開的視覺波紋就是一種徑向行為.
輸入事件是視覺化的: 輸入事件和螢幕上事件之間的聯絡應該是視覺上繫結的. 對於觸控事件或者滑鼠來說, 這個發生在接觸點上, 對於聲音來說,則是麥克風的icon. 一個touch ripple標識著touch發生的位置還有時間,另外它也標識著點選輸入被接收到了.
連線輸入和行為: 輸入事件觸發的轉換或者行為動作, 應該與輸入事件有視覺聯絡. 震中附近的波紋反應比遠處的反應要發生的快, 比如: 1.一系列的內容變化: 很多圖片的出現或消失; 2.一系列的材料運動: 卡片移入或者移出螢幕.
Use the reveal effect: http://developer.android.com/training/material/animations.html#Reveal
Meaningful transitions 有意義的轉換
運動設計可以通過通知和取悅的兩種方式有效地引導使用者的注意力.
使用運動可以: 讓使用者在導航上下文之間平滑轉換, 解釋螢幕上元素的排布, 加強元素繼承體系的概念.
Visual continuity 視覺連續性
兩種視覺狀態間的轉換應當是清晰, 平滑, 並且輕鬆不費力的.
一個設計良好的轉換可以告訴使用者應該把注意力放在哪裡.
轉換型別和行為:
Incoming elements: 新生成的或新轉換成的專案被引進或者重新建立.
Outgoing elements: 與上下文不再相關的元素被移除.
Shared elements: 轉換期間存在的元素, 可以是微小的(一個圖示), 或者佔據主導位置的(一個gallary影像慢慢增長到佔據整個螢幕).
注意事項:
設計動畫時,注意以下幾個方面:
1.引導使用者的注意力. 使用者的注意力應該被引導到哪裡? 什麼元素和運動可以達到這種目的? 轉換過程中, incoming, outgoing, shared元素都應該如何被強調或者去強調?
2.視覺上連線轉換. 在轉換狀態之間建立視覺聯絡,可以通過顏色或者持續性的元素.
3.使用精確的運動. 考慮如何運動一個特定的元素給轉換增加清晰度和愉悅感.
Hierarchical timing
當建立一個轉換時, 要注意元素運動的順序和時間. 要確保運動支援資訊繼承關係, 通過為視線建立一個路徑來傳達最重要的內容.
然而, 這並不是一個簡單的公式, 說最重要的東西最先運動, 最不重要的最後運動.
轉換元素的時間應該平滑地流動, 避免脫節的感覺.
Consistent choreography
轉換中的元素應該協調地運動. 元素運動經過的路徑應該有意義並且有序. 偶然性的運動會分散注意力.
當轉移中的元素都很協調的時候, 會幫助使用者更好地理解應用.
Use curved motion: http://developer.android.com/training/material/animations.html#CurvedMotion
最佳實踐:
1. 儘量避免線性的路徑. 但是當運動被限制在一個軸上的時候, 或者運動是朝向或者離開某個點的時候例外.
2. 讓方向性的元素在轉換期間的運動保持一致. 避免衝突的運動和重疊的路徑.
3. 元素運動的深度是多少以及為什麼?
4. 如果所有運動的元素都跟隨它們在螢幕上的路徑, 看起來會美觀並且有序嗎? 是否能夠描繪出一幅清晰的圖, 指示應該往哪裡看?
5. 通過一致的進入和移出運動來強調元素間的空間關係.
Delightful details
動畫可以存在於一個app中的所有元素元件, 不論規模, 從一個細節的icon, 到關鍵性的轉換和動作.
所有的元素一起工作, 來構建一個滴水不漏的體驗和一個有功能並且漂亮的app.
動畫最基本的用法是在轉換中, 但是一個app如果能在一些微小的地方使用動畫真的能夠取悅使用者.
一個可以變成箭頭或者播放鍵的選單按鈕, 控制了一個平滑轉換, 同時具有兩種功能: 通知了使用者, 也讓app本身在這一刻充滿了驚喜和設計感.
參考資料
Material Design Animation: http://www.google.com/design/spec/animation/authentic-motion.html