Cum se proiectează formularele responsabile și agnostice

Sep 12, 2025

să

Indiferent dacă este vorba de un flux de înscriere sau un stepper multi-vedere, formularele sunt una dintre cele mai importante componente ale designului produsului digital - deci trebuie să le proiectați astfel încât să funcționeze eficient pe dispozitivele mobile.

Iată cum puteți proiecta formularele pentru dispozitivele mobile, inclusiv o privire rapidă la Cum se utilizează Flexbox .

01. Design pentru defilare verticală

A single column layout works better — Un aspect unic al coloanei funcționează mai bine

Indiferent de dimensiunea dispozitivului, cea mai ușoară modalitate de a completa un formular este într-o manieră liniară. Coloanele multiple perturbă un impuls al utilizatorului (utilizatorii pot interpreta câmpurile inconsecvent, ceea ce reprezintă un factor negativ în ceea ce privește gradul de utilizare) și poate duce la recurgerea la derularea orizontală.

Când vine vorba de stabilirea formularelor, ar trebui să proiectați intrările într-o singură coloană: dacă un formular se află într-o singură coloană, calea spre finalizare este o linie dreaptă în jos pe pagină.

02. Așezați etichetele de mai sus câmpurile

Place labels above form fields — Plasați etichetele de mai sus câmpurile de formular

Etichetele spun utilizatorilor ceea ce înseamnă câmpurile de intrare corespunzătoare. Când alegeți unde să plasați etichetele, aveți două opțiuni: aliniate la stânga sau aliniate superioare.

Etichetele aliniate la stânga funcționează bine dacă formularul este finalizat pe un desktop sau tabletă. Cu toate acestea, ele sunt o soluție groaznică pentru dispozitive mobile în care există imobiliare limitate. Deoarece etichetele aliniate la stânga trebuie să stea înainte de câmp, ecranul îngust lasă foarte puțin spațiu pentru câmpul în sine - mai ales dacă dispozitivul este în modul portret. Acest lucru creează două probleme grave de utilizare:

Câmpul de formular nu va fi suficient de larg pentru a afișa întreaga intrare a utilizatorului, făcându-le mai multe șanse de a-și distruge răspunsurile și de a conduce la depunerea unor forme mai eronate
Atunci când un utilizator este notificat că au introdus informații eronate, aceștia pot avea un timp greu de observat și stabilind problema deoarece nu vor putea vedea întreaga intrare nevalidă

Plasarea etichetei deasupra câmpului de formular Când un utilizator navigați de pe un dispozitiv mobil va asigura că utilizatorii pot vedea lățimea maximă pentru a introduce detaliile lor, deoarece nu trebuie să utilizați pe etichetă.

Scrierea etichetelor deasupra câmpurilor de intrare ușurează, de asemenea, mult mai ușor să scrieți etichete de câmp clare și semnificative, deoarece nu veți fi limitați la unul sau două cuvinte.

03. Utilizați obiective de atingere

Obiectivele de atingere ar trebui să fie ușor de utilizat, indiferent de mărimea dispozitivului pe care îl afișează. Obiectivele mai mari (câmpurile de intrare și butoanele) sunt mai ușoare pentru utilizatorii cu dexteritate mai mică, indiferent dacă este o condiție permanentă sau una temporară cauzată de mediu.

În prezent, cea mai mare dimensiune țintă este pentru dispozitivele touch, deci trebuie să proiectați mai întâi atingerea. Acest lucru asigură că utilizatorii nu vor trebui să zoom pentru a introduce textul sau a selecta o opțiune. Zonele clicabile ar trebui să urmeze regula degetului de grăsime și să nu încalce pe zonele înconjurătoare: Plăcuța medie umană umană este de 10 x 14 mm, iar vârful mediu este de 8-10mm, făcând 10 x 10 mm o dimensiune minimă de atingere minimă.

Dar nu numai că o țintă de atingere ar trebui să fie dimensionată corect, trebuie să vă asigurați că există suficient spațiu între mai multe obiective de la robinet. De fapt, dacă primiți eroarea "Dimensiune țintă" pe instrumentele Mobile SEO, este adesea deoarece obiectivele dvs. de atingere sunt prea apropiate, mai degrabă decât ținta efectivă de atingere fiind prea mică.

Acesta poate fi greu de citit conținut pe dispozitivele mobile, astfel încât intrările 100% și asigurând că textul este setat la cel puțin 16px (1em) va face o mare diferență. În acest fel, nu va fi necesară zoom-ul de prindere sau scroll suplimentar pentru a citi informațiile necesare.

04. Folosiți câmpurile Formular HTML5

Dispozitivele mobile oferă tastaturi software personalizate pentru diferite tipuri de introducere, iar câmpurile Formular HTML5 sunt cel mai simplu mod de îmbunătățire a experienței utilizatorilor din formularele dvs. Aceste tipuri de intrare oferă sugestii browserului despre ce tip de aspect de tastatură pentru a fi afișat pentru tastaturi pe ecran.

Includeți tipurile de intrare număr , e-mail , Tel. , URL. și Data , iar intrarea tastaturii de pe dispozitivele dvs. mobile se va actualiza pentru a facilita completarea formularului utilizatorului. Nu vă solicită să adăugați clase suplimentare la intrările formularului de stil, tot ce trebuie să faceți este să utilizați tipuri de introducere HTML5 valide:

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

05. Utilizați Flexbox.

Să ne confruntăm cu asta - este dificil să creați un aspect receptiv în HTML. Cei mai mulți dintre noi s-au luptat cu acest lucru la un moment dat sau altul. Deși este întotdeauna posibil să se comporte layouts așa cum era de așteptat folosind tehnologii specializate, procesul nu a fost niciodată ușor.

Tehnologiile care trebuie abordate structurate au venit și au trecut de-a lungul anilor: dezvoltatorii au folosit cadre HTML, mese HTML, layout-uri pe bază de float și, mai recent, diverse sisteme de rețea popularizate de cadrele CSS, cum ar fi Bootstrap. .

Dar cu apariția modelului Flexibil HTML (sau Flexbox ), HTML a câștigat în cele din urmă un motor de formatare a cutiei bogate care abordează machete complexe, inclusiv formulare HTML.

FlexBox ne oferă o mare flexibilitate pentru construirea rapidă a formelor frumoase. Lucrul cheie de înțeles despre Flexbox este că este un instrument de manipulare a containerului: își propune să ofere o modalitate mai eficientă de a stabili, de a alinia și distribui spațiu între elementele dintr-un container, chiar și atunci când dimensiunea lor este necunoscută și / sau dinamică (prin urmare, cuvântul "flex").

Ce este interesant este faptul că FlexBox ne oferă o mare flexibilitate pentru a construi rapid forma noastră fără a utiliza interogări media. În plus, toate browserele actuale îl susțin.

Al nostru Ghidul designerului web către Flexbox Articolul vă spune mai mult, dar pentru moment să facem niște practici și să învățăm cum să profităm de Flexbox pentru a crea un formular receptiv. Primele lucruri mai întâi, să definim structura HTML pentru forma noastră:

 & Form & GT;
& lt; ul clasa = "flex" & gt;
& lt; etichetă pentru = "primul nume" & gt; primul nume & lt; / etichetă & gt; & lt; intrare tip = "text" id = "primul nume" substituent = "Introduceți primul nume aici" & GT; & LT; / Li & gt;
& lt; Li & gt; etichetă pentru = "Ultimul nume" & gt; Nume de familie & lt; / etichetă & gt; & lt; introduceți tipul "ID =" Ultimul nume "Placeholder =" Introduceți numele dvs. de familie aici "& GT; & LT; / Li & gt;
& lt; etichetă pentru = "e-mail" & gt; email & lt; intrare tip = "e-mail" id = "e-mail" substituent = "Introduceți adresa dvs. de e-mail aici" & gt; / li & gt;
& lt; etichetă pentru = "telefon" & gt; telefon & lt; intrare tip = "tel" id = "telefon" substituent = "introduceți telefonul aici" & gt; / li & gt;
& lt; Li & gt; etichetă pentru = "mesaj" & gt; mesaje & lt; textarea rândurilor = "6" ID = "mesajul" Placeholder = "Introduceți mesajul dvs. aici" & GT; & Lt; / Li & gt;
& lt; butonul de tip = "Trimiteți" & gt; trimiteți & lt; / li & gt;
& lt; / ul & gt;
& lt; / form & gt;

Observați că fiecare dintre elementele din lista noastră are o clasă de contracta . Această clasă identifică recipientul Flex în forma noastră. Unul dintre beneficiile mari ale FlexBox este capacitatea sa de a utiliza orice element HTML pentru a defini containerele și elementele sale.

Puteți aplica stilul FlexBox la orice element HTML, ceea ce înseamnă că vă puteți restabili cu ușurință și eliberați elemente independent unul de celălalt. Rețineți că FlexBox este doar un mecanism de stil, ceea ce înseamnă că îl puteți adăuga și îl elimina la voință.

Să identificăm recipientele Flex din CSS. În plus, dorim să centralizăm vertical elementele flexibile de pe axa încrucișată. Este destul de ușor să specificați că, trebuie doar să stabilim o regulă simplă CSS:

 .flex Li {
Afișaj: Flex;
Flex-Wrap: Înfășurați;
Align-elemente: centru;
}

Următorul pas este să specificați lățimile pentru elementele flexibile. Principalele cerințe:

Etichetele ar trebui să fie de cel puțin 100px și cel mult 200px
Elemente de formă care vin după ce etichetele ar trebui să fie de cel puțin 200px

Ce ne dă asta? Fiecare etichetă și elementul său asociat de formă vor fi afișate pe un singur rând orizontal atunci când lățimea formei este de cel puțin 300px (amintiți-vă, folosim etichete aliniate drept aici).

 .flex & gt; Li & gt; eticheta {
Flex: 1 0 100px;
Max-lățime: 200px;
}
.flex & gt; Li & gt; Etichetă + * {
Flex: 1 0 200px;
}

În cele din urmă, pentru butonul Trimite, care este, de asemenea, un element Flex, definim câteva stiluri de bază:

 .flex Li {
Marja: Auto;
padding: 22px 46px;
}

După cum puteți vedea, cu marcaj minim și puterea Flexbox, am construit o formă receptivă.

Cu mai mulți utilizatori care transportă dispozitive mobile, este esențial să furnizați o experiență ușor de utilizat pe orice dispozitiv. Punctul cheie este de a se adapta atât la nevoile utilizatorului, cât și la capacitățile dispozitivului.

Acest articol a fost publicat inițial în numărul 287 din revista netă , Revista pentru designeri de web profesioniști și dezvoltatori - oferind cele mai recente noi tendințe web, tehnologii și tehnici. Abonați-vă la net aici.

Articole similare:

Creați formulare și mese receptive
Începeți cu accesibilitatea web
7 instrumente excelente pentru testarea modelelor web receptive

Cum se proiectează formularele responsabile și agnostice

01. Design pentru defilare verticală

02. Așezați etichetele de mai sus câmpurile

03. Utilizați obiective de atingere

04. Folosiți câmpurile Formular HTML5

05. Utilizați Flexbox.

să - Cele mai populare articole

Este Apple Icloud Storage Full? Iată cum să eliberați spațiu

Construiți terenul în Houdini 17

Înțelegerea procesării limbii naturale

Cum se face suprafețe transparente realiste

Începeți cu platforma de animație cu Greensock

Creați o diagramă de culori simplă

Cum de a construi o interfață chatbot

Cum se creează controale personalizate ale platformei în Maya

Categorii