タイミングを変えてアニメーションを表示する

場面に応じてアニメーションのタイミングを変えることで、オリジナリティを出しつつ、ユーザー操作に迅速に応答してユーザー エクスペリエンスを向上させることができます。さらに、コントラストを強調し、インターフェースをより魅力的に見えるようにすることが可能です。

TL;DR

  • さまざまなタイミングでアニメーションを表示して、独創的でコントラストの効いた画面に仕上げます。
  • 常にユーザー操作を優先します。タップやクリックに対する応答期間は短くし、それ以外の場合は応答時間を長くします。

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

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

一方、モーダル ビューを使用してエラーまたは他の重要なメッセージを表示する場合は、これと逆になります。このようなケースでは、300 ミリ秒くらいで少し遅めにビューを表示します。そしてユーザー操作でビューを非表示にする際は、迅速に消す必要があります。

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

  • ユーザーの操作によってトリガーされた UI アニメーションの場合、ビュー トランジションまたは要素の表示は、最初は高速(継続時間を短く)、最後は低速(継続時間を長く)にするのが原則です。
  • 一方、エラーまたはモーダル ビューなどのコードによってトリガーされた UI アニメーションの場合は、最初は低速に(継続時間を長く)、最後は高速(継続時間を短く)にするのが原則です。