Hur man konstruerar responsiva och anordning-agnostiska former

Sep 11, 2025
Hur

Oavsett om det är ett anmälningsflöde eller en multi-view-steg, är formulär en av de viktigaste komponenterna i digital produktdesign - så du måste designa dem så att de fungerar effektivt på mobila enheter.

Så här designerar du formulär för mobila enheter, inklusive en snabb titt på Hur man använder Flexbox .

01. Design för vertikal scroll

A single column layout works better

En enda kolumnlayout fungerar bättre

Oavsett anordningens storlek är det enklaste sättet att slutföra en form i ett linjärt sätt. Flera kolumner stör en användares momentum (användarna kommer sannolikt att tolka fälten inkonsekvent, vilket är en negativ faktor när det gäller användbarhet) och kan leda till att användarna måste tillgripa horisontell rullning.

När det gäller att lägga ut formulär, bör du designa posterna i en kolumn: Om en form är i en enda kolumn är sökvägen till färdigställt en rak linje nerför sidan.

02. Placera etiketter ovanför fält

Place labels above form fields

Placera etiketter ovanför formulärfält

Etiketter berättar för användare vad motsvarande inmatningsfält betyder. När du väljer var du ska placera dina etiketter har du två alternativ: vänsterjusterad eller toppjusterad.

Vänsterjusterade etiketter fungerar bra om formuläret är färdigt på ett skrivbord eller surfplatta. Men de är en hemsk lösning för mobila enheter där det finns begränsad skärmgård. Eftersom vänsterjusterade etiketter måste sitta före fältet, lämnar den smala skärmen mycket lite utrymme för själva fältet - speciellt om enheten är i stående läge. Detta skapar två allvarliga användbarhetsfrågor:

  • Formfältet är inte tillräckligt stort för att visa användarens hela ingång, vilket gör dem mer benägna att misstänka sina svar och leder till att mer felaktiga former lämnas in
  • När en användare anmälts att de har angett felaktig information kan de ha svårt att spotta och fixa problemet eftersom de inte kommer att kunna se hela den ogiltiga ingången

Placera etiketten ovanför formfältet när en användare bläddrar från en mobilenhet säkerställer att användarna kan se den maximala bredden för att mata in sina uppgifter, eftersom du inte behöver använda någon för etiketten.

Skriva dina etiketter ovanför inmatningsfälten gör det också mycket lättare för dig att skriva tydliga och meningsfulla fältetiketter, eftersom du inte kommer att vara begränsad till ett eller två ord.

03. Använd kranmål

Tryckmål ska vara lätta att använda oavsett vilken storlek de visas på. Större mål (inmatningsfält och knappar) är enklare för användare med lägre fingerfärdighet, oavsett om det är ett permanent tillstånd eller en tillfällig orsakad av miljön.

För närvarande är den största målstorleken för touch-enheter, så du måste designa Touch-First. Detta garanterar att användarna inte behöver zooma in för att ange texten eller välja ett alternativ. Clickbara områden bör följa fettfingerregeln och inte inkräkta på omgivande områden: den genomsnittliga mänskliga fingerkudden är 10 x 14 mm och den genomsnittliga fingertoppet är 8-10 mm, vilket gör 10 x 10 mm en bra minsta tryckmålstorlek.

Men inte bara om ett kranmål är korrekt storlek, du bör också se till att det finns tillräckligt med utrymme mellan flera kranmål. Faktum är att om du får felet "Tryck på målstorleken" på mobila SEO-verktyg, är det ofta för att dina kranmål är för nära varandra, snarare än det faktiska kranmålet är för litet.

Det kan vara svårt att läsa innehåll på mobila enheter, så att ingångarna 100% och säkerställer texten är inställd på minst 16 PX (1EM) kommer att göra stor skillnad. På det sättet krävs ingen nypa zoomning eller extra bläddring för att läsa den nödvändiga informationen.

04. Använd HTML5-formulärfält

Mobila enheter erbjuder anpassade programtangentbord för olika ingångstyper, och fälten HTML5 är det enda enklaste sättet att förbättra användarupplevelsen av dina former. Dessa ingångstyper ger tips till webbläsaren om vilken typ av tangentbordslayout som ska visas för tangentbord på skärmen.

Inkludera ingångstyperna av siffra , e-post , tel , url och datum , och tangentbordets ingång på dina mobila enheter uppdateras för att underlätta användaren att fylla i formuläret. Det kräver inte att du lägger till extra klasser för att skriva ut matningar, allt du behöver göra är att använda giltiga HTML5-ingångstyper: 

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

05. Använd Flexbox

Låt oss möta det - det är svårt att skapa en lyhörd layout i HTML. De flesta av oss har kämpat med detta på en eller annan gång. Även om det alltid varit möjligt att göra layouter beträda som förväntat med specialiserad teknik, har processen aldrig varit lätt.

Teknik för att hantera strukturerade layouter har kommit och gått genom åren: utvecklarna har använt HTML-ramar, HTML-tabeller, floatbaserade layouter, och, mer nyligen, olika nätsystem populariserade av CSS-ramverk som Bootstrap .

Men med tillkomsten av HTML-flexibla boxmodell (eller Flexbox ), Har HTML äntligen fått en rikboxformatmotor som behandlar komplexa layouter, inklusive HTML-formulär.

Flexbox ger oss stor flexibilitet för att snabbt bygga vackra former. Det viktigaste att förstå om Flexbox är att det är ett containermanipulationsverktyg: det syftar till att ge ett effektivare sätt att lägga ut, justera och distribuera utrymme bland föremål i en behållare, även när deras storlek är okänd och / eller dynamisk (därmed ord "flex").

Det som är intressant är att Flexbox ger oss stor flexibilitet för att snabbt bygga vår form utan att använda några medifrågor. Dessutom stöder alla aktuella webbläsare det.

Vår Webbdesigners guide till Flexbox Artikel berättar mer, men för nu låt oss göra lite träning och lära sig att utnyttja FlexBox för att skapa en responsiv form. Första saker först, låt oss definiera HTML-strukturen för vår form: 

 & lt; form & gt;
& lt; ul klass = "flex" & gt;
Li & GT; & LT; Etikett för = "Förnamn" & GT; Förnamn & LT; Ingångstyp = "Text" ID = "Förnamn" PlaceHolder = "Ange ditt förnamn här" & GT; & LT; / li & gt;
& LT; Li & GT; & LT; Etikett för = "Efternamn" / GT; Efternamn & LT; / Etikett & GT; & LT; Ingångstyp = "Text" ID = "Efternamn" PlaceHolder = "Ange ditt efternamn här" & GT; & LT; / li & gt;
& lt; Li & GT; Email; Email; Email & LT; E-post: "Email" ID = "Email" Placeholder = "Ange ditt mail här" & GT; & LT; / Li & GT;
Li & GT; Etikett för = "Telefon" & GT; Telefon & LT; Ingångstyp = "TEL" ID = "TELEFON" PLACEHOLDER = "Ange telefonen här" & GT; & LT; / Li & GT;
& LT; LI & GT; & LT; MEDDELANDE FOR = "MEDDELANDE" & GT; & LT; TEXTAREA ROWS = "6" ID = "MESSAGE" PLACEHOLDER = "Ange ditt meddelande här" & GT; / LT; ​​/ TextArea & GT; Li & GT;
& lt; li & gt; & lt; Button Type = "Skicka" & GT; skicka & lt; / li & gt;
& lt; / ul & gt;
& LT; / Form & GT;

Observera att var och en av listobjekten i vår form har en klass av böja . Den här klassen identifierar flexbehållaren i vår form. En av de stora fördelarna med FlexBox är dess förmåga att använda något HTML-element för att definiera sina behållare och element.

Du kan tillämpa FlexBox-styling till något HTML-element, vilket innebär att du enkelt kan återställa och återspegla element oberoende av varandra. Tänk på att Flexbox bara är en stylingmekanism, vilket innebär att du kan lägga till och ta bort den på Will.

Låt oss identifiera flexbehållarna i vår CSS. Dessutom vill vi vertikalt centrera flexobjekten över tväraxeln. Det är ganska lätt att specificera att vi bara behöver konfigurera en enkel CSS-regel: 

 .flex li {
Visa: Flex;
Flex-wrap: Wrap;
Justera: Center;
}

Nästa steg är att ange bredden för flexobjekten. De viktigaste kraven:

  • Etiketter ska vara minst 100px och högst 200px
  • Formelement som kommer efter etiketterna ska vara minst 200px

Vad ger detta oss? Varje etikett och dess tillhörande formelement kommer att visas på en enda horisontell rad när bredden på formuläret uppgår till minst 300px (kom ihåg, vi använder högerjusterade etiketter här). 

 .flex & gt; Li & GT; etikett {
Flex: 1 0 100px;
MAX-Bredd: 200PX;
}
.FLEX & GT; Li & GT; etikett + * {
Flex: 1 0 200px;
}

Slutligen, för inlämningsknappen, som också är ett flexobjekt, definierar vi några grundläggande stilar: 

 .flex li button {
Marginal: Auto;
Padding: 22px 46px;
}

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

Med fler användare som transporterar mobila enheter är det viktigt att leverera en användarvänlig upplevelse på vilken enhet som helst. Nyckelpunkten är att anpassa sig till både användarens behov och enhetens kapacitet.

Denna artikel publicerades ursprungligen i utgåva 287 av nätmagasin , tidningen för professionella webbdesigners och utvecklare - som erbjuder de senaste nya webbtrender, teknik och tekniker. Prenumerera på nätet här.

Relaterade artiklar:

  • Skapa mottagliga former och tabeller
  • Kom igång med webbtillgänglighet
  • 7 Bra verktyg för att testa dina responsiva webbdesigner

Hur - Mest populära artiklar

17 tips för att dra manga ansikten

Hur Sep 11, 2025

(Bildkredit: Zakary Lee) Manga ansikten är en viktig del av ritning manga. Jag började min teckning karriär genom ..

Bygg adaptiva layouter utan mediafrågor

Hur Sep 11, 2025

Under lång tid försökte jag nå en perfekt visuell komposition på webbsidor. Jag har haft massor av smärta med CSS-brytpunkter i mitt dagliga arbete och var aldrig helt nöjd med vanliga..

Hur man skapar glödande färger med oljemålningar

Hur Sep 11, 2025

Blir ombedd att beskriva mina målningsteknik är udda för mig, och uppriktigt är det svårt att göra. Jag är ..

Gör interaktiva 3D-typografi effekter

Hur Sep 11, 2025

Typografi har alltid spelat en stor roll i någon designers arsenal av verktyg, eftersom de väljer rätt typsnitt som kommer att..

Hur man gör läckra texturer med pennor

Hur Sep 11, 2025

När du lär dig hur man ritar Ett stilleben konstverk, det är viktigt att skapa intresse och engagera tittaren m..

5 tips för skulptering i dubbel-snabb tid

Hur Sep 11, 2025

Skulptera en riktigt detaljerad 3D-varelse kan ta dagar - men det är fortfarande fantastiskt hur långt du kan få på en timme. Denna modell av en nubisk ibex skulpterades av Krysta..

Skapa perspektiv genom att vrida dina texturer i Photoshop

Hur Sep 11, 2025

Jag är en fast troende som du inte borde rent förlita sig på programvara för att göra jobbet för dig. En bra konstnär bord..

15 Tips för optimering av tvärenhet

Hur Sep 11, 2025

Design för alla enheter! Anna Dahlström kommer att prata om vikten av ..

Kategorier