モーションデザインを使用してアプリエクスペリエンスを面白くする方法は？

公開: 2018-04-13

ほんの数年前、あらゆる形態のモーションとアニメーションが、悪いサイトUIの定義に関連付けられていました。画面の隅から隅へと跳ね返る円形のボールでオファーを表示した老後の広告ウェブサイトを覚えていますか？ウェブデザインの動きのケースは悲しいケースでした。

しかし、モバイルアプリの登場以来、シナリオは大きく変化し、UIモーションデザインが人気のあるデザイントレンドになりました。

現代のインターフェースは、もはや静的要素に関するものではありません。 UIモーションデザインにより、ブランドは現在、ソフトウェアと人間の多様性とつながりの第一のニーズとの間の空白をカバーしています。

「Webおよびモバイルアプリケーションサービスの最も直感的で楽しい要素は、モーションデザインを含む要素です。」

さまざまなモバイルアプリジャーニーステージに組み込まれているアプリのモーションデザインは、ユーザーがアプリの動きに気を紛らわせるだけでなく、アプリのセッション時間を増やすこともできます。それらは今や、楽しく、革新的で、ユーザーをアプリケーションに結び付ける確実な媒体の象徴になっています。

アプリにモーションデザインを使用する理由

アプリのモーションデザインがモバイルインタラクション全体を完全に興味深いものにした方法はいくつかあります。ここでは、その方法を見てみましょう。

遅いアプリの読み込みが楽しくなりました

読み込みが遅いアプリは、常に発生するため、昼夜を問わず発生することがよくあります。その背後には、ユーザーのフロントからのネットワークの低さ、バックエンドの技術的な問題、サーバーで同時に行われるリクエストが多すぎるなど、多くの問題が発生する可能性があります。ただし、理由に関係なく、読み込み時間が遅いことが、ユーザーをアプリから遠ざける最大の理由です。

さて、これは2018年のモバイルアプリのトレンドの1つであるアプリのUIデザインでアニメーションを使用することで完全に防ぐことができます。読み込み時間が短い場合にモーション要素を追加することで、デザイナーはユーザーを夢中にさせ、要素やアニメーションを画面上で滑らせるだけで見ることができます。たとえば、恐竜ゲームでGoogleChromeのオフラインページを見てみましょう。

ユーザー向けのオンボーディングエクスペリエンス

アプリのモーションデザインの最も一般的な使用例の1つは、アプリジャーニーのモバイルアプリのオンボーディング段階で見られます。ユーザーにアプリを説明して理解させるために使用されるアニメーションは、ユーザーが最初の数回の実行で自分の道を簡単に見つけられるように、ブランドによって組み込まれています。

メンタルマップでユーザーの心にエンボスアプリ

オンボーディングエクスペリエンスを次のレベルに引き上げるモバイルUIデザインは、ユーザーがアプリの流れに合ったメンタルマップを作成するのに役立ちます。メールボックスを更新するために上部のGmailバーを引き下げていることに気づいたことがありますか？私たちはそれを疑っています。その理由は、まばたきのようにエンボス加工されているので、二度と考える必要がなく、自動的に発生するからです。

何が間違っているのか、何が正しいのかをユーザーに知らせる

モーション要素は、問題が発生したこと、またはレベルを正常に超えたことをユーザーに知らせる最も効果的な方法の1つです。エラーを強調するように設計するときは、ユーザーが間違っていることを正確に指摘することが重要です。

間違ったパスワードシェイクは、それを完全に実現する1つのアニメーションです。モーションだけでユーザーが間違っていることを示すのと同じように、フィードバックモーションも成功したイベントを示す必要があります。チェックマークアニメーション付きの単純なメールボックスポップアップは、メールが送信されたことをユーザーに示します。

結局のところ、ユーザーが何を間違っているのか、または何かを成功させることができたのかとユーザーに考えさせないでください。

モーション要素がアプリの旅をより楽しく思い出深いものにする方法を見てきたので、次に、モーション要素が粘着性と無用さの側に交差しないようにするために採用する必要があるアプリUIデザインの原則を見てみましょう。

モバイルアプリで具体化する必要があるウォルトディズニーの明確な原則

モーション要素を扱ってきたすべてのアプリ開発会社は、イノベーションとそれをやりすぎることの間の境界線が非常に薄く、それがぼやける場所であることを知っています。問題が始まります。ユーザーは無関心になり、アプリは便利なものからわかりにくいものになります。

モーションサインと動きが同様の運命を見ることを防ぐために、これらのインタラクションデザインのインスピレーションに従うことができます。これらの原則は、ウォルトディズニーによって最初に明確にされましたが、ミッキーマウスのように思い出に残る楽しい体験を提供することができます。

1.モーションの動きの軌跡

業界で普及している設計原則は、アニメーション化された形状は主に直線の軌道運動に従うべきであるという規則に従います。しかし、私たちは皆よく知っています。古い伝統では、片足で外向きのWebおよびモバイルアプリケーション設計サービスを実際に提供することはできません。
ユーザーがあなたのモーション要素に恋をするようにするには、曲線、垂直、さらには波のような新しい動きの軌跡を追加して、それらを視覚的に人々に示す必要があります。

2.モーションが表示されるタイミング

ユーザーの画面に動機付けのアクションなしで突然表示されるモーションプロンプトは、避ける必要があります。アプリのUIデザインにモーションを組み込む場合は、モーションを要求するときに実行します。ユーザーが間違ったパスワードを入力した場合のようにモーションを追加することが理にかなっている場合がありますが、正しい資格情報を入力したことを示すアニメーションのチェックマークは無視できます。

したがって、それらを船外に出す前に、それらが実際に必要な段階を知っておいてください。

3.アニメーションの焦点に焦点を合わせる

アプリのコンテンツ、デザイン要素、画像、動画の面で多くのことが画面上で発生している場合は、ユーザーが次に何をすべきかがわかるように、背景が色付きで点滅したり、ぼやけたりするモーション要素を用意します。アプリ画面にプレゼンスを表示しないと、すべての不動のモーション機能の価値が失われます。

4.アニメーション速度

Flashではなく一般の人間向けのモバイルアプリを作成すると仮定すると、モーション要素はフェザーグライドの速度で移動する必要があります。ユーザーが動きを速くしすぎるのではなく、動きに目を合わせる時間を与えます。

プロのヒント：モーションにリズムを追加します。動きに動きを追加することは無意味なことのように思えますが、それを行うことで、ユーザーの潜在意識レベルから直接アプリの共鳴ゲーム全体の一歩先を行くことになることを知っています。

5.オンザフェイスモーションピースになる

主にフラッシュカードクイズベースのeコマースアプリで使用されるこれらのモーションタイプは、ユーザーにとって次の動きを簡単にします。割引カウントダウンの場合やUberの場合のロケーションピンのドロップのように、あまりにもはっきりと移動することで、印象的なブランドイメージを作成しながら、ユーザーを目的の場所に正確に導くことができます。

モバイルアプリでアニメーションとモーションはどのように使用されますか？

前に言ったように、それをすることとそれをやりすぎることの間には細い線があります。アニメーションが使えると思うところもありますが、実際は避けてもいいのです。アプリに最適なUIデザインを作成するモーションデザインを使用する方法はいくつかあります。それらを見てみましょう：

ゲーミフィケーション

絵文字やアニメーションのマスコットを追加すると、アプリに驚異的な効果をもたらす可能性があります。これらの要素により、アプリは中毒性があり、誰もが好感を持てるようになります。さまざまなメッセンジャーがアニメーションのムードステッカーを持っており、他のすべてのプレーンメッセージングアプリよりも優れています。

プログレスアニメーション

進行状況を知らずに何かがロードされるのを待つことは、ユーザーの忍耐力をテストします。これが、特定の関数の読み込み中にどの程度の進捗があったかを示す進捗アニメーションがアプリにある理由です。プログレスアニメーションは、アプリのモーションデザインで最も人気のある機能の1つです。

アニメーション通知

通知は通常非常に退屈ですが、適切なアニメーションを使用すると、全体的なユーザーエクスペリエンスが向上します。これにより、ユーザーは受信したすべての重要な通知を確実に覚えることができます。

アニメーションの読み込み

アニメーションの読み込みは、アプリのUI操作に使用される最も一般的な種類のアニメーションの1つです。このタイプのアニメーションは、読み込みプロセスがアクティブであり、アプリが正常に実行されていることをユーザーに通知します。このアニメーションは、プログレスアニメーションのサブタイプです。

トランジションアニメーション

トランジションアニメーションは、アプリに上品な外観を与えます。また、ポジティブなユーザーエクスペリエンスも提供します。移行を許可することで、あるページから別のページに移動するときにアプリの寿命を延ばすことができます。

マーケティングアニメーション

マーケティングアニメーションはあなたのブランドに最適です。ロゴで使用されるアニメーションは、ユーザーの注意を引くための優れた方法です。これはまた、ユーザーの心にブランドの精神的なイメージを作成します。

スクロールアニメーション

スクロールアニメーションは、アプリに追加されるもう1つの有名なタイプのアニメーションであり、アプリの最高のUIデザインの1つと見なされています。アプリを美しくするだけでなく、エレガントな外観も提供します。ただし、適切なスクロールアニメーションには適切なコーディングが必要です。そうしないと、アプリがフリーズしたり、速度が低下したりする可能性があります。

注目

注意描画アニメーションは通常、ユーザーの注意を特定の領域に向ける必要がある場合に適用されます。オンライン食品注文アプリから注文していて、アイテムを追加するとすぐに、特定の種類のアニメーションで価格が変化するとします。これは、焦点が置かれるべき場所である数字にあなたの注意を引くでしょう。

この記事では、モーション要素が退屈なアプリと革新的なアプリの主な差別化要因である方法、それらを組み込むための適切な段階、さらには従う必要のある設計原則について説明しました。私たちは最高のモバイルアプリ設計会社であり、可能な限り最高の結果を達成するために、シンプルなモバイルアプリ設計プロセスに従います。手順は簡単ですが、作業は詳細です。モーションデザインに関する質問がある場合、またはインタラクションデザインのインスピレーションが必要な場合は、 Appinventivまでお問い合わせください。