UI と UX デザイン

*このコンテンツは、ベータ版のAI(人工知能)を使用して翻訳されており、エラーが含まれている可能性があります。このページを英語で表示するには、 こちら をクリックしてください。


ユーザーインターフェイス (UI) は、ユーザーがメニュー、ショップレイアウト、ヘッドアップディスプレイ (Hユーザー体験) などのインターフェイスを作成するために、アートのビジュアルデザインとコミュニケ

UI

UI は、ヒットポイント、クエストの目標、価格など、プレイヤーが決定を行うために使用できる重要な情報を共有します。 UI は通常、ゲームがプレイヤーにコミュニケートする主要な方法であり、悪用された UI はプレイヤーを混収益化させ、満足度を低下させ、エンゲージメントを低下させ、��

  • 優先化
  • 注意
  • ビジュアル言語
  • コンベンション
  • 一貫性

優先化

最も重要な情報を最初に共有することは、情報の階層として知られています。これは、プレイヤーが制限されたセットの情報に基づいて即座に決定を取ることがあるゲームで特に重要です。ユーザーインターフェースを優先するとき、UI の優先度を識別し、それがプレイヤーのエクスペリ

  • この瞬間、プレイヤーは何をしていますか?
  • 彼らが意識している必要がある、またはアクセスできることは何ですか?
  • 彼らにはどの選択肢がありますか?
  • それらの選択を行うためには、どの情報が必要ですか?
  • 彼らはそれらの選択をどのように頻繁に行うでしょうか?

ゲームのコースで重要な情報と機能は、プレイヤーが割り当てた役割、ゲーム世界の場所、およびアイテムを含む、ゲームのコース中に変更されます。UI は、コンテキストに応じてボタンと情報を交換し、アイテムを持つことができます。これにより、プレイヤーは必要なものをすべて持つことができ、プレイ

無関係な要素は混乱と気絶を引き起こす可能性があります。 スペルバウンド RPG はモバイルインターフェイスにとって特に重要な、最小限の UI を持っています、小さな画面は簡単に過剰なボタン、画面、テキストで混乱する可能性があります。

A close up view of an unselected circular Items button with a brown book icon. The environment in the background is a brown dirt with a patch of snow.
Spellbound RPG の前にあるアイテム
A close up view of a selected circular Items button with a brown book icon, along with three additional buttons for skills, equipment, and the players deck. The additional buttons only display when the button is selected.
Spellbound RPG 後のアイテム

In Super Striker League では、プレイヤーの交流はボールをコントロールするかどうかによって変わります。ボールをコントロールしないと、プレイヤーはダッシュしてタックルしてコントロールを取り戻すことができます。一度ボールを持っていると、ボタンはDekeに変わり

スーパーストライカーリーグ
のコンテキストボタン

スーパーストライカーリーグ
のコンテキストボタン

生存ゲームでは、プレイヤーは体力と飢餓状態に気をつけなければなりません。 彼らはマップ、持ち物リストンベントリ、ツールに簡単にアクセスでき、 生存状況を決定し、優先順位を決めるために速くアクセスできます。 この情報は、情報またはツールを

HUD 機能はサバイバルゲームの機能

注意

最小限の、優先順位のある、コンテキストに基づいた UI にもかかわらず、プレイヤーは依然として何が必要かを見つけるためのアシストが必要です。UI デザイナーは、以下のビジュアルツールを使用して、プレイヤーの注意を引き付け、ガイドすることができます:

  • 色: 明るい色は注目を引きます。クルーシューズ、ボタン、その他の要素にクルーシューズを使用し、クルーシューズの色をクリティカルなテキスト、ボタン、その他の要素、およびミュートされたシェードに使用し、視界を向上させ、注目を減らします。このコントラストは視界を向上させ、注目を減らします。
  • サイズ: 大きい要素は、小さいものよりも目立ちやすく、重要なものとして認識されます。
  • スペース: 幅の広いネガティブスペースまたはパッドを囲んだ要素は、目立ちます。
  • 接近: グループ化された要素は接続を意味します。近くの関連する要素とアイテムを配置することで、プレイヤーは接続を理解し、簡単にアイテムを見つけることができます。
  • 移動: アニメーション要素は注目を引きます。ささやかな動きでも、静的カウンターパーツの中で要素を目立たせることができます。パーティクルエフェクト、ウィッグリングボタン、アニメーション矢印は、チュートリアルでガイドを提供するためによく使用されます。

これらのツールでは、モデレーションが重要です。明るく動く要素の過剰使用は、プレイヤーを混乱させる可能性があり、助けることはありません。

In Jailbreak > のシーズンパス UI 、季節パスの限定アイコンの下にある金黄色のストライプが、プレミアム報酬を強調し、無料のものとの視覚的な区分を作成します。

シーズンパス UI を ジェイルブレイク の中にあります

In ドラゴンアドベンチャーズ、 視覚的な優先度は、サイズを拡大し、より多くのパッドを追加して、それを小さなバンドルから区別するために、最高価値のコインバンドルに与えられます。

ドラゴンアドベンチャーズ のコインバンドル

In タワーディフェンスシミュレーター では、サイズと近接は、デイリータワースキンをデイリークレートから視覚的にグループ化し、区別して表示します。

タワーディフェンスシミュレーターのショップ

ビジュアル言語

プレイヤーに画面上の最も重要な要素に注意を向けることに加えて、UI デザイナーはプレイヤーが見ているものを理解するためのビジュアル言語を開発します。ビジュアル言語は、形状、色、スタイルなどのデザインチョイスのセットから構成されており、要素の目的、ステータス、アソシエーション、および関

アイコン

アイコンは、意味と関連を伝達するビジュアルアイデンティティを採用することができます。たとえば、特定の統計に関連するアイコンは、色のパレットと同様の形状を共有し、プレイヤーが機能を認識して理解できるようにします。

プレイヤーステータス in フォーチュンの風 > >

ボタン

プレイヤーの入力の一般的な形式として、ボタンは簡単に特定できる必要があります。ボタンをコンテナ内に配置するなど、テキストまたはアイコンを囲む色など、背景と区別して表示されます。ハイライトまたはシャドーを追加することで、ボタンのタクティルアプリケーションを強化できます。

ボットクラッシュシミュレーター

テキスト

重要なハイレベル情報を含むヘッダーとタイトルは、ボディテキストより大きく、大きくなる必要があります。色が非常に読みやすく、背景色とのコントラストが良好な色を含むヘッダーとタイトルは、表示されるのでありがたいです。スタイリッシュな選択、例えば色と強調を考慮して、ゲーム内のアイテム、統計、または能力を

クローシングショップ in Winds of Fortune

ビジュアル言語が設計されたら、スタイルガイド、チーム全員が言語を一貫して適用する方法を理解するためのルールと例を記述したスタイルガイドにドキュメントされることができます。

コンベンション

規約は、多くの異なるゲームで見られる一般的に適用されるデザインチョイスです。いくつかの例は次のとおりです:

  • ボタンを押すとダイアログを閉じる X シンボル
  • 現在使用できないボタンに適用された色グレー
  • ボタンまたは機能の上にロックアイコンを重複すると、プレイヤーがまだそれを獲得していないか、またはアンロックしていないかを示す

広く使用されているため、プレイヤーは一般的にこれらの規約に熟悉しています。この familiarityを活用することで、インターフェイスをより直感的にし、ゲーム固有の指示を必要とせずに済みます。ゲーム内でプレイすることで、これらの規約を認識することができます。UI デザイナーは、ゲームの目的に最�

X は wind of fortune のボタンを閉じる
、ドラゴン アドベンチャーズ、ボットクラッシュ シミュレータ、1>ドア1>

Arcane Odyssey
の「健康」ステータスの一貫性グリーンビジット

一貫性

UI デザイナーが行う決定は、ゲーム全体で一貫して適用される必要があります。一貫性は、プレイヤーがゲームをより効率的にナビゲートするのを助け、混乱と満足を防ぐのに役立ちます。

ゲームで UI の一貫性の例:

  • 「健康」ステータスは、すべてのテキスト、関連するアイコン、およびヘルスバーに緑で表示されます。
  • NPC ダイアログはいつでもゲーム内アイテムを参照しています。これは、大きな枠で強調表示されます。
  • ボタンは常に正方形であり、赤であり、ホワイト X を含みます。これはダイアログの右上隅にのみ表示されます。
  • 買うレイヤーがショップでアイテムを買えない場合、価格は赤で表示されます。

これらの選択は、プレイヤーの理解とナビゲーションを容易にするためにあります。一貫して適用することで、プレイヤーは関連する要素を関連付け、重要なアイテムを識別、筋肉メモリを開発、スピーディーかつ情報に基づいた決定を行い、ゲーム内に長く浸水することができます。

ユーザー体験

UX デザインは、プレイヤーがゲームとどのようにインタラクトするか、選択をゲームに知らせるか、次の選択から次の選択に移動するかに関連しています。たとえ UX は常に UI のビジュアルおよび情報デザインと一緒に機能しますが、UI のビジュアルと情報デザインよりも、インタラクティビティとプレイヤーエクスペリエンスに焦点がありま

プレイヤーを理解する

UX デザイナーの主な目的は、プレイヤーが使用しやすく、直感的で、オブジェクトなしで便利なインタラクションとフローを作成することです。このプロセスは、プレイヤー自身の理解、ゲームの意図したオーディエンスに始まります。プレイヤーを識別すると、フォロー中のことを考慮してください:

  • デモグラフィクス: デモグラフィクスは、プレイヤーグループの一般的な情報を提供して、デザインの選択を教えてくれます。たとえば、より若いプレイヤーは通常モバイルデバイスでプレイすることが多く、個人コンピューターでプレイすることが少なくなっています。そのため、このオーディエンスに対するゲームは、モバイルユーザーエク

  • エクスペリエンスレベル: 開発者は、プレイヤーに少ないゲーム経験、または重大な量、またはその間に何かを設計することを選択することができます。熟練したプレイヤー、例えば、ツールバーでアイテムを装備するために数字のキーをタップするか、c を押してかがむなど、一見な

  • ジャンルの親和性: 一般的なエクスペリエンスレベルと同様、ジャンルの親和性はプレイヤーのエクスペリエンスレベルを特定のゲームタイプで反映します。ロブロックスのポップなジャンル、ロールプレイ、サバイバルホラー、およびファーストパーソンシュータ

  • ゲームプレイスタイル: プレイヤーは、コンペティションとアチーブメントコレクションから探索とコラボレーションまで、さまざまな種類のプレイを好むことがよくあります。これらのプレイスタイルの好みは、ゲームメカニクスのプレイヤーが優先すること、次に

これらの要素を検討し、ターゲットプレイヤーグループ (またはグループ) を選択した後、それらをメーティングし、プレイし、その目標と優先を学び、デザインの選択をより良く情報しているようにするためにグループに会って、プレイして学びましょう。

インタラクションのデザイン

インタラクション は、プレイヤーがゲームで自分の選択を体験し、コミュニケートする機能です。UX デザイナーは、これらのインタラクションが直感的であり、できるだけ少なくの説明が必要であることを望みます。これをするには:

  • コンベンション
  • メタフォー
  • フィードバック

規約

規約 はプレイヤーが他のゲームから既に知っている UX デザインと原理です。

「E」近接プロンプト in マーメイドライフ > >

コンベンションの例は次のとおりです:

  • Roblox の開発者が、アイテムが表示されるために十分に近づいている場合をプレイヤーに伝えるために使用する「E」の近接プロンプト。
  • 「C」キーは、プレイヤーのアバターが障害物の下に寄りかかるようになり、または狭い場所に入ることができるようにします。
  • ツールバーからアバターの手にアイテムを装備するための数字のキーを装備します。
  • マッチに参加するために地面の上に円を歩きます。

特定の実装またはデザインチョイスが人気になると、「C」などの簡単な名前でマウスをナビゲーションバーかすことができるため、接頭詞として使用できます。たとえば、「C」をマウスで動かすと、「C」の名前の最初の文字が簡単に覚えられ、WASD キーの隣

メタフォール

メタフォールス は、抽象的なコンセプトをより熟慮したものに関連させ、理解を助けるために便利なショートカットを作成します。この例から Spellbound Wizard RPG の、魔法のスペルをキャストする行為は、デッキからカードを引き出すことで実行されます。

スペルキャストをカードとして スペルバウンド RPG >
>

フィードバック

ゲームからプレイヤーへのコミュニケーションは、フィードバックとして知られています。フィードバックは、プレイヤーが取ったアクションがゲームに影響を与えたことを理解するのに役立ちます。これは、ゲームの機能を学び、追加のレイヤーのポーランドを追加して、機能を追加して、使用を追加します。いくつかのフィ

  • 敵が「ヒット」アニメーションアニメーションをプレイしているときに、それがプレイヤーの武器からダメージを受けたことを示すために
  • ホバー、押し下げ、リリースの状態を表示するボタン (選択)
  • プレイヤーが購入を完了するときにプレイする現金レジの「cha-ching!」サウンドエフェクト
  • プレイヤーがクエストの目標を完了すると、進行バーが満たされます

フィードバックが不足している、または不足している場合、プレイヤーは何を達成したかを知らない可能性があり、エフェクトが良かったか悪かったかを理解したり、機能が正しく動作しているか、バグが発生しているかを知ることはできません。

フローをデザイン中

プレイヤーがゴールを完了するためには、複数のインタラクションが必要です。UX デザイナーは、プレイヤーが 1つのアクションまたは UI 画面または選択から次のところまでナビゲートする方法に関心しています。これらのパスがロジカルで便利であることを確認し、これらのパスがロジカルで便利であることを確認します。

たとえば、アバターの上にアイテムを装備するには、 ベリーアベニュー RP では、プレイヤーは次のことを行う必要があります:

  • アバターボタンを見つけてタップ
  • アイテムカテゴリーを選択します (顔、頭、首など)
  • スクロールして、関心のあるアイテムを見つけます
  • アイテムをタップしてアバターに装備
  • [完了] ボタンをタップしてアバターのカスタマイズを終了
ベリーアベニュー RP のアバターカスタマイズフロー

これらの一連のステップは、アバターのカスタマイズフローを表します。このフローは単純で明確であり、アイテムを装備するために必要な最小限のステップができます。プレイヤーは多くのアクションを実行する必要がありませんか、または目標に到達するために必要なステップが多すぎるため、このフローは低い 摩�

効率的で低摩擦のフローを設計するには、ユースケースを慎重に考慮する必要があります。それらのユースケースは、次のプレイヤーターゲットなどとして表現できます:

  • アバターを素早く変更できるようにしたい
  • 変更中にアイテムを簡単に見つける
  • 選択する前にアイテムをプレビュー
  • 選択後の簡単なアイテム削除

その後、これらの目標は、機能の UI と UX デザインを指し示します:

  • プレイヤーは、HUD の目立つボタンを通じてアバターのカスタマイズ機能にアクセスし、すぐにアイテムをアバターに装備できます
  • タブはアイテムを便利なカテゴリに分類し、検索フィールドではプレイヤーがアイテムを直接検索できます
  • アイテムはアバターで即座にプレビューされます
  • プレイヤーは、再びアイテムをタップして選択を取り消すか、装備したアイテムリストのアイテムをタップして選択を取り消すことができます

デザイナーは次に、UI を構成し、プレイヤーがアバターの変更を完了するために踏み出すステップを計画し始めることができます。このプロセスは、フローチャート を使用して、プレイヤーが UI をナビゲートするときにビジュアルに表示されるアクションを表示することで��

フローチャートの例。