Uxデザイン
説得力と動き–モーションデザインの原則へのガイド
モーションはデジタル製品のユーザーエクスペリエンスに大きな影響を与えますが、インターフェイス要素が基本的なモーションデザインの原則を示さない場合、使いやすさが損なわれます。ユーザーインターフェイスのコンテキストでは、モーションは視覚的な装飾以上のものです。これは、製品のエンゲージメントを強化し、デザインコミュニケーションの範囲を拡大する強力な力です。
私たちの世界は動きのひとつです。静止した瞬間でも、葉が震え、肺が拡張します。デジタル製品デザインの分野では、動きは第二の性質であり、わずかな労力で活用できる日常の延長であるように思われます。それが本当なら。
アニメーションUI要素を初めて使用する人に聞いてみてください。何時間もの努力がアマチュアの結果を生み出します。カードを画面にスライドさせるような単純なものは、ぎこちなく見えます。何故ですか？
理論的には、UI要素を移動させるのは簡単です。所定のパス上にポイントを定義し、ソフトウェアがギャップをトゥイーンします。実際には、そのようには機能しません。ツールとテクニックは不可欠ですが、それらは原則から力を引き出します。 モーションがデジタル製品の使いやすさを向上させることである場合、それは、無限の数のユースケースに適用される不変の行動規則に基づいている必要があります。
モーションデザインの起源
モーションデザインとの融合 UX 比較的新しいですが、そのルーツはディズニーにあります。フランクトーマスとオリージョンストンは、ウォルトディズニーの最も価値のあるものの1つでした アニメーター とのような古典への主要な貢献者 ピノキオ 、 バンビ 、および ファンタジー 。彼らの アニメーションの12の基本原則 影響力を維持 モーショングラフィックス 映画、テレビ、デジタルコンテンツ向け。
ディズニーの原則は、アニメーションのストーリーテリングのために、物理的な動きの本質的な法則を抽出します。 描かれたキャラクターが動いたり感情表現したりできるようにしますが、現代のインタラクティブなモーションのニーズに適切に対応していません。 ユーザーインターフェイス 。
現代のデザイナーはこのギャップを埋めようとしています。より具体的な例の1つは、 モーションデザインの10の原則 、アニメーションの専門家によるディズニーの適応 ホルヘ・R・カネド・エストラーダ 。それでも、デジタル製品の設計に総合的に適用する場合は、翻訳が必要です。
インタラクティブなUI要素（およびそれらのUXの重要性）を中心にモーションの原則の方向を変える最も野心的な試みは、IssaraWillenskomerの UX inMotionマニフェスト 。その深さは驚くべきものですが、それは軽い読みではありません。
確立する際に 動いているUXの12の原則 、ウィレンスコマー：
- モーションデザインとUIアニメーションを区別します
- モーションがユーザビリティをどのように支援するかを明確にします
- コアモーション動作の内部動作をアンパックします
モーションデザインとUX：重要な違い
モーションデザインの原則に取り組む前に、ウィレンスコマーのマニフェスト全体に現れる重要な違いを強調することが重要です。
動きは装飾以上のものです
モーションデザインはUIアニメーションと同義ではありません。 UIアニメーションは、ほとんどの場合、UXに関係のない見た目の後付けとして扱われるため、これは非常に重要です（魅力を追加する場合を除く）。 モーションは装飾ではなく、動作であり、動作はユーザーエクスペリエンスを支援または妨害するだけです。
2つのインタラクションタイプ：リアルタイムと非リアルタイム
モーションデザインは、リアルタイムと非リアルタイムの2つの基本的な相互作用に関係しています。
- リアルタイム ユーザーが画面上のUI要素を操作すると、インタラクションは即座にフィードバックを提供します。言い換えれば、運動行動は反応します 瞬時に ユーザー入力に。
- 非リアルタイム 相互作用が発生します 後 ユーザー入力。つまり、ユーザーは続行する前に、一時停止して、結果のモーション動作を監視する必要があります。
モーションがユーザビリティをサポート
モーションデザインは、4つの異なる方法でユーザビリティをサポートする必要があります。
- 期待： ユーザーがUI要素を操作するとき、どのようなモーション動作が期待されますか？動きは期待に応えますか、それとも混乱を引き起こしますか？
- 連続： インタラクションは、ユーザーエクスペリエンス全体で一貫したモーション動作を生成しますか？
- 物語： インタラクションとそれらがトリガーするモーション動作は、ユーザーの意図を満たすイベントの論理的な進行に関連付けられていますか？
- 関係： UI要素の空間的、美的、および階層的な属性はどのように相互に関連し、ユーザーの意思決定に影響を与えますか？モーションは、存在するさまざまな要素の関係にどのように影響しますか？
デジタル製品の12のモーションデザイン原則
1.緩和
イージングは、実世界のオブジェクトが時間の経過とともに加速および減速する方法を模倣します。 これは、動きを示すすべてのUI要素に適用されます。
イージングの反対は直線運動です。直線運動を表示するUI要素は、静止状態からフルスピードに、フルスピードから静止状態に瞬時に移行します。このような動作は、物理的な世界のどこにも存在せず、ユーザーには停止しているように見えます。
2.オフセットと遅延
複数のUI要素が同時に同じ速度で移動する場合、ユーザーはそれらをグループ化し、各要素が独自の機能を持っている可能性を見落としがちです。
オフセットと遅延は、同時に移動するUI要素間に階層を作成し、それらが関連しているが別個であることを伝えます。 完全な同期の代わりに、要素のタイミング、速度、間隔がずらされ、微妙な「次々に」効果が生じます。
ユーザーが画面間を移動すると、オフセットと遅延は複数の対話オプションが存在することを示します。
3.子育て
子育ては、あるUI要素のプロパティを他のUI要素のプロパティにリンクします。親要素のプロパティが変更されると、子要素のリンクされたプロパティも変更されます。すべての要素プロパティは相互にリンクできます。
たとえば、親要素の位置を子要素のスケールに関連付けることができます。親要素が移動すると、子要素のサイズが増減します。
子育ては、UI要素間の関係を作成し、階層を確立し、複数の要素が一度にユーザーと通信できるようにします。 このため、子育ては、リアルタイムのやり取りで使用すると最も影響力があります。
4.変換
変換は、あるUI要素が別のUI要素に変わるときに発生します。たとえば、ダウンロードボタンは進行状況バーに変わり、進行状況バーは完了アイコンに変わります。
UXの観点から、 変換は、目標に関連するステータスをユーザーに示す効果的な方法です （（ システムステータスの可視性 ）。これは、UI要素間の進行が開始と終了のプロセスにリンクされている場合（ファイルのダウンロードなど）に特に役立ちます。
5.値の変更
価値の表現（数値、テキストベース、またはグラフィック）はデジタルインターフェイスに豊富にあり、銀行のアプリから個人のカレンダー、eコマースサイトに至るまでの製品に表示されます。これらの表現は実際に存在するデータセットに関連付けられているため、変更される可能性があります。
値の変更は、データ表現の動的な性質を伝え、データがインタラクティブであり、ある程度影響を受ける可能性があることをユーザーに通知します。 値が動きなしで導入されると、データに関与するユーザーの意欲が低下します。
6.マスキング
マスキングは、UI要素の一部を戦略的に表示および非表示にすることです。 要素の周囲の形状とスケールを変更することにより、マスキングは、要素自体を識別可能なままにしながら、ユーティリティの変更を通知します。 このため、写真やイラストなどの詳細なビジュアルが理想的な候補です。
使いやすさの観点から、設計者はマスキングを実装して、一連の対話を進めていることをユーザーに示すことができます。
7.オーバーレイ
2D空間では、奥行きはなく、UI要素はX軸またはY軸に沿ってのみ移動できます。オーバーレイは、UIの2D空間で前景/背景の区別の錯覚を作成します。 オーバーレイは、深度をシミュレートすることにより、ユーザーのニーズに応じて要素を表示および非表示にすることができます。
オーバーレイを使用する場合、情報階層は重要な考慮事項です。たとえば、ユーザーがメモを取るアプリで最初に表示する必要があるのは、メモのリストです。次に、オーバーレイを使用して、各メッセージの2次オプションを明らかにすることができます。 削除 または アーカイブ 。
8.クローニング
クローン作成は、1つのUI要素が他のUI要素に分割されるモーション動作です。これは、重要な情報やインタラクションオプションを強調するための賢い方法です。
UI要素がインターフェイス内で実体化する場合、すでに画面に表示されている要素にリンクする明確な原点が必要です。 要素がどこからともなく破裂したり、存在しなくなったりした場合、ユーザーは自信を持って対話するために必要なコンテキストを欠いています。
9.不明瞭化
すりガラスのドアを想像してみてください。開くには対話が必要ですが、反対側で何が待っているかを（ある程度）識別することは可能です。
隠蔽は同じように機能します。 インタラクションを要求するインターフェイスをユーザーに提示すると同時に、従うべき画面のヒントを明らかにします。ナビゲーションメニュー、パスコード画面、およびフォルダ/ファイルウィンドウが一般的な例です。
10.視差
視差は、2つ（またはそれ以上）のUI要素が同時に移動するが速度が異なる場合に表示されます。ここでも、目的は階層を確立することです。
- インタラクティブな要素はより速く動き、フォアグラウンドに表示されます。
- 非インタラクティブ要素はゆっくりと移動し、バックグラウンドに後退します。
視差は、非インタラクティブな要素を画面上に維持し、デザインの統一性を維持しながら、ユーザーをインタラクティブなUI要素に導きます。
11.次元性
次元性により、UI要素には、物理世界のオブジェクトのように、複数のインタラクティブな側面があるように見えます。この動作は、要素を折りたたみ可能、反転可能、フローティング、またはリアルな深度プロパティが付与されているかのように見せることによって実現されます。
ナラティブデバイスとしての次元性は、UI要素のさまざまな側面がリンクされ、シームレスな画面遷移を実現することを意味します。
12.ドリーとズーム
ドリーとズームを使用すると、ユーザーはUI要素を空間的に「移動」したり、スケールを大きくしてより詳細なレベルを表示したりできます。
- ドリー： ドリーは、ユーザーの視点がUI要素に近づく（または遠ざかる）ときに発生します。 カメラを持って花に向かって歩いている人を想像してみてください。
- ズーム： ズームを使用すると、ユーザーの視点とUI要素は固定されたままですが、要素はユーザーの画面内でサイズが大きくなります（または小さくなります）。 ここで、人が置かれたままで、カメラのズーム機能を使用して花を大きく見せていると想像してください。
モーションはコミュニケーションです
インタラクティブな体験の需要 モーション そのすべての元気で微妙な形で。 モーションデザインの原則が支持されると、最も基本的なUI要素でさえ人間のコミュニケーションの洗練されたエージェントになります。 原理を無視すると、動きは自然界にはない特徴を体現します。結果として生じる不器用さを克服できる美的素晴らしさはありません。
モーションデザインとデジタル製品のUXの関係は急速に成熟しています。 動きへの原則的なアプローチは、トレンド、ツール、およびテクニックのつかの間の有用性への過度の依存を防ぎます。 さらに良いことに、それは2D画面上の要素の抽象的な動きと3D世界での動きの知覚との間の隔たりに及びます。
ご意見をお聞かせください。以下にあなたの考え、コメント、フィードバックを残してください。
•••
ApeeScapeデザインブログの詳細：
- ポストフラッシュ時代のWebアニメーション
- Designer’s Edge –Photoshopプラグインの概要
- UXデザイントレンドレトロスペクティブ2019
- 理解する–ユーザーのオンボーディングフローのガイド
- モバイルUXの設計原則
基本を理解する
グラフィックデザインとモーショングラフィックスの違いは何ですか？
モーショングラフィックスはアニメーション化されているため、動きが見られます。これは、従来のグラフィックデザインには当てはまりません。モーショングラフィックスは、イージングやペアレント化などのモーションデザインの原則に準拠することで、現実の世界で見られる動きを模倣することで2D画面を生き生きとさせます。
モーショングラフィックスが重要なのはなぜですか？
ユーザーインターフェイスのコンテキストでは、モーションは、経験的な継続性を提供し、結果の期待を作成し、ユーザーを目的の目標に導くことによって、ユーザビリティを支援します。オフセットや遅延などのモーションデザインの原則は、ユーザーにインタラクションの可能性を知らせ、重要な情報を見つけるのに役立ちます。
モーショングラフィックスに最適なソフトウェアはどれですか？
ますます多くのデザインプログラムがモーショングラフィックスアニメーションを作成でき、FigmaやSketchなどの人気のあるプログラムがアニメーションのタイムライン統合をサポートしています。ただし、特に実験や新しいモーション動作の開発に関しては、旗手はAdobe AfterEffectsです。
モーショングラフィックスはどこで使用されていますか？
モーショングラフィックスアニメーションは、多様で成長しているデジタルメディアのセットで使用されています。 2007年にモバイルデバイスが世界的に流入する前は、モーショングラフィックスはより一般的に映画やテレビに関連付けられていました。今日、それらはデジタル製品やアプリのユーザーエクスペリエンスの不可欠な部分です。
aws認定ソリューションアーキテクト試験
