4 Dinge, die jeder Designer über Whitespace wissen sollte
Leerraum (oder "negativer Raum") ist ein leerer Raum zwischen und um Objekte einer Seite. Elemente von Leerzeichen in grafischen Benutzeroberflächen sind:
- Ränder, Polsterungen und Rinnen
- Platz um Bilder und Grafikobjekte
- Zeilenabstand und Buchstabenabstand innerhalb des Textinhalts
Obwohl einige Leute Whitespace eine Verschwendung wertvoller Bildschirme betrachten, ist es ein wesentliches Element in einem Design. Whitespace ist genauso wichtig wie der Inhalt. Wie Jan Tschichold sagte:
Whitespace ist als aktives Element zu betrachten, nicht als passiver Hintergrund
Alle guten Benutzeroberflächen enthalten richtige Leerzeichenwerte in allen Seitenelementen von oben nach unten. Das Leerzeichen auf einer Seite kann genauso wichtig sein wie der von UI-Elementen belegte Platz, weil Text, Buttons, Logos und andere Objekte Platz zum Atmen brauchen.
In diesem Artikel erfahren Sie, wie Sie Leerräume in Ihren Entwürfen verwenden, um ein sauberes, übersichtliches Erscheinungsbild zu erhalten:
1. Verbessern Sie die Lesbarkeit von Text
Whitespace ist in der Lage, das Lesen erheblich zu vereinfachen, indem es die Menge an Text verringert, die Besucher gleichzeitig sehen. Das Fehlen von Leerzeichen (überladene Seite) lässt die Benutzer nicht den Inhalt lesen. Auf der anderen Seite hat sich gezeigt, dass richtig verwendete Leerzeichen das Textverständnis um bis zu 20% erhöhen, wie von Dmitry Fadejew .
Zwei wichtige Dinge, die Sie bei der Optimierung Ihres Textinhalts beachten sollten, sind Absatzränder und Zeilenabstand (der Abstand zwischen jeder Zeile in Ihrem Text). Letzteres kann die Lesbarkeit eines Texts drastisch verbessern. Im Allgemeinen gilt, je größer der Abstand ist, desto besser wird der Benutzer beim Lesen sein (obwohl zu viel Zeilenabstand die Leitungen trennen kann).
2. Klärung von Beziehungen
Das gesamte Layout ergibt sich aus der Summe seiner Teile und die Inhaltsbeziehungen sind durch umgebende Leerzeichen definiert. Das Gesetz der Nähe besagt, dass Objekte nahe beieinander ähnlich erscheinen. Das Leerzeichen dient in diesem Fall als visueller Hinweis. Schau dir das Bild unten an:
Die Gesetze der Gestalt diktieren, dass Objekte in unmittelbarer Nähe als eine "Einheit" erscheinen; Der weiße Raum fungiert als visueller Hinweis.
Fast jeder, der dieses Bild sieht, bemerkt zwei Gruppen von Kreisen, anstatt nur 12 Kreise. Die Kreise sind alle identisch und der einzige Unterschied zwischen ihnen ist die Menge an Leerzeichen, die sie trennt.
Sie können Objekte gruppieren, indem Sie den Abstand zwischen ihnen verringern und den Abstand zwischen ihnen und anderen Elementen auf der Seite vergrößern.
Für Benutzeroberflächen bedeutet dies, dass Objekte in unmittelbarer Nähe als eine "Einheit" angezeigt werden. Beispielsweise ist es im Kontext von Webformularen sinnvoll, Beschriftungen in der Nähe der relevanten Felder zu platzieren, um ein Objekt zu erstellen. Wenn Etiketten näher an den Feldern platziert werden, wird die Beziehung zwischen ihnen für die Benutzer deutlich.
Informationen werden deutlich klarer kommuniziert, wenn Etiketten näher an den Feldern platziert werden, auf die sie sich beziehen.
3. Aufmerksamkeit erregen
Designer können mit Whitespace kommunizieren, was auf einen Blick am wichtigsten ist. Es gibt eine Beziehung zwischen Distanz und Aufmerksamkeit; größere Entfernung erzwingt Aufmerksamkeit. Das Fehlen anderer Elemente wird nur bestehende Elemente hervorheben. Es ist möglich, ein Leerzeichen zu Ihrem Vorteil zu verwenden - um bestimmte Elemente der Seite zu betrachten. Durch das zusätzliche Auffüllen eines bestimmten Inhaltssegments werden die Nutzer auf diesen Bereich aufmerksam gemacht, weil nichts anderes auf dem Bildschirm Aufmerksamkeit erregen kann. Je mehr Leerzeichen um ein Objekt herum sind, desto mehr wird das Auge darauf gezogen.
4. Erstellen Sie die visuelle Hierarchie
Wenn Leerzeichen richtig verwendet werden, ermöglicht es einer Seite, einen allgemeinen Fluss und eine Balance zu erzeugen, was wiederum hilft, die Absicht des Designs zu kommunizieren. Whitespace kann die gesamte Hierarchie unterstützen. Es erzeugt entweder Symmetrie oder Asymmetrie.
Symmetrie schafft Erinnerung und Harmonie:
Mailchimp, wie Sie sehen, ist ein großer Befürworter von Leerraum in ihren Entwürfen. Wenn Besucher die Homepage scannen, werden sie sofort durch die Schaltfläche "Kostenlos anmelden" aufmerksam gemacht. Mit Symmetrie ist es möglich, ein ausgewogenes Layout mit gleichwertigen rechten und linken Teilen zu erstellen.
Während Asymmetrie Aufmerksamkeit auf sich zieht:
Asymmetrie ist großartig, um Aufmerksamkeit auf einen bestimmten Bereich der Seite zu lenken.
Wenn ein Element einen asymmetrischen Raum verwendet, hebt es sich von anderen umgebenden Elementen ab.
Fazit
Whitespace ist kein verschwendeter Raum, sondern ein leistungsstarkes Design-Tool. Es kann genauso wichtig sein wie der Platz, den Bild-, Text- oder andere Benutzerschnittstellen einnehmen, denn auch ein leerer Raum dient einem Zweck und unterstützt die visuelle Integrität eines Layouts.
Obwohl es ein einfaches Thema zu sein scheint, können Leerräume schwierig zu meistern sein, weil die Anwendung von Leerzeichen sowohl Kunst als auch Wissenschaft ist. Um zu verstehen, wie viel Leerzeichen zum Erstellen eines guten Layouts benötigt wird, ist Übung erforderlich.