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
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
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
