Asymmetric Animation Timing

アニメーションの継続時間の非対称性によって、個性を表現できるようになり、ユーザー エクスペリエンスに影響を及ぼします。同時に、ユーザーの迅速な操作も促します。 また、コントラストが高まり、インターフェースをより魅力的に見えるようにします。

TL;DR

  • 非対称のアニメーションのタイミングを使用してコントラストを追加します。
  • 常にユーザーとの対話を重視します。タップやクリックに応答する際には短い期間を使用し、それ以外の場合には遅い時間を留保します。

アニメーションのほとんどの「ルール」のように、アプリケーションにとって何か有効かを見つけるために試行錯誤する必要がありますが、ユーザー エクスペリエンスに関して言えば、ユーザーは辛抱強くありません。 経験則では、ユーザーとの対話に常に迅速に応答することです。 ほとんどの場合、ユーザーのアクションが非対称であるため、アニメーションもそのようにすることができます。

たとえば、ユーザーがサイドバー ナビゲーションを表示するためにタップした場合、100 ミリ秒くらいで、できるだけ迅速に表示される必要があります。 ただし、ユーザーがメニューを閉じるときは、300 ミリ秒くらいで、もう少しゆっくりビューをアニメーション化する余裕が必要です。

対照的に、モーダル ビューを使用する場合、エラーまたは他の重要なメッセージを表示するのが通常です。 このようなケースでは、やはり 300 ミリ秒くらいで少しゆっくりビューを表示するべきですが、ユーザー自ら閉じる場合には非常に迅速に行う必要があります。

一般的な経験則は次のとおりです。

  • ユーザーの操作によってトリガーされた UI アニメーションの場合、ビュー トランジションまたは要素の表示は、高速のイントロ (短い時間)、低速のアウトロ (長い時間) が原則です。
  • コードによってトリガーされた UI アニメーションの場合、エラーまたはモーダル ビューは、低速のイントロ (長い時間)、高速のアウトロ (短い時間) が原則です。