優れたインターフェイス設計の 4 つの例

ウェルカムクラス。席に着き、メモ用紙を取り出します。

私たちは皆、どのアイコンも表示されず、画面が乱雑で、要素が反応しないなど、悪いインターフェイスのゲームに苦労したことがあります。こういった問題は今でもあらゆるジャンルで頭を悩ませていますが、インターフェースをうまく実現する方法の例はこれまでよりもたくさんあると思います。そのうちのいくつかを見てみましょう。

何か言いたいことがあれば、授業の終わりにディスカッションをします。

今では、私たちはそれらを毎日当たり前のこととして受け入れています。そのため、インターフェイスを作成するのがいかに難しいかを強調する価値があります。

たとえば、インターフェイス通貨の最小単位であるボタンは簡単に作れると皆さんは思っていると思います。クリックするだけで何かが起こります。ちょっとアニメーションさせたいと思うかもしれませんが、クリックすると旅行気分が味わえますよね。そして、ボタンがすでに押されているかどうかをどうやって判断するのでしょうか?最近押されたかどうかがわかるように、視覚的な状態を変更する必要があります。カチカチ音を立てるとうるさすぎませんか?そして、それらをクリックして気が変わり、カーソルを画面上のボタンから外したときにのみマウスの左ボタンを放した場合はどうなるでしょうか?それをカウントすべきではないと考える人に挙手をしてもらえますか?

ゲームのスタイルに応じてボタンのテーマを設定する必要がありますか?ここで誰がダイジェティックまたはスキューモーフィズムを綴ることができるでしょうか?

ユーザーに必要なすべての情報を直感的な方法で提供し、楽しく使用できるゲームは賞賛されるべきですが、私たちは「正常に動作する」と期待されているゲームの部分を称賛するために時間を割くことはほとんどなく、そのため話題だけを取り上げます。そうしないとき。さて、教科書に戻って、いくつかの事例を見てみましょう。

書類をください

プレイヤーに情報を伝えるためのマスタークラス、書類をください画面をセクションに分割します。上部にはブースの前の列と後ろの警察署が表示されます。左下はブース自体の内部を示しており、窓際にいる人の顔も含まれています。右下には、チェックしているドキュメントの拡大表示が表示されます。

これは 1 つの画面内にゲーム全体があり、プレイするために必要なものがすべて含まれています。ただし、逆に言えば、それがどのように機能するかについてはほとんど情報が得られません。代わりに、ゲームでは毎日ブースが開くまでに無限の時間が与えられ、実験が可能になります。同じ状況について複数のビューを表示することで、インターフェイスを直接的かつ直感的にすることができます。たとえば、列に並んでいる次の人に電話するために、ブースの屋根にあるメガホンをクリックすることは完全に理にかなっています。

また、ゲームのテーマを伝え、プレイヤーに求められる考え方を理解させるのにも優れています。ブースは左下に詰め込まれているため閉所恐怖症のように感じられますが、ズームインされたビューは細部への注意を促します。上部のスクリーンは、作業中のコンテキストを常に思い出させてくれます。顔のない小さなピクセルアートの人々が足を引きずりながら動く様子は、この設定に最適です。

クラスへの質問:書類の数が増えると、作業するのに十分なスペースがないと感じやすくなります。これはゲームの中心的な課題の正当な拡張でしょうか、それともインターフェイスによって人為的に強制されているように感じられますか?あなたが扱うドキュメントには、動かすと少し揺れたり回転したりする物理的な要素が含まれているべきでしょうか、それとも、ウィンドウのポップアップが単に課題をさらに隠しているように感じさせるべきでしょうか?

民主主義 3

これほどアイコンがごちゃ混ぜになったインターフェイスを称賛するのは珍しいように思えるかもしれませんが、民主主義 3ゲームです完全に約そのインターフェース。 Call of Duty が男性をクリックするのと同じように、どのようなストーリー展開やテーマが設定されているかに関係なく、インターフェイスが重要です。

この場合、テーマは政治であり、インターフェイスは、国を導く試みを可能にし、あなたの決定が有権者のさまざまな部分に与える影響をグラフ化できるように設計されています。同じ情報の蜘蛛の巣を介して、これらの両方のことを実行します。

最初は圧倒されるかもしれませんが、これは明らかに良いことではありませんが、ほとんどのゲームは、よりシンプルなインターフェイスを最前面に配置し、クモの巣の情報をサブメニューに隠したくなるかもしれません。それらのゲームはプレイヤーを優遇すると同時に、プレイヤーのプレイに不可欠な情報を曖昧にしてしまいます。

Democracy 3 が優れているのは、その情報と制御インターフェイスが 1 つのインタラクティブなデータ画面に結合されているためです。そうすることで、読んだり遊んだりするのが簡単で楽しいものになります。

クラスへの質問:同じ情報を単に複数の画面に分割せずに伝えるために使用できるフィルタリング方法を考えられますか?

ブローグ

正方形のタイルであっても、より精巧なものであっても、美しいグラフィックを備えたローグライクゲームがたくさんあります。ブローグにはそれがなく、代わりに昔ながらの ASCII が使用されていますが、世界をカラフルで生き生きとしたものにする一連のエフェクトが付いています。

しかし、そのインターフェイスの注目すべき点は、ASCII グラフィックを使用して完全に鮮明にしていることです。これは主にマウス コントロールの実装によるもので、クリックして移動したり攻撃したり、画面上の任意のキャラクターにマウスを置くとそれが何であるかを確認できます。それは「うっそうとした葉が見えますね」のような単純なものかもしれないし、フレーバー テキストや戦闘統計を含む攻撃するジャッカルについての詳細な記事のようなものかもしれません。

その結果、ローグライク ゲームは、過去の同ジャンルの最高のものと同じくらい幅広く、柔軟で、自由でありながら、いかなるチュートリアルも必要とせず、誰でもすぐに手に取ってプレイすることができます。

クラスへの質問:Brogue はキーボード コントロールもサポートしていますが、従来のセットアップではなくマウス経由でゲームをコントロールすることを選択した場合、何か失われることはありますか?

エリートデンジャラス

Frontier の最新の宇宙シミュレーションには問題がありますが、そのインターフェースは問題の 1 つではありません。旅行、貿易、採掘、戦闘にどれだけすぐに飽きても、船のコックピットに組み込まれているメニューに飽きるのは困難です。右に曲がるとモジュールを確認し、左に曲がるとマップを確認し、下を向いてレーダーを確認します。優れた宇宙パイロットになるには、3 次元空間での操縦とドッキングを学ぶことと同じくらい、これらのインワールド メニューを迅速に操作できることが重要です。

メニューをすべてワールド内で設定することで、エリートのインターフェイスは、スペース キャプテンのファンタジーを売り込むさまざまな方法の 1 つです。その頂点は、近くの船に表示されるオーバーレイで、たとえば船がどの方向に進んでいるのかを示します。これらは魔法のゲーム オーバーレイではなく、船の窓に投影されている情報です。つまり、戦闘中に窓が割られると、オーバーレイも消えてしまいます。

ただし、完全に消えるわけではありません。それらは割れたガラスの欠けている部分だけが消え、あなたを殺そうとしている敵に関する重要な情報を得るために、特定の方法で船の角度を変えるよう強制されます。

このインターフェース内でアクションを実行すると、他のパイロット操作と同様に味わい深いものになります。ボタンを必死でクリックしてハイパードライブを起動したり、冷静にステーションに無線でドッキングの許可を求めることもできます。単なるボタンでは決してありません。

クラスへの質問:Elite はプレーヤーにほとんど説明せず、外部の情報源に目を向けることを要求するだけです。 Reddit - ゲームのプレイ方法を学びます。したがって、コックピットには現実世界の Web ページにアクセスできるブラウザ ウィンドウを含めるべきでしょうか、それとも、Alt キーを押しながら Chrome タブに移動するよりも第 4 の壁を打ち破るものでしょうか?

OK、クラス、話し合いましょう。

この記事は元々、RPSサポータープログラム。サイトをサポートしていただきありがとうございます!