見出し画像

🍎HIGざっくりまとめ Foundations編 vol. 8 モーション

Motion(モーション)

あらゆるプラットフォームで、美しく流れるようなモーションがインターフェースに生命を吹き込み、ステータスを伝え、フィードバックや指示を与え、視覚体験を豊かにしています。

動きを使って伝える
モーションは、物事がどのように変化するか、ある操作をすると何が起こるか、次に何ができるかを示すことで、フィードバックと理解を深めるための素晴らしい方法です

  • システムコンポーネントには自動的にモーションが含まれます

  • カスタムモーションを設計する際には、ユーザーのアクションに応じた明確なフィードバックを提供し、ユーザーが圧倒されることなく習得できるようにします。


要点

  • アニメーションをつけることを目的としない
    過剰なアニメーションは人々の注意をそらし、つながりを感じさせない可能性があります。

  • 重要な情報を伝える唯一の手段としてアニメーションを使用しない
    アクセシビリティの「モーションを減らす」設定がオンの場合、必ずアニメーションを最小化または排除してください。

  • 正確でリアルな動きを追求する
    意味のない動き、あるいは物理法則に反しているように見える動きは、人々を混乱させる可能性があります。

  • 素早く、正確なアニメーションを
    軽快で邪魔にならない、効果的に情報を伝えることができるように。

  • 一般に、頻繁に発生するインタラクションには動きをつけないようにしましょう
    標準的なインターフェイス要素とのインタラクションでは、システムはすでに微妙なアニメーションを提供しています。何かとインタラクションするたびに、不必要な動きを見るために余分な時間を費やさせることは避けましょう。


感想

素敵でリッチなアニメーションをつけたくなるが、フィードバックと理解を深めるためのものと肝に銘じる。
物理理法則や情報設計に沿ったモーションを選択すべし。(M3だと下層を開くときは右から左で、戻る時はその逆だよとか細かい指定があったのだけど、HIGではその辺出てこないんだなー。)
あと、アニメーションが設定でオフにされることもあるっていうのは忘れないようにせねば。

この記事が気に入ったらサポートをしてみませんか?