1. ¿Qué es el diagrama de Gutenberg?
El diagrama de Gutenberg, también conocido como Equilibrio diagonal, fue propuesto por John Gutenberg, el inventor de la impresión tipográfica occidental en el siglo XIV. El gráfico de Gutenberg divide lo que se mostrará en la pantalla en cuatro cuadrantes:
1. Área óptica primaria (Área óptica primaria): en la parte superior izquierda, el lugar donde el lector nota por primera vez
2. Área óptica final: la parte inferior derecha, el final del proceso visual.
3. Área inactiva fuerte (Área de seguimiento fuerte): la parte superior derecha, menos notada.
4. Área de seguimiento débil: en la parte inferior izquierda, al menos notado.
De acuerdo con esta imagen, la línea de visión del lector se deslizará naturalmente desde la parte superior izquierda a la inferior derecha, y cada mirada comienza de izquierda a derecha a lo largo de un eje de dirección. Este eje de dirección es una línea horizontal compuesta de elementos alineados, líneas de texto o algunos elementos obvios. A menos que haya un énfasis visual especial, las áreas inactivas fuertes y débiles están fuera de este camino de lectura y rara vez se pueden notar. El diagrama de Gutenberg revela una regla práctica de la trayectoria visual: la lectura de la gravedad es de arriba a abajo y de izquierda a derecha. Por supuesto, esta regla solo se aplica a los lectores que están acostumbrados a escribir en forma horizontal de izquierda a derecha.Si se trata de los hábitos de lectura de los antiguos chinos, puede que no sea aplicable.
2. La aplicación práctica del diagrama de Gutenberg en el diseño.
El rango de aplicación del diagrama de Gutenberg es muy amplio, y los rastros de la aplicación del diagrama de Gutenberg se pueden ver en casi todos los lugares que involucran diseño visual. De acuerdo con las leyes reveladas por el diagrama de Gutenberg, la imagen puede adoptar una estructura superior e inferior, una estructura izquierda y derecha, o un uso integral.
Diseño de interfaz de arriba hacia abajo
Según la gravedad de la lectura de arriba a abajo, el terminal visual está directamente debajo de la interfaz. Por lo tanto, la copia de animación de la trama general se encuentra en la parte inferior de la pantalla, como se muestra en la Figura 1. El jugador mira hacia abajo naturalmente después de ver la imagen principal sin pensar demasiado. Si la copia de animación de la trama se coloca directamente sobre la pantalla, el jugador sentirá la dificultad de leer e ignorará la subjetividad de la pantalla.
En la estructura de la pantalla superior e inferior, debe proporcionar la información que el jugador debe predecir antes de la operación en la parte superior de la pantalla. Los botones que deben ser operados generalmente se colocan debajo, para que el jugador pueda elegir inmediatamente después de leer la información de la interfaz. Si la operación aparece primero, y luego se proporciona la información previa requerida, el costo cognitivo aumenta considerablemente y los jugadores se confunden fácilmente.
Como se muestra en la Figura 3 "Fallout 76", la parte superior de la interfaz proporciona la información previa del jugador: alcanzar el nivel 5 está permitido pelear con otros jugadores, lo que lleva a las siguientes opciones de operación: elige pelear con aliados / extraños / enemigos, el pequeño texto a continuación Para complementar las diferencias entre las diversas opciones, la pantalla completa es muy clara de acuerdo con la gravedad de la lectura de arriba a abajo. Si el requisito previo para alcanzar el nivel 5 de información se le permite pelear con otros jugadores y se coloca debajo de la interfaz, entonces el jugador primero tendrá dudas y luego verá la parte inferior de la interfaz para comprender el propósito de esta interfaz.
Como se muestra en la Figura 5, el cuerpo principal muestra la información de actualización actual del jugador. Al mismo tiempo, el botón a continuación le recuerda al jugador que continúe la actualización. El jugador puede juzgar si continuar la operación de actualización de acuerdo con los atributos actualizados y la experiencia requerida. Si los elementos de la interfaz se transfieren secuencialmente, como se muestra en la Figura 6, el jugador debe mirar hacia arriba y hacia abajo y seguir pensando.
Diseño de interfaz de izquierda a derecha.
Dado que la gravedad de la lectura es de izquierda a derecha, en el diseño de la interfaz con estructura izquierda y derecha, los diseñadores generalmente organizan de izquierda a derecha de acuerdo con la jerarquía visual que desean resaltar, para ajustarse al flujo de lectura del jugador.
Como se muestra en la interfaz de visualización de caracteres de la figura 7, el diseñador coloca el elemento de operación de cambio a la izquierda y el elemento de visualización de información a la derecha, y el jugador puede mirar en el orden de lectura de cambio del atributo de carácter de imagen de carácter de carácter. Si el orden de disposición es el mismo que en la Figura 8: Imagen de personaje-Carácter de cambio de personaje, el jugador lo entenderá de acuerdo con este orden de lectura, y es necesario leer el personaje que se muestra por defecto antes de cambiar.
Para los juegos que han estado funcionando durante mucho tiempo, la exhibición y la estimulación de nuevos productos están en su lugar, por lo que no hay que preocuparse por pagar.
Diseño de interfaz para uso integral
Mediante el uso integral del diagrama de Gutenberg, la imagen se puede dividir en varias áreas, y cada área también satisface la ley de la gravedad. De acuerdo con la ley del equilibrio diagonal (es decir, el diagrama de Gutenberg), el terminal de lectura se detendrá en la parte inferior derecha del área de visualización, lo que no es difícil de explicar por qué la mayoría de los botones de operación de interfaz fáciles de usar actuales se encuentran en la parte inferior derecha o directamente debajo de la pantalla.
En la interfaz para desbloquear islas en la Figura 9, no es difícil ver que la gravedad de lectura es de izquierda a derecha, seleccionar la isla a la izquierda y mostrar los atributos y operaciones de la isla a la derecha. En el área de la derecha, la información de texto de los asuntos de la isla se muestra arriba, mientras que la parte inferior es el foco de esta área: la operación para ir a la isla y permanecer en la posición actual. El terminal operativo final de esta interfaz es su terminal de lectura: la esquina inferior derecha de la interfaz.
En la Figura 10, la primera visión del jugador es la transacción seleccionable en la isla seleccionada, y el terminal de lectura es la isla seleccionada. Cuando el jugador opera en una isla específica, necesita leer de un lado a otro, lo que no es propicio para la eficiencia operativa del jugador.
En la interfaz ilustrada de "Dream World" en la Figura 11, la izquierda es el área de cambio de operación, y la derecha es el área de visualización de información, y el orden de lectura también es de izquierda a derecha. En cada área, la parte superior es el interruptor de selección, y la parte inferior es la visualización de la página correspondiente. La función de verificación de la decoración de la mascota en la imagen, como un módulo de uso poco frecuente, se coloca en el área inactiva fuerte en la esquina superior derecha para evitar distraer la atención del jugador. Si los elementos se reorganizan como en la Fig. 12, la decoración de las mascotas se convierte en una opción que el jugador puede notar a primera vista, y la importancia se amplía. El libro ilustrado opcional se coloca a la derecha. Existe una contradicción entre el flujo de lectura y el modelo mental, lo que aumenta el costo cognitivo del jugador.
Circunstancias especiales que no aplican
Aunque la ley de lectura revelada por el diagrama de Gutenberg es generalmente aplicable, para romper la convención o lograr un fuerte impacto, la ley visual revelada por el diagrama de Gutenberg a menudo es subvertida por los diseñadores. A menudo subvertir el método utilizado para el uso de la especial llama la atención la imagen, tamaño o color es más brillante elemento llamativo que queda en un área no utilizada, cambiando así el orden de lectura del jugador.
En la Figura 7, la imagen del vaquero occidental en el área derecha es muy prominente, y la atención del jugador se dirige inmediatamente al personaje y al arma que está mirando, y luego se ve el texto a la izquierda. El jugador sintió por primera vez la tensión y la opresión del juego, y solo notó el nombre del juego después de despertar interés. También fue un buen diseño con una buena reputación.
La interfaz en la Figura 8 es generalmente más oscura, y la parte superior derecha de la pantalla usa caracteres blancos y naranjas con alta saturación para enfatizar el nombre del juego. Los jugadores pueden mirar el nombre del juego a primera vista, y luego notar al policía a la izquierda y al prisionero en la parte inferior derecha. La intención de este diseño es completamente opuesta al anterior "Wild Wild Prostitute 2", pero todos subvierten el diagrama de Gutenberg Buen ejemplo de diseño.
El diagrama de Gutenberg recorre cada esquina del diseño de la interfaz, siempre que recuerde el orden de lectura de la gravedad: de arriba a abajo, de izquierda a derecha, flujo de lectura integral para organizar la jerarquía visual, puede hacer un diseño razonable. Pero los diseñadores no pueden limitarse a las leyes de los diagramas de Gutenberg, deben hacer un buen uso de las leyes y combinar otros conocimientos de diseño para hacer diseños impresionantes.
