非對稱動畫時間

打破對稱的結構能為專案帶來對比和吸引力。瞭解將這項解決方案運用在專案的時機和方式。

Paul Lewis

非對稱式動畫時間碼功能可讓您一邊展現個人特質,一邊快速回應使用者互動,進而改善使用者體驗。這樣的設計也與使用體驗有對比,讓介面看起來更吸引人。

  • 使用非對稱式動畫時間碼,讓作品的個性和對比度。
  • 務必考量使用者與使用者互動,在回應輕觸或點擊時縮短持續時間,並保留較長的時間,您沒有回應的時段。

與大多數的動畫「規則」一樣,您應該進行實驗,找出最適合您應用程式的方式,但是在使用者體驗方面,使用者並不耐心。原則上,請一律快速回覆使用者互動。不過,使用者大多的動作是不對稱的動作,因此動畫也可以。

舉例來說,當使用者輕觸以顯示側欄導覽時,應盡快顯示側欄導覽,持續時間約為 100 毫秒。然而,當使用者關閉選單時,您可以為檢視畫面稍微放慢動畫效果,例如在約 300 毫秒的標記上。

相反地,當您開啟強制回應檢視畫面時,系統通常會顯示錯誤或其他重要訊息。在這種情況下,建議您在 300 毫秒左右再慢慢地帶檢視畫面,但使用者觸發後應該會很快發生。

原則上,基本原則如下:

  • 如為 UI 動畫是由使用者互動 (例如觀看轉場或顯示元素) 觸發,這類動畫的開場 (持續時間較短) 但緩慢結尾 (較長時間)。
  • 針對程式碼觸發的 UI 動畫 (例如錯誤或強制回應檢視畫面) 的開場速度較慢 (持續時間較長),但播放時間短 (短)。