1. Qu'est-ce que le diagramme de Gutenberg
Le diagramme de Gutenberg, également connu sous le nom d'équilibre diagonal, a été proposé par John Gutenberg, inventeur de l'impression de type mobile occidental au 14ème siècle. Le graphique de Gutenberg divise ce qui doit être affiché à l'écran en quatre quadrants:
1. Zone optique primaire (zone optique primaire): en haut à gauche, l'endroit où le lecteur le remarque en premier.
2. Zone optique finale: en bas à droite, la fin du processus visuel.
3. Zone de ralenti forte (zone de suivi forte): en haut à droite, moins remarquée.
4. Zone de suivi faible: en bas à gauche, au moins remarqué.
Selon cette image, la ligne de visée du lecteur glissera naturellement du coin supérieur gauche vers le coin inférieur droit, et chaque regard commencera de gauche à droite le long d'un axe de direction. Cet axe de direction est une ligne horizontale composée d'éléments alignés, de lignes de texte ou de certains éléments évidents. Sauf s'il y a un accent visuel particulier, les zones de ralenti fortes et faibles sont en dehors de ce chemin de lecture et peuvent rarement être remarquées. Le diagramme de Gutenberg révèle une règle pratique de trajectoire visuelle: la lecture de la gravité se fait de haut en bas et de gauche à droite. Bien sûr, cette règle ne s'applique qu'aux lecteurs qui ont l'habitude d'écrire sous une forme horizontale de gauche à droite. Si ce sont les habitudes de lecture des anciens chinois, elle peut ne pas être applicable.
2. L'application pratique du diagramme de Gutenberg dans la conception
Le domaine d'application du diagramme de Gutenberg est très large, et les traces de l'application du diagramme de Gutenberg peuvent être vues dans presque tous les endroits impliquant une conception visuelle. Selon les lois révélées par le diagramme de Gutenberg, l'image peut adopter une structure supérieure et inférieure, une structure gauche et droite ou une utilisation complète.
Conception d'interface descendante
Selon la gravité de la lecture de haut en bas, le terminal visuel se trouve directement sous l'interface. Par conséquent, la copie d'animation du tracé général se trouve en bas de l'écran, comme le montre la figure 1. Le joueur regarde naturellement après avoir regardé l'image principale sans trop réfléchir. Si la copie d'animation de l'intrigue est placée directement au-dessus de l'écran, le joueur ressentira la difficulté de lire et ignorera la subjectivité de l'écran.
Dans la structure d'écran supérieure et inférieure, vous devez fournir les informations que le joueur doit prévoir avant l'opération en haut de l'écran. Les boutons qui doivent être actionnés sont généralement placés en dessous, afin que le lecteur puisse faire un choix immédiatement après avoir lu les informations d'interface. Si l'opération apparaît en premier, puis que les informations pré-requises sont fournies, le coût cognitif est considérablement augmenté et les joueurs sont facilement confondus.
Comme le montre la figure 3 "Fallout 76", le haut de l'interface fournit les informations prérequises du joueur: atteindre le niveau 5 est autorisé à se battre avec d'autres joueurs, ce qui conduit aux options de fonctionnement ci-dessous: choisissez de vous battre avec des alliés / étrangers / ennemis, le petit texte ci-dessous Pour compléter les différences entre les différentes options, l'ensemble de l'écran est très clair selon la gravité de la lecture de haut en bas. Si le niveau 5 requis pour atteindre les informations est autorisé à se battre avec d'autres joueurs et placé sous l'interface, le joueur tombera d'abord dans le doute, puis verra le bas de l'interface pour comprendre le but de cette interface.
Comme le montre la figure 5, le corps principal affiche les informations de mise à niveau actuelles du joueur. En même temps, le bouton ci-dessous rappelle au joueur de poursuivre la mise à niveau. Le joueur peut juger s'il doit poursuivre l'opération de mise à niveau en fonction des attributs mis à niveau et de l'expérience requise. Si les éléments d'interface sont transférés séquentiellement, comme le montre la figure 6, le joueur doit regarder de haut en bas et continuer à réfléchir.
Conception de l'interface de gauche à droite
Étant donné que la gravité de la lecture est de gauche à droite, dans la conception d'interface avec la structure gauche et droite, les concepteurs organisent généralement de gauche à droite selon la hiérarchie visuelle qu'ils souhaitent mettre en évidence, afin de se conformer au flux de lecture du joueur.
Comme le montre l'interface de visualisation des caractères de la figure 7, le concepteur place l'élément d'opération de commutation à gauche et l'élément d'affichage d'informations à droite, et le joueur peut regarder dans l'ordre de lecture de l'attribut caractère-image-caractère de commutation de caractère. Si l'ordre d'arrangement est le même que celui de la figure 8: Personnage Image-Personnage-Changement de personnage, le joueur comprendra selon cet ordre de lecture, et il est nécessaire de lire le caractère affiché par défaut avant de changer.
Pour les jeux qui fonctionnent depuis longtemps, l'affichage et la stimulation de nouveaux produits sont en place, vous n'avez donc pas à vous soucier de payer.
Conception d'interface pour une utilisation complète
En utilisant de manière exhaustive le diagramme de Gutenberg, l'image peut être divisée en plusieurs zones, et chaque zone satisfait également la loi de la gravité. Selon la loi de l'équilibre diagonal (c'est-à-dire le diagramme de Gutenberg), le terminal de lecture s'arrêtera en bas à droite de la zone d'affichage, ce qui n'est pas difficile à expliquer pourquoi la plupart des boutons de fonctionnement de l'interface faciles à utiliser sont en bas à droite ou directement en dessous de l'écran.
Dans l'interface de déverrouillage des îles de la figure 9, il n'est pas difficile de voir que la gravité de lecture est de gauche à droite, de sélectionner l'île à gauche et d'afficher les attributs et les opérations de l'île à droite. Dans la zone de droite, les informations textuelles des affaires insulaires sont affichées au-dessus, tandis que le bas est au centre de cette zone: l'opération pour aller sur l'île et rester dans la position actuelle. Le dernier terminal de fonctionnement de cette interface est son terminal de lecture: le coin inférieur droit de l'interface.
Dans la figure 10, la première vision du joueur est la transaction sélectionnable dans l'îlot sélectionné, et le terminal de lecture est l'îlot sélectionné. Lorsque le joueur opère sur un îlot spécifique, il a besoin de lire dans les deux sens, ce qui n'est pas propice à son efficacité de fonctionnement.
Dans l'interface illustrée de "Dream World" sur la figure 11, la gauche est la zone de commutation des opérations, et la droite est la zone d'affichage des informations, et l'ordre de lecture est également de gauche à droite. Dans chaque zone, le haut est le commutateur de sélection et le bas est l'affichage de page correspondant. La fonction de vérification de la décoration pour animaux de compagnie sur l'image, en tant que module rarement utilisé, est placée dans la zone de ralenti forte dans le coin supérieur droit pour éviter de distraire l'attention du joueur. Si les éléments sont réorganisés comme sur la figure 12, la décoration pour animaux devient une option que le joueur peut remarquer au premier coup d'œil et l'importance est augmentée. Le livre pictural optionnel est placé à droite Il y a une contradiction entre le flux de lecture et le modèle mental, ce qui augmente le coût cognitif du joueur.
Circonstances particulières non applicables
Bien que la loi de lecture révélée par le diagramme de Gutenberg soit généralement applicable, afin de briser la convention ou d'obtenir un fort impact, la loi visuelle révélée par le diagramme de Gutenberg est souvent renversée par les concepteurs. Souvent , subvertir la méthode utilisée pour l'utilisation de l' image accrocheuse spéciale, la taille ou la couleur est un élément accrocheur plus lumineux gauche dans une zone non utilisée, ce qui modifie l'ordre de lecture du lecteur.
Dans la figure 7, l'image du cow-boy occidental dans la zone de droite est très importante, et l'attention du joueur est immédiatement attirée sur le personnage et l'arme qu'il regarde, puis le texte de gauche est vu. Le joueur a d'abord ressenti la tension et l'oppression du jeu, et n'a remarqué le nom du jeu qu'après avoir suscité l'intérêt. C'était aussi un bon design avec une bonne réputation.
L'interface de la figure 8 est généralement plus sombre, et le coin supérieur droit de l'écran utilise des caractères blancs et orange avec une saturation élevée pour souligner le nom du jeu. Les joueurs peuvent jeter un coup d'œil au nom du jeu au premier coup d'œil, puis remarquer le policier à gauche et le prisonnier en bas à droite. L'intention de cette conception est complètement opposée au "Wild Wild Prostitute 2" ci-dessus, mais ils inversent tous le diagramme de Gutenberg Bon exemple de conception.
Le diagramme de Gutenberg traverse tous les coins de la conception de l'interface, tant que vous vous souvenez de l'ordre de lecture de la gravité: de haut en bas, de gauche à droite, un flux de lecture complet pour organiser la hiérarchie visuelle, vous pouvez faire une conception raisonnable. Mais les concepteurs ne peuvent pas se limiter aux lois des diagrammes de Gutenberg, ils doivent faire bon usage des lois et combiner d'autres connaissances en conception pour créer des conceptions impressionnantes.
