アートスタイルの選択 は、UI 要素の美的方向を計画するプロセスです。アートスタイルでデザインプロセスを開始することは重要であり、アートスタイルは視覚的な地面ルールを提供し、UIがプレイヤーに自分の経験で何ができるかについて情報を提供することを保証するために参照できます。
使用サンプルレーザータグエクスペリエンスのファイルを参考として、このユーザーインターフェイスカリキュラムのセクションでは、エクスペリエンスのジャンルに従ってUI要素の設計方法について重要な決定を下す方法、指示について:
- エクスペリエンス全体でプレイヤーに伝えたいことに従って、必要な UI 要素を識別します。
- オーディエンスにとって直感的なジャンル固有の色規約を強化する色テーマを選択する
- どの画面サイズでも簡単に読み取れるシンプルなアイコンを概要化する。
- 異なるプレイヤーワークフローの可能性に一致するボタン順序を設定する
- ターゲットデバイスで読み取り可能なテキストシステムを決定する。
このセクションを完了すると、エクスペリエンス内の UI を通じてプレイヤーに伝えたい情報の構造とフローを設計する方法を学びます。
UI 要素を識別する
UI のアートスタイルを選択する最初のステップは、オーディエンスに伝えたいさまざまな種類の情報に対応する UI 要素を識別することです。デザインプロセスの始めにこの作業を行うことは重要です、因為它允許您によってUI要素の機能目的によってカテゴリ化し、プレイヤーが各UI要素と相互作用する場所と時間に基づいて意味的な決定を行い、エクスペリエンス全体でUI要素を再使用できる場所を計画できます。
ゲームプレイ要件に必要な UI 要素は多種多様ですが、プレイヤーが体験に参加するとすぐに知る必要があるものをビジョンすることから始めることをお勧めします。たとえば、プレイヤーがサンプルレーザータグエクスペリエンスを開いたとき、自分に次の質問をするかもしれません：
- エクスペリエンスの目標は何ですか？
- チームに誰がいるかどうやって知りますか？
- チームのポイントを追跡するにはどうすればよいですか？
- ブラスターをどのように選択しますか?
- ブラスターがレーザーを発射する場所をどうやって知りますか?
- モバイルデバイスにいる場合、ブラスターを撃つにはどうすればよいですか?
- レーザーを撃った後、いつまた撃てるようになりますか?
- ラウンドを開始する時間をどうやって知りますか？
- ブラスターで誰かをタグできたかどうか、いつ知ることができますか?
- 敵チームが私を正常にタグしたときをどうやって知りますか?
これらの質問を使用して、プレイヤーが成功するために知る必要がある情報を理解すると、サンプルレーザータグエクスペリエンスのUIの必要性を 3つのカテゴリに分類できます：
- エクスペリエンスの目的に関する情報。
- ブラスターに関する情報。
- プレイヤーの状態に関する情報。
エクスペリエンスの UI の要件をカテゴリに分類することは有用です、各グループについてあなたのアートスタイルを形式化し、各カテゴリがプレイヤーに教える必要のある情報を強化できるからです。たとえば、UI がプレイヤーに自分のキャラクターの健康状況態に関する行動を伝えるようにしたい場合、色の緑と/またはプラスのアイコンを優先する UI 要素のスタイルを選択して、プレイヤーがすぐに自分の機能を認識できるようにするかもしれません。
エクスペリエンスの UI の必要性をカテゴリに分類した後、各カテゴリの要件を満たすために必要な UI 要素のリストを作成できます。デモンストレーションするには、サンプルレーザータグエクスペリエンスは、以下のUI要素のテーブルを使用して、前のリストの可能なプレイヤー質問を処理します。このチュートリアルを進めると、UI カリキュラムはこのリストに引き続き参照し、各種 UI 要素カテゴリに関連する主要なデザイン決定を強調します。
| カテゴリ | UI 要素 |
|---|---|
| エクスペリエンスの目的に関する情報 |
|
| ブラスターに関する情報 |
|
| プレイヤーの状態に関する情報 |
|
これで、エクスペリエンスの UI 要素のリストがあるので、色のテーマから始めて、UI 要素のグループ化に対するスタイリッシュと意味的な選択を開始する時が来ました。
カラーテーマを選択
A カラーテーマ またはカラーパレットは、明確なアプリケーション内で各々がメッセージを伝達する色の選択であり、例えば、明るい色を使用して何かが選択可能かどうかを示すときに使用する色の選択です。UI 要素に色テーマを適用することは重要であり、特に、あなたのエクスペリエンスのジャンル内の色規約に頼るとき、プレイヤーが最小限の努力であなたの UI を迅速に理解できるようにすることができます。
環境アートカリキュラムでは、レーザータグ環境の各半分がトップダウンビューから色分けされて、マップ上のどの領域が各チームのそれぞれのスポーンゾーンに近いかを区別します： mint はマップの左側に集まるチーム、そして carnation pink はマップの右側に集まるチームです。これらの特定の色は、 補完 であるため、お互いによく対比し、プレイヤーが建築物の方向に関係なく簡単に周囲をスキャンし、自分自身を向けることができます。
サンプルレーザータグエクスペリエンスは、3D 空間内の各プレイヤーのチームインジケーターなど、各チームに関連する情報を強調するために、同じ色のテーマを UI で使用します。この一貫性は、1プレイヤーシューターエクスペリエンスの高速ゲームプレイ中に、特にプレイヤーが環境を横断している間に迅速に情報を理解することができるように、プレイヤーが迅速に決定を下す必要があるときに助けます。
自分のエクスペリエンスの色テーマを選択するときは、フォロー中のことを考えてください：
- カラーテーマの強度は、プレイヤーが各色と機能の間で迅速なメンタルアソシエーションを行うのを助けることによります。このため、 カラーテーマを制限 して、プレイヤーがUIエレメントと関連付ける必要のあるキー情報のみを強調するようにします。
- 色盲症のあるプレイヤーが色のテーマのメッセージを理解できるようにするには、 UI 要素を区別するために色だけに頼らない こと。代わりに、色をアイコン、形状、および/またはアニメーションと組み合わせて、UIがすべてのプレイヤーと効果的にコミュニケーションするようにします。
- UIが見やすいことが重要であり、見た目の満足度よりも重要です。このため、 3D ワールドのライトとダークの要素の両方で読み込み可能な色でシンプルな UI を優先する 。
最後のポイントで指示を強調するために、サンプルレーザータグエクスペリエンスは、2D 画面をオーバーレイするほぼすべての他のUI要素の中立色を黒と白で使用します。黒と白は互いによく対比し、画面の残りの部分がカラフルな 3D 環境を表示しているため、読みやすくなっています。
簡単なアイコンの概要
アイコン は、エクスペリエンス内のアクション、操作ブジェクト、またはコンセプトを表すシンボルです。シンプルで直感的なアイコンを概要化することは重要です、なぜなら最終結果は、プレイヤーがテキストを使用せずに UI を介して簡単に自分ができることと、あなたが伝えたいことを認識できるようにすることで、画面を混乱させ、重要なコンテンツから注目を引き離すことができるからです。このプロセスは、オーディエンスがモバイルデバイスの小さな画面を使用してエクスペリエンスにアクセスする場合、さらに重要になります。
シンプルなアイコンは、理想的には 3D 要素とは異なるスタイルを持ち、体験の全体的な世界を賛美し続けます。たとえば、環境芸術カリキュラム の最終環境では、モジュラーとプロップの 3D アセットの両方が、柔らかく丸みを帯びた角を持つ正方形の形を利用した清潔でハイテクな芸術スタイルを持っています。床沿いのベベルドパネルから天井の近い円形の窓まで、何も鋭い端を含まない。
このアートスタイルを補完しながら、依然としてユニークであるために、このチュートリアルで後で学ぶすべてのUI要素には、環境内の 3D アセットの形状言語に一致しない未来的な美しさと丸い角が含まれています。これにより、2D と 3D 空間の両方で他の情報と区別された各アイコンの意味が維持されます。
このコンセプトを示すには、プレイヤーにブラスターが画面上で発射する場所を告知するクロスヘアのサンプルレーザータグエクスペリエンスの次の 2つの画像と、プレイヤーがモバイルデバイスでブラスターを発射できるようにするボタンを参照してください。両方のアイコンは、全体の世界と調和するために柔らかな角度を含んでいますが、六角形と円形の形状は、プレイヤーがエクスペリエンスで関連付けることができるアイコンから分離します。
自分の経験のための単純なアイコンをまとめるときは、フォロー中のことを考えてください：
- シンプルなアイコンは、小さくても読み取れます。このため、 モバイルデバイスの画面で認識できなくなるように、アイコンの詳細を制限する * アイコンは強力であるため、プレイヤーの言語に関わらずメッセージを伝えることができます。UI のプレイヤーの理解に影響しない限り、 不要なテキストをアイコンで置き換える ことで、ローカライゼーションの努力を向上させます。
- 同じジャンルの多くの経験は、強さを表す剣のアイコンや、魔法を表すビーカーなど、スタイリスチックに似たアイコンを使用します。 エクスペリエンスのジャンル内の象徴を採用する ことで、プレイヤーがアイコンを理解できるように、追加の指示は必要ありません。
エクスペリエンスのジャンル内で一般的なアイコンの種類を知らない場合は、ゲームUIデータベース をチェックしてください。UI デザイナー向けの無料リソースツールには、デザインプロセス中に参照できる数百の異なるジャンルのゲームのスクリーンショットが含まれています。
相互作用の順序を設定する
インタラクションオーダー は、UI と対話できるプレイヤーが持つことができるインタラクションの順序です。画面には常に複数のインタラクティブな UI 要素があるため、プレイヤーがさまざまなワークフローをナビゲートする際に意思決定を支援する直感的なインタラクション順序を確立することが重要です。
ワークフローには通常、3種類のインタラクションがあります：
- 主な相互作用 – プレイヤーが最も可能性が高い行動。
- セカンダリインタラクション – プレイヤーが主なアクションの代替として行う可能性のあるアクショ操作。
- 三級相互作用 – プレイヤーが最も可能性が低い行動。
それぞれの相互作用タイプは、プレイヤーがアクションを実行する可能性に応じて、視覚的強調のレベルが異なる必要があります。このコンセプトを示すために、ワークフローの相互作用順序の次の画像を調べて、A が主な相互作用を表し、B がセカンダリーな相互作用を表し、C がターシャリな相互作用を表します。
このワークフローで、プレイヤーが最も可能性が高い行動は、2種類のブラスターのうちのどちらかを選択することであるため、ブラスターボタンはデザインの他の相互作用可能な要素よりも大きくなります。この視覚強調レベルは、プレイヤーの注意を引き付け、全体の UI 要素の中央に目を向けさせます。プレイヤーが決定を下した後、ワークフローの次のロジックステップは、選択を確認してラウンドを開始することです。このため、SELECT ボタンは主な交流の直下にあります。
不可能ではありますが、プレイヤーはブラスターボタンの 1つを選択して、使用したいブラスターをコミュニケートできることを知らない可能性があります。この状況を助けるために、プレイヤーが選択の間でサイクルできる 2つの矢印三級ボタンがあります。これらのボタンは、プライマリとセカンダリの相互作用の要素よりも微妙で、はるかに小さいが、何らかのアクションを実行できるかどうかについてプレイヤーに向かって認識できる。
これらのプライマリ、セカンダリ、およびテーシャリインタラクションを異なるインタラクション順序に配置すると、例えば SELECT ボタンを左矢印ボタンと交換することで、プレイヤーは必要な選択シーケンスに関する明確な方向性を持たなくなります。この理由により、ボタンの順序の視覚的強調に加えて、有効なワークフローは、プレイヤーが情報をスキャンする可能性のある方向に従って、 ビジュアル階層 を通り抜けて、理想の決定順序に導きます。例えば、上から下、左から右など。
自分の経験でワークフローの相互作用順序を設定するときは、フォロー中のことを考慮してください：
- プレイヤーは、UIと対話してアクションを実行できる時を明確に理解する必要があります。このため、インタラクティブな UI 要素 (ディスプレイアウトを表示したり、ボタンのサイズ、色、またはアニメーションを変更したりするなど) に対して、少なくとも 1つの形式のビジュアルフィードバックを提供することをお勧めします For this reason, it's recommended to provide at least one form of visual feedback for interactable UI elements, such as displaying an outline or changing a button's size, color, or animation when it's in focus .
- インタラクティブ UI 要素のラベルが曖昧であるか、同じワークフローで相互に似ている場合、プレイヤーはアクションやプロセスを完了する方法を誤解する可能性があります。ネガティブなプレイヤーエクスペリエンスを避けるために、 クリアでコンシスent、お互いから区別できるラベルを作成する 。
- 対話型UI要素が大きすぎると、画面上の他の重要な情報から気をそらす可能性があります。逆に、小さすぎると、読み込みにくいか、または選択が困難になる可能性があります、特にモバイルデバイスで近距離にある場合。このため、様々な画面サイズでインタラクティブ UI 要素のサイズを レビューすることが不可欠 です。
In Studio で実装 すると、UI 要素がどのデバイスを使用しても特定のアスペクト比率を維持する方法を学び、エクスペリエンスにアクセスするプレイヤーが使用しているデバイスに関係なく、UI 要素が維持されるようになります。デザインプロセスを簡素化することに加えて、この技術は、Web コンテンツアクセシビリティガイドラインの タッチターゲットサイズとスペース およびモバイルデバイスで少なくとも 9x9 mm のインタラクティブ UI 要素のタッチゾーンを作成するための指示にも役立つことができます。
テキストシステムを決定する
A テキストシステム は、「常に大胆なヘッダー」や「健康状態の統計を参照するときに緑色のフォントを使用」など、UI のすべての単語に関するフォントとスタイルのルールのセットです。デザインプロセスの早期にテキストシステムを決定すると、UI 全体で一貫して適用できる構造を持つことができますので、プレイヤーは必要な情報を検索するときに期待できるものがわかります。
テキストシステムは、エクスペリエンスのジャンルや 3D 世界の要件に応じて変わる可能性がありますが、すべてのテキストシステムが従わなければならない最も重要なルールは、 すべての UI テキストがクリアで読みやすいことを確保する ことです。このルールをテキストシステムに関連するすべての決定の基礎として使用すると、プレイヤーがUIを読んでいるプレイヤーのアクセシビリティとユーザーエクスペリエンスを改善できます。たとえば:
- デバイスプレイヤーがあなたのエクスペリエンスにアクセスするために使用できる。
- プレイヤーがローカライズされたテキストを読むことができる言語。
- 画面上のテキストの背後にある可能な基本的な背景。
たとえば、プレイヤーがタグアウトされたときの次の画面応答デザインは、プレイヤーのデバイスによって小さいまたは大きいフォントサイズに拡大し、長い翻訳を持つ言語の両側に十分なスペースを含み、背景の色がどんな色であってもプレイヤーがテキストを読むことができるように、対比する背景を含んでいます。
自分の経験のためのテキストシステムを決定するときは、フォロー中のことを考えてください：
- 背景の雑音に溶け込むと、テキストを読むのが困難になります。UIの読みやすさを改善するために、 対比色の上にテキストを表示するか、ストロークを使用する 。
- 異なるデバイスのためにテキストをスケールしないと、テキストが多すぎるかプレイヤーの画面で小さくて判読できなくなります。テキストの不一致をキャッチするには、デザインプロセス中に複数のデバイスで デザインをテストする 。
- 単語は、他の言語にローカライズすると、オリジナルのデザインを超えて拡張できます。デザインの構成を改善するには、 テキストが画面上で占有できる最大スペースを参照してください 。
- いくつかのフォントは、あなたのエクスペリエンスの美しさに合うかもしれませんが、大量に読むのは困難かもしれません。このため、 タイトルや警告テキストなど、スタイリッシュなテキストの使用を控えめにします 。
UI のアートスタイルの計画があると、次のチュートリアルのセクションに移動して、さまざまなプレイヤーワークフローで各要素のレイアウトをワイヤーフレームする方法を学ぶことができます。