インターフェイス101：きれいにする

実際にリリースしたゲームをいくつか作成しました。私が何度も何度も遭遇する特定の問題が1つあります。それはゲームのインターフェイス/テーマの問題です。

ゲームのルックアンドフィールとインターフェイスについて、How意的で一貫性のない決定をどのように行うことができますか？

たとえば、Silverlightの化学ベースのゲームのバージョン1では、自然で横長のスタイルのルックアンドフィールを使用するという（悪い？）決定を下し、このUIを作成しました。

その後、後のイテレーションで、私はより賢くなり、より「機械的」で汚れたルックアンドフィールを使用しました。その結果、最終的なUIが作成されました。

私は間違いなく、UIの好みが反復によって改善されたと言います。しかし、それは多くの最初のlot意的な決定とそれに続く多くの微調整の結果でした。

ゲームのテーマを設定するより良い方法はありますか？

幻想/ SF小説を書いているとき、書面で類似を与えるために、あなたが記述する必要がある多くの要素があります。オブジェクト/創造物/場所などをarbitrarily意的に発明することができますが、数分間座って、地域、地域、惑星、または宇宙を設計すると、より一貫した世界が得られます。すべてはそれからうまく一緒にフィットし、そしてあなた自身に尋ねることができ、「どのようにだろう、このこの宇宙で動作しますか？

編集：私はこれをうまく説明しなかったようです。極端に質問を簡単にしましょう：タイトル画面（背景、フォント、スキンボタン）をレイアウトする必要がある場合、どのように表示するかを決定するにはどうすればよいですか？緑か青か グランジかどうか？丸みを帯びているか、平らですか？セリフまたはサンセリフ？

その質問を取り上げて、ゲーム全体に展開してください。物事がどのように見えるかをどのように把握しますか？一貫性のある任意のプロセスにするために、どのプロセスを使用しますか？

スクリーンショットをもう一度見てください。私は草/空/岩にこだわることができたかもしれませんが、金属は化学反応と原子の考えにより適しているように見えました。

スタイルが矛盾しているようです。

Peggle、Ultima Underworld、Diablo 3、Starcraft 2、Gran Turismo 5のこれらのUIをご覧ください。

各UIがテーマ内で一貫していることに注意してください。

Peggleは、すべてのUI要素と同様にピンボールです。すべてがメーター、レバー、ノズル、踏み台です。

Ultima UnderworldのUI要素には、鉄/鋼、ポーション、バックパック、マップがあります。冒険の時間。

ウルティマの地下世界に似ています（実際にはUWに基づいているようです）

未来的でなめらかな、シンプル、ミニマル（プロト）

車のインテリア

ご覧のとおり、最初のデザインは完全に一貫性がなく、テーマがありません。あなたのゲームとオープンフィールドはどう関係しますか？金属の背景についても同様です。ゲームボード用の実験台と、フラスコとバイアル、ゴム手袋とペトリ皿を備えた化学実験室の背景を試してください。

マリオ博士は非常に基本的に医学、細菌、ウイルス、医学をテーマにしています

さらに、UIにはゲームプレイ要素と同様のスタイルのグラフィックが必要です。化学記号のボールは丸く、緩やかにグレーディングされた単色です。選択した背景/ゲームボードには、ゲームプレイの要素とはまったく異なるアートスタイルがあります。フィールドは鮮やかな写真です。金属は非常に詳細ですが、化学ボールは滑らかで比較的詳細ではありません。

私が理解し始めていることは非常に重要です：コントラストの適切な使用。

その最初の写真を見てください。至る所で対照的です！空は明るく、地平線は暗い、そして遠い草は明るく、そして底は暗い。タイル張りの背景は、非常に明るい色と非常に暗い色の間で大きく異なります。これらはすべて非情報です。視覚的な混乱。実際の重要な部分-円-は、すべてのコントラストの変化によって消えてしまいます。

次に、2番目の図を見てください。背景は暗く、比較的単調です。競技場全体の周りに明るい境界線があります。タイル張りの背景はほとんどが暗く、重要な場所に細い白い線があります。突然、あなたは実際にパズルを見ることができます。

個人的には、私はまだ少し調整します-競技場も汚れたように見えるようにします。グリッドの分割を示すこれらの白い線は重要ですが、人間の脳は真っ直ぐな特徴を外挿するのが得意です。

このUIを邪魔する大きなことは、一番下のバーです。それは明るく、顔の中にあり、テキストを読むのが難しいです。その最後のビットは重要です-テキストを読むのが難しい理由は、やはりコントラストのためです。文字の端を探して部分的にテキストを読みますが、残念ながら文字は下のバーの一部とうまく調和しています。

私がやること：コントラストの観点から、メインバーの背景に合うように下部バーを再調整します。それが分離しているという事実を理解するために、それとメインの背景の間に明るい境界線を作ります。次に、ほとんどのテキストを取り除きます。「ダイヤモンド」は実際のダイヤモンドになります。「残された原子」は、いくつかの原子の絵図になります。「残り時間」は、砂時計、腕時計、または懐中時計になります。「次へ」は完全に消える可能性があります-「どの原子を取得するかを確認するには再生する必要があります」と言いますが、それは迷惑なゲームメカニズムです。それを右の原子のスタックに変えて、打ち上げられたコンベアベルトの上に座って、小さな視覚的な機械の手がかりがラインの次の1つであるのを手がかりにします。多田！パズルが改善され、インターフェースが改善され、すべてがすっきりしました。

あなたがいる場合か、テキストを使用する必要があり、保証のコントラストに二つの方法があります。まず、テキスト自体をコントラストの低いものに配置します。背景が暗い場合は、明るいテキストを使用します。背景が明るい場合は、暗いテキストを使用します。それができない場合（そしてできない場合もあります）、アウターグローエフェクトの使用をためらわないでください。テキストが何であっても、適切な境界線のコントラストを提供するのに最適な方法です。

インターフェイスで遊んでいるとき、画像エディターを開いてモノクロに交換し、ぼかしとエッジ検出の2つのことを試してください。UIがモノクロームぼかしされている場合、ビジョンは自動的に重要な領域に引き寄せられるはずです。エッジ検出の場合、重要な領域を強調表示する必要があります。例：

これら2つを比較します。最初のものはほとんど読めません-確かに、宝石のいくつかは見えますが、それらの多くは見えません。2番目のグリッドでは、ダイアログボックスと同様に、グリッドがすぐに目立ちます。ボードには宝石が1つしかありませんが、それがどこにあるかをすぐに確認できます。

最初のものは、グリッドのエッジを非常に強調しています。一部の宝石はほとんど見えません。2つ目は、それらをまだ強調しています（個人的にはそれ以上です）が、パズルの境界線も非常に強く強調しており、宝石は（完全にではありませんが）かなり目立ちます。

この方法は決して万能薬ではありませんが、修正すべき事項を追跡するのに役立ちます。人間の視覚はエッジとコントラストに基づいていることを念頭に置き、人間が読めるようにUIを設計してください。

（色理論の観点からこれに行きます）

あなたの質問は魅力的なGUIの作り方ではなく、あなたが本当に指摘しているのは「プレイヤーに与えたい体験をどのように選択すればいいのか」ということだと思います。

そして、これはほとんど心理的な答えです。あなたは青、緑、赤の選択に言及しますが、それは色についてではなく、色を見たときに感じる色についてです。

あなたが赤のゲームを持っている場合（背景が赤のシェードであり、プレイヤーが赤を着ているか、赤のゲームピースを使用している、フォントはすべて読み取り可能な赤の色合いです）ゲーム？また、ゲームが何であるかは関係ありません。

あなたは思いを感じるゲームはどちらか非常に怒っているか、バレンタインデーゲームのいくつかの並べ替えだったように。

これが、意思決定プロセスの出番です。プレイヤーに、化学ゲームで科学実験を行っているように感じてもらいたい場合は、おそらくすべてをクリーンでシンプルにします。たぶん白を強調する何か。

プレイヤーにある種の製造作業を行っているように感じさせたい場合、つまり科学で落ち込んで汚れているように感じる場合は、2番目の写真、または黄色と黒を一緒に強調するかもしれません。

プレイヤーが自分自身とすべての生き物の延長であるように、彼らが化学と一体になっているように感じたい場合は、最初の写真が良いスタートになる可能性があります。ライトブルーとライトグリーン、およびブラウンのような自然な色調に重点を置いています。

それは本当にあなたがプレイヤーに感じると期待する生の感情に帰着します。

短い答え：短い答えはありません。

デザインは巨大な分野であり、大量の本、記事、そして前述のように、この質問をカバーするライブラリがあります。カラースキーム、フォント、スタイル、レイアウト、ホワイトスペースの使用、ネガティブスペース、テクスチャ、色、および異なる文化におけるそれらの意味、コミックサンが悪であり、決して使用されるべきではない理由。このようなことを専門とするコース、書籍、ブログ、研究論文、およびWebサイトがあります。質問は多くのことを尋ねているため、これに対する簡単な答えはありません。

つまり、率直に言って、あなたを助けるデザイナーを雇うのが最善の選択肢です。予算外の場合は、デザイナーと仲良くしてください。それが不可能な場合は、しばらく一人で行く必要があるかもしれません。

いくつかのヒント。カラースキームには、カラースキームデザイナーのようなものを使用します。色がどのように機能するかについて時間をかけて学習し、一般的に、数色だけを選んでみて、行き過ぎないようにしてください。制限は約3色にする必要があります。

フォントについては、記事全体と研究論文があります（セリフとサンセリフについての記事があります）。繰り返しますが、一般的なルールは、最大で2つのフォントを選択することです。良い選択は、デフォルトではないが見栄えの良いフォントを選択することです。それがオプションである場合、Helveticaはかなりいいですが、他にもたくさんの良いものがあります。

スタイルやテーマについては、これを答えるのはさらに困難です。ここでの最大のヒントは、あなたのスタイルと一致することだと思います。自然とフィクション、またはスケッチ3Dポリモデルとスケッチのラインアートをブレンドしようとしないでください。これは、ほとんどの場合、すべてのアートを行うアーティストを1人見つけるか、自分で行うことを意味します（大企業の場合、これがアートリードが存在する理由です）。テーマは、始める前に設定されたテーマを念頭に置いていない限り、一緒にプレイしなければならないものです。正直に言うと、時間が経つにつれて変化する可能性があり、ゲームの詳細が完了します。実際、開発の過程でテーマが変わる可能性はかなり高いです。

全体的に、デザインを教えることはできますが、一部の人々は...それが得意ではありません（プログラミングのように）。これは、デザインフレンドを支援するのに役立ちます。

編集済み：

質問をよりよく理解したので、これを書き直しました。

私が混乱した理由は、あなたが書面で類似点を与えようとしたが、あなたが持っている例はまったく平行ではないからです。UIのデザインは、プレゼンテーションの問題です。本の内容は、実際の内容に関するものです。

そのため、UIデザインをプレゼンテーションの問題として見ると、何を提示したいかを考える必要があります。もちろん、あなたはあなたのゲームを紹介しようとしていますが、他に何がありますか？プロフェッショナルに見せたいですか？楽しい？ダーク？光？

例として、私はあなたが投稿した2つの画像を見て、それらから得た印象を伝えます。

1つ目は、明らかな側面がいくつかあります。もちろん、2番目の画像よりも明るいです。奥行きのあるフィールドの画像を選択したという事実に加えて（フィールドが視聴者から離れるにつれて）、感覚ははるかに広大なものになります。それはより自由に感じ、より軽快に感じます。

2番目の画像を見ると、もちろんずっと暗いです。また、視聴者の視線に垂直な平面画像である背景があり、最初の画像が持っていた奥行き感を取り去ります。唯一の本当の深さの手がかりは、ダイヤモンドメッキの陰影に由来し、その背景画像をカメラに非常に近づけることを追加します。これらすべてが組み合わさって、はるかに暗く、より閉所恐怖症の雰囲気を与えます。

それでは、2つのテーマで何ができますか？さて、最初のテーマは、やりたいことがもっとカジュアルに感じられるようにしたい場合に良いことです。それは、プレイヤーが現在ゲームのピースで何をしているのかが、世界で起こっているすべてではないような感覚を与えます。2番目の画像は、より切迫感を与えています。ゲームの「既知の世界」ははるかに小さく、プレイヤーが何をしているかにより重点を置いています。

これは本当に「きれいにする」ことですか？それは主観的なことで、最初のスクリーンショットは2番目のスクリーンショットよりも見た目が良いと思います。

テーマを選ぶことはロケット科学ではありません。ゲームの重要なコンテンツや目的を知っているので、他のすべての側面を選択するときにそれを心の前に置いておくことができます。

これまで誰も言及していないように思われることの1つは、ゲームをプレイしようとしている人々にフィードバックを求めることです。UIデザイナーは、ユーザーにデザインを表示し、ゲーム、ワードプロセッサ、またはフライトデッキを設計しているかどうかに関係なく、ユーザーの何が正しいか間違っているかを見つけるのに多くの時間を費やします。