非対称のアニメーションのタイミング

対称性を崩すと、プロジェクトにコントラストと魅力が生まれます。自分のプロジェクトに適用できる状況とその方法について説明します。

アニメーションのタイミングが非対称であることにより、個性を表現しつつ、ユーザーの操作にすばやく反応できるため、ユーザー エクスペリエンスが向上します。また、コントラストが強く、インターフェースの視覚的な魅力も高まります。

  • 非対称のアニメーションのタイミングを使用して、作品に個性とコントラストを持たせます。
  • 常にユーザーの操作を優先します。タップやクリックに反応する場合は時間を短くし、そうでない場合は長い時間を確保します。

アニメーションに関するほとんどの「ルール」と同様に、アプリケーションに対して何がうまくいくかを試す必要がありますが、ユーザー エクスペリエンスに関して言えば、ユーザーは忍耐強いことで知られています。経験則では、常にユーザーの操作に迅速に応答することを心がけます。とはいえ、ほとんどの場合、ユーザーの操作は非対称であるため、アニメーションも非対称にすることができます。

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

一方、モーダルビューを表示すると、通常はエラーやその他の重要なメッセージが表示されます。このような場合は、もう少しゆっくりと(300 ミリ秒あたり)ビューを表示します。ただし、ユーザーがトリガーする終了はすぐに実行する必要があります。

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

  • ビュー遷移や要素の表示など、ユーザーの操作によってトリガーされる UI アニメーションでは、イントロは高速(期間が短く、アウトロが長くなります)にします。
  • コードによってトリガーされる UI アニメーション(エラーやモーダルビューなど)では、イントロは遅く(時間が長くなります)、締めくくりは速くなります(時間が短くなります)。