Recommandations en matière de paramètres de l’application

Les paramètres de l’application sont les parties personnalisables par l’utilisateur de votre application Windows, accessibles via une page de paramètres dédiée. Par exemple, une application de lecteur de flux d’actualités peut permettre à l’utilisateur de spécifier les sources d’informations à afficher ou le nombre de colonnes à présenter à l’écran, tandis qu’une application météo peut offrir à l’utilisateur la possibilité de choisir entre les unités de mesure Celsius et Fahrenheit par défaut. Cet article fournit des recommandations et des bonnes pratiques pour la création et l’affichage des paramètres d’application dans les applications WinUI.

À quel moment proposer une page de paramètres ?

Voici des exemples d’options d’application qui appartiennent à une page de paramètres d’application :

  • Les options de configuration qui affectent le comportement de l’application et qui ne nécessitent pas de réajustation fréquente, telles que le choix entre Celsius ou Fahrenheit comme unités par défaut pour la température dans une application météo, la modification des paramètres de compte pour une application de messagerie, les paramètres des notifications ou les options d’accessibilité.
  • Options qui dépendent des préférences de l’utilisateur, telles que la musique, les effets sonores ou les thèmes de couleur.
  • Les informations d’application qui ne sont pas accessibles très souvent, telles que la politique de confidentialité, l’aide, la version de l’application ou les informations de copyright.

Les commandes qui font partie du flux de travail d’application classique (par exemple, la modification de la taille du pinceau dans une application art) ne doivent pas se trouver dans une page de paramètres. Pour en savoir plus sur l’emplacement des commandes, consultez les principes de base de la conception de commandes.

Recommandations générales

  • Conservez les pages de paramètres simples et utilisez des contrôles binaires (activés/désactivés). Un interrupteur à bascule est généralement le meilleur dispositif de contrôle pour un paramètre binaire.
  • Pour les paramètres qui permettent aux utilisateurs de choisir un élément parmi un ensemble allant jusqu'à 5 options mutuellement exclusives, utilisez boutons radio.
  • Créez un point d’entrée pour tous les paramètres de l’application dans la page des paramètres de votre application.
  • Gardez vos paramètres simples. Définissez les valeurs par défaut actives et conservez au minimum le nombre de paramètres.
  • Lorsqu’un utilisateur modifie un paramètre, l’application doit immédiatement refléter la modification.
  • N’incluez pas de commandes qui font partie du flux de travail d’application commun.

Point d’entrée

La façon dont les utilisateurs accèdent à la page des paramètres de votre application doit être basée sur la disposition de votre application.

Volet de navigation

Pour une disposition NavigationView , les paramètres de l’application doivent être le dernier élément de la liste des choix de navigation et être épinglés au bas. NavigationView fournit un élément de paramètres intégré à cet effet : définissez la propriété IsSettingsVisible pour true afficher automatiquement une entrée Paramètres en bas du volet de navigation.

point d’entrée des paramètres d’application pour le volet de navigation

Barre de commandes

Si vous utilisez une barre de commandes ou une barre d’outils, placez le point d’entrée des paramètres comme l’un des derniers éléments du menu de dépassement de capacité « Plus ». Si une meilleure visibilité pour le point d’entrée des paramètres est importante pour votre application, placez le point d’entrée directement sur la barre de commandes et non dans le menu déroulant.

point d’entrée des paramètres d’application pour la barre de commandes

Mise en page

La page paramètres de l’application doit ouvrir en plein écran et remplir toute la fenêtre. Utilisez une disposition à défilement avec une largeur maximale limitée (environ 1 000 à 1100 px) afin que le contenu reste lisible sur les écrans larges. Regroupez les paramètres associés sous les en-têtes de section à l’aide du style de texte BodyStrong .

Utilisez les contrôles SettingsCard et SettingsExpander à partir du Windows Community Toolkit pour générer votre page de paramètres. Ces contrôles fournissent une disposition cohérente et accessible avec un en-tête, une description, une icône et un contrôle d’action aligné sur le côté droit de la carte.

Pour obtenir des exemples d’implémentation complets, consultez la page des paramètres de la galerie WinUI Gallery et l’exemple Windows Community Toolkit SettingsControls.

mise en page des paramètres d’application sur le bureau

Carte de paramètres

Utilisez un SettingsCard pour les paramètres individuels. Chaque carte a un en-tête, une description facultative, un HeaderIcon facultatif et un contrôle d’action (par exemple, un ToggleSwitch, ComboBoxou Button) placé comme contenu de la carte. La définition de la propriété IsClickEnabled à true rend la carte entière cliquable, ce qui est utile pour les entrées de style navigation.

Élargisseur de Paramètres

Utilisez un SettingsExpander lorsqu’un paramètre a des sous-options qui doivent être révélées à la demande. L'expandeur affiche un contrôle d’action principal sur la ligne d’en-tête et des éléments supplémentaires SettingsCard à l’intérieur de la Items collection. Cela permet de compacter la page tout en présentant des options avancées. Évitez d’imbriquer les expandeurs à plus d’un niveau.

Paramètres du thème de l’application

Si votre application permet aux utilisateurs de choisir le mode de couleur de l’application, présentez ces options à l’aide d’une zone de liste déroulante à l’intérieur d’un SettingsCard. Les options doivent lire :

  • Lumière
  • Sombre
  • Utiliser le paramètre système

Vous pouvez également ajouter un lien hypertexte à la page Couleurs des paramètres de Windows où les utilisateurs peuvent accéder au mode d’application par défaut actuel et les modifier. Utilisez la chaîne « paramètres de couleur Windows » pour le texte du lien hypertexte et ms-settings:colors pour l’URI.

Section « Choisir un mode »

À propos de la section

Nous vous recommandons de placer une section À propos au bas de la page de paramètres à l’aide d’un SettingsExpander. La ligne d’en-tête réduite doit afficher le nom, l’icône et le numéro de version de votre application. La zone développée peut inclure :

  • Lien vers le dépôt ou le site web de votre application.
  • Lien vers des bogues de fichier ou des fonctionnalités de demande.
  • Liste des dépendances et références en tant que contrôles HyperlinkButton .
  • Informations juridiques telles qu’un avis de copyright, des conditions d’utilisation et des liens de déclaration de confidentialité.

Section « à propos de cette application » avec le bouton « Donner des commentaires »

Contenu de page recommandé

Une fois que vous avez une liste d’éléments que vous souhaitez inclure dans la page des paramètres de votre application, tenez compte des instructions suivantes :

  • Regroupez des paramètres similaires ou connexes sous un en-tête de section.

  • Essayez de conserver le nombre total de paramètres à un maximum de quatre ou cinq.

  • Affichez les mêmes paramètres, quel que soit le contexte de l’application. Si certains paramètres ne sont pas pertinents dans un contexte donné, désactivez-le SettingsCard en définissant IsEnabledfalse sur .

  • Utilisez des étiquettes descriptives d'un mot pour les en-têtes des paramètres. Par exemple, nommez le paramètre « Comptes » au lieu de « Paramètres de compte » pour les paramètres liés au compte.

  • Si un paramètre est directement lié au web, utilisez un élément cliquable SettingsCard avec IsClickEnabled="True" et une icône d’action adéquate pour indiquer la navigation externe.

  • Combinez des paramètres moins utilisés en un SettingsExpander afin que les paramètres communs puissent chacun avoir leur propre SettingsCard. Placez du contenu ou des liens qui contiennent uniquement des informations dans une section « À propos ».

  • Présenter du contenu de haut en bas dans une seule colonne, pouvant faire défiler le contenu si nécessaire.

  • Utilisez les contrôles suivants pour les paramètres d’application :

    • Interrupteurs à bascule : pour permettre aux utilisateurs d'activer ou désactiver des options.
    • Cases d’option : pour permettre aux utilisateurs de choisir un élément parmi un ensemble de 5 options qui sont mutuellement exclusives et connexes.
    • Zones de liste déroulante : pour permettre aux utilisateurs de choisir parmi un ensemble d’options compactes.
    • Zones de saisie de texte : pour permettre aux utilisateurs d’entrer du texte. Utilisez le type de zone d’entrée de texte qui correspond au type de texte que vous obtenez de l’utilisateur, tel qu’un e-mail ou un mot de passe.
    • Liens hypertexte : pour faire passer l’utilisateur à une autre page de l’application ou à un site web externe.
    • Boutons : pour permettre aux utilisateurs de lancer une action immédiate.

  • Ajoutez un message descriptif si l’un des contrôles est désactivé. Utilisez la propriété de SettingsCard pour expliquer pourquoi le paramètre n’est pas disponible.

  • Lorsqu’un utilisateur modifie un paramètre, l’application doit immédiatement refléter la modification : ne nécessite pas de bouton de confirmation.

  • Last updated on