Modèles de navigation (applications du Windows Store)

Applies to Windows only

Organisez le contenu de votre application du Windows Store pour que vos utilisateurs puissent le parcourir facilement et de façon intuitive. L’utilisation de bons modèles de navigation vous aide à réduire le nombre de commandes qui restent affichées à l’écran. Ainsi, les utilisateurs peuvent se concentrer sur le contenu actuel.

La navigation dans les applications du Windows Store est basée sur deux modèles : un modèle hiérarchique et un modèle plat. Une application peut utiliser l’un et/ou l’autre de ces modèles.

Modèle hiérarchique

Ce modèle permet de créer des applications du Windows Store rapides et fluides. Il convient plus particulièrement aux applications comportant de grandes collections de contenus ou de nombreuses sections de contenu différentes que l’utilisateur peut explorer. La plupart des applications du Windows Store utilisent un système de navigation hiérarchique.

Étudier cette fonctionnalité de façon plus approfondie dans le cadre de notre série Fonctionnalités d’application de A à Z:  Navigation hiérarchique de A à Z (HTML et XAML)

Pages Hub, Section et Détail d’une application du Windows Store

Les pages Hub représentent le point d’entrée de l’utilisateur dans l’application. Ici, le contenu est affiché dans une vue panoramique horizontale détaillée qui permet aux utilisateurs d’avoir un aperçu de ce qui est nouveau et disponible.

Le Hub comprend différentes catégories de contenu, chacune étant mappée aux pages Section de l’application.

 

Les pages Section représentent le second niveau d’une application. Ici, le contenu peut s’afficher sous la forme qui représente le mieux le scénario et le contenu de la section.

La page Section se compose d’éléments individuels qui ont chacun leur propre page de détails. Les pages Section peuvent également tirer parti du regroupement et d’une disposition panoramique.

 

Les pages Détail représentent le troisième niveau d’une application. Voici le détail des éléments individuels affichés. Le format varie considérablement selon le type de contenu.

La page de détails comprend les détails ou les fonctionnalités de l’élément. Les pages de détails peuvent contenir de nombreuses informations ou un objet unique, par exemple une image ou une vidéo.

 

Modèle plat

De nombreuses applications du Windows Store utilisent un modèle de navigation plat. Des applications telles que des jeux, des navigateurs ou des applications de création de documents utilisent ce modèle pour permettre à l’utilisateur de se déplacer entre des pages, des onglets ou des modes qui résident tous au même niveau hiérarchique. Contrairement au modèle hiérarchique, il n’y a généralement pas de bouton Précédent persistant ni de pile de navigation. Le déplacement entre les pages se fait donc habituellement via des liens directs dans le contenu, comme dans le premier exemple ci-dessous, ou via la barre de navigation, comme dans le second exemple ci-dessous.

Étudier cette fonctionnalité de façon plus approfondie dans le cadre de notre série Fonctionnalités d’application de A à Z:  Navigation plate de A à Z (HTML et XAML)

exemples de navigation plate

 

Ce modèle est plus particulièrement adapté quand le scénario principal implique un basculement entre un petit nombre de pages ou d’onglets, par exemple dans les applications de navigateur Web telles qu’Internet Explorer, les ebooks et les jeux.

Navigation sur le Canvas

 

en-tête, bouton Précédent, en-têtes de section et vignettes comme élément de navigation

 

  1. En-tête et bouton Précédent

    L’en-tête étiquette la page active et permet de s’orienter. Le bouton Précédent vous permet de revenir rapidement à l’endroit où vous étiez.

  2. Section ou étiquettes de catégorie

    Ces étiquettes déplacent l’utilisateur vers différentes sections ou catégories de contenu.

  3. Autres cibles

    Vous pouvez utiliser des vignettes, des flèches, des boutons, des résultats de recherche ou d’autres cibles personnalisées comme éléments de navigation. Dans certains jeux, il existe des exemples d’éléments de navigation de formes intéressantes.

 

Application Bing Actualité avec en-tête, étiquette de section et lien vers d’autres détails

 

Barre d’application supérieure

En balayant à partir du haut ou du bas de l’écran, un utilisateur affiche les barres d’application. La barre d’application supérieure est également appelée barre de navigation. Vous pouvez placer des éléments de navigation dans la barre d’application supérieure pour libérer de l’espace à l’écran pour le contenu de votre application. En guise d’alternative, vous pouvez placer des éléments de navigation sur le Canvas si les utilisateurs en ont souvent besoin quand ils utilisent votre application et si leur présence sur le Canvas n’encombre pas l’expérience de l’application. C’est vous qui décidez s’il vaut mieux placer les éléments de navigation dans la barre d’application supérieure ou sur le Canvas.

 

accès à la barre de navigation

 

En règle générale, les étiquettes de section ou de catégorie se trouvent dans la barre de navigation, comme dans Hulu Plus.

 

barre de navigation de l’application hulu plus

 

De nombreuses applications utilisent la barre d’application supérieure pour fournir des raccourcis. Par exemple, dans l’application ESPN, un utilisateur peut accéder à la page des sports en cliquant sur des résultats au-dessus des étiquettes de section dans la barre d’application supérieure.

 

barre de navigation de l’application espn

 

La barre d’application supérieure peut également donner à l’utilisateur un aperçu du contenu de la page cible. Dans l’exemple d’application d’achat suivante, vous pouvez obtenir un aperçu des images des produits dans la barre d’application avant de vous plonger dans une page de détail de produit.

 

barre de navigation de l’application vevo

 

Nous vous encourageons à utiliser les barres d’application en faisant preuve de créativité. Dans Fresh Paint, la barre d’application supérieure sert de trousse de fourniture de dessin et propose également les fonctions de navigation dédiées.

 

barre de navigation fresh paint

 

Zoom sémantique

Le zoom sémantique permet d’analyser un affichage et de s’y déplacer avec rapidité et fluidité, en particulier s’il s’agit d’une longue liste affichée de manière panoramique.

 

exemple d’application avec zoom avant, puis zoom arrière

 

Par exemple, dans Great British Chefs, la page Hub comporte une section « À la Une » suivie de cinq sections riches en images avec mouvement panoramique horizontal. L’application utilise le zoom sémantique pour simplifier l’accès à chacune des cinq sections.

 

zoom sémantique dans Great British Chefs

Pour plus d’informations, voir Recommandations en matière de zoom sémantique.

Rubriques associées

Pour les concepteurs
Modèles de commandes
Disposition
Bouton Précédent
Recommandations en matière de contrôles Hub dans les applications du Windows Store
Recommandations en matière de contrôles Hub dans les applications du Windows Phone Store
Recommandations en matière de barres d’application
Rendre la barre de l’application accessible
Pour les développeurs (HTML)
WinJS.UI.Hub object
WinJS.UI.AppBar object
WinJS.UI.NavBar object
WinJS.UI.BackButton object
Exemple de contrôle Hub HTML
Exemple de contrôle AppBar HTML
Exemple de contrôle NavBar HTML
Exemple de navigation et d’historique de navigation
Votre première application - Troisième partie : objets PageControl et navigation
Ajout de barres d’application
Ajout de barres de navigation
Navigation entre les pages (HTML)
Pour les développeurs (XAML)
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
Exemple de contrôle Hub XAML
Exemple de contrôle AppBar XAML
Exemple de navigation XAML
Votre première application - Troisième partie : navigation, disposition et vues
Votre première application - Ajouter une navigation et des vues à une application du Windows Store en C++ (didacticiel 3 sur 4)
Ajout de barres d’application (XAML)
Navigation entre les pages (XAML)
Pour les développeurs (application Windows Runtime en C++ basée sur DirectX)
Création d’une barre de l’application ou d’un paramètre

 

 

Afficher:
© 2014 Microsoft