it-swarm.com.de

Abstand von Elementen innerhalb eines Panels (WrapPanel)

Viele Websites und Anwendungen verwenden WrapPanel, um Ihre Artikel anzuzeigen. Elemente werden von links nach rechts in die Warteschlange gestellt. Wenn kein Platz mehr vorhanden ist, wird in der Regel zur nächsten Zeile gesprungen.

Zum Beispiel:

Image App Windows 8NetFlix

Was ist der beste Weg, um diese Organisation zu machen? Oder kommt es darauf an, was ich zeige? Wenn Sie alle Artikel derselben Größe belassen und wann können sie eine variable Größe haben? (Abbildung 1, Suche in Google-Bildern ist ähnlich)

Eine Ähnlichkeit besteht darin, dass zwischen den Elementen immer ein Abstand besteht (egal wie klein). Aber warum teilen die meisten Anwendungen Inhalte wie folgt: enter image description here

Und nicht so?

enter image description here

Die zweite Option ist deutlich symmetrischer (Rand links und Rand rechts).

3
J. Lennon

Manchmal ist es schwierig, Absichten in eine Benutzeroberfläche ohne Insider-Kontext einzulesen, um zu wissen, ob etwas eine bewusste oder unbewusste Entscheidung ist. Wir könnten sehr gut gültige UX-Prinzipien zuschreiben, um zu erklären, warum etwas auf eine bestimmte Weise ist, aber es ist auch gut möglich, dass es eher zufällig ist.

Folglich gibt es zwei mögliche Antworten auf Ihre Frage:

Als bewusste Entwurfsentscheidung ist die Verwendung unterschiedlicher Ränder zwischen Elementen ein Beispiel für die Verwendung von Gruppierungsprinzipien, um eine Beziehung zwischen den Elementen unter Verwendung des negativen Raums (als andere Antworten) herzustellen darauf hingewiesen haben).

Als unbewusste Entwurfsentscheidung kann es auch so einfach sein, wie es aussieht, wenn Sie CSS-Ränder für fließende Listen verwenden, wo Sie dies nicht tun wissen, welche Elemente sich an der ersten oder letzten Position in der Zeile befinden.

Das auf jedes Element angewendete CSS wäre daher das gleiche, d. H. Der Rand: 10px; Wenn Sie zwei Elemente nebeneinander haben, wird die Lücke zwischen ihnen zur Summe des rechten und linken Randes:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Das Ergebnis ist mehr Leerraum zwischen benachbarten Elementen als für das erste oder letzte Element in der Zeile.

Mit den von Ihnen bereitgestellten Beispielen würde ich sagen, dass das erste wie eine bewusste Entwurfsentscheidung aussieht, während das zweite Beispiel (Netflix) wahrscheinlich ist repräsentativer für die kumulative Wirkung einheitlicher Ränder in einer Liste.

2
Charles Wesley

Eigentlich denke ich, dass Ihr zweites Beispiel weniger symetrisch ist als Ihr erstes. Stellen Sie sich den Raum um Elemente in Ihrer Ansicht als zum Element gehörend vor, einen konstanten Rand um jedes Element. Es macht dann plötzlich Sinn, dass zwischen dem Rand der Ansicht und dem ersten Element weniger (halb) so viel Abstand besteht wie zwischen den Elementen selbst. Im letzteren Fall haben Sie das Zweifache des Spielraums, da jeder Artikel seinen eigenen Spielraum erhält.

2
André

Unterschiedlicher Rand innerhalb und außerhalb des Wraps Verstärkung der Inhaltsgruppierung. Durch einen anderen (kleineren oder breiteren) Rand an der Seite wird deutlich, dass die Bilder nicht über den sichtbaren Bereich hinaus fortgesetzt werden, sondern dass die sichtbare Gruppe, die durch die internen Lücken gleicher Breite gebildet wird, vollständig sichtbar ist.

Darüber hinaus ist an den Seiten der Umhüllung häufig kein Platz, sondern nur innerhalb der Säulen (Lücken). Ihr Beispiel zeigt tatsächlich Folgendes: Der Rand an der Seite wird auf die gesamte Seite angewendet, nicht nur auf den Umbruch, wie Sie ihn im Drahtmodell anzeigen.

1
kontur