web-dev-qa-db-fra.com

Material Design - navigation inférieure avec onglets supérieurs?

Prototypage d'une nouvelle application de numérotation basée sur le cadre et le guide de style de Material. La navigation latérale n'est pas une option. Au lieu de cela, je voudrais utiliser la navigation inférieure pour 4 pages principales/fonctionnalités.

  1. Appels récents
  2. Dialer
  3. Contacts (juste un bouton pour les sous-pages)

    3.1 Tous les contacts

    3.2 Favoris

    3.3 Contacts internationaux

  4. Réglages

La page "Contacts" est en fait 3 pages/onglets de 3 types de contact. Mon problème est donc de savoir comment afficher les 3 types de contacts dans le système de navigation qui supposent se baser sur le matériel?

Ceci est l'exemple de l'onglet "International".

International page example

2
Adi Ben Zion

Vous pouvez les diviser en catégories en utilisant Chips comme le fait Google Play Store.

Jetez un œil à la capture d'écran ci-dessous.

categories

Comment cela aide, c'est qu'il supprime tout élément de balayage horizontal. Étant donné que votre question se compose d'onglets, il est possible que l'utilisateur soit confus de glisser entre les onglets qui sont capables de glisser et la navigation inférieure qui ne l'est pas.

Une autre illusion qu'il crée est l'espace. Avec les puces, vous occupez peut-être le même espace que les onglets, mais en raison de la quantité d'espace et de la distance de la barre d'outils, cela semble beaucoup mieux que Tabs + Navigation inférieure.

Cette solution peut également vous inciter à faire preuve d'un peu de créativité avec des images de fonction pour les numéros abrégés, etc.

P.S. Les paramètres ne doivent pas figurer dans la navigation inférieure. Utilisez le menu Débordement.

2
Swapnil Borkar