Hvordan designe responsive og enhetlige agnostiske skjemaer

Sep 11, 2025

hvordan

[1. 3]

Enten det er en registreringsstrøm eller en multi-view stepper, er skjemaer en av de viktigste komponentene i digital produktdesign - så du må designe dem slik at de fungerer effektivt på mobile enheter.

Slik design skjemaer for mobile enheter, inkludert en rask titt på Slik bruker du FlexBox .

01. Design for vertikal rulle

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

Uavhengig av enhetsstørrelsen, er den enkleste måten å fullføre et skjema på en lineær måte. Flere kolonner forstyrrer en brukers momentum (brukerne vil sannsynligvis tolke feltene inkonsekvent, som er en negativ faktor når det gjelder brukervennlighet) og kan resultere i at brukere må ty til horisontal rulling.

Når det gjelder å legge ut skjemaer, bør du designe oppføringene i en kolonne: Hvis et skjema er i en enkelt kolonne, er banen til ferdigstillelse en rett linje nedover siden.

02. Plasser etiketter over felt

Place labels above form fields — Plasser etiketter over skjemafelter

Etiketter forteller brukerne hva de tilsvarende inntastingsfeltene betyr. Når du velger hvor du skal plassere etikettene dine, har du to alternativer: venstrejustert eller toppjustert.

Venstrejusterte etiketter fungerer godt hvis skjemaet blir fullført på skrivebordet eller nettbrettet. Imidlertid er de en forferdelig løsning for mobile enheter hvor det er begrenset skjerm. Siden venstrejusterte etiketter må sitte foran feltet, etterlater den smale skjermen svært lite plass til feltet selv - spesielt hvis enheten er i stående modus. Dette skaper to alvorlige brukervennlige problemer:

Skjemafeltet vil ikke være bredt nok til å vise brukerens hele inngang, noe som gjør dem mer sannsynlig å feile sine svar og føre til at mer feilaktige former blir sendt inn
Når en bruker blir varslet om at de har skrevet feil informasjon, kan de ha det vanskelig å spotte og fikse problemet, da de ikke vil kunne se hele ugyldig inngang

Plassere etiketten over skjemafeltet Når en bruker surfer fra en mobilenhet, vil brukerne se at brukerne kan se maksimal bredde for å legge inn detaljene, siden du ikke trenger å bruke opp for etiketten.

Skrive etikettene over inngangsfeltene gjør det også mye lettere for deg å skrive klare og meningsfulle feltetiketter, da du ikke vil være begrenset til ett eller to ord.

03. Bruk TAP-mål

Trykk på mål bør være enkle å bruke uansett hvilken størrelse på enheten de vises på. Større mål (inngangsfelt og knapper) er lettere for brukere med lavere fingerferdighet, enten det er en permanent tilstand eller en midlertidig en som er forårsaket av miljøet.

For øyeblikket er den største målstørrelsen for berøringsenheter, så du må designe Touch-First. Dette sikrer at brukerne ikke må zoome inn for å taste inn teksten eller velge et alternativ. Klikkbare områder bør følge fettfingerregelen og ikke innrekke på omkringliggende områder: Den gjennomsnittlige menneskelige fingerpute er 10 x 14mm, og den gjennomsnittlige fingertuppen er 8-10mm, noe som gjør 10 x 10mm en god minimum Touch-målstørrelse.

Men ikke bare bør et trykkmål være riktig dimensjonert, du bør også sørge for at det er nok mellomrom mellom flere trykkmål. Faktisk, hvis du får "Trykk på Målstørrelse" -feilen på Mobile SEO-verktøy, er det ofte fordi trykkmålene dine er for tett sammen, i stedet for at det faktiske trykkmålet er for lite.

Det kan være vanskelig å lese innhold på mobile enheter, slik at inngangene 100% og sikrer at teksten er satt til minst 16px (1em) vil gjøre en stor forskjell. På den måten vil ingen klypezooming eller ekstra rulle være nødvendig for å lese den nødvendige informasjonen.

04. Bruk HTML5-skjemafelter

Mobile-enheter tilbyr tilpassede programvare tastaturer for forskjellige inngangstyper, og HTML5-skjemafelt er den enkleste måten å forbedre brukeropplevelsen til skjemaene dine. Disse inngangstyper gir hint til nettleseren om hvilken type tastaturoppsett som skal vises for tastatur på skjermen.

Inkludere inngangstyper av Nummer , e-post , TEL. , URL. og Dato , og tastaturinngangen på de mobile enhetene vil oppdatere for å gjøre det lettere for brukeren å fylle ut skjemaet. Det krever ikke at du legger til ekstra klasser i stilskjemainnganger, alt du trenger å gjøre er å bruke gyldige HTML5-inngangstyper:

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

05. Bruk FlexBox.

La oss innse det - det er vanskelig å skape et responsivt layout i HTML. De fleste av oss har slitt med dette på et eller annet tidspunkt. Selv om det alltid har vært mulig å gjøre layoutene oppføre seg som forventet ved hjelp av spesialiserte teknologier, har prosessen aldri vært lett.

Teknologier for å håndtere strukturerte layouter har kommet og gått gjennom årene: Utviklere har brukt HTML-rammer, HTML-bord, Float-baserte layouter, og nyere, forskjellige rutenettsystemer popularisert av CSS-rammer som Støvelhempe .

Men med adventen av HTML-fleksibel boksmodellen (eller Flexbox. ), HTML har endelig fått en rik boksformateringsmotor som adresserer komplekse layouter, inkludert HTML-skjemaer.

Flexbox gir oss stor fleksibilitet for å raskt bygge vakre former. Den viktigste tingen å forstå om FlexBox er at det er et container manipulasjonsverktøy: det tar sikte på å gi en mer effektiv måte å legge ut, justere og distribuere plass mellom elementer i en beholder, selv når størrelsen er ukjent og / eller dynamisk (derav ord 'flex').

Det som er interessant er at Flexbox gir oss stor fleksibilitet for å raskt bygge vårt skjema uten å bruke noen medieforespørsler. I tillegg støtter alle nåværende nettlesere det.

Våre Webdesignerens guide til FlexBox Artikkelen forteller deg mer, men for nå, la oss gjøre noe praksis og lære å dra nytte av FlexBox for å skape en responsiv form. Første ting først, la oss definere HTML-strukturen for vårt skjema:

 & lt; form & gt;
& lt; ul klasse = "flex" & gt;
& lt; LI & GT; & lt; Label for = "First-Name" & GT; Fornavn & LT; / Label & GT; & LT; Input Type = "Tekst" ID = "Første navn" Placeholder = "Skriv inn ditt fornavn her" & gt; / li & gt;
& lt; Li & gt; & lt; Label for = "Senknavn" & gt; etternavn & lt; / label & gt; & lt; input type = "tekst" id = "sistnavn" plassholder = "Skriv inn etternavnet ditt her" & gt; / li & gt;
& lt; LI & GT; & lt; Label for = "Email" & gt; e-post & lt; / label & gt; & lt; input type = "email" id = "email" placeholder = "Skriv inn din epost her" & gt;
& lt; Li & GT; & lt; Label for = "Telefon" & GT; Telefon & LT; / Label & GT; & LT; Input Type = "TEL" ID = "Telefon" Placeholder = "Skriv inn telefonen din her" & gt;
& lt; Li & GT; & Lt; Label for = "Melding" & gt; Melding & LT; / Label & GT; li & gt;
& lt; button type = "Send" & gt; Send; / Li & GT;
lt; / ul & gt;
& lt; / form & gt;

Legg merke til at hver av listen-elementene i vårt skjema har en klasse av flex. . Denne klassen identifiserer flexbeholderen i vårt skjema. En av de store fordelene med FlexBox er dens evne til å bruke ethvert HTML-element for å definere sine beholdere og elementer.

Du kan bruke FlexBox styling til ethvert HTML-element, noe som betyr at du enkelt kan restylle og reflowe elementer uavhengig av hverandre. Husk at FlexBox bare er en styling mekanisme, noe som betyr at du kan legge til og fjerne det på vilje.

La oss identifisere flexbeholderne i våre CSS. I tillegg vil vi vertikalt sentere flexelementene over kryssaksen. Det er ganske enkelt å spesifisere at vi bare trenger å sette opp en enkel CSS-regel:

 .flex li {
Skjerm: Flex;
flex-wrap: wrap;
Justeringsartikler: Senter;
}

Det neste trinnet er å spesifisere bredder for flexelementene. Hovedkravene:

Etiketter bør være minst 100px og maksimalt 200px
Form elementer som kommer etter at etikettene skal være minst 200px

Hva gir dette oss? Hver etikett og dens tilhørende formelement vil bli vist på en enkelt horisontal rad når bredden på skjemaet utgjør minst 300px (Husk at vi bruker høyrejusterte etiketter her).

 .Flex & gt; li & gt; Etikett {
flex: 1 0 100px;
Maks bredde: 200px;
}
.Flex & gt; li & gt; Etikett + * {
flex: 1 0 200px;
}

Til slutt, for send-knappen, som også er et flex-element, definerer vi noen grunnleggende stiler:

 .Flex LI-knappen {
Margin: Auto;
Padding: 22px 46px;
}

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

Med flere brukere som bærer mobile enheter, er det viktig å levere en brukervennlig opplevelse på en hvilken som helst enhet. Hovedpunktet er å tilpasse seg både brukerens behov og enhetens evner.

Denne artikkelen ble opprinnelig publisert i utgave 287 av Net Magazine. , magasinet for profesjonelle webdesignere og utviklere - tilbyr de nyeste nye webtrender, teknologier og teknikker. Abonner på nettet her.

Relaterte artikler:

Lag responsive former og tabeller
Kom i gang med webtilgjengelighet
7 gode verktøy for å teste dine responsive webdesign

Hvordan designe responsive og enhetlige agnostiske skjemaer

01. Design for vertikal rulle

02. Plasser etiketter over felt

03. Bruk TAP-mål

04. Bruk HTML5-skjemafelter

05. Bruk FlexBox.

hvordan - Mest populære artikler

Hvordan øke hastigheten på og optimalisere WordPress-nettstedene

Bygg adaptive layouter uten medieforespørsler

Hvordan lage en super-realistisk fantasy skapning

Hvordan bygge en progressiv web app

Hvordan lage glasur med akvarell

Kom i gang med WebGL ved hjelp av tre.js

Hvordan designe et bokomslag i InDesign

Oppdag stilen og substansen av typografi

Kategorier