Objets Interface utilisateur

Des pratiques efficaces de dénomination et de disposition des objets d’interface utilisateur améliorent la lisibilité, la maintenabilité et les performances. Cette section décrit les conventions pour nommer, organiser et concevoir des éléments d’interface utilisateur afin d’assurer la clarté et la cohérence.

Nommer un objet d’interface utilisateur

Au lieu d’utiliser des préfixes basés sur les rôles, essayez de conserver les noms d’objets d’interface utilisateur simples, clairs et significatifs tout en évitant les redondances.
  • Utilisez des noms concis et descriptifs qui définissent la fonction de l’objet sans préfixes inutiles. Par exemple :
    • StartAction
       au lieu de
      btnStart
    • TemperatureString
       au lieu de
      lblTemperature
    • Username
       au lieu de
      txtUsername
IMPORTANT: Évitez les noms vagues comme
Object1
 ou
UIElement
.

Conteneurs et hiérarchie

L’organisation des conteneurs et des objets est essentielle pour un environnement collaboratif et pour gagner du temps lors de la création de votre projet.
  • Organisez les objets d’interface utilisateur par fonction à l’aide de conteneurs, tels que des panneaux, des boutons, des étiquettes, des graphiques et des éléments associés.
  • Utilisez des hiérarchies imbriquées pour améliorer la structure et l’évolutivité.
  • Réduisez le nombre de nœuds en évitant les propriétés redondantes.
  • Réduisez les liens dynamiques inutiles qui ne sont nécessaires qu’au moment de la conception.
    CONSEIL: Reportez-vous à la section Liens dynamiques pour plus d’informations à ce sujet.

Taille et disposition

Assurez la cohérence de la taille et du positionnement des objets pour une disposition plus équilibrée dans votre application.
  • Assurez un dimensionnement cohérent pour des objets d’interface utilisateur similaires.
    CONSEIL: Reportez-vous à la section Disposition des objets graphiques pour plus d’informations à ce sujet.
  • Utilisez le positionnement relatif (ancrages) pour prendre en charge différentes tailles d'écran.
  • Si vous souhaitez que vos widgets s’adaptent automatiquement aux modifications de contenu, telles que la taille de police, utilisez la fonction de taille
    Auto
    .
    CONSEIL: La fonction
    Auto
     est conçue pour les scénarios de type ajustement au contenu, ce qui la rend idéale lorsque les conteneurs doivent s’adapter à leur contenu ou lorsque le texte doit s’adapter aux dimensions du conteneur.
    Pour activer
    Auto
    , ouvrez le panneau
    Propriétés
     et supprimez la valeur du champ
    Hauteur
     ou
    Largeur
    . Une fois cette valeur supprimée, le champ passera automatiquement à
    Auto
    , permettant un redimensionnement dynamique en fonction du contenu.

Conception cohérente

Assurez la cohérence pour obtenir une application soignée et aboutie.
  • Utilisez les feuilles de style et leurs styles prédéfinis.
  • Adoptez un thème unifié pour les couleurs, les polices et les bordures.
  • Alignez les éléments de l’interface utilisateur pour obtenir un aspect structuré et professionnel.
CONSEIL: Consultez Objets graphiques, Feuilles de style et Appliquer un style global au projet pour plus d’informations.

Types réutilisables

Utilisez des types réutilisables et des styles globaux pour assurer la cohérence et simplifier la maintenance des différents composants de l’interface utilisateur.
  • Créez des types réutilisables pour les objets d’interface utilisateur courants, tels que les boutons et les champs de texte.
  • Utilisez des styles globaux pour le texte et les boutons afin de maintenir l’uniformité.

Espacement, alignement et système de grille

Appliquez un espacement cohérent et un alignement de disposition pour créer une disposition d’interface utilisateur propre, évolutive et visuellement équilibrée.
  • Respectez la règle des 8 pixels : Conservez l’espacement et les marges par incréments de 8 px (8 px, 16 px, 24 px).
  • Utilisez une disposition basée sur une grille pour une meilleure structure de l’interface utilisateur.
  • Veillez à des marges et des espacements cohérents pour un rendu uniforme.
Fournir une réponse
Vous avez des questions ou des commentaires sur cette documentation ? Veuillez envoyer vos commentaires ici.
Normal