it-swarm.com.de

Fluss des dynamischen Gitters

In jüngster Zeit gibt es im Webdesign einen Trend, dynamische Mauerwerksgitter wie Pinterest heutzutage für nahezu alles zu verwenden. Wenn Sie ein solches Layout noch nicht gesehen haben, wird der Inhalt variabler Höhe in mehreren Spalten mit fester Breite angezeigt, sodass er wie eine seitlich gedrehte Mauer aussieht.

Eines der Probleme, die ich häufig bei Mauerwerksgittern finde, ist, dass es schwierig ist, die Reihenfolge zu bestimmen, in der die Inhaltsstücke sortiert sind. In einem regulären Layout wird der neueste Inhalt wahrscheinlich oben aufgelistet und fließt dann chronologisch von links nach rechts und von oben nach unten.

Aufgrund der Beschaffenheit des Mauerwerksgitters funktioniert das Fließen von links nach rechts nicht. Der Platz in den angrenzenden Spalten ist wahrscheinlich aufgrund eines Inhalts mit unterschiedlicher Höhe nicht verfügbar. Wenn wir von oben nach unten fließen, scheint es, dass uns nur eine einzige Spalte erlaubt ist (denken Sie an Twitter), da jede Spalte scheinbar unendlich lang ist.

Was ist der beste Weg, um Inhalte in einem Mauerwerksraster zu bestellen? Der besondere Anwendungsfall für mich ist eine Aggregation von Daten aus sozialen Netzwerken, aber ich denke, dies gilt an vielen verschiedenen Orten. Im Idealfall würde der Inhalt vom neuesten zum ältesten fließen - aber in welche Richtung?

5
jwegner

Um ein bisschen vereinfacht zu sein: Je geordneter das Layout erscheint, desto mehr Bedeutung hat die Reihenfolge für die Benutzer.

Ziegellayouts im Mauerwerksstil untergraben in unterschiedlichem Maße die traditionelle orthografische Reihenfolge.

Ich würde vorschlagen, dass diese Subversion absichtlich ist, und diese Subversion erklärt den Charme dieser Schnittstellen. Die Layouts sind unvorhersehbar, und ich vermute, dass die visuellen Scanmuster, denen die Leute folgen, ebenfalls unvorhersehbar sind (es ist irreführend, sie "Gitter" zu nennen, da es keine zwei durchgehenden Achsen gibt).

Diese Abkehr von einem starren Ordnungssystem fördert Serendipity, Spiel und Entdeckung.

Es gibt keinen festgelegten visuellen Pfad, keinen vorgegebenen Plan, wie Sie die Informationen nutzen sollen. Sie wandern und verwenden andere visuelle Hinweise wie Farbe, Form, Größe und Textur, um zu entscheiden, worauf Sie sich als Nächstes konzentrieren möchten. Position ist nicht unbedingt sinnvoll oder zumindest von sekundär Bedeutung.

Bei Pinterest gibt es keine nennenswerte horizontale Achse, aber die vertikalen Achsen werden konsequent beibehalten:
enter image description here

Innerhalb jeder Spalte werden die obersten Elemente zuerst angezeigt und erscheinen daher wichtiger, möglicherweise aufgrund eines größeren Interesses oder einer größeren Aktualität. In allen Spalten (westliche Leser jedenfalls) folgen sie wahrscheinlich von links nach rechts. Das Bestellsystem bricht jedoch schnell zusammen - wenn Ihr Auge versucht, eine zweite Reihe zu finden, kann es nicht und Ihr Auge beginnt zu wandern.

Ich vermute, Pinterest hat noch ungeordnetere Layouts ausprobiert, aber ein völlig nicht axiales Layout gefunden auch chaotisch. Vergleichen Sie das Pinterest-Layout mit diesem Beispiel aus jQuery Masonry-Beispiele , wobei die Breite der beteiligten Elemente variiert und die vertikale Ausrichtung daher unterbrochen ist:

enter image description here

Als Randnotiz (als ob diese Antwort noch nicht zu lang wäre) könnte man sagen, dass Mauerwerkslayouts Cousins ​​von "Formpackungs" -Diagrammen wie Blasendiagramme oder Baumkarten sind ::

enter image description here

Ich erwähne dies nur, um hervorzuheben, dass in dieser Baumkarte die Reihenfolge willkürlich ist - die wichtige Information ist die Größe, Form, Farbe und lokale Gruppierung.

6
peteorpeter