Wie man ansprechende und gerichtete agnostische Formen entwarf

Feb 2, 2026

wie man

Egal, ob es sich um einen Anmeldestrom oder einen Mehrsichtsschritt handelt, bildet sich eine der wichtigsten Komponenten des digitalen Produktdesigns - Sie müssen also entwerfen, damit sie effektiv auf mobilen Geräten arbeiten.

So entwerfen Sie Formulare für mobile Geräte, einschließlich eines schnellen Blicks So verwenden Sie FlexBox .

01. Design für vertikale Schriftrolle

A single column layout works better — Ein einzelnes Spaltenlayout funktioniert besser

Unabhängig von der Gerätegröße ist der einfachste Weg, um ein Formular abzuschließen, linear. Mehrere Spalten stören den Impuls eines Benutzers (die Benutzer dürften die inkonsistenten Felder inkonsistent interpretieren, was ein negativer Faktor für die Benutzerfaktabilität ist) und kann dazu führen, dass Benutzer auf horizontales Scrollen zurückgreifen müssen.

Wenn es darum geht, Formulare zu laden, sollten Sie die Einträge in einer Spalte entwerfen: Wenn sich ein Formular in einer einzelnen Spalte befindet, ist der Weg zum Abschluss eine gerade Linie der Seite.

02. Platzieren Sie Etiketten über den Feldern

Place labels above form fields — Stellen Sie Etiketten über Formularfelder ein

Etiketten geben den Benutzern an, was die entsprechenden Eingabefelder bedeuten. Bei der Auswahl, in denen Sie Ihre Etiketten platzieren, haben Sie zwei Optionen: links ausgerichtet oder top ausgerichtet.

Links-ausgerichtete Etiketten funktionieren gut, wenn das Formular auf einem Desktop oder Tablet abgeschlossen ist. Sie sind jedoch eine schreckliche Lösung für mobile Geräte, in denen ein begrenztes Bildschirm vorhanden ist. Da linkausgerichtete Etiketten vor dem Feld sitzen müssen, verlässt der schmale Bildschirm sehr wenig Platz für das Feld selbst - insbesondere wenn sich das Gerät im Porträtmodus befindet. Dies schafft zwei ernsthafte Verwendbarkeitsprobleme:

Das Formularfeld ist nicht breit genug, um den gesamten Input des Benutzers anzuzeigen, wodurch sie wahrscheinlicher, dass sie ihre Antworten wahrscheinlicher machen und zu fehlerhafteren Formen führen, die eingereicht werden
Wenn ein Benutzer mitgeteilt wird, dass sie fehlerhafte Informationen eingegeben haben, haben sie möglicherweise eine schwere Zeit, das Problem zu erkennen und zu fixieren, da sie den gesamten ungültigen Eintrag nicht sehen können

Wenn Sie das Etikett über dem Formularfeld stellen, wenn ein Benutzer von einem mobilen Gerät surft, stellt sicher, dass Benutzer die maximale Breite sehen können, um ihre Details einzugeben, da Sie nicht für das Etikett verwenden müssen.

Das Schreiben Ihrer Etiketten über den Eingabefeldern macht es Ihnen auch viel einfacher, klare und sinnvolle Feldetiketten zu schreiben, da Sie nicht auf ein oder zwei Wörter beschränkt sind.

03. Verwenden Sie TAP-Ziele

TAP-Ziele sollten einfach zu bedienen sein, unabhängig von der Größe des Geräts, auf dem sie angezeigt werden. Größere Ziele (Eingabefelder und Schaltflächen) sind für Benutzer mit niedrigerer Fingerfertigkeit einfacher, unabhängig davon, ob dies ein dauerhafter Zustand ist oder ein temporärer, der durch die Umwelt verursacht wird.

Im Moment ist die größte Zielgröße für Touch-Geräte, sodass Sie zuerst Berührung erstellen müssen. Dies stellt sicher, dass Benutzer nicht vergrößern müssen, um den Text einzugeben oder eine Option auszuwählen. Anklingbare Bereiche sollten der Fettfinger-Regel folgen und nicht auf den umgebenden Bereiche eingreifen: Das durchschnittliche menschliche Fingerkissen ist 10 x 14 mm und der durchschnittliche Fingerspitzen beträgt 8-10 mm, was 10 x 10 mm eine gute Mindest-Touch-Zielgröße erzielt.

Sollte jedoch nicht nur ein TAP-Ziel ordnungsgemäß groß sein, sollten Sie auch sicherstellen, dass zwischen mehreren TAP-Zielen genügend Speicherplatz vorhanden ist. Wenn Sie den Fehler auf mobile SEO-Tools "Tippen Sie auf Zielgröße" auf mobile SEO-Tools erhalten, ist es oft, dass Ihre Tap-Ziele zu nahe beieinander zusammen sind, anstatt das tatsächliche Tap-Ziel zu klein zu sein.

Es kann schwierig sein, Inhalte auf mobilen Geräten zu lesen, sodass die Eingänge 100% und sicherstellen, dass der Text sichergestellt ist, dass der Text auf mindestens 16px (1EM) eingestellt ist, einen großen Unterschied. Auf diese Weise wird keine Pinch-Zoomen oder zusätzliche Schriftrolle erforderlich, um die erforderlichen Informationen zu lesen.

04. Verwenden Sie HTML5-Formularfelder

Mobile Geräte bieten kundenspezifische Softwaretastaturen für verschiedene Eingabetypen, und HTML5-Formularfelder sind der einfachste, um die Benutzererfahrung Ihrer Formulare zu verbessern. Diese Eingabetypen geben dem Browser Hinweise dazu, dass der Typ des Tastaturlayouts für Anzeigen von Tastaturen auf dem Bildschirm angezeigt wird.

Fügen Sie die Eingabetypen von ein Nummer , Email , tel , URL. und Datum , und die Tastatureingabe auf Ihren mobilen Geräten wird aktualisiert, um den Benutzer das Füllen des Formulars einfacher zu gestalten. Es ist nicht erforderlich, dass Sie keine zusätzlichen Klassen an style-Formular-Inputs hinzufügen. Alles, was Sie tun müssen, ist, gültige HTML5-Eingabetypen zu verwenden:

<input type="email" id="input-email">

05. Verwenden Sie FlexBox.

Lassen Sie uns gegenüberstehen - es ist schwierig, ein responsives Layout in HTML zu erstellen. Die meisten von uns haben mit einem oder anderen Punkt mit diesem gekämpft. Obwohl es immer möglich war, Layouts, die sich mit speziellen Technologien erwartet, verhalten sei, war der Prozess noch nie einfach.

Technologien, um mit strukturierten Layouts umzugehen, sind in den Jahren gekommen: Entwickler haben HTML-Frames, HTML-Tabellen, Float-basierte Layouts verwendet, und in letzter Zeit sind verschiedene Grid-Systeme, die von CSS-Frameworks wie z Bootstrap. .

Aber mit dem Aufkommen des HTML-Flexible-Box-Modells (oder Flexbox ), HTML hat schließlich einen Rich Box-Formatierungs-Motor gewonnen, der komplexe Layouts einschließlich HTML-Formulare anspricht.

Flexbox gibt uns große Flexibilität, um schnell schöne Formen zu bauen. Die Schlüsselübergabe über Flexbox ist, dass es sich um ein Container-Manipulationswerkzeug handelt: Es zielt darauf ab, einen effizienteren Weg zum Auslegen, Richten und Verteilen von Raum in einem Container, selbst wenn ihre Größe unbekannt und / oder dynamisch (daher das ist Wort 'flex').

Interessant ist, dass Flexbox uns große Flexibilität gibt, um unser Formular schnell zu bauen, ohne Medienabfragen zu verwenden. Außerdem unterstützen alle aktuellen Browser es.

Unser Webdesignerleitung für FlexBox Der Artikel sagt Ihnen mehr, aber für denn jetzt machen wir etwas Übung und lernen Sie, wie Sie FlexBox nutzen können, um ein responsives Formular zu erstellen. Erste Dinge zuerst, lass uns die HTML-Struktur für unser Formular definieren:

 & lt; Form & GT;
& lt; ul class = "flex" & gt;
Li & gt; & lt; label für = "erster name" & gt; Vorname & lt; / label & gt; & lt; Eingangstyp = "Text" id = "Erster Name" Platzhalter = "Geben Sie hier Ihren Vornamen ein" und geben Sie Ihren Vornamen ein "und gt; & lt; / li & gt;
Li & Gt; & lt; LIBE FOR = "LAST-NAME" & GT; LAST NAME & LT; / LABEL & GT; & lt; Eingangstyp = "Text" ID = "Nachname" Platzhalter = "Geben Sie Ihren Nachnamen hier ein" & Gt; / li & gt;
li. li & gt; & lt; label für = "email" & gt; email & lt; / label & gt; & lt; Eingangstyp = "E-Mail" id = "E-Mail" Platzhalter = "Geben Sie hier Ihre E-Mail-Adresse ein" & gt; & lt; / li & gt;
& lt; li & gt; & lt; label für = "telefon" & gt; phone & lt; / label & gt; & lt; inputyp = "tel" id = "telefon" Platzhalter = "Geben Sie Ihr Telefon hier ein
li. li & gt; & lt; label für = "Nachricht" & gt; message & lt; / label & gt; & lt; TextArea ROW = "6" id = "Meldung" Platzhalter = "Geben Sie Ihre Nachricht hier ein" und gt; & lt; / textarea & gt; & lt; / li & gt;
& lt; li & gt; & lt; Button type = "Senden" & GT; Senden & lt; / button & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; / form & gt;

Beachten Sie, dass jeder der Listenelemente in unserem Formular eine Klasse von hat biegen . Diese Klasse identifiziert den Flex-Container in unserem Formular. Einer der großen Vorteile von Flexbox ist die Fähigkeit, ein beliebiges HTML-Element, um seine Container und Elemente zu definieren.

Sie können FlexBox-Styling an ein beliebiges HTML-Element anwenden, was bedeutet, dass Sie einfach die Elemente und die Reflow-Elemente unabhängig voneinander ausfüllen können. Denken Sie daran, dass Flexbox nur ein Styling-Mechanismus ist, was bedeutet, dass Sie ihn bei WILL hinzufügen und entfernen können.

Lassen Sie uns die Flexbehälter in unserem CSS identifizieren. Darüber hinaus möchten wir die Flexelemente vertikal in der gesamten Querachse zentrieren. Es ist ziemlich einfach zu geben, dass wir nur eine einfache CSS-Regel einrichten müssen:

 .flex li {
Anzeige: Flex;
Flex-Wrap: Wrap;
Ausrichten-Gegenstände: Zentrum;
}

Der nächste Schritt besteht darin, die Breiten für die Flex-Elemente anzugeben. Die Hauptanforderungen:

Etiketten sollten mindestens 100 px und höchstens 200px sein
Formularelemente, die kommen, nachdem die Etiketten mindestens 200px sein sollten

Was gibt uns das? Jedes Etikett und sein zugehöriges Formularelement wird auf einer einzigen horizontalen Zeile angezeigt, wenn die Breite der Form mindestens 300px (Denken Sie daran, dass wir hier recht ausgerichtete Etiketten verwenden).

 .flex & gt; li & gt; Etikette {
Flex: 1 0 100px;
Max-Breite: 200px;
}
.flex & gt; li & gt; Label + * {
Flex: 1 0 200px;
}

Für die Senden-Schaltfläche, die auch ein Flex-Artikel ist, definieren wir ein paar grundlegende Stile:

 .flex li-button {
Marge: Auto;
Polsterung: 22px 46px;
}

Wie Sie sehen, mit minimalem Markup und der Macht von Flexbox haben wir ein responsives Formular gebaut.

Mit mehr Benutzern, die mobile Geräte tätigen, ist es von entscheidender Bedeutung, ein benutzerfreundliches Erlebnis auf einem beliebigen Gerät zu liefern. Der Schlüsselpunkt ist, sich an die Bedürfnisse des Benutzers und den Funktionen des Geräts anzupassen.

Dieser Artikel wurde ursprünglich in Ausgabe 287 von veröffentlicht Netzmagazin. Das Magazin für professionelle Webdesigner und Entwickler bietet die neuesten neuen Webtrends, Technologien und Techniken an. Abonnieren Sie hier Netz.

Zum Thema passende Artikel:

Erstellen Sie ansprechende Formen und Tabellen
Beginnen Sie mit der Web-Zugänglichkeit
7 Tolle Tools zum Testen Ihrer ansprechenden Webdesigns

Wie man ansprechende und gerichtete agnostische Formen entwarf

01. Design für vertikale Schriftrolle

02. Platzieren Sie Etiketten über den Feldern

03. Verwenden Sie TAP-Ziele

04. Verwenden Sie HTML5-Formularfelder

05. Verwenden Sie FlexBox.

wie man - Die beliebtesten Artikel

44 der besten iPad-Verknüpfungen und Gesten für Ipados 2020

Ist Ihr Apple iCloud-Speicher voll? So können Sie den Raum freimachen

Erstellen Sie einen benutzerdefinierten Slack Bot

So codieren Sie Smart Text-Effekte mit CSS

Holen Sie sich mehr von Graphit mit diesen Tipps

Wie geht es mit HTML-Video

Umzug zwischen DAZ Studio und Cinema 4D

Mischtinten mit InDesign erstellen

Kategorien