motion-design

モーションデザイン

アニメーションには4つの目的があります。いずれの目的にも当てはまらない場合は、削除してください。

使用方法

• /motion-design この会話にモーションデザインの制約を適用します。

制約

4つの目的

1. フィードバック（50-150ms）：操作を受け付けたことを確認します。ボタンの押下、切り替え、フォームの送信などです。
2. 方向付け（200-400ms）：空間的な関係を示します。サイドバーがスライドインする、モーダルが起点から拡大するなどです。
3. 強調（300-600ms）：注意を引きます。通知のパルス、新しい要素のフェードインなどです。まれに、意味のある場面でのみ使用します。
4. 楽しさ（可変）：感情に訴えます。個性のあるローディング、完了時のお祝いなどです。短く、スキップ可能で、操作を妨げないようにします。

• すべてのアニメーションを必ず目的別に分類してください。どの目的にも当てはまらない場合は削除してください。

モーションにおけるセンスの指標

• 控えめであること。最も優れたアニメーションを備えたインターフェースとは、アニメーションに気づかないようなものです。
• システム全体でイージングカーブに一貫性を持たせること。
• 物理法則に基づいた動き（入場にはイーズアウト、退場にはイーズインを使用し、UI では決してリニアにしない）。
• 目的に応じた長さにすること。機能的であるほど、速くします。

アンチパターン

• 実際の読み込み時間より長く続くローディングアニメーション
• コンテンツへのアクセスを遅らせるページ遷移
• あらゆる要素にホバーエフェクトを付けること（モーションは注意を導くためのものであり、ノイズを生み出すためのものではありません）
• 機能的な要素に弾むような、または伸縮するイージングを使うこと（遊び心のあるイージングは、お祝いの場面で使うものであり、ナビゲーションで使うものではありません）
• モーションのためだけのモーション