アートスタイルを選択

アートスタイルを選択する は、UI 要素の美的方向を計画するプロセスです。アートスタイルは、ビジュアルグラウンドルールを提供し、UI がプレイヤーに情報を提供することを確認するためにビジュアルグラウンドルールを提供します。

ユーザーインターフェイスのカリキュームの一部として、サンプルレーザータグエクスペリエンス.rbxl ファイルを参照して、このユーザーインターフェイスのカリキュームのセクションでは、ユーザーインターフェイスの要素をデザインするためのジェネレーションガイドラインを含む、エクスペリエンスのジャンルに対応する UI 要

• あなたのエクスペリエンス中にプレイヤーに伝えたいことに従って、必要な UI 要素を識別します。
• 観客が容易に理解できるジャンル固有の色のルールを強化する色のテーマを選択します。
• サイズが変更可能な画面のサインボルを簡単に読み取るためのアウトライン。
• 異なるプレイヤーのワークフローの可能性に一致するボタンのオーダーを設定する。
• ターゲットデバイスのレギビリティを確保するテキストシステムを決定する。

このセクションを完了すると、エクスペリエンス内の UI を介してプレイヤーに伝達したい情報の構造とフローをデザインする方法を学びます。

UI 要素を識別する

UI のアートスタイルを選択する最初のステップは、オーディオ、ビデオ、テキストなど、オーディオエレメントが必要なさまざまな種類の情報を伝達するために必要な UI エレメントを識別することです。この作業を開始することは、デザインプロセスの開始に重要な栄養であり、UI エ

ゲームプレイ要件に必要な UI 要素については、多くの異なる方法で脳をストームすることができますが、プレイヤーがあなたのエクスペリエンスに参加するときに何を知っておく必要があるかをすぐに想像することをお勧めします。たとえば、プレイヤーがサンプルレーザータグエクスペリエンスを開くと、彼らは次の質問を自分にするか

• エクスペリエンスの目的は何ですか？
• 誰がチームにいるかをどう知りますか？
• チームのポイントをどう追跡しますか？
• ブラスターを選択するには？
• レーザーが発射される場所を知るには、どうすればよいですか？
• モバイルデバイスにいる場合、ブラスターを撃つにはどうすればよいですか？
• レーザーを撃った後、何時間で撃てるか？
• ラウンドを開始するときには、どうやって知りますか？
• ブラスターで誰かをタグしたときに確認する方法は？
• 敵チームが私をタグしたときに、どう知りますか？

これらの質問を使用して、プレイヤーが成功するために知っておく必要がある情報の 3つのカテゴリにサンプルレーザータグエクスペリエンスを整理できます:

1. エクスペリエンスの目的に関する情報。
2. ブラスターに関する情報。
3. プレイヤーの状態に関する情報。

エクスペリエンスの UI のカテゴリに分類することは、あなたのアートスタイルをグループ化して、各グループによってどの情報を教える必要があるかを強調するのに役立ちます。たとえば、プレイヤーがキャラクターの健状況ステータスに関するアクションを取ることができるようにするために、UI 要素をグル

エクスペリエンスの UI の要件にカテゴリに整理した後、要件に対応するために必要な UI 要素のリストを作成できます。このチュートリアルでは、サンプルレーザータグエクスペリエンスは、各カテゴリの要件に対応するために必要な UI 要素の次の表を使用しています。このチュートリアルを通じて、UI 教育は、各

エクスペリエンスの UI 要素のリストがあるため、各グループの UI 要素のスタイリッシュでセマンティックな選択を開始し、色のテーマを開始します。

色のテーマを選択

色テーマ 、またはカラーパレット 、は、エクスペリエンス内の一貫したアプリケーションでメッセージを伝達するための色の選択です。たとえば、明るい色を使用して何が選択可能かを示すためにメッセージを伝達することです。色テーマを UI エレメントに適用することは、特にエクスペリエンスのジャ

In the 環境アート教育 では、レーザータグ環境の各半分が、マップのどの領域にあるかを左側から右側へのトップダウンビューから色

サンプルレーザータグエクスペリエンスは、UI で同じ色のテーマを使用して、各チームに関連する情報を強調します。たとえば、3D スペース内の各プレイヤーのチームインジケーターや、チームポイントトラッカーは、スクリーンをオーバーライドします。この一貫性は、プレイヤ

自分のエクスペリエンス用の色のテーマを選択するときは、フォロー中のことを考慮してください：

• 色のテーマの強度は、プレイヤーが各色とその機能の間でクイックなメンタルアソシエーションを作成するために助けることによります。このため、 色のテーマを制限 を押さえて、プレイヤーが UI 要素に関連付けるキー情報のみを強調します。
• 色の課題を持つプレイヤーがあなたの色のテーマのメッセージを理解できるようにするには、 色のみを信頼してはならない をUI要素間で区別するために、色とイコンと形状と/またはアニメーションを組み合わせて、UI のコミュニケーションを効果的に行うために色とイコン、形状、および/またはアニメーションを組み合わせて、色のテー
• ユーザーインターフェイスの可読性が最も重要です。このため、色が 3D 世界の両方の色と明るさの両方で読み取り可能であることを確認してください。たとえ、暗い要素とライトの要素の両方で読み取り可能であることでも、ユーザーインターフェイスの可読性を最優先にしてください。

最後のポイントにあるガイドラインを強調するために、サンプルレーザータグエクスペリエンスは、2D 画面をオーバーレイするほとんどの他の UI エレメントのために、黒と白の中立色を使用します。黒と白のコントラストは互いにうまくいき、読みやすくなります。

シンプルなアイコンのアウトライン

アイコンは、エクスペリエンスで操作クション、オブジェクト、またはコンセプトを表すシンボルです。シンプルで直感的なアイコンをアウトラインすることは重要です。テキストを使用せずに、ユーザーが何ができるかを簡単に認識できるように、モバイルデバイスの

シンプルなアイコンは、エクスペリエンスの全体的な世界を補完するために、3D 要素とスタイルが異なる必要があります。たとえば、環境アートカリキュラムの最終環境では、モジュールアセットとプロップアセットの両方が長方形の形状を持つク

このアートスタイルをサポートしながら、まだユニークであるために、このチュートリアルで後で学び始めるすべての UI 要素には、形状言語を 3D アセットの環境と一致させない、未来的な美しさと丸い角度が含まれています。これにより、各アイコンの意味が 2D および 3D スペースの他の情報と区別されます。

このコンセプトを示すには、サンプルレーザータグエクスペリエンスのクロスハーのサイドにある 2つの画像を参照してください。これは、プレイヤーがブラスターを画面にどこに発射するかを表示するサンプルレーザータグエクスペリエンスのサンプルレーザータグエクスペリエンスのサンプルレーザータグ

自分のエクスペリエンス用のシンプルなアイコンを構想するときは、フォロー中のことを考慮してください：

• シンプルなアイコンは、小さいときでも読み取りやすいです。このため、モバイルデバイスの画面で読み取り不可能になる可能性のある アイコンの詳細を制限する こと。
• アイコンは強力です、プレイヤーの言語にかかわらずメッセージを伝達できます。プレイヤーの理解を影響しない限り、 不要なテキストをアイコンに置き換える て、ローカライズのコーヒーを改善します。
• 同じジャンルの多くのエクスペリエンスでは、スタイリッシュに似ているアイコンを使用しています。たとえば、強さを表す剣のアイコンや魔法を表すカップなどです。 エクスペリエンスのジャンル内のシンボルを抱く これは、プレイヤーがアイコンを理解するために追加のガイドがなくても、より多くのアイコンを理解できます。

エクスペリエンスのジャンル内で一般的なアイコンの種類を知らない場合は、ゲーム UI データベースをチェックしてください。これは、UI デザイナーがデザインプロセス中に参照できるようにする無料の資源ツールで、スクリーンショットは、数百のゲームの異なるジャンルからあなたが参照できます。

インタラクションオーダーを設定

インタラクションオーダー は、プレイヤーが画面で持つことのできるインタラクションのシーケンスです。画面に複数のインタラクティブな UI 要素があるため、インテリア的なインタラクションオーダーを確立することは、プレイヤーがさまざまなワークフローをナビゲートする際に助け助けることが重要です。

ワークフローには通常 3種類のインタラクションがあります：

• プライマリインタラクション – プレイヤーが最もおそれになるアクション。
• セカンダリインタラクション – プレイヤーが主要なアクションの代替として実行する可能性のあるアクショ操作。
• 第三者の交流 – プレイヤーが最も少なく実行する可能性のあるアクション。

各種インタラクションタイプには、プレイヤーがアクショ操作を実行する可能性に応じて、視覚的な強調レベルが異なります。このコンセプトを示すために、ワークフローでブラスターを選択するためにインタラクションオーダーのレイアウトを調べてください。次の画像は、プライマリインタラクション、セカンダリインタラクション

このワークフローで、プレイヤーが最もよく実行するアクションは、2種類のブラスターの間を選択することです。つまり、ブラスターボタンは、デザインの他のインタラクティブ要素よりもはるかに大きな存在です。このレベルのビジュアル重要度は、プレイヤーの

不可能である可能性がありますが、プレイヤーは、それらのブラスターボタンの 1 つを選択できるということを知らない可能性があります。この状況を助けるために、プレイヤーは選択できるブラスターの 1 つを使用できます。これらのボタンは、エレメントの主要およびサブなインタラク

これらのメイン、セカンダリ、およびテーティアリンタラクションを別の交流順序に配置する場合、例えば左向き矢印ボタンと SELECT ボタンを交換するなど、プレイヤーは、選択した順序に沿って必要な選択を行う必要があります。このため、ボ

自分のエクスペリエンス内のワークフローに対するインタラクションオーダーを設定するときは、フォロー中のことを考慮してください：

• プレイヤーは、エクスペリエンスであるUI を実行するために、UI のエクスペリエンスを明確に理解する必要があります。このため、UI のエクスペリエンスを実行するために、ディスプレイ、オーバーライド、ボタンのサイズ、色、またはアニメーションを変更するなど、最小限のビジュアルフィードバックを提供
• インタラクティブな UI 要素のラベルが、同じワークフロー内のラベルと明確であるか、類似している場合、プレイヤーはアクションまたはプロセスを完了する方法を間違える可能性があります。 ラベルをクリア、明消す、違いのあるラベルを作成します 。
• インタラクティブなユーザーインターフェイス要素が大きすぎると、画面の他の重要な情報に気を取られます。反対に、要素が小さすぎると、読み取りにくかったり、選択に困難したりする可能性があります。このため、 スクリーンサイズの適切なレビュー は重要です。

In Studio で実装する では、UIAspectRatioConstraint オブジェクトを使用して、モバイルデバイスがあなたのエクスペリエンスにアクセスするための特定のアスペクト比率を維持する方法を学びます。デザインプロセスを

テキストシステムを決める

テキストシステム は、UI のすべての言葉に関するフォントとスタイルのセットのルールです。たとえ「常に強調してヘッダーを使用する」などという言葉を参照するときも、テキストシステムを早期に設計することで、一貫して適用できる構造を作成できます。これにより、プレイヤーが

テキストシステムはエクスペリエンスのジャンルや 3D 世界の要件によって異なる場合がありますが、すべてのテキストシステムが遵守する必要がある最も重要なルールは、「 すべてのユーザーインターフェイスのテキストが明確で簡単に読み取りやすくすること

• デバイスプレイヤーは、あなたのエクスペリエンスにアクセスするために使用できます。
• プレイヤーがローカライズされたテキストを読む言語。
• 画面内のテキストの背後にある可能性のある背景。

たとえば、プレイヤーがタグアウトされたときの画面の応答デザインは、プレイヤーのデバイスによって、英語のテキストのサイズが小さくなるか、大きくなることにより、より小さなフォントサイズにスケールします。長いテキストの場合、英語のテキストの両方のサイドに十分なスペースを含み、コントラストの背景を含めて、プレイヤーがテキ

自分のエクスペリエンス用のテキストシステムを決定するときは、フォロー中のことを考慮してください：

• テキストは、背景の邪音と混在すると読みにくくなります。UIの可読性を向上させるには、 コントラストの色の上にテキストを表示するか、ストロークを使用して 。
• テキストを異なるデバイスに拡大/縮小しないでください、テキストは次の 2つの場合になります： （1） デバイスのスクリーンに表示されると、テキストが長すぎて読み取り不能になります。 （2） デザインプロセス中に複数のデバイスでテストする 。
• 言語を変更すると、オリジナルのデザインを超えてワードを拡張できます。 スクリーン上で取得できるテキストの最大サイズを参照してください。 * 一部のフォントはエクスペリエンスの美学に合うかもしれませんが、大量の読み取りには難しいかもしれません。このため、タイトルやアラートテキストなど、 スタイリッシュなテキストを使用する 、例えば。

UI のアートスタイルのプランがあると、チュートリアルの次のセクションに進んで、各プレイヤーワークフローのレイアウトをワイヤーフレームする方法を学びましょう。