非對稱動畫時間

打破對稱可提高專案的對比度和吸引力。瞭解在專案中提出申請的時機和方式。

Paul Lewis

非對稱的動畫時間可讓使用者在同時快速回應使用者互動的同時,展現出個人風格,進而改善使用者體驗。此版本也能營造出對氛圍的對比,讓介面更加美觀。

  • 使用不對稱的動畫時間,在工作中加入個人風格和對比。
  • 務必以使用者的互動為優先。回應輕觸或點選動作時,請採用較短的持續時間,如果不喜歡,則保留較長的時間長度。

如同大部分的動畫「規則」,您應該多方嘗試,找出最適合您的應用程式的原則,但提到使用者體驗時,使用者並不算是耐心。原則上,一律快速回應使用者互動。儘管如此,使用者的動作大多是不對稱,因此動畫也可以如此。

舉例來說,當使用者輕觸即可顯示側欄導覽時,應用程式應盡快顯示,持續時間約為 100 毫秒。但是,當使用者關閉選單時,您可以稍微慢慢看到檢視畫面,說約 300 毫秒。

相較之下,在強制回應檢視模式下,這通常會顯示錯誤或其他重要訊息。在這種情況下,建議您在 300 毫秒左右時再放慢檢視畫面。不過,如果是使用者觸發動作,則應該很快就會完成。

那麼大致的原則如下:

  • 如果是由使用者互動 (例如觀看轉場效果或顯示元素) 觸發的 UI 動畫,可以採用快速開場 (時間長度較短) 但緩慢的逾時問題 (持續時間較長)。
  • 針對由程式碼觸發的 UI 動畫 (例如錯誤或強制觀看) 而言,開場速度較慢 (持續時間較長),但延遲時間較短 (持續時間較短)。