Ontwerpen van responsieve en apparaat-agnostische vormen

Sep 11, 2025

Procedures

Of het nu gaat om een aanmeldingsstroom of een multi-view-stappen, formulieren zijn een van de belangrijkste componenten van Digital Product Ontwerp - dus u moet ze ontwerpen, zodat ze effectief werken op mobiele apparaten.

Hier is het ontwerpen van formulieren voor mobiele apparaten, inclusief een snelle blik Hoe flexbox te gebruiken

01. Ontwerp voor verticale scroll

A single column layout works better — Een enkele kolomlay-out werkt beter

Ongeacht de grootte van het apparaat, de gemakkelijkste manier om een vorm te voltooien, is in een lineaire manier. Meerdere kolommen verstoren het momentum van een gebruiker (de gebruikers zullen waarschijnlijk de velden in overeenstemming interpreteren, wat een negatieve factor is in termen van bruikbaarheid) en kan ertoe leiden dat gebruikers het toevlucht nemen tot horizontale scrollen.

Als het gaat om het instellen van formulieren, moet u de vermeldingen in één kolom ontwerpen: als een formulier in een enkele kolom staat, is het pad naar voltooiing een rechte lijn door de pagina.

02. Plaats labels boven velden

Place labels above form fields — Plaats labels boven formuliervelden

Labels vertellen gebruikers wat de bijbehorende invoervelden betekenen. Bij het kiezen van waar u uw labels moet plaatsen, heeft u twee opties: links uitgelijnd of top-uitgelijnd.

Linker-uitgelijnde labels werken goed als het formulier wordt voltooid op een bureaublad of tablet. Ze zijn echter een vreselijke oplossing voor mobiele apparaten waar er beperkte screen landgoed is. Aangezien de linker uitgelijnde labels voor het veld moeten zitten, laat het smalle scherm heel weinig ruimte voor het veld zelf - vooral als het apparaat zich in de portretmodus bevindt. Dit creëert twee ernstige bruikbaarheidsproblemen:

Het formulierveld is niet breed genoeg om de volledige ingang van de gebruiker weer te geven, waardoor ze meer kans hebben om hun antwoorden te mist en leidt tot meer foutieve formulieren die worden ingediend
Wanneer een gebruiker op de hoogte is dat ze onjuiste informatie hebben aangegaan, hebben ze mogelijk het moeilijk om het probleem te spotten en te bevestigen, omdat ze de volledige ongeldige invoer niet kunnen zien

Het etiket plaatsen boven het formulierveld Wanneer een gebruiker op zoek is naar een mobiel apparaat, zorgt ervoor dat gebruikers de maximale breedte kunnen zien om hun gegevens in te voeren, omdat u geen voor het label hoeft te gebruiken.

Het schrijven van uw labels boven de ingangsvelden maakt het ook veel gemakkelijker voor u om duidelijke en zinvolle veldetiketten te schrijven, omdat u niet beperkt bent tot een of twee woorden.

03. Gebruik tapdoelen

Tapdoelstellingen moeten eenvoudig te gebruiken zijn, ongeacht welke maat van het apparaat ze worden weergegeven. Grotere doelen (invoervelden en knoppen) zijn gemakkelijker voor gebruikers met een lagere behendigheid, of dat nu een permanente voorwaarde is of een tijdelijke veroorzaakt door het milieu.

Op dit moment is de grootste doelgrootte voor aanraakapparaten, dus u moet eerst het touch-first ontwerpen. Dit zorgt ervoor dat gebruikers niet moeten inzoomen om de tekst in te voeren of een optie te selecteren. Klikbare gebieden moeten de vat vingerregel volgen en niet inbreuk maken op de omliggende gebieden: het gemiddelde menselijke vingerpad is 10 x 14 mm en het gemiddelde vingertop is 8-10 mm, waardoor 10 x 10 mm een goede minimale aanraakdoelgrootte maakt.

Maar niet alleen moet een tikdoel goed zijn afgericht, u moet er ook voor zorgen dat er voldoende ruimte is tussen meerdere tapdoelstellingen. Als u in feite de fout 'Tapdoelgrootte' krijgt op mobiele SEO-gereedschappen, is het vaak omdat uw kraandoelstellingen te dicht bij elkaar zijn, in plaats van het daadwerkelijke kraandoel te klein te zijn.

Het kan moeilijk zijn om inhoud op mobiele apparaten te lezen, dus het maken van de ingangen 100% en ervoor zorgen dat de tekst is ingesteld op ten minste 16px (1em) zal een groot verschil maken. Op die manier is er geen pinchelen of extra scroll vereist om de vereiste informatie te lezen.

04. Gebruik HTML5-formuliervelden

Mobiele apparaten bieden aangepaste softwaretoetsenborden voor verschillende invoertypen en HTML5-formuliervelden zijn de eenvoudigste manier om de gebruikerservaring van uw formulieren te verbeteren. Deze invoertypen geven hints aan de browser over welk type toetsenbordindeling wordt weergegeven voor toetsenborden op het scherm.

Neem de invoertypen op van aantal e-mail tel url en datum en de toetsenbordinvoer op uw mobiele apparaten wordt bijgewerkt om het voor de gebruiker gemakkelijker te maken om het formulier in te vullen. Het vereist niet dat u extra klassen toevoegt aan stijlformulieringangen, alles wat u hoeft te doen, is om geldige HTML5-invoertypen te gebruiken:

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

05. Gebruik FLEXBOX

Laten we het onder ogen zien - het is moeilijk om een responsieve lay-out in HTML te creëren. De meesten van ons hebben hiermee geworsteld op een bepaald punt of een ander. Hoewel het altijd mogelijk is om lay-outs te laten gedragen, zoals verwacht met behulp van gespecialiseerde technologieën, is het proces nooit gemakkelijk geweest.

Teigen technologieën met gestructureerde lay-outs zijn over de jaren heen gegaan: ontwikkelaars hebben HTML-frames, HTML-tabellen, op float gevestigde lay-outs gebruikt, en, meer recentelijk, verschillende rastersystemen die worden gepopulariseerd door CSS-frameworks zoals Bootstrap

Maar met de komst van het HTML-flexibele vakmodel (of Flexbox ), HTML heeft eindelijk een rijke box-formattering opgedaan die de complexe lay-outs aanpakt, inclusief HTML-formulieren.

Flexbox geeft ons grote flexibiliteit voor het snel bouwen van mooie vormen. Het belangrijkste ding om te begrijpen over Flexbox is dat het een container manipulatie-tool is: het is bedoeld om een efficiëntere manier te bieden om ruimte uit te lijnen, uitlijnen en distribueren van de ruimte in een container, zelfs wanneer hun grootte onbekend is en / of dynamisch is (vandaar woord 'flex').

Wat interessant is, is dat Flexbox ons grote flexibiliteit geeft om snel onze vorm te bouwen zonder media-query's te gebruiken. Bovendien ondersteunen alle huidige browsers het.

Onze Web Designer's Guide to Flexbox Artikel vertelt je meer, maar laten we nu wat oefenen en leren hoe je te profiteren van FlexBox om een responsieve vorm te creëren. Eerste dingen eerst, laten we de HTML-structuur definiëren voor onze vorm:

 & lt; formulier & gt;
& LT; UL-klasse = "Flex" & GT;
& LT; LI & GT; & LT; Label voor = "First-Name" & GT; Eerste naam & LT; / Label & GT; & LT; INPUT TYPE = "Tekst" ID = "Eerste-naam" Placeholder = "Voer hier uw voornaam in" & GT; & LT; / LI & GT;
& LT; LI & GT; & LT; Label voor = "LAST-NAAM" & GT; LAATSTE NAAM & LT; / LABEL & GT; & LT; INPUT TYPE = "Tekst" ID = "Laatste naam" Placeholder = "Voer hier uw achternaam in" & GT; & LT; / LI & GT;
& LT; LI & GT; & LT; Label voor = "E-mail" & GT; Email & LT; / Label & GT; & LT; INPUT TYPE = "E-mail" ID = "E-mail" Placeholder = "Voer hier uw e-mailadres in" & GT; & LT; / LI & GT;
& LT; LI & GT; & LT; Label voor = "Telefoon" & GT; Telefoon & LT; / LABEL & GT; & LT; INPUT Type = "Tel" ID = "Telefoon" Placeholder = "Voer hier uw telefoon in" & GT; & LT; / LI & GT;
& LT; LI & GT; & LT; Label voor = "Bericht" & GT; Message & LT; / Label & GT; & LT; Textarea Rows = "6" ID = "Message" Placeholder = "Voer hier uw bericht in" & GT; & LT; / Textarea & GT; & LT; LI & GT;
& LT; LI & GT; & LT; KNOP TYPE = "INDIEND" & GT; INDIEND & LT; / BUTTER & GT; & LT; / LI & GT;
& LT; / UL & GT;
& LT; / Form & GT;

Merk op dat elk van de lijstitems in ons formulier een klasse heeft buigen Deze klasse identificeert de flexcontainer in ons formulier. Een van de grote voordelen van Flexbox is het vermogen om elk HTML-element te gebruiken om de containers en elementen te definiëren.

U kunt FLEXBOX-styling toepassen op elk HTML-element, wat betekent dat u gemakkelijk kunt terugzetten en elementen onafhankelijk van elkaar kunt weerspiegelen. Houd er rekening mee dat Flexbox slechts een stylingmechanisme is, wat betekent dat u deze kunt toevoegen en verwijderen.

Laten we de flexcontainers in onze CSS identificeren. Bovendien willen we de FLEX-items verticaal centreren in de cross-as. Het is vrij eenvoudig om dat te specificeren, we moeten gewoon een eenvoudige CSS-regel opzetten:

 .Flex LI {
Display: Flex;
Flex-wrap: wrap;
Align-items: Center;
}

De volgende stap is om de breedtes voor de flex-items op te geven. De belangrijkste vereisten:

Labels moeten minstens 100px en maximaal 200px zijn
Vormelementen die nadat de labels ten minste 200 px moeten zijn

Wat geeft dit ons? Elk label en het bijbehorende formulierelement worden op een enkele horizontale rij weergegeven wanneer de breedte van het formulier ten minste 300px is (onthoud, we gebruiken hier rechts uitgelijnde labels).

 .Flex & GT; LI & GT; label {
FLEX: 1 0 100PX;
max-breedte: 200px;

.Flex & GT; LI & GT; Label + * {
FLEX: 1 0 200PX;
}

Ten slotte, voor de verzendknop, die ook een flex-item is, definiëren we een paar basisstijlen:

. FLEX LI-knop {
marge: auto;
Vulling: 22PX 46PX;
}

Zoals je kunt zien, met minimale markup en de kracht van Flexbox, hebben we een responsieve vorm gebouwd.

Met meer gebruikers die mobiele apparaten dragen, is het cruciaal om een gebruiksvriendelijke ervaring op elk apparaat te leveren. Het sleutelpunt is om aan te passen aan zowel de behoeften van de gebruiker als de mogelijkheden van het apparaat.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 287 van netto tijdschrift , het magazine voor professionele webontwerpers en ontwikkelaars - het aanbieden van de nieuwste nieuwe webtrends, technologieën en technieken. Abonneer u op NET hier.

Gerelateerde artikelen:

Maak responsieve vormen en tabellen
Aan de slag met webtoegankelijkheid
7 Geweldige tools voor het testen van uw responsieve webontwerpen

Ontwerpen van responsieve en apparaat-agnostische vormen

01. Ontwerp voor verticale scroll

02. Plaats labels boven velden

03. Gebruik tapdoelen

04. Gebruik HTML5-formuliervelden

05. Gebruik FLEXBOX

Procedures - Meest populaire artikelen

Hoe een progressieve web-app te bouwen

10 tips voor het beheersen van Apple's Foto's App

Exporteren na effect-animaties naar HTML5

Scatter bomen met V-ray

Een glazuren maken met aquarel

Maak interactieve 3D-visuals met three.js

13 tips voor het maken van een VR-gamingwereld

Maak eenvoudige illustraties voor het web

Categorieën