レイアウトをワイヤーフレームにする

レイアウトのワイヤーフレーミング は、複数のワークフローでUIを介して伝達したい情報の構造とフローを設計するプロセスです。チュートリアルのこの重要なステップでは、UI 要素の配置を反復し、痛み点を発見し、プレイヤーのエクスペリエンスを向上させる前に、問題のあるデザインに時間とリソースを投資する前に、体験に影響を与えることができます。

サンプルレーザータグエクスペリエンス ファイルを参考として、このユーザーインターフェイスのカリキュラムのセクションでは、UI要素を画面上に構造化する方法、指示について:

• インテリジェントにプレイヤーをエクスペリエンスで成功するために必要な機能と情報に導くUIの視覚階層を計画する
• Roblox のコア UI とタッチコントロールとともに UI 要素の構成を確認するため、基本形状で UI 要素をブロックする
• 目標を達成するためにプレイヤーが行う必要のあるアクションをカバーするユーザーフローを開発する。

このセクションを完了すると、アートスタイルとワイヤーフレームを尊重する Studio の UI を構築および構成する方法を学びます。

視覚的な階層を計画する

視覚的な階層は、UI 要素の重要度順に強調する組織構造です。エクスペリエンス内の異なるワークフローの視覚的な階層を計画することは重要であり、プレイヤーが目標を達成するために成功するように設定することが特に必要であり、目標が時間ごとに変化する最初人称シューターのゲームプレイでは特にそうです。

効果的なビジュアル階層は、プレイヤーが自然に画面上を見て完了するワークフローに従って、ゲームプレイ要件に対応する機能と情報を通してプレイヤーを導きます。たとえば、サンプルレーザータグエクスペリエンスの視覚階層は、マップをナビゲートし、敵のチームでプレイヤーをタグする際に、次のUI要素カテゴリを通じてプレイヤーを導かなければなりません：

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

これらのカテゴリのそれぞれの場所は、最終デザインで画面に表示されることで、その重要度を強調します：

• 最初のカテゴリは、 トップ の近くにある、ゲームを勝つ方法に最も重要な UI 要素を含んでいるからです。
• 2番目のカテゴリは、 中央 の画面スペースの大部分を占有し、プレイヤーの注意を3D空間のアクションに引き付ける焦点として機能し、ゲームをプレイするのに最も重要なものです。
• 3番目のカテゴリは、 サイド の近くにあります。プレイヤーは注意をゲームプレイからそらさずに、この周辺情報を読むことができます。

いくつかの経験ジャンルでは、ワークフロー中にプレイヤーに重要な情報の 1つのカテゴリのみを表示する必要があります、それはそのワークフロー中にプレイヤーにとって重要な情報の唯一の種類です。しかし、1プレイヤーシューターの経験の場合、プレイヤーはすべてのカテゴリから同時に UI 要素を見る必要があります。それらはすべて、プレイヤーが成功するために必要な情報を提供し、チームのスコア、ブラスターのクールダウン期間、そしてラウンドからタグアウトされるかどうかなどです。

自分の経験でワークフローの視覚階層を計画するときは、フォロー中のことを考慮してください：

• 異なるカテゴリの UI 要素を画面全体にグループ化すると、プレイヤーは自分が必要とするものを探す場所がわからなくなります。プレイヤーがエクスペリエンスをナビゲートするのを助けるため、 同じカテゴリからグループ UI 要素をまとめて 。
• 一度に画面にカテゴリが多すぎると、プレイヤーは注目すべき情報を知らない可能性があります。プレイヤーを混乱させないために、 異なるワークフローのためにUI要素をコンテキストで表示する 。
• 同様に、カテゴリごとに UI 要素が多すぎると、プレイヤーがアクションやプロセスを完了する方法を理解するのを妨げる可能性があります。このため、 アートスタイルを使用して、理想の相互作用注文に視覚的な強調を提供する ことが重要です。

サンプルレーザータグエクスペリエンスの視覚階層の全体レビューについては、次の表を参照してください：

UI 要素でブロックする

視覚的な階層を頭に入れたので、基本形状を使用して個々のUI要素をブロックして、複数のデバイスで RoblRoblox（ロブロックス） のコア UI とともにカスタム UI レイアウトの構成をレビューできます。このプロセスでは、モバイル、タブレット、ラップトップ、テレビなど、プレイヤーがエクスペリエンスにアクセスするのに使用できるすべての画面サイズで効果的になるように、デザインを変更する必要がある場所を見ることができます。

始める前に、Roblox のコア UI を考慮しつつ、カスタム UI 要素のスクリーンスペースがどれほど利用可能かを計算する必要があります。例えば、デフォルトで Roblox は、すべてのエクスペリエンスで次の UI 要素を表示します：

• エクスペリエンス内のプレイヤーのリスト。
• キャラクターのヘルスバー。
• キャラクターのバックパック。
• チャットウィンドウ。
• キャプチャボタン。
• キャラクターのエモートのポップアップメニュー。

スクリーンスペースをカスタム UI に保存するために、自分のエクスペリエンスのゲームプレイ要件に合わないどれかの要素を無効にすることができます。たとえば、サンプルレーザータグエクスペリエンスには、プレイヤーが単一のブラスターのみを選択できる能力しかないため、バックパックは必要ありません。ただし、プレイヤーが一度に複数のブラスターを選択できる場合、エクスペリエンスはこのコアUIを無効にして、プレイヤーがリスポーンするとブラスターセレクターが常に使用できるようにするため、インベントリから選択できる別の持ち物リスト所を提供することができます。

Roblox のコア UI に加えて、Roblox のデフォルトのタッチ操作用の必要な画面スペースも考慮する必要があります。たとえば、プレイヤーがモバイルデバイスを使用してエクスペリエンスにアクセスすると、画面の左下にバーチャルのサムスティックが表示され、画面の右下にジャンプボタンが表示されます。これにより、プレイヤーは常にキーボードやコントローラーにアクセスできない状態でも、あなたのエクスペリエンスをナビゲートできるようになります。

Roblox（ロブロックス）blox のコア UI 要素、およびエクスペリエンスのゲームプレイに必要なもの、およびタッチ操作の可能性を考慮に入れて、 1つのデザイン でカスタム UI 要素をブロックできます。デバイス間で適応する。これは重要で、エクスペリエンスを更新するときに UI の別バージョンを維持する必要がないことを意味します。

この方法を示すには、モバイルデバイスと PC デバイスの両方のカスタム UI 要素でサンプルレーザータグエクスペリエンスブロックの次の 2 つの画像をレビューしてください。両方の画像には含まれます：

• 最終的なデザインに到達する前に、設計を簡単に複数の反復を通過できるため、カスタム UI を表現する基本形状。
• カラフルな背景環境の干渉なしで、目が情報に従うことを可能にするグレースケールの色付け
• チャットウィンドウとアクティブなプレイヤーリスト、チャットウィンドウの開いた状態で、画面にどれほどのスペースを占めるかを見る
• PC デバイスに必要ないモバイルコントロールのスペース。

レイアウトをデザインするとき、同時に画面上にどれくらいの UI 要素が存在できるかを考えながら、プレイヤーのデバイスとワークフローによるすべての可能なレイアウトを将来に備えています。

レイアウトのための UI 要素をブロックするときは、フォロー中のことを考えてください：

• UI でブロックする場所と方法は、レイアウトの構成に影響を与える可能性があります。 Roblox のコア UI とともにカスタム UI 要素の量とサイズにバランスとシンメトリーを目指す * いくつかのモバイルデバイスとタブレットデバイスの底隅から遠い UI と対話することは、不快であるか不可能です。 インタラクティブな要素を、親指の自然な休憩位置の近くの簡単にアクセスできるゾーンに配置 する。
• プレイヤーが環境をナビゲートすると、3D 空間が画面上の UI から気を散らす可能性があります。 レイアウトをさまざまな可能な背景に対してテストして、画面上のUI要素がはっきりと読み取れるようにします して、画面上のUI要素がはっきりと読み取れるようにします

複数のデバイスで UI 要素を設計してブロックするときに考慮すべきことについて詳しくは、位置づけとサイズ調整 - クロスプラットフォーム要因 を参照してください。

ユーザーフローを開発する

ユーザーフローは、プレイヤーがエクスペリエンスで実行できるタスクを完了するための道の集合で、武器を選択したり、アイテムを購入したり、キャラクターを回復したりするなどです。ユーザーフローは通常、プレイヤーがタスクを開始すると予想される場所から始まり、タスクの終わりにプレイヤーが到達する最後のアクションまたは業績で終了します。さらに、効果的なユーザーフローは、同じ目標に到達するために、プレイヤーが自分で取りたいと思う珍しいパスもカバーします。

次のフローチャートでは、サンプルレーザータグエクスペリエンスに入ってプレイするプレイヤーのユーザーフローを表示します。プレイヤーがエクスペリエンスを開くと、ロビーに参加します。ラウンドがまだ進行中でない場合、ラウンドループが開始するまで待ちます。そうでない場合は、現在ゲームをプレイしているチームに参加します。終了条件が満たされていない場合、例えば制限時間を達成したり、チームごとに 10 人のプレイヤーをタグしたり、敵チームにタグされたりタグされたりする主なゲームプレイを体験したり、アリーナ内で新しいブラスターを装備したり、タグアウトされた後にリスポーンしたりするなど、プレイヤーは自分のブラスターを選択し、敵チームにタグされたりタグされたりする主なゲームプレイを体験します。プレイヤーが最後の条件を満たしたら、ラウンドを終了してロビーに再び参加します。

プレイヤーがエクスペリエンスで行うことができるすべてのものに対してユーザーフローを開発することは重要です、それはあなたがタスクを完了する場所と方法を評価し、誰かが自分の道を歩む人の痛みポイントを軽減できる場所を予測できるからです。たとえば、サンプルレーザータグエクスペリエンスの追加ユーザーフローを開発した場合、プレイヤーが:

• 終了条件が満たされる前にラウンドを終了しますか?
• チームに参加しながらゲームを終了しますか?
• ラウンドの中で電話を受けますか?
• 15秒未満でラウンドとの接続を失う？

すべての可能なアクションやシナリオをビジュアル化することで、タスクを完了する際にプレイヤーに起こり得る問題や、UI 要素のレイアウトがプレイヤーのエクスペリエンスにどのように悪影響を及ぼすかをより正確に判断し、Studio でデザインを実装する前に調整できます。タスクが直感的で、不適切で、便利であると感じる場合、プレイヤーはあなたのエクスペリエンスで時間を過ごし、後日戻ってくる可能性が高いです。

自分の経験のためのユーザーフローを開発するときは、フォロー中のことを考慮してください：

• プレイヤーがあなたのエクスペリエンスで行うことと、行いたいことは完全に異なる可能性があります。レイアウトを 複数のプレイヤータイプでテストすると、目標を達成するために進む道を理解できます 。
• フローチャートは、ダイアグラム内で一度に複数のシナリオを捕捉しようとした場合、読み込みにくくなって無効になる可能性があります。各タスクに注意を向けるために、 フローチャートを一度に 1つのメインタスクに制限する 。
• プレイヤーがタッチコン操作ロール、ゲームパッド、またはコンピューターマウスを使用してエクスペリエンスと対話しているかどうかによって、相互作用パターンは異なります。複数のデバイス向けに設計している場合は、 それぞれのデバイス向けにユニークなユーザーフローを開発して 、痛み点を特定してワークフローを簡素化できます。

ワイヤーフレームの設計を完了した後、Studio に移動して UI を生き生きとさせる時が来ました。