アイデアの見栄えを良くする方法: モバイル アプリのビジュアル デザインの初心者向けガイド
公開: 2015-11-24すばらしいアプリのアイデアを思いついたのに、フォントと書体の違いがわからない、またはハンバーガー メニューはドライブスルーでしか見られないものだと思っていませんか? 経験がほとんどまたはまったくない起業家でも、適切なチームとツールを使用して優れたアプリを作成できますが、ワイヤーフレームの使い方を知っていても問題はありません。
モバイル UI の設計に慣れていない場合でも、アプリの作成を検討している場合でも、優れたアイデアをいくつか持っている好奇心旺盛なユーザーでも、このガイドは、アプリの見栄えを良くするための正しい軌道に乗るのに役立ちます。 、さらに重要なことは、ユーザーの手の感触が良いことです。
モバイルアプリのビジュアルデザインの基本原則
初心者のデザイナーや起業家が犯す最も一般的なビジュアル デザインの間違いの 1 つは、モバイル アプリは、デスクトップ アプリや Web サイトのエクスペリエンスを縮小したものであり、コンテンツ、機能、機能、およびユーザー インターフェイス要素はすべて同じであると思い込んでしまうことです。 これがあなたの習慣である場合は、今すぐそれを放棄し、決して振り返らないでください. モバイル アプリの UI デザインは、それ自体が独特の動物であり、デバイス、オペレーティング システム、およびユーザーの行動の制約により、より大きなコンピューターで適切となるエクスペリエンスとは大きく異なるエクスペリエンスが決まります。
他のメディア向けのデザインの経験があり、優れたビジュアル デザインを見分けるコツを既に持っている場合でも、タブレットやスマートフォン向けのアプリをデザインするには、使用するテクノロジについて少なくともいくつかのことを知っている必要があります。 画面サイズは注目すべき明らかなパラメータですが、実際のデバイスの速度とバッテリー寿命も同様です.
さらに、Apple と Android はどちらも、それぞれのオペレーティング システムで実行されるアプリについて、独自の設計哲学と推奨事項を持っています。 これらのガイドラインに従うことで、ユーザーはアプリを使用するときに継続性と有能さを感じることができます。結局のところ、ユーザーは 1 日を通して他のアプリを使用しているのです。
ウェアラブル向けに設計する場合も同じことが言えます。 たとえば、FitBit Flex または Charge には、UI を表示する細い黒い帯しかありません。 歩数、上った階数、消費カロリー、さらには日時などの情報をこのような小さなスペースにどのように収めるのでしょうか? さらに良いことに、どうすればこれほど使いやすく見栄えがよくなるのでしょう?
スペースの制限を認識し、ユーザーが知る必要があることとその時期に優先順位を付け (そして、重要なことに、ユーザーが自分のニーズと優先順位に合わせて画面の順序を変更できるようにする)、シンプルでわかりやすいアイコンを使用することによって. 誰もが、そしてその母親 (そして米国大統領でさえも!) が最近 FitBit を持っているように見えるのには理由があり、優れたビジュアル デザインもその一部です。
画面を圧倒しないでください
ファブレットの時代であっても、モバイルアプリは操作するための大量の画面領域を提供しません。 モバイル ビジュアル デザインを成功させる上で最も重要な側面の 1 つは、特定の時間に実際に画面に表示する必要があるものを決定することです。
シンプルですね。 ええと、掘り始めたら、必ずしも完全にカットされて乾燥しているわけではありません. ログイン画面をどのように見せたいか頭の中で考えているかもしれませんが、デジタルプロトタイプを作成すると、最初に望んでいたすべてのフォームに収まらないことに気付くかもしれません (または、できますが、ひどく見え、さらに気分が悪い）。 あるいは、あなたが念頭に置いていた洗練されたシンプルなログイン画面が、より多くのガイダンスを必要とするユーザーにとって完全に直感的ではないことに気付くかもしれません。
では、何がどこにあるのかをどのように判断しますか? その多くは、練習、ユーザー テスト、および他のアプリが適切であるという感覚をつかむことから始まりますが、従うべき一般的なガイドラインがいくつかあります。
ユーザーを圧倒しない
ユーザーが最初にアプリを開いたとき、何をすべきかをどのように知るのでしょうか? 経験は直感的ですか？ そうでない場合、ユーザーにアプリのさまざまな機能をどのように紹介しますか?
スイート スポットを確実に達成するための 2 つの重要な方法は、焦点を設定することと視覚的な階層を確立することです。
前に書いたように、一部の要素が他の要素よりもフォーカスされるように画面を優先することは、メディアに関係なく優れたビジュアル デザインです。これはモバイル アプリの UI に固有のものではありません。 ただし、UI は明確でしっかりした階層がないと機能しません。また、スペースに制限があるため、フォーカル ポイントを簡単に識別できることが特に重要になります。 この階層は、ユーザーがアプリを操作するときに何を見て何をすべきかを理解するのに役立ちます。
視覚的なデザインに取り組むときは、アプリの画面に含めたいものすべてを取り上げ、ユーザーにとって最も重要なものを決定します。 その要素 (写真、テキスト、入力フィールド、ボタンなど) は、スペースと視覚的な特徴の点で画面を支配する必要があります。 次に、その時点で画面を占有する他のすべての階層を確立します。
再びログイン画面を例に取りましょう。 この画面の最も重要な側面は、ユーザーが名前とパスワードを入力するフィールドです。 これらのフィールドが小さすぎたり、隅に隠れていたりすると、ユーザーが見つけにくくなるだけでなく、操作しにくくなります (入力するためにズームインする必要はありません)。
ジェスチャーとフィードバック
あなたにおすすめ:
反営利条項はインドのスタートアップ企業にとって何を意味するのか?
Edtech スタートアップがインドの労働力のスキルアップと将来への準備をどのように支援しているか...
今週の新時代のテック株：Zomatoのトラブルは続き、EaseMyTripはスト...
インドの新興企業は資金調達を求めて近道をする
デジタル マーケティング プラットフォームの Logicserve が 80 億ルピーの資金を調達し、LS Dig...
レポートは、Lendingtechスペースに対する新たな規制精査を警告しています
待ってください — ユーザーが実際に目にするものなど、視覚的なデザインについて話していませんでしたか? では、ジェスチャーとフィードバックはそれとどのような関係があるのでしょうか? モバイル デバイスのビジュアル デザインの特徴の 1 つは、純粋なビジュアル エクスペリエンスについて話しているわけではないということです。 ユーザーはアプリに触れて対話するため、ユーザーが見ているものは、ユーザーが感じているものと一致している必要があります。 モバイル UI に近づくとき、視覚と触覚を切り離すことはできません。
たとえば、ボタンがボタンであることをユーザーに伝える方法はいくつかあります。 影やその他の 3 次元の手がかりを使用して、それがユーザーが押すかスワイプする必要がある要素であることを示すか、ユーザーがそれを操作する方法 (および操作方法) を理解できるようにアニメーション化することができます。 それと対話する!)。
しかし、ボタンの動き方でさえ、ユーザーの行動に依存する場合があります。 たとえば、ユーザーが画面を完全にスワイプしていない場合、ボタンは元の位置に戻る前に少し横に移動し、ユーザーからのより自信のあるジェスチャーを待つことがあります。 または、ボタンを押したままにする必要がある場合は、離してもよいかどうかを示す触覚フィードバックをユーザーに返す場合があります。 これらすべてが、UI 要素の設計とアニメーション化の方法に影響します。
複雑に聞こえるかもしれませんが、あなたのアプリのことを聞いたこともなく、ましてやオフィスのスケッチやホワイトボードを見たこともないユーザーがどのように感じるか想像してみてください。 これが、ユーザーのオンボーディングが重要な理由です。矢印、指示テキスト、その他の視覚的な手がかりを使用して、ユーザーに必要なアクションを警告することができます。 モバイル アプリのビジュアル デザインを検討する際に考慮すべきもう 1 つの重要な要素は、これらの手がかりを適切に表示し、直感的に感じられるようにすることです。
タイポグラフィ 101
たくさんのフォントと書体があります。 すべてを知る必要はなく、そこにあるもののほとんどを知る必要さえありません。 幸いなことに、ほとんどのモバイル アプリでは、知っておく必要があるのはほんの一握りです。なぜなら、人気のあるフォントが人気があるのには理由があります。多くの人が見栄えがよく読みやすいと感じているからです。
たとえば、Helvetica についてはおそらくよく知っているでしょう (また、タイポグラフィの短期集中コースが必要な場合は、Helvetica に関する驚くほど面白いドキュメンタリーをチェックしてみてください)。 モバイル UI から鉄道駅、ブランド ロゴまで、Helvetica にはほぼ普遍的な魅力があります (ただし、ビートルズやチョコレートのように、あらゆるものに少なくとも数人の批判者がいます)。 それには理由があります。シンプルで読みやすく、見栄えの良いフォントです。
一部のフォントは、特にモバイル向けに設計されています。 たとえば、Microsoft の Segoe UI は、小さいサイズでもデバイスの画面で読みやすいように設計されています。 同様に、Google は Android 用の Roboto を開発し、Apple は San Francisco UI を使用しています。 各 OS には、タイポグラフィに関する独自の推奨事項とガイドラインがありますが、ほとんどは同じ基本原則に要約できます。
- 読めるようにしておく
選択できるフォントは無限にあり、非常に派手で刺激的な外観のものもあります。 しかし、結局のところ、最も重要なことは、テキストを読みやすくすることです。 美しく見えるフォントよりも目を細めないシンプルなサンセリフ フォントを選ぶ方が良いですが、ユーザーはそれを使います。 (覚えておいてください: 優れたビジュアル デザインはアクセシブルなビジュアル デザインであり、ユーザーの多くは視力に問題がある可能性があります。UI はできるだけ目にやさしいものにしてください。)
- 1 つまたは 2 つのフォントに固執する
これは、「読みやすくする」ための一種の当然の帰結です。 モバイル UI の観点から見ると、ビジュアル デザインに複数の異なる書体を使用する必要はまったくありません。 フォントは 1 つでも構いませんが、どうしても必要な場合は 2 つでもかまいません。 タイポグラフィを使用して階層を確立するには、複数の書体ではなく、さまざまなフォント サイズ、太さ、スタイルに依存する必要があります。
- 車輪を再発明しないでください
タイポグラフィは、本を書くことができるトピックであり、このテーマに人生を捧げている人はたくさんいます. 幸いなことに、あなたはその 1 人である必要はありません (本当にそうしたい場合を除きます!)。 始めたばかりの場合は、同様のアプリで使用されているフォントを確認するか、OS ガイドラインで推奨されている特定の書体を使用してください。 ビジュアル デザインへのアプローチとしてはあまり創造的ではないように聞こえるかもしれませんが、iOS アプリに SF-UI を使用するか、Android アプリに Roboto を使用すると、ユーザーはより継続的なモバイル デバイス エクスペリエンスを得ることができ、アプリが読みやすいことが保証されます。
モバイル アプリ UI デザイナーのための色彩理論
書体よりも数が多いのは色です。 非常に多くの無限の可能性があるため、モバイル アプリのカラー スキームを考え出すのは簡単です。 現実を直視しましょう: ビジュアル デザインを学んだり、そのコツを持っていない限り、70 年代に両親が行った最悪のワードローブの決定に似たモバイル UI になってしまう可能性があります。特にマスタードイエローのレジャースーツは良いアイデアでした パウダー ブルーのプラットフォームで?)。
タイポグラフィと同様に、デザイン対象の OS には、配色で何を探すべきかに関する独自のガイドラインがある可能性があります。 ただし、OS に関係なく、いくつかの推奨事項は普遍的です。
- パレットを 2 ～ 4 色に制限する
モバイル アプリの UI は、Lisa Frank への愛情を誇示するときではありません。 フォントと同様に、アプリのカラー スキームを選択する場合は、少ないほど効果的です。 色や濃淡が多すぎると、視覚的なデザインが複雑になり、ユーザーがアプリ内を移動するのが難しくなり、何を操作すべきかを理解するのが難しくなります。
- 原色とアクセントカラーを指定し、適切に使用してください。
何が起こっているか、何をすべきかをユーザーに伝える方法で色を使用する必要があります。 たとえば、ユーザーが操作する必要がある要素 (メニューやボタンなど) は異なる色である場合があり、ユーザーが要素をタップまたはスワイプすると、その色が変わる場合があります。
パレットごとに、UI の非対話型要素の原色または原色のセットと、対話性を示すアクセント カラーを選択します。 これを大局的に見ると、ユーザーがスクロールするだけのテキストブロックや静的なイラストにアクセントカラーを使用したり、ボタンに原色を使用したりしないでください。 プライマリ カラーとアクセント カラーを一貫して使用すると、ユーザーはアプリをより直感的に操作できるようになります。
- 色を使用してデザインを読みやすくし、相性の良い色を選択してください。
色がスキーム内でうまく機能するかどうかには、いくつかの要因があります。 考慮すべき最大の事柄の 1 つはコントラストです。たとえば、明るい黄色はライム グリーンの上ではあまり目立ちません。 ただし、2 つの色や色合いが互いによく対照的であるからといって、それらがうまく調和するとは限りません。 その明るい黄色は、ロイヤル ブルーの色合いの上または隣にある場合、「振動」しているようにも見えます。
なぜこれが起こるのかは、独自のブログ投稿を埋めることができますが、カラー パレットの選択を開始するには、Google と Apple がそれぞれのビジュアル デザイン ガイドラインで具体的に推奨しているパレットを調べてみてください。 繰り返しますが、インターフェースの視覚的に満足できる決定を行うという点で、彼らはすでに多くの作業を行っているため、ユーザーが必要とする機能を提供することに集中できます。
もう 1 つ注意: 配色は、アクセシビリティに関して大きな違いをもたらします。 モバイル アプリの UI で品質保証を実行する場合、テストする必要があることの 1 つは、色覚異常 (たとえば、赤と緑の識別に問題がある可能性がある) を持つユーザーがアプリを使用できるかどうかです。 アプリのアクセシビリティを高める 1 つの方法は、ユーザーがカスタム カラー パレットから選択できるようにすることです。これにより、ユーザーの個人的なアプリ エクスペリエンスが視覚的なニーズと好みに合わせて調整されます。
モバイル アプリのプロトタイプを使用してビジュアル デザイン チョップをテストする
モバイル アプリの UI にビジュアル デザインを効果的に実装する方法を学ぶことは段階的なプロセスですが、美的アイデアをテストする最良の方法の 1 つは、アプリのデジタル プロトタイプを作成することです。
モバイル デザインのプロトタイプを使用すると、フォントから色、ナビゲーションの種類まで、ビジュアル デザインのさまざまな側面をすばやく A/B テストできます。 アプリを自分でテストして必要に応じて調整できるだけでなく、友人、家族、同僚、ベータ テスターにフィードバックを求めることもできます。 結局のところ、見事なデザインでアーティストでいっぱいの部屋を感動させることができますが、最も重要なのはユーザーの意見です。
最初は 10 月 30 日にプロト ブログに掲載されました。