it-swarm.com.de

Feld- und Beschriftungsausrichtung mit Leerzeichen

Ich entwerfe ein Formular mit einer typischen 970px breiten Seite. Ich habe versucht, als so viel wie möglich für Etikettenausrichtungen zu lesen zu lesen. Was ist der beste Weg, um eine Fülle von Leerzeichen rechts neben dem Formular zu lösen?

Zum Beispiel sehen Top-Labels wie folgt aus: top labelled form

Während die rechtsbündig beschriftete Form wie folgt aussieht: right-aligned form

Der Vorteil der oberen Beschriftungen besteht darin, dass sie sehr einfach und schnell zu verarbeiten sind. Rechts neben dem Formular befindet sich jedoch ein sehr großer Leerraum und macht die Form größer. Was kann ich tun, um diesen Leerraum zu "reduzieren", da die Webanwendung sehr formulargesteuert ist? Ist es überhaupt wichtig?

Ich mag die rechtsbündigen Beschriftungen, um dieses Problem zu "beheben", aber die Überschrift "Benutzer erstellen" sieht sehr fehl am Platz aus. Wie wird diese Eigenart gelöst, wenn Sie rechtsbündige Etiketten auswählen?

7
TheCloudlessSky

Es gibt verschiedene Möglichkeiten, dies zu tun. Hier sind einige Beispiele:


Wordpress verwendet massive Felder :

enter image description here


Vimeo hat ein interessantes Bild

enter image description here


Twitter hat eine Spalte ausschließlich für den Aufruf zum Handeln und für Hilfemeldungen. Eigentlich denke ich, dass dies eine leistungsstarke und beeindruckende Verwendung von Leerzeichen im Design ist

enter image description here


Moo zentralisiert alles in einer Box und macht das Leerzeichen zu einem Designmerkmal

enter image description here


Lee Munroe gibt ein paar alternative Informationen

enter image description here


Animoto wird doppelt breit

enter image description here


Facebook trennt den Header/Aufruf zum Handeln vom Formular

enter image description here


Aber - Paypal kann das Problem überhaupt nicht lösen! Langweilig, nicht wahr?

enter image description here

6
Roger Attrill

Unter Anmeldeseite von Handcraft und Anmeldebildschirm finden Sie zwei Beispiele, wie ich dieses Problem gelöst habe.

  • Beide Beispiele verwenden zunächst nicht dieselbe 970px-Vorlage wie der Rest der Site. Es ist einfach unnötig, den gesamten Speicherplatz zu beanspruchen, wenn Sie ihn nicht nutzen möchten.
  • Zweitens, da der Schwerpunkt der Seite auf dem Ausfüllen des Formulars liegt, habe ich alles entfernt, was nicht damit zusammenhängt (dies liegt daran, dass wir für die Konvertierung entwerfen, was Sie möglicherweise nicht sind. also denke daran).
  • Auf der Anmeldeseite habe ich die Felder in zwei Spalten aufgeteilt, um die Gesamthöhe zu verringern.
  • Ich habe auch den Körper und die Kopfzeile im Fenster zentriert, um das von Ihnen beschriebene Problem der Kopfzeilenausrichtung zu lösen.
  • Ich habe Formularfelder nicht richtig ausgerichtet, da die Formulare (absichtlich) unglaublich kurz sind und der Platz in diesem Format besser genutzt wird. Ich denke, dass richtig ausgerichtete Felder in Ihrem Formular besser funktionieren, da es sich um ein längeres Formular handelt.

Kurz gesagt, verwenden Sie Leerzeichen als Gestaltungselement und haben Sie keine Angst, einige der Konventionen, auf die Sie stoßen, zu verwechseln.

1
Rahul

Ich denke nicht, dass große Leerzeichen ein Problem sind - der Benutzerfokus ist auf diese Weise viel besser. Manchmal gibt es jedoch einige Designaspekte, und in diesem Fall (die Form ist nicht so lang) sind auch rechtsbündige Beschriftungen in Ordnung. Oben ausgerichtete Beschriftungen sind viel besser zu scannen, verwenden Sie jedoch alles, was Sie möchten. In diesem Fall sind beide geeignet.

0
Csongor Fabian

Normalerweise sind die Etiketten linksbündig.

Eine andere Alternative besteht darin, die Beschriftungen rechts neben den Eingabefeldern zu haben, wie im Kommentarbereich des SE-Blogs: blog.stackoverflow.com

0
awe