web-dev-qa-db-fra.com

Comment afficher plus de 5 onglets horizontaux sur un appareil mobile

Ceci est purement pour un site Web mobile qui doit avoir des onglets horizontaux.

La difficulté est qu'il pourrait y avoir 5-7 onglets, 5 étant plus susceptibles. Le texte de chaque onglet est long, ce qui peut entraîner une mauvaise visibilité des onglets.

J'ai du mal à penser à différentes façons et approches pour en faire une bonne expérience pour les utilisateurs mobiles.

Quelqu'un at-il des suggestions pour réaliser cette conception avec ces restrictions à l'esprit?

13
Paul

Il semble que cela puisse également s'appliquer à une navigation principale horizontale pour un site. Brad Frost a plusieurs options pour des systèmes de navigation réactifs , mais les deux suivants semblent les plus appropriés à ce que vous essayez d'accomplir à partir de ses options. Voici ces deux et une troisième approche:

Onglets déroulants

Un moyen populaire de résoudre ce problème consiste à passer des onglets à une liste déroulanteDropdown Responsive Tabs

Onglets empilés

Une autre approche serait de empiler les ongletsStacked Responsive Tabs

Onglets déroulants

Une autre option qui apparaissait sur les interfaces mobiles est les onglets déroulants. Scrollable Tabs from the Android Developer site

11
Matthew Moore

Je vais juste ajouter un autre exemple;)

enter image description here

Cette interaction est utilisée dans Rookie . J'ai pris le GIF de ce grand article sur les menus hamburger .

3
mik01aj

Voici un exemple ios de ce que @Matthew a suggéré comme onglets de défilement:

TOI

3
Spicerjet

J'ajouterais également que vous pouvez le centrer et l'enrouler sur deux lignes (par exemple, trois éléments sur la ligne supérieure et deux ci-dessous). Vous devrez peut-être apporter de légères modifications à la conception, comme les faire apparaître plus comme des boutons et être facilement cliquables.

2
Laura Papla Ford