it-swarm.com.de

Wann sollte das Gestaltprinzip der gemeinsamen Region angewendet werden?

Das Bild unten, das auf dem mittleren Artikel this zu sehen ist, verwendet Linien, um verschiedene Grafiken zu trennen, kann aber auch unterschiedliche Hintergründe verwenden, was beim Entwerfen von Dashboards häufig vorkommt. Meine Frage ist, würde das Prinzip der Nähe nicht ausreichen, um die zugehörigen Bilder und Texte zu gruppieren und von den anderen Elementen zu trennen? Wann wenden wir dieses Prinzip an?

(enter image description here

13
Carla Graça

Das als Frame verwendete Proximity-Prinzip funktioniert ordnungsgemäß, wenn mindestens zwei oder drei Elemente die virtuellen Grenzen des Containers erzeugen:

(References points

Es funktioniert eher als Schließungsgesetz :

(enter image description here

Oder der Inhalt hat eine zentrale visuelle Achse, die stark genug ist, um ihn als einzelnes Element zu interpretieren:

(Central axis


Anschließend ist der obere Text perfekt, da der Containerrahmen durch vier Begrenzungselemente definiert wird:

(Top text

Bei den Bildern ändert die Unregelmäßigkeit des Inhalts jedoch das Näherungsgesetz, indem die Referenzachsen auf ein einzelnes Element, den unteren/rechten Text, isoliert werden, wodurch wir der vierten Option in der oberen Grafik dieser Antwort gefährlich näher kommen:

(enter image description here

Mögliche Lösungen

1 - Erhöhen Sie die Ränder übertrieben, um jedes Bild so weit wie möglich zu isolieren, damit es als eindeutige gruppierte Elemente interpretiert wird:

(margins

2 - Fügen Sie Grafiken oder Infoelemente hinzu, um den zweiten oder/und dritten Referenzpunkt wiederherzustellen:

(reference

3 - Verwenden Sie einen Hintergrund, es funktioniert als unregelmäßiger Container

(enter image description here

4 - Verstärkt die Inhaltsmittelachse:

(axis

24
Danielillo

Ich habe nie eine Regel dafür gesehen und ich glaube, es ist sehr schwierig, eine Regel dafür zu erstellen , da dies vom Design, den Schriftarten, den Farben und den Farben abhängt Geben Sie die Informationen ein, die Sie dort anzeigen.

Zum Beispiel:

  1. Wenn Sie nur Grafiken ohne Legende haben, sollten Leerzeichen zum Trennen ausreichen
  2. Wenn Sie nur Tabellen haben, werden diese aufgrund des Designs automatisch getrennt. Wenn Ihre Tabelle jedoch keine Linie enthält, kann kein Hintergrund wie nur eine Tabelle aussehen.
  3. Wenn Sie eine Mischung aus Tabellen und Grafiken haben, müssen die Div-Linien nicht wie ein Durcheinander aussehen.

Der beste Weg ist, Variationen des Designs zu erstellen und zu vergleichen. Ist ohne Design schwer zu entscheiden und auf die Realität zu schauen.

Wenn Sie nach einigen Beispielen (schlecht und gut) suchen, können Sie feststellen, dass dies die Benutzererfahrung nicht beeinträchtigen sollte.

Ist besser zu pflegen mit:

  • Welche Art von Grafik werden Sie verwenden
  • Die Befehle zum Anzeigen von Daten
  • Die Daten, die Sie dort anzeigen
  • Die Farben und wie Sie hervorheben, worauf es ankommt
  • So verhindern Sie einen verschmutzten Bildschirm

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

3
Rafael Perozin