Come progettare forme reattive e dispositivi-agnostici

Sep 13, 2025

Come si fa

Sia che si tratti di un flusso di iscrizione o di un passo passo multi-viste, i moduli sono uno dei componenti più importanti del design del prodotto digitale - quindi è necessario progettarli in modo che funzionino efficacemente sui dispositivi mobili.

Ecco come progettare moduli per dispositivi mobili, incluso un aspetto rapido Come usare flexbox .

01. Design per rotolo verticale

A single column layout works better — Un layout di colonna singola funziona meglio

Indipendentemente dalla dimensione del dispositivo, il modo più semplice per completare un modulo è in modo lineare. Le colonne multiple interrompono lo slancio di un utente (gli utenti potrebbero interpretare i campi incoerenti in modo incoerente, che è un fattore negativo in termini di usabilità) e può comportare gli utenti che devono ricorrere allo scorrimento orizzontale.

Quando si tratta di stabilire moduli, è necessario progettare le voci in una colonna: se un modulo è in una singola colonna, il percorso verso il completamento è una linea retta verso il basso la pagina.

02. Posizionare le etichette sopra i campi

Place labels above form fields — Posiziona le etichette sopra i campi del modulo

Le etichette dicono agli utenti ciò che significano i campi di input corrispondenti. Quando scegli dove posizionare le tue etichette hai due opzioni: allineate a sinistra o allineate in alto.

Le etichette allineate a sinistra funzionano bene se il modulo viene completato su un desktop o tablet. Tuttavia, sono una soluzione orribile per i dispositivi mobili in cui vi è una proprietà limitata. Poiché le etichette allineate a sinistra devono essere seduta prima del campo, lo schermo stretto lascia pochissimo spazio per il campo stesso - specialmente se il dispositivo è in modalità verticale. Questo crea due gravi problemi di usabilità:

Il campo del modulo non sarà abbastanza ampio da visualizzare l'intero ingresso dell'utente, rendendoli più propensi a scendere in discussione le loro risposte e portando a forme più errate inviate
Quando un utente viene avvisato che hanno inserito informazioni errate, potrebbero avere difficoltà a spotting e fissare il problema in quanto non saranno in grado di vedere l'intero ingresso non valido

Posizionamento dell'etichetta sopra il campo del modulo Quando un utente sta navigando da un dispositivo mobile garantirà che gli utenti possono vedere la larghezza massima per inserire i propri dettagli, poiché non è necessario utilizzare alcuna per l'etichetta.

Scriverete le tue etichette sopra i campi di input rendono molto più facile per te scrivere etichette di campo chiari e significative, poiché non sarai limitato a una o due parole.

03. Utilizzare gli obiettivi del rubinetto

Tarioni Tariffe dovrebbero essere facili da usare indipendentemente da quale dimensione del dispositivo è visualizzata. I bersagli più grandi (campi e pulsanti di input) sono più facili per gli utenti con destrezza inferiore, indipendentemente dal fatto che sia una condizione permanente o una temporanea causata dall'ambiente.

Al momento, la dimensione del target più grande è per i dispositivi touch, quindi è necessario progettare prima il tocco. Ciò garantisce che gli utenti non dovranno ingrandire per inserire il testo o selezionare un'opzione. Le aree cliccabili dovrebbero seguire la regola dei dito grassa e non invadere le aree circostanti: il cuscinetto medio umano è di 10 x 14 mm e il dita medio è 8-10 mm, facendo 10 x 10 mm una buona dimensione minima del tocco.

Ma non solo se un bersaglio del rubinetto sia di dimensioni correttamente, dovresti anche assicurarti che ci sia spazio sufficiente tra più target di tap. Infatti, se si ottiene l'errore "Tap Target Dimensione Target" sugli strumenti SEO mobili, è spesso perché i target del rubinetto sono troppo vicini, piuttosto che il target attuale del rubinetto è troppo piccolo.

Può essere difficile leggere i contenuti sui dispositivi mobili, quindi effettuare gli ingressi al 100% e garantendo che il testo sia impostato su almeno 16px (1Em) farà una grande differenza. In questo modo, non verrà richiesto lo zoom di pizzico o lo scroll aggiuntivo per leggere le informazioni richieste.

04. Utilizzare i campi del modulo HTML5

I dispositivi mobili offrono tastiere software personalizzate per diversi tipi di input e i campi del modulo HTML5 sono il modo più semplice per migliorare l'esperienza dell'utente dei tuoi moduli. Questi tipi di input forniscono suggerimenti sul browser su quale tipo di layout della tastiera da visualizzare per le tastiere su schermo.

Includi i tipi di input di numero , e-mail , tel , URL e Data , e l'ingresso della tastiera sui tuoi dispositivi mobili si aggiornerà per semplificare l'utente per l'utente compilando il modulo. Non richiede di aggiungere classi aggiuntive agli ingressi del modulo di stile, tutto ciò che devi fare è utilizzare i tipi di ingresso HTML5 validi:

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

05. Usa flexbox.

Ammettiamolo - è difficile creare un layout rispondente in HTML. La maggior parte di noi ha lottato con questo a un punto o nell'altro. Anche se è sempre stato possibile effettuare i layout comportarsi come previsto utilizzando tecnologie specializzate, il processo non è mai stato facile.

Le tecnologie per affrontare i layout strutturati sono arrivate e sono andate negli anni: gli sviluppatori hanno utilizzato i telai HTML, le tabelle HTML, i layout basati sulla galleggiante e, più recentemente, vari sistemi di griglia popolarizzati da quadri CSS come Bootstrap. .

Ma con l'avvento del modello di scatola flessibile HTML (o Flexbox. ), HTML ha finalmente guadagnato un motore di formattazione della scatola ricca che affronta i layout complessi, compresi i moduli HTML.

FlexBox ci offre una grande flessibilità per costruire rapidamente forme bellissime. La cosa chiave da capire su FlexBox è che è uno strumento di manipolazione container: mira a fornire un modo più efficiente di disporre, allineare e distribuire lo spazio tra gli oggetti in un contenitore, anche quando la loro dimensione è sconosciuta e / o dinamica (da qui parola 'flex').

Ciò che è interessante è che FlexBox ci dà una grande flessibilità per costruire rapidamente la nostra forma senza utilizzare alcuna query dei supporti. Inoltre, tutti i browser attuali lo supportano.

Nostro Guida Web Designer a Flexbox L'articolo ti dice di più, ma per ora facciamo un po 'di pratica e impara come approfittare di Flexbox per creare una forma reattiva. Prima cosa prima, definiamo la struttura HTML per la nostra forma:

 & lt; Form & GT;
& lt; ul; ul; ul; ul; ul; ul massima classe = "flex" e gt;
& lt; li & gt; & lt; etichetta per = "primo nome" e gt; primo nome & lt; / etichetta e gt; & lt; input type = "testo" id = "primo nome" segnaposto = "Inserisci il tuo nome qui" & gt; & lt; / Li & GT;
& lt; li & gt; & lt; etichetta per = "cognome" & gt; cognome & lt; / etichetta e gt; & lt; input type = "testo" id = "cognome" segnaposto = "Inserisci il tuo cognome qui" & gt; & lt; / Li & GT;
& lt; li & gt; & lt; etichetta per = "e-mail" & gt; e-mail & lt; / label & gt; & lt; ingresso tipo = "Email" id = "Email" segnaposto = "Inserisci la tua email qui" & gt; & lt; / li & gt;
& lt; li & gt; & lt; etichetta per = "Telefono" e GT; Telefono & lt; / Etichetta e GT; & lt; Input Type = "Tel" ID = "Telefono" segnaposto = "Inserisci il tuo telefono qui" & gt; & lt; / li & gt; & lt; / li & gt;
& lt; li & gt; & lt; etichetta per = "messaggio" & gt; message & lt; / etichetta & gt; & lt; textarea righe = "6" id = "messaggio" segnaposto = "Inserisci il tuo messaggio qui" & gt; & lt; / texarea & gt; & lt; / texarea & gt; & lt; / texarea & gt; & lt; / texarea & gt; & lt; / texarea & gt; & lt; / texarea & gt; & lt; Li & GT;
& lt; li & gt; & lt; button type = "Invia" & gt; submit & lt; / button & gt; & lt; / li & gt;
& lt; / UL & GT;
& lt; / Form & GT;

Si noti che ognuno degli elementi dell'elenco nel nostro modulo ha una classe di flettere . Questa classe identifica il contenitore Flex nel nostro modulo. Uno dei grandi vantaggi di Flexbox è la sua capacità di utilizzare qualsiasi elemento HTML per definire i suoi contenitori ed elementi.

È possibile applicare lo styling Flexbox a qualsiasi elemento HTML, il che significa che puoi facilmente restyle e riflare gli elementi indipendentemente l'uno dall'altro. Tieni presente che Flexbox è solo un meccanismo di styling, il che significa che puoi aggiungerlo e rimuoverlo a volontà.

Identifichiamo i contenitori Flex nel nostro CSS. Inoltre, vogliamo centrare verticalmente gli elementi della flessione attraverso l'asse incrociato. È piuttosto facile specificare che, abbiamo solo bisogno di creare una regole CSS semplice:

 .flex li {
Display: flex;
Flex-wrap: wrap;
Allinea-Articoli: Centro;
}

Il prossimo passo è specificare le larghezze per gli elementi Flex. I requisiti principali:

Le etichette dovrebbero essere almeno 100px e al massimo 200 px
Elementi di forma che vengono dopo che le etichette dovrebbero essere almeno 200 px

Cosa ci dà questo? Ogni etichetta e il suo elemento formale associato verranno visualizzati su una singola riga orizzontale quando la larghezza del modulo totalizza almeno 300 px (ricorda, stiamo usando le etichette allineate a destra qui).

 .FLEX & GT; Li & GT; etichetta {
Flex: 1 0 100px;
larghezza massima: 200px;
}
.flex & gt; Li & GT; Etichetta + * {
Flex: 1 0 200 px;
}

Infine, per il pulsante di invio, che è anche un elemento flessibile, definiamo alcuni stili di base:

. Pulsante Flex Li {
Margine: Auto;
Imbottitura: 22px 46px;
}

Come puoi vedere, con un minimo markup e la potenza di flexbox, abbiamo costruito una forma reattiva.

Con altri utenti che trasportano dispositivi mobili, è fondamentale fornire un'esperienza user-friendly su qualsiasi dispositivo. Il punto chiave è adattarsi alle esigenze dell'utente e alle capacità del dispositivo.

Questo articolo è stato originariamente pubblicato in questione 287 di Magazine netta , la rivista per web designer e sviluppatori professionisti - offrendo le ultime nuove tendenze web, tecnologie e tecniche. Iscriviti alla rete qui.

Articoli Correlati:

Creare forme e tavoli reattivi
Inizia con l'accessibilità web
7 grandi strumenti per testare i tuoi web design rispondenti

Come progettare forme reattive e dispositivi-agnostici

01. Design per rotolo verticale

02. Posizionare le etichette sopra i campi

03. Utilizzare gli obiettivi del rubinetto

04. Utilizzare i campi del modulo HTML5

05. Usa flexbox.

Come si fa - Articoli più popolari

Come rimuovere le rughe in Photoshop

Come costruire un blog con Jekyll

Come girare WordPress in un Builder Visual

8 regole dorate di progettazione mobile

Come costruire un sito di blog con Gatsby

Vernice Acqua increspata in oli

Crea un'app che raccoglie i dati del sensore

Crea un personaggio con realismo stilizzato

Categorie