Motion｜HIG Foundations 日本語訳まとめvol.12
すべてのプラットフォームで、美しく滑らかな動きがインターフェースに命を吹き込み、ステータスを伝え、フィードバックと指示を提供し、視覚体験を豊かにします。
■ 本noteの見方
2022年6月7日、Appleのイベント「WWDC22」に合わせHIGが改訂されていたので、その概要となる「Foundations（基礎）」のところだけザックGoogle翻訳したものをインデックスとしてまとめておきました。
https://note.com/tsutsui_design/n/nd22aa17a53f7
■ Motion (モーション)
システムコンポーネントには自動的にモーションが含まれるため、アプリやゲーム全体で使い慣れた一貫したエクスペリエンスを提供できます。カスタムモーションを設計するときは、人々の方向性を維持し、行動に応じて明確なフィードバックを提供し、圧倒されることなくインターフェイスを学習できるようにする意図的なアニメーションに焦点を合わせます。
ベストプラクティス
モーションを使用して通信します。モーションは、物事がどのように変化するか、人々が行動を起こしたときに何が起こるか、そして次に何ができるかを示すことによって、フィードバックと理解を高めるための優れた方法です。たとえば、macOSでウィンドウを最小化すると、デスクトップからDockにスムーズに移動するため、ウィンドウがどこに移動したかを正確に知ることができます。人々がFaceIDを設定すると、システムは彼らが何をする必要があるかを簡単に説明し、顔を囲む目盛りを視覚的に変更することでスキャン中に彼らを助けます。
意図的にモーションを追加し、影を落とすことなくエクスペリエンスをサポートします。モーションを追加するためにモーションを追加しないでください。不必要または過度のアニメーションは、特に没入型のエクスペリエンスを提供しないアプリでは、人々の気を散らしたり、切断されたように感じさせたりする可能性があります。
モーションをオプションにします。人々が画面上のアニメーションを見ることができない理由はいくつかあるので、重要な情報を伝える唯一の方法としてそれを使用することを避けることが不可欠です。たとえば、[モーションを減らす]ユーザー補助設定がオンになっている場合は、アニメーションを最小化または削除してください。ガイダンスについては、色と効果を参照してください。
リアリズムと信頼性を追求します。正確で現実的な動きは、人々が何かがどのように機能するかを理解するのに役立ちますが、意味をなさない、または物理法則に反しているように見える動きは、混乱を感じる可能性があります。たとえば、誰かが画面の上部から下にスライドしてビューを表示した場合、横にスライドしてビューを閉じることは期待していません。
迅速で正確なアニメーションを好みます。簡潔さと正確さを組み合わせたアニメーションは、より軽量で邪魔にならない傾向があり、多くの場合、より効果的に情報を伝達します。たとえば、iPhoneのWeatherでリストボタンをタップすると、現在の都市の全画面表示がリストビューにすばやく移行し、リスト内の都市の場所が特定されます。
一般に、頻繁に発生するインタラクションにモーションを追加することは避けてください。システムは、標準のインターフェース要素との相互作用のための微妙なアニメーションをすでに提供しています。何かと対話するたびに、不必要な動きを見るのに余分な時間を費やすようにすることは避けてください。
プラットフォームに関する考慮事項
iOS、iPadOS、macOS、またはtvOSに関する追加の考慮事項はありません。
watchOS
SwiftUIは、アプリにモーションを追加するための強力で合理化された方法を提供します。WatchKitを使用してレイアウトと外観の変更をアニメーション化する必要がある場合、またはアニメーション画像シーケンスを作成する必要がある場合は、これらのガイドラインに従ってください。
ノートすべてのレイアウトベースおよび外観ベースのアニメーションには、アニメーションの開始時と終了時に再生される組み込みのイージングが自動的に含まれます。イージングをオフにしたりカスタマイズしたりすることはできません。
WatchKitを使用すると、アプリのUI要素の次の属性への変更をアニメーション化できます。
アラインメント
背景色
グループインセット
身長
不透明度
アクセントの色
幅
WatchKitでは、時間の経過とともに連続して表示される2つ以上の個別の画像で構成されるアニメーション画像シーケンスを作成することもできます。シーケンス内の各画像はアニメーションの単一フレームを構成し、実行時に再生動作を変更しない限り、アニメーション全体がループで実行されます。アニメーション画像シーケンスは、主にインターフェイスの画像、グループ、ボタン要素にインストールします。
画像およびグループ要素のアニメーションシーケンスの再生速度、方向、およびフレームレートをプログラムで制御できます。他のインターフェイス要素は、アニメーション全体を無限ループで表示します。
可能な場合は、watchOSアプリバンドルに画像を保存します。watchOSアプリバンドルに画像を保存すると、それらの画像の読み込みと実行時のアニメーションの表示の遅延が最小限に抑えられます。この手法は、アプリのデザインの一部であるアニメーションに使用します。
画像シーケンス内のすべての画像を最適化します。最適化されたイメージは、ディスク上のスペースを節約し、状況によってはより高速にロードします。
順方向と逆方向のアニメーションに同じ画像シーケンスを使用します。実行時に、画像シーケンスを逆の順序でアニメーション化できるため、重複する画像のセットを逆の順序で提供する必要がなくなります。この手法を使用すると、アプリのサイズが小さくなります。
リソース
関連している
開発者向けドキュメント
ビデオ
この記事が気に入ったらサポートをしてみませんか？