Modèle de conception des détails de liste

Le modèle liste-détails est composé d’un volet principal (qui présente généralement une liste) et d’un volet d’informations (détails) pour le contenu. Quand un élément de la liste est sélectionné, le volet des détails est mis à jour. Ce modèle est naturellement adapté quand vous avez une zone d’affichage plus large. Il est souvent utilisé pour la messagerie et les carnets d’adresses.

En tirant parti des deux écrans distincts et en s’alignant sur la limite naturelle, vous pouvez utiliser un écran pour montrer la liste des « éléments » et l’autre pour montrer les détails de l’élément sélectionné.

Séparer la navigation ou la vue d’ensemble des détails permet aux utilisateurs d’explorer le contenu de manière plus détaillée tout en gardant la même position dans l’ensemble de la liste/de l’agrégat.

Répertorier les détails

Meilleures pratiques

Voici quelques scénarios qui vous aideront à vous guider lors de l’application de ce modèle de conception :

Ne pas afficher les éléments de la liste sous la charnière

Pratiques conseillées Pratiques déconseillées
Utilisez le côté gauche de l’écran pour afficher une liste et le côté droit pour afficher les détails de l’élément sélectionné dans la liste. N’affichez pas la liste sur les deux écrans, utilisez le deuxième écran pour obtenir un affichage détaillé.

Conserver le menu inférieur sur un seul écran

Pratiques conseillées Pratiques déconseillées
Utilisez une navigation de menu inférieure sur l’écran de gauche par rapport à la liste sur l’écran de gauche. N’avez pas de navigation vers le bas du menu sur l’écran de gauche et la liste sur deux écrans.

Utilisez un menu latéral si vous avez de nombreuses options, plutôt qu’un menu inférieur qui s’étend sur les deux écrans

Pratiques conseillées Pratiques déconseillées
Utilisez une navigation dans le menu latéral avec la liste sur l’écran de gauche et les détails sur l’écran de droite. N’avez pas de navigation vers le bas du menu sur deux écrans dans la liste-détail.

Lors de la rotation d’un affichage de liste, masquer la liste et afficher les détails sur les deux écrans

Pratiques conseillées Pratiques déconseillées
Affichez les détails lorsque l’appareil pivote dans une orientation de paysage double (avec un bouton précédent pour revenir à la liste). N’affiche pas la liste sur un écran et les détails sur l’autre écran lorsque l’appareil est pivoté dans une orientation à double paysage.

Les détails de la liste peuvent également afficher une collection d’images : afficher une grille sur le premier écran et l’image zoomée sur le deuxième écran

Pratiques conseillées Pratiques déconseillées
Utilisez le deuxième écran pour afficher une image plus grande dans la liste de la Galerie d’images. N’affiche pas la Galerie de listes sur deux écrans passant par la charnière.

Types d’applications qui peuvent tirer parti de ce modèle

  • Applications avec des listes ou des galeries
  • Applications de messagerie
  • Applications de planification
  • Applications de collecte de photos ou d’images
  • Applications musicales avec des playlists et les détails des morceaux
  • Applications avec une structure de navigation robuste

Exemples de code

Ces projets présentent une implémentation simple des détails de la liste que vous pouvez utiliser dans vos applications :

Notes

Quand vous travaillez sur une vue liste-détail

Quand vous passez du mode mono-écran à un mode liste-détail étendu, veillez à sélectionner un élément pour montrer à l’utilisateur la vue Détail. Sinon, l’écran de la vue Détail semblera « cassé » pour l’utilisateur ou fastidieux, car celui-ci devra le remplir avec des informations. Certaines options incluent le dernier élément touchées dans le mode liste, ou l’élément le plus haut dans la liste, ou le dernier élément modifié, etc.