it-swarm-es.com

¿Cuándo usar el principio de gestalt de región común?

La imagen a continuación, que se puede ver en este artículo medio usa líneas para separar varios gráficos, pero también podría usar diferentes fondos, lo cual es algo bastante común al diseñar tableros. Mi pregunta es, ¿no sería suficiente el principio de proximidad para agrupar las imágenes y el texto relacionados y separarlos de los otros elementos? ¿Cuándo usamos este principio?

enter image description here

13
Carla Graça

El principio de proximidad utilizado como un marco funciona correctamente cuando hay al menos dos o tres elementos que generan los límites virtuales del contenedor:

References points

Funciona más como una ley de cierre :

enter image description here

O el contenido tiene un eje visual central lo suficientemente fuerte como para conducir a interpretarlo como un elemento único:

Central axis


Después de esto, el texto superior es perfecto porque hay cuatro elementos delimitadores que definen el marco del contenedor:

Top text

Pero en el caso de las imágenes, la irregularidad del contenido altera la ley de proximidad al aislar los ejes de referencia a un solo elemento, el texto inferior/derecho, que nos acerca peligrosamente a la cuarta opción en el gráfico superior de esta respuesta:

enter image description here

Soluciones posibles

1 - Aumente los márgenes exageradamente para aislar cada imagen tanto como sea posible para que se interprete como elementos agrupados únicos:

margins

2 - Agregue elementos gráficos o de información para recuperar el segundo y/y tercer punto de referencia:

reference

3 - Usa un fondo, funciona como un contenedor irregular

enter image description here

4 - Refuerza el contenido del eje central:

axis

24
Danielillo

Nunca vi una regla para ello y creo que es muy difícil crear una regla para ello porque depende del diseño, las fuentes, los colores y el escriba la información que está mostrando allí.

Por ejemplo:

  1. Si solo tiene gráficos sin leyenda, los espacios deberían ser suficientes para separar
  2. Si solo tiene tablas, se separarán automáticamente debido al diseño, pero si su tabla no tiene línea, ningún fondo podría verse como una sola tabla.
  3. Si tiene una combinación de tablas y gráficos, necesitará que las líneas div no se vean desordenadas.

La mejor manera es crear variaciones de diseño y comparar. Es difícil decidir sin diseño y mirar lo real.

Al buscar algunos ejemplos (malos y buenos), puede ver que esto no debería afectar la experiencia del usuario.

Es mejor cuidar:

  • Qué tipo de gráfico usarás
  • Las órdenes para mostrar datos
  • Los datos que mostrarás allí
  • Los colores y cómo resaltarás lo que importa
  • Cómo prevenir una pantalla contaminada

enter image description hereenter image description hereenter image description hereenter image description here

3
Rafael Perozin