レイアウトのワイヤーフレーミングは、エラー、不機嫌、悪機能のあるユーザーインターフェースを通じて、ユーザーがコミュニケートしたい情報の構造とフローを設計するプロセスです。このチュートリアルのクリティカルステップでは、UI 要素の配置、痛点の発見、およびプレイヤーのエク
ユーザーインターフェイスのカリキュームの一部として、サンプルレーザータグエクスペリエンス .rbxl ファイルを参照して、画面上の UI 要素を構造する方法を示しています。このセクションのユーザーインターフェイスのカリキュームでは、次のコンセプトについて説明しています：
- あなたのエクスペリエンスで成功するためにプレイヤーに直感的にリードするビジュアルな階層を計画するためのビジュアルな階層を計画するためのビジュアルな階層を計画しています。
- 基本形状のブロックを使用して、Roblox のコア UI とタッチコントロールとの UI エレメントの構成を確認します。
- プレイヤーが目標に到達するために必要なアクションを実装するユーザーフローを開発しています。
このセクションでは、あなたのアートスタイルとワイヤーフレームに準拠した Studio の UI を構築および構成する方法を学びます。
ビジュアル ヒエラルーイを計画する
ビジュアル ヒエラー は、UI 要素の優先度で表示されるビジュアルオーガナイズ構造です。プレイヤーが目標を達成するために設定されるビジュアル ヒエラー を計画することは、あなたのエクスペリエンスのビジュアル ヒエラー のビジョンを設定することで重要です。これは、目標が瞬時に変更されるため、最速のゲームプレイ体験の
効果的なビジュアル ヒエラルキー は、プレイヤーがゲームプレイ要件に応じて画面上の自然な場所でビューを完了するために必要な情報と機能を提供します。たとえば、サンプルレーザータグエクスペリエンスのビジュアル ヒエラルキーは、プレイヤーがマップをナビゲートし、敵チームのプレイヤーにタグを付けるための UI 要素の 3 つ
- エクスペリエンスの目的に関する情報。
- ブラスターに関する情報。
- プレイヤーの状態に関する情報。
これらのカテゴリのそれぞれが画面の最終デザインハイライトにある場所は、その優先度を示しています：
- 最初のカテゴリは、 トップ の近くにあり、ゲームの勝利方法に最も重要な UI 要素を含むため、最初のカテゴリです。
- 第2カテゴリは、画面のスクリーンスペースのほとんどを占有します、 中央 の近くの画面スペース、因みにそれはプレイヤーの注意を 3D 空間のアクションに引き付けるためのフォーカスポイントとして機能し、ゲームをプレイするのに最も重要な意義があります。
- サードカテゴリは、 サイド の近くにあります、因みにプレイヤーは注目をゲームプレイからその他の情報に移動できます。
一部のエクスペリエンスのジャンルでは、プレイヤーがそのワークフロー中に重要な情報の 1 つのカテゴリのみを表示する必要があります。ただし、ファーストパーソンシューターエクスペリエンスの場合、プレイヤーは同じカテゴリの情報を 1 つずつ表示する必要があり
自分のエクスペリエンス内のワークフローに対するビジュアルライフィーを計画するときは、フォロー中のことを考慮してください：
- 画面の異なるカテゴリにまたがって、UI 要素をグループ化すると、プレイヤーは必要なものを見つける場所を知らなくなります。ユーザーを助けるために、 同じカテゴリのグループ化された UI 要素 。
- 一度に画面に複数のカテゴリがある場合、プレイヤーは気にする必要がある情報を知らない可能性があります。クラスターを避けるために、 UI エレメントコンテキストをクラスターで表示する 。
- 同様に、カテゴリごとに UI 要素が多すぎると、プレイヤーがアクションまたはプロセスを理解する方法を理解することができます。このため、 アートスタイルを使用して、理想的なインタラクションオーダーのビジュアル強調を提供します 。
サンプルレーザータグエクスペリエンスのビジュアル階層の完全なレビューについては、次の表に参照してください：
| カテゴリ | UIエレメント | ビジュアル ヒエラルキー |
|---|---|---|
| エクスペリエンスの目的に関する情報 |
|
|
| ブラスターに関する情報 |
|
|
| プレイヤーの状態に関する情報 |
|
|
For more information on priority UI elements on the screen, see UI & UX Design .
UI エレメントにブロック
視覚的な階層を意識して、基本形状を使用して個々の UI 要素をブロックして、Roblox のコア UI を複数のデバイスでレビューして、あなたのカスタム UI レイアウトと Roblox のコア UI の間のコンポーネントの採用を見ることができます。このプロセスでは、モバイル、タブレット、ラッ
始める前に、Roblox のコア UI を考慮して、カスタム UI 要素のスクリーンスペースがどれくらいあるかを把握する必要があります。たとえば、デフォルトでは、Roblox は次の UI 要素をすべてのエクスペリエンスで表示します：
- エクスペリエンス内のプレイヤーリスト。
- キャラクターのヘルスバー。
- キャラクターのバックパック。
- チャットウィンドウ。
- 捕獲ボタン。
- キャラクターエモートのポップアップメニュー。
あなたのエクスペリエンスのゲームプレイ要件に対応しないこれらの要素の 1 つを無効にすることで、画面スペースを保存し、カスタム UI のためにブラスタータグのサンプルエクスペリエンスを使用できます。たとえば、サンプルレーザータグ
Roblox（ロブロックス）blox のコア UI に加えて、Roblox（ロブロックス）blox のデフォルトのタッチコントロールに必要な画操作スペースを考慮する必要があります。たとえば、モバイルデバイスを使用してエクスペリエンスにアクセスすると、画面の左下隅にバーチャル サム スティックが表示され、ジャンプ ボタンが
Roblox のコア UI 要素を含むエレメントを含めることで、ゲームプレイの必要性とタッチコントロールの可能性の両方を考慮することで、ゲームプレイの UI 要素をカスタム UI 要素でブロックできます。これは、デバイス間で UI のバージョンを維持する必要がないことを意味します。これは、エクスペリエンス
このメソッドを示すには、サンプルレーザータグのエクスペリエンスブロックをカスタム UI エレメントの 2つの画像を見てください。両方の画像には以下が含まれています：
- デザインを簡単に変更できるため、カスタム UI を表示する基本的な形状。
- 色の濃度をグレースケールで設定して、色の背景環境の混乱なく情報に従うことができます
- チャットウィンドウの開きと、アクティブなプレイヤーのリストとチャットウィンドウを見て、画面にどれくらいのスペースを占有しているかを確認します。
- PC デバイスで必要ない場合でも、モバイルコントロールのスペース。
この方法でレイアウトを設計し、多くの UI 要素が同時に画面に表示されることを考慮しているとき、プレイヤーのデバイスとワークフローに基づいて、すべての可能なレイアウトに未来のプルーフを提供します。
レイアウトの UI 要素にブロックを追加するときは、フォロー中のことを考慮してください：
- あなたの UI でブロックする場所と方法は、レイアウトの構成に影響を与える可能性があります。 バランスとシンメトリーを目指す 、Roblox のコア UI 要素とサイドにあるカスタム UI 要素の量とサイズに加えて。
- 一部のモバイルおよびタブレットデバイスの底端から離れた UI にインタラクトするのは、コンフォートがないか、または不可能です。 サムスンギターの休憩ポジションの近くにインタラクト を拡張するために、サイドにあるエリアに配置する交互要素を置きます。
- プレイヤーがあなたの環境をナビゲートすると、3D 空間はあなたのオンスクリーン UI から気を散らす可能性があります。 あなたのオンスクリーン UI 要素をクリアで読み取り続けるためにバックグラウンドのさまざまな可能性に対してレイアウトをテストしてください。 For more information on what to consider as you design and block in your UI elements for multiple devices, see ポジションとサイズ - クロスプラットフォームの要素 .
ユーザーフローを開発
ユーザーフローは、プレイヤーがエクスペリエンスでタスクを完了するために選択する武器、アイテムを購入するか、キャラクターを回復するなど、プレイヤーが完了するために使用できるパスのコレクションです。ユーザーフローは通常、プレイヤーがタスクを開始する場所から始まり、最終的なアクシ
次のフローチャートは、サンプルレーザータグエクスペリエンスを入力してプレイするユーザーのフローを表示します。プレイヤーがエクスペリエンスを開始すると、ロビー
プレイヤーがエクスペリエンスで何をすることができるかのユーザーフローを開発することは、すべてのプレイヤーがあなたのエクスペリエンスで何をするかを評価することができ、そしてどこでタスクを完了するかを予測することができます。たとえば、サンプルレーザータグエクスペリエンスの追加のユーザーフローを開発する場合
- 終了コンディションが満たされる前にラウンドを終了しますか?
- チームに参加しながらゲームを終了しますか？
- ラウンドの最中に電話がかかってきた？
- 15 秒以下の間、ラウンドへの接続を失う？
すべての可能なアクションをビジュアル化すると、プレイヤーがタスクを完了する間に発生するスクリプトや、プレイヤーに対してレイアウトの UI 要素が悪影響を与える可能性のあるシナリオをより良く把握できます。その結果、Studio でデザインを実装する前に、プレイヤーがエクスペリエンスに時間を過ごすことが
ユーザーフローを開発するときは、フォロー中のことを考慮してください：
- プレイヤーがエクスペリエンスで何をするべきか、およびそれらが何をするかは、完全に異なる可能性があります。最善の方法は、 複数の種類のプレイヤーでレイアウトをテストする ことです。それにより、目標を達成するためのパスを理解することができます。
- フローチャートは、 ディアグラム内の複数のシナリオを一度に捕獲しようとすると、 読み取りにくくなり、効果がありません。To focus your attention on each task, ディアグラムを 1つの主要タスクに制限します。
- プレイヤーがタッチコン操作ロール、ゲームパッド、またはコンピューターマウスを使用しているかどうかにより、インタラクションパターンは変わります。複数のデバイスでデザインしている場合は、 それぞれのデバイスのユニークなユーザーフローを開発する ため、痛みのポイントを識別し、ワークフローを簡素化できます。
ワイヤーフレームのデザインを完了したら、Studio に移動して UI を生成します。