【ゲームインタラクションデザイン】グーテンベルク図:デザインにおける視覚的フローの応用

1.グーテンベルク図とは

ダイアゴナルバランスとも呼ばれるグーテンベルク図は、14世紀に西洋の可動式活字印刷の発明者であるジョングーテンベルクによって提案されました。グーテンベルク図は、画面に表示されるものを4つの象限に分割します。

1.プライマリオプティカルエリア(Primary Optical Area):左上、リーダーが最初に気付く場所。

2.最終光学領域:右下、視覚プロセスの終わり。

3.強いアイドル領域(強いフォロー領域):右上、あまり目立たない。

4.弱いフォローエリア:左下に、少なくとも気づきました。

この写真によると、読者の視線は自然に左上から右下にスワイプし、各視線は方向軸に沿って左から右に始まります。この方向軸は、整列された要素、テキストの行、またはいくつかの明白な要素で構成される水平線です。特別な視覚的強調がない限り、強いアイドル領域と弱いアイドル領域はこの読み取りパスの外にあり、ほとんど気付かれません。グーテンベルク図は、視覚的な軌跡の実際的なルールを示しています。重力の読み取りは上から下、左から右です。もちろん、このルールは左から右に横書きで書くことに慣れている読者にのみ適用され、古代中国の人々の読書習慣である場合は適用されない場合があります。

2.設計におけるグーテンベルク図の実用的な応用

グーテンベルク図の適用範囲は非常に広く、グーテンベルク図の適用の痕跡はビジュアルデザインを含むほとんどすべての場所で見ることができます。グーテンベルク図によって明らかにされた法則によれば、写真は上下の構造、左右の構造、または包括的な使用を採用することができます。

トップダウンのインターフェース設計

上から下への読み取りの重力によると、ビジュアルターミナルはインターフェイスの真下にあります。したがって、図1に示すように、一般的なプロットアニメーションのコピーは画面の下部にあります。プレーヤーはメインの画像を見て、あまり考えずに自然にちらりと見ます。プロットアニメーションのコピーが画面の真上に配置されている場合、プレイヤーは画面の主観性を無視して読みにくく感じるでしょう。

図1「ニンテンドースターバトル」
図2反例

上下の画面構成では、操作前にプレイヤーが予測する必要のある情報を画面上部に提供する必要があります。通常、操作が必要なボタンは下に配置されているため、インターフェース情報を読んだ直後にプレイヤーが選択できるようになっています。操作が最初に表示され、次に事前に必要な情報が提供されると、認識コストが大幅に増加し、プレイヤーは混乱しやすくなります。

図3「フォールアウト76」に示すように、インターフェースの上部にはプレーヤーの前提条件情報が表示されます。レベル5に到達すると、他のプレーヤーとの戦闘が許可され、次の操作オプションにつながります。同盟国/見知らぬ人/敵との戦闘を選択すると、以下の短いテキストが表示されますさまざまなオプションの違いを補足するために、画面全体が上から下への読み取りの重要性に従って非常に明確です。必要な情報到達レベル5が他のプレイヤーとの戦いを許可され、インターフェイスの下に配置されている場合、プレイヤーはまず疑いに陥り、インターフェイスの下部を見てこのインターフェイスの目的を理解します。

図3「フォールアウト76」
図4反例

図5に示すように、本体にはプレーヤーの現在のアップグレード情報が表示されます。同時に、下のボタンはプレーヤーにアップグレードを続行するよう通知します。プレーヤーは、アップグレードされた属性と必要な経験に応じて、アップグレード操作を続行するかどうかを判断できます。図6に示すように、インターフェース要素が順番に転送される場合、プレイヤーは上下に目を向け、考え続ける必要があります。

図5「タイヤエピック」
図6反例 

左から右へのインターフェース設計

読書の重要性は左から右であるため、左と右の構造を持つインターフェース設計では、デザイナーは通常、プレーヤーの読書の流れに合わせるために、強調したい視覚的階層に従って左から右に配置します。

図7のキャラクター閲覧インターフェースに示すように、デザイナーは、切り替え操作項目を左側、情報表示項目を右側に配置し、プレイヤーは、キャラクター・キャラクター・画像・キャラクター属性の切り替えの順番で見ることができる。配置順序が図8:キャラクター画像・キャラクター切り替えキャラクターと同じであれば、プレイヤーはこの読み順で理解できるので、切り替え前にデフォルトで表示されているキャラクターを読む必要があります。

図7「Gu Jian Qi Tan San」
図8反例

1635c2dd9e6f92e91ba8b1616dc3c734-sz_51579.jpg

長い間使用されてきたゲームは、新製品の陳列や刺激が整っているので、支払いの心配はありません。

包括的な使用のためのインターフェース設計

グーテンベルク図を総合的に利用することで、画像をいくつかの領域に分割でき、各領域も重力の法則を満たします。対角バランスの法則(つまり、グーテンベルク図)によると、読み取り端末は表示領域の右下で停止します。これは、現在の使いやすいインターフェイス操作ボタンのほとんどが画面の右下または真下にある理由を説明することは難しくありません。

図9のアイランドのロックを解除するためのインターフェースでは、読み取りの重力が左から右であることを確認し、左側のアイランドを選択して、右側のアイランドの属性と操作を表示することは難しくありません。右側の領域では、上に島の事情のテキスト情報が表示され、下がこの領域の焦点です。島に移動して現在の位置に留まる操作です。このインターフェースの最後の操作端末は、読み取り端末、つまりインターフェースの右下です。

図10では、プレーヤーの最初のビジョンは、選択されたアイランドでの選択可能なトランザクションであり、リーディングターミナルは選択されたアイランドです。プレーヤーが特定のアイランドで操作する場合、プレーヤーは読み書きする必要があるため、プレーヤーの操作効率には影響しません。

3cabaf5d93f7dad9bc04ce0569a89e58-sz_36476.jpg
図9「ジュラ紀の世界:進化」
7df53182f924a3f5e422c97d7f6a74aa-sz_31231.jpg
図10反例

図11の「Dream World」の図示されたインターフェースでは、左が操作切り替え領域、右が情報表示領域であり、読み順も左から右です。各領域で、上部は選択スイッチで、下部は対応するページ表示です。写真のペット飾りのチェック機能は、使用頻度の低いモジュールとして、プレイヤーの注意をそらさないように右上隅の強いアイドル領域に配置されています。図12のように要素を並べ替えると、ペットの装飾が一目でわかるオプションになり、重要度が高まります。オプションの図鑑は右側に配置されていますが、読みの流れとメンタルモデルに矛盾があり、プレーヤーの認知コストが高くなります。

図12反例

適用されない特別な状況

グーテンベルク図によって明らかにされた読書法は一般的に適用可能ですが、慣例を打ち破るか、強い影響を達成するために、グーテンベルク図によって明らかにされた視覚法は、デザイナーによってしばしば破壊されます。多くの場合、より明るい目を引く要素それによってプレイヤーの読み取り順序を変更する、未使用領域に残される特別な目を引く画像、サイズ、または色を使用するために使用される方法を覆します。

69580f77e4ccce4b10f57876345a0653-sz_63896.jpg
図13「荒野のダーツ・償還2」

図7では、右側の領域にある西部のカウボーイの画像が非常に目立っており、プレイヤーの注意がすぐにキャラクターと彼が見ている銃に向けられ、次に左側のテキストが表示されます。プレイヤーはまずゲームの緊張と圧迫を感じ、興味をそそられて初めてゲーム名に気づき、評判の良いデザインでした。

3f3b3c2ff19ab96e49e9bb6f81967007-sz_38476.jpg
図14「これは警察2です」

図8のインターフェイスは一般的に暗く、画面の右上は白とオレンジの文字で彩度が高く、ゲームの名前を強調しています。プレーヤーは一目でゲームの名前を一目見ると、左側の警官と右下の囚人に気づくことができます。このデザインの意図は、上記の「野生の売春婦2」とはまったく逆ですが、すべてグーテンベルク図を覆します良いデザイン例。

グーテンベルク図は、重力の読み順を覚えている限り、インターフェイスデザインの隅々まで実行されます。上から下、左から右、視覚的な階層を調整するための包括的な読み上げフローにより、合理的なデザインを作成できます。しかし、デザイナーはグーテンベルク図の法則に限定されることはできません。印象的なデザインを作成するには、法則を十分に活用し、他のデザイン知識を組み合わせる必要があります。

 

12件のオリジナル記事を公開 11 件を獲得 2275件を訪問

おすすめ

転載: blog.csdn.net/NetEase_Game/article/details/105688018