Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Modelli di navigazione reattivi

Se hai difficoltà a progettare il sistema di navigazione della tua app, puoi iniziare con questi modelli. I seguenti modelli di navigazione reattivi offrono vari metodi per gestire la navigazione su schermi grandi e piccoli. I menu di navigazione in alto e a sinistra sono comuni sugli schermi grandi, ma spesso non rappresentano il modo ottimale per visualizzare le informazioni sugli schermi piccoli per via dello spazio ridotto. È quindi necessario tenere in considerazione come presentare i contenuti in modo da garantire una navigazione agevole su schermi di ogni dimensione.

Nota: il codice HTML/CSS per i modelli corrispondenti sarà disponibile a breve.

Modello 1: menu superiore a comparsa

In questo modello con il ridursi della dimensione dello schermo gli elementi nel menu di navigazione superiore vengono ridisposti finché c'è spazio sufficiente. Quando non c'è più spazio disponibile nella schermata, alcuni elementi vengono spostati in un menu a tendina. Negli schermi più piccoli tutti gli elementi sono collocati nel menu a comparsa, che l'utente può espandere al tocco.

È possibile attribuire una priorità agli elementi per fare in modo che siano sempre i più importanti a essere visualizzati nel menu di navigazione in alto.

Vantaggi

  • un solo pulsante nella testata aumenta lo spazio disponibile per i contenuti su schermi di piccole dimensioni
  • gli elementi più importanti vengono visualizzati nella maggior parte degli schermi ed è possibile stabilirne la priorità
  • viene preservata la leggibilità degli elementi di navigazione con una spaziatura adeguata nascondendo automaticamente gli elementi che non rientrano nello spazio stabilito

Svantaggi

  • alcuni elementi potrebbero non essere facilmente individuabili perché collocati in menu a tendina e a comparsa
  • l'utente potrebbe non notare il pulsante per accedere al menu di navigazione negli schermi più piccoli
  • un passaggio in più per accedere agli elementi di navigazione nascosti

layout IU ampio con menu superiore a comparsa e blocchi di contenuto 3x2

layout IU medio con menu superiore a comparsa e blocchi di contenuto 2x3

layout IU medio ma corto con menu superiore a comparsa e blocchi di contenuto disposti a striscia scorrevole

layout schermo stretto cellulare con menu superiore a comparsa e blocchi di contenuto di dimensioni ridotte 2x3

Modello 2: menu inferiore espandibile

Come nel primo modello, gli elementi di navigazione nel menu superiore si ridispongono per adattarsi a schermi più piccoli finché non c'è più spazio disponibile. Quando non c'è più spazio disponibile nella schermata, alcuni elementi vengono spostati in un menu a tendina. È possibile attribuire una priorità agli elementi per fare in modo che siano sempre i più importanti a essere visualizzati nel menu di navigazione in alto.

Negli schermi più piccoli solo alcuni elementi sono visualizzabili nella parte inferiore dello schermo, mentre gli altri risultano nascosti. È possibile accedere agli elementi nascosti aprendo il menu, i restanti elementi sono selezionabili sullo schermo inferiore.

Vantaggi

  • il menu espandibile è facilmente individuabile
  • gli elementi più importanti vengono sempre visualizzati ed è possibile stabilirne la priorità
  • viene preservata la leggibilità degli elementi di navigazione con una spaziatura adeguata nascondendo automaticamente gli elementi che non rientrano nello spazio stabilito

Svantaggi

  • un passaggio in più per accedere agli elementi di navigazione nascosti
  • gli elementi di navigazione possono risultare più difficili da individuare se sono nascosti
  • meno spazio per i contenuti disponibile sugli schermi più piccoli

layout IU ampio con barra del menu superiore orizzontale che si sposta nella parte inferiore quando il layout si restringe

layout IU medio con barra del menu superiore orizzontale che si sposta nella parte inferiore quando il layout si restringe

layout moderato ma corto che sposta la barra superiore del menu nella parte inferiore della pagina per maggiore comodità nel raggiungere i contenuti

layout schermo stretto cellulare che sposta la barra superiore del menu nella parte inferiore della pagina per maggiore comodità nel raggiungere i contenuti Il menu delle opzioni è accessibile trascinando l'icona verso l'alto.

Modello 3: menu nascosto a sinistra

Il menu di navigazione principale è posizionato sempre sulla sinistra, eccetto su schermi di piccole dimensioni in cui è nascosto e va attivato utilizzando un pulsante. Toccando questo pulsante verrà visualizzato il menu di navigazione con tutte le sue voci.

Vantaggi

  • possibilità di visualizzare più elementi di navigazione in un menu posizionato a sinistra rispetto a un menu posizionato nella parte superiore
  • la maggior parte degli elementi è sempre visualizzata con l'eccezione degli schermi più piccoli
  • un solo pulsante nella testata aumenta lo spazio disponibile per i contenuti su schermi di piccole dimensioni

Svantaggi

  • alcuni elementi potrebbero non essere facilmente individuabili perché collocati in menu a tendina e a comparsa
  • l'utente potrebbe non notare il pulsante per accedere al menu di navigazione negli schermi più piccoli
  • un passaggio in più per accedere agli elementi di navigazione nascosti

layout IU ampio con menu di navigazione verticale sul lato sinistro

layout medio con menu di navigazione verticale sul lato sinistro e area dei contenuti ridotta

layout medio con menu di navigazione verticale sul lato sinistro e area dei contenuti ridotta

layout schermo stretto cellulare con menu nascosto a sinistra che può essere trascinato sullo schermo con un pulsante.

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: sara_t
 Ultima modifica di: sara_t,