Sådan designes lydhør og enhedsagnostiske formularer

Sep 11, 2025

hvordan

Uanset om det er en tilmeldingsstrøm eller en multi-vi-stepper, er formularer en af de vigtigste komponenter i digital produktdesign - så du skal designe dem, så de arbejder effektivt på mobile enheder.

Sådan designer du formularer til mobile enheder, herunder et hurtigt kig på Sådan bruger du Flexbox .

01. Design til lodret rulle

A single column layout works better — En enkelt kolonne layout fungerer bedre

Uanset enhedsstørrelsen er den nemmeste måde at fuldføre en form på en lineær måde. Flere kolonner forstyrrer en brugers momentum (brugerne vil sandsynligvis fortolke felterne inkonsekvent, hvilket er en negativ faktor med hensyn til brugervenlighed) og kan resultere i, at brugerne skal ty til vandret rulning.

Når det kommer til at lægge formularer, skal du designe posterne i en kolonne: Hvis en formular er i en enkelt kolonne, er stien til færdiggørelse en lige linje ned på siden.

02. Placer etiketter over felter

Place labels above form fields — Placer etiketter over formularfelter

Etiketter fortæller brugerne, hvad de tilsvarende inputfelter betyder. Når du vælger, hvor du skal placere dine etiketter, har du to muligheder: venstre-justeret eller topjusteret.

Venstrejusterede etiketter fungerer godt, hvis formularen udfyldes på et skrivebord eller tablet. Men de er en forfærdelig løsning til mobile enheder, hvor der er begrænset skærmområde. Da venstrejusterede etiketter skal sidde før feltet, efterlader den smalle skærm meget lidt plads til selve feltet - især hvis enheden er i portrættilstand. Dette skaber to alvorlige brugervenlighedsproblemer:

Formularfeltet vil ikke være stort nok til at vise brugerens hele input, hvilket gør dem mere tilbøjelige til at mistype deres svar og fører til mere fejlagtige former, der indsendes
Når en bruger er underrettet om, at de har indtastet fejlagtige oplysninger, kan de have svært ved at spotte og fastsætte problemet, da de ikke vil kunne se hele ugyldige input

Placering af etiketten over feltet Formular Når en bruger browsing fra en mobilenhed, vil brugerne sikre, at brugerne kan se den maksimale bredde for at indtaste deres detaljer, da du ikke behøver at bruge ethvert til etiketten.

At skrive dine etiketter over indtastningsfelterne gør det også meget lettere for dig at skrive klare og meningsfulde feltmærker, da du ikke vil være begrænset til et eller to ord.

03. Brug TAP-mål

Tryk på mål skal være nemme at bruge, uanset hvilken størrelse enhed, de vises på. Større mål (inputfelter og knapper) er lettere for brugere med lavere fingerfærdighed, om det er en permanent tilstand eller en midlertidig, der er forårsaget af miljøet.

I øjeblikket er den største målstørrelse til berøringsenheder, så du skal designe touch-først. Dette sikrer, at brugerne ikke behøver at zoome ind for at indtaste teksten eller vælge en indstilling. Klikbare områder skal følge fedtfingerreglen og ikke krænke på omkringliggende områder: Den gennemsnitlige humane fingerpude er 10 x 14 mm, og den gennemsnitlige fingertip er 8-10 mm, hvilket gør 10 x 10 mm en god minimumsuge målmålstørrelse.

Men ikke kun bør et TAP-mål være korrekt dimensioneret, du bør også sikre, at der er nok plads mellem flere trykmål. Faktisk, hvis du får funktionen 'Tap målstørrelse' på mobile SEO værktøjer, er det ofte, fordi dine TAP-mål er for tæt sammen, snarere end det faktiske TAP-mål er for lille.

Det kan være svært at læse indhold på mobile enheder, så at indgange 100% og sikre, at teksten er indstillet til mindst 16px (1em) vil gøre en stor forskel. På den måde vil der ikke kræves nogen kniv zoomning eller ekstra rulle for at læse de nødvendige oplysninger.

04. Brug HTML5-formularfelter

Mobil enheder tilbyder brugerdefinerede software tastaturer til forskellige indgangstyper, og HTML5-formularfelter er den eneste nemmeste måde at forbedre brugeroplevelsen af dine former. Disse inputtyper giver tip til browseren om, hvilken type tastaturlayout der skal vises til tastaturer på skærmen.

Inkludere input typer af nummer Vi Email. Vi Tel. Vi URL. og dato , og tastaturindgangen på dine mobilenheder opdateres for at gøre det lettere for brugeren at udfylde formularen. Det kræver ikke, at du tilføjer ekstra klasser til stilformindgange, alt hvad du skal gøre er at bruge gyldige HTML5-indgangstyper:

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

05. Brug Flexbox

Lad os se det - det er svært at skabe et lydhørt layout i HTML. De fleste af os har kæmpet med dette på et eller andet tidspunkt. Selvom det altid har været muligt at lave layouter opfører sig som forventet ved hjælp af specialiserede teknologier, har processen aldrig været let.

Teknologier til at håndtere strukturerede layouter er kommet og gået i årenes løb: Udviklere har brugt HTML-rammer, HTML-borde, flydbaserede layouter, og for nylig, forskellige gittersystemer populariseret af CSS-rammer som f.eks Bootstrap. .

Men med fremkomsten af HTML-fleksible boksemodel (eller Flexbox. ) HTML har endelig fået en rig boksformateringsmotor, der adresserer komplekse layouter, herunder HTML-formularer.

Flexbox giver os stor fleksibilitet til hurtigt at opbygge smukke former. Den vigtigste ting at forstå om Flexbox er, at det er et containermanipulationsværktøj: Det sigter mod at give en mere effektiv måde at lægge ud, justere og distribuere plads blandt varer i en beholder, selv når deres størrelse er ukendt og / eller dynamisk (dermed Word 'Flex').

Hvad der er interessant, er Flexbox giver os stor fleksibilitet til hurtigt at opbygge vores formular uden at bruge nogen medie forespørgsler. Plus, alle aktuelle browsere understøtter det.

Vores Web Designer Guide til Flexbox Artiklen fortæller dig mere, men lad os nu gøre en øvelse og lære at udnytte Flexbox for at skabe en lydhør form. Første ting først, lad os definere HTML-strukturen for vores form:

 & lt; form & gt;
& lt; ul klasse = "flex" & gt;
& lt; li & gt; label for = "første navn" & gt; fornavn & lt; / label & gt; & lt; input type = "tekst" id = "første navn" placeholder = "Indtast dit fornavn her" & GT; & lt; / li & gt;
& lt; li & gt; etiket for = "sidste navn" & gt; efternavn & lt; / label & gt; & lt; input type = "text" id = "sidste navn" placeholder = "Indtast dit efternavn her" & GT; & lt; / li & gt;
& lt; li & gt; Etiket for = "email" & gt; e-mail & lt; / label & gt; & lt; input type = "Email" ID = "Email" Placeholder = "Indtast din email her" & gt; / lt; / li & gt;
& lt; li & gt; label for = "telefon" & gt; telefon & lt; / label & gt; & lt; input type = "tlf" id = "telefon" placeholder = "Indtast din telefon her" & GT; / lt; / li & gt;
& lt; li & gt; label for = "besked" & gt; besked & lt; / label & gt; & lt; textarea rows = "6" ID = "besked" placeholder = "Indtast din besked her" & GT; / LT; / Textarea & GT; & lt; / li & gt;
& lt; Li & GT; Button Type = "Send" & GT; Send & LT; / Button & GT; & lt; / li & gt;
& lt; / ul & gt;
& lt; / form & gt;

Bemærk, at hver af listelementerne i vores formular har en klasse af Flex. . Denne klasse identificerer Flex-beholderen i vores form. En af de store fordele ved Flexbox er dens evne til at bruge ethvert HTML-element til at definere sine beholdere og elementer.

Du kan anvende Flexbox Styling til ethvert HTML-element, hvilket betyder, at du nemt kan genoprette og reflow elementer uafhængigt af hinanden. Husk, at FlexBox er blot en stylingmekanisme, hvilket betyder at du kan tilføje og fjerne det på vilje.

Lad os identificere Flex Containers i vores CSS. Derudover vil vi lodret centrere flexelementerne på tværs af tværsaksen. Det er ret nemt at angive, at vi bare skal oprette en simpel CSS-regel:

 .flex li {
Display: Flex;
Flex-wrap: Wrap;
Juster-elementer: Center;
}

Det næste trin er at angive bredderne for flexelementerne. Hovedkravene:

Etiketter skal være mindst 100px og højst 200px
Form elementer, der kommer efter etiketterne, skal være mindst 200px

Hvad giver dette os? Hver etiket og dets tilknyttede formelement vil blive vist på en enkelt vandret række, når bredden af formularen totaler mindst 300px (husk, vi bruger højrejusterede etiketter her).

 .flex & gt; li & gt; etiket {
Flex: 1 0 100px;
Max-bredde: 200px;
}
.flex & gt; li & gt; Etiket + * {
Flex: 1 0 200px;
}

Endelig definerer vi for indsendelsesknappen, som også er en FLEX-element, et par grundlæggende stilarter:

 .flex li-knap {
Margin: Auto;
Padding: 22px 46px;
}

Som du kan se, med minimal markering og kraften i Flexbox, har vi opbygget en responsiv form.

Med flere brugere, der transporterer mobile enheder, er det afgørende at levere en brugervenlig oplevelse på en hvilken som helst enhed. Nøglepunktet er at tilpasse sig både brugerens behov og enhedens funktioner.

Denne artikel blev oprindeligt offentliggjort i udstedelse 287 af Net Magazine. , magasinet til professionelle webdesignere og udviklere - tilbyder de nyeste nye webtendenser, teknologier og teknikker. Abonner på nettet her.

Relaterede artikler:

Skabe lydhøringsformer og tabeller
Kom godt i gang med webtilgængelighed
7 gode værktøjer til at teste dine responsive webdesign

Sådan designes lydhør og enhedsagnostiske formularer

01. Design til lodret rulle

02. Placer etiketter over felter

03. Brug TAP-mål

04. Brug HTML5-formularfelter

05. Brug Flexbox

hvordan - Mest populære artikler

Sådan implementeres lys eller mørke tilstande i CSS

Brug penneværktøjet og teksturerne til at tilføje dybde i Photoshop

5 ting, du ikke vidste, at du kunne gøre med HTML

Hvad er nyt i vinkel 4?

Mal et portræt som de gamle mestere

Sådan oprettes hår i Cinema 4D

Hemmeligheden til at male som Monet

Sådan gør du en fotorealistisk himmel

Kategorier