Barre latérale vs. Tiroir
Une barre latérale reste dans la mise en page. Un tiroir glisse pendant un court moment et peut cacher ou pousser la page.
Utilisez une barre latérale pour les outils ou les liens que les gens utilisent souvent lorsqu'il y a de la place. Utilisez un tiroir pour les tâches moins courantes ou les petits écrans, et facilitez sa fermeture.
Voir ce que fait chaque modèle
Essayez chaque exemple. Puis lisez sur le travail pour lequel il a été conçu.
Sidebar Source List
Une Sidebar Source List est une liste en forme d'arbre sur le côté d'une fenêtre. La source ou le groupe choisi détermine ce qui apparaît dans la zone principale.
Une photothèque liste Bibliothèque, Favoris, les albums et les groupes partagés. La collection choisie remplit la zone de détails.
- Utilisez-le lorsque
- Utilisez-le lorsque des groupes ou lieux stables contrôlent la vue principale et que les personnes y retournent souvent pendant leur travail.
- Ne l'utilisez pas lorsque
- Évitez-le pour une liste de contrôle ponctuelle ou une courte liste d'actions plates. Chaque catégorie devrait réellement changer la source principale du contenu.
- Nom utilisé dans le code
NSOutlineView source-list style / SwiftUI NavigationSplitView
Tiroir
Un tiroir coulisse depuis le bord de l'écran. Une partie de la page derrière lui reste visible.
Sélectionnez une commande pour ouvrir ses détails depuis la droite. La liste des commandes reste visible derrière.
- Utilisez-le lorsque
- Utilisez-le pour les détails ou une deuxième tâche plus petite lorsque conserver l'emplacement actuel est utile.
- Ne l'utilisez pas lorsque
- Ne jamais comprimer un long flux de travail avec de nombreuses étapes dans un tiroir étroit.
- Nom utilisé dans le code
Dialog + edge positioning
Comparaison rapide
| Modèle UI | Meilleur pour | Pas pour | Nom utilisé dans le code |
|---|---|---|---|
| Sidebar Source ListSidebar Source List | Utilisez-le lorsque des groupes ou lieux stables contrôlent la vue principale et que les personnes y retournent souvent pendant leur travail. | Évitez-le pour une liste de contrôle ponctuelle ou une courte liste d'actions plates. Chaque catégorie devrait réellement changer la source principale du contenu. | NSOutlineView source-list style / SwiftUI NavigationSplitView |
| TiroirDrawer | Utilisez-le pour les détails ou une deuxième tâche plus petite lorsque conserver l'emplacement actuel est utile. | Ne jamais comprimer un long flux de travail avec de nombreuses étapes dans un tiroir étroit. | Dialog + edge positioning |
Avant d'expédier
- 01
Écrivez ce que la personne doit faire.
- 02
Tester le clavier, la mise au point, le toucher, le zoom, le chargement, les états vides et d'erreur.
- 03
Assurez-vous que les gens peuvent obtenir les mêmes informations sans survol ni mouvement.
- 04
Tester avec du contenu réel sur les petits et grands écrans.
Demande de comparaison que vous pouvez copier
Copiez ceci lorsque votre équipe a besoin d'aide pour choisir entre les modèles.
Choisissez le meilleur modèle parmi Sidebar Source List (Sidebar Source List), Tiroir (Drawer) pour notre flux utilisateur réel. Utilisez cette règle : Une barre latérale reste dans la mise en page. Un tiroir glisse pendant un court moment et peut cacher ou pousser la page. Notez la tâche, la quantité de contenu et le coût d'arrêt du flux. Vérifiez le clavier, le toucher, le chargement, l'erreur et le comportement à mouvement réduit. Expliquez votre choix, puis construisez la plus petite version accessible avec le système de conception du projet.