risposta-alla-domanda-sullo-sviluppo-web-bd.com

Come visualizzare 5 più schede orizzontali sul dispositivo mobile

Questo è puramente per un sito Web mobile che deve avere schede orizzontali.

La difficoltà è che potrebbero esserci potenzialmente 5-7 schede, con 5 più probabilità. Il testo per ciascuna scheda è lungo, il che potrebbe comportare una scarsa visibilità delle schede.

Faccio fatica a pensare a diversi modi e approcci per rendere questa una buona esperienza per gli utenti mobili.

Qualcuno ha qualche suggerimento per realizzare questo progetto tenendo conto di quelle restrizioni?

13
Paul

Sembra che potrebbe applicarsi anche a una navigazione principale orizzontale per un sito. Brad Frost ha diverse opzioni per i sistemi di navigazione responsive , ma i prossimi due sembrano più appropriati per quello che stai cercando di ottenere dalle sue opzioni. Ecco questi due e un terzo approccio:

Schede a discesa

Un modo popolare per risolverlo è passare dalle schede a un menu a discesaDropdown Responsive Tabs

Schede impilate

Un altro approccio sarebbe quello di impilare le schedeStacked Responsive Tabs

Schede scorrevoli

Un'altra opzione che appare sulle interfacce mobili sono le schede scorrevoli. Scrollable Tabs from the Android Developer site

11
Matthew Moore

Aggiungerò solo un altro esempio;)

enter image description here

Questa interazione è usata in Rookie . Ho preso la GIF da questo fantastico articolo sui menu di hamburger .

3
mik01aj

Ecco un esempio iOS quello che @Matthew ha suggerito come schede scorrevoli:

TOI

3
Spicerjet

Vorrei anche aggiungere che puoi averlo centrato e avvolto su due righe (ad esempio tre elementi nella riga superiore e due in basso). Potrebbe essere necessario apportare lievi modifiche al design, ad esempio per renderle più simili a pulsanti e facilmente cliccabili.

2
Laura Papla Ford