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

対称性を破ることで、コントラストが生まれ、プロジェクトに魅力が生まれます。プロジェクトに適用するタイミングと方法を学びます。

非対称のアニメーション タイミングを使用すると、個性を表現しながらユーザー操作に迅速に対応できるため、ユーザー エクスペリエンスが向上します。また、感覚と対照的な色合いで、インターフェースの視覚的な魅力を高めています。

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

アニメーションのほとんどの「ルール」と同様に、アプリに適したものを見つけるためにテストする必要がありますが、ユーザー エクスペリエンスに関しては、ユーザーは忍耐力がないとよく言われています。原則として、ユーザーの操作には常に迅速に応答します。ただし、ほとんどの場合、ユーザーの操作は非対称であるため、アニメーションも非対称になる可能性があります。

たとえば、ユーザーがタップしてサイドバー ナビゲーションを表示する場合は、できるだけ早く表示する必要があります(100 ミリ秒程度)。ただし、ユーザーがメニューを閉じる場合は、300 ミリ秒程度のアニメーションでビューを閉じることができます。

一方、モーダル ビューを表示するのは、通常、エラーやその他の重要なメッセージを表示する場合です。このような場合は、ビューの表示をもう少し遅くします(300 ミリ秒程度)。ただし、ユーザーがトリガーする閉じは非常に速く行う必要があります。

一般的な目安は次のとおりです。

  • ビューの遷移や要素の表示など、ユーザーの操作によってトリガーされる UI アニメーションの場合は、導入部分は短く、結びは長くします。
  • エラーやモーダル ビューなど、コードによってトリガーされる UI アニメーションの場合は、開始が遅く(長い時間)、終了が速い(短い時間)ようにします。