Passer au contenu principal

Puces

Présentation​

La puce d'interface utilisateur affiche de petits éléments d'information ou des balises d'une manière visuellement attrayante et compacte. Il est couramment utilisé pour représenter des catégories, des filtres ou des sélections dans les interfaces utilisateur.

Pour savoir quand utiliser ce composant en détail, consultez l'arbre de décision des composants de l'interface utilisateur suivant :

Arbre de décision des composants de l'interface utilisateur pour les puces

Quand l'utiliser​

Utilisez le modèle de puce lorsque vous avez besoin de représenter visuellement des informations distinctes, telles que :

  • Systèmes de balisage
  • Options de filtrage
  • Sélections dans une interface à sélection multiple
  • Catégorisation du contenu

Structure​

Structure d'un composant de puce d'interface utilisateur

  1. Conteneur qui indique en un coup d'œil les différents types d'interactivité et de fonctionnalité
  2. Échantillon facultatif de vignette/avatar/icône/couleur pour distinguer les catégories
  3. Étiquette permettant d'identifier la puce
  4. Icône de suppression ou de liste déroulante facultative pour retirer un jeton ou déclencher un menu de sélection

Directives générales​

  • Il doit y avoir une relation claire entre les puces et le contenu ou la tâche qu'elles représentent.
  • L'objectif des puces d'interface utilisateur est de faciliter les tâches à accomplir ou le contenu plus facile à trier. Utilisez les puces avec parcimonie et uniquement lorsque cela est nécessaire pour éviter d'encombrer l'interface.
  • Testez le composant de puce sur différents appareils et tailles d'écran pour garantir un rendu et une convivialité cohérents.

Directives d'interaction​

Image illustrant les 4 types de puces : entrée, choix, filtre et action

  1. Puces d'entrée : les puces d'entrée affichent les informations saisies par l'utilisateur. Ils permettent la saisie de l'utilisateur et clarifient cette saisie en convertissant le texte en puce. Ces puces comprennent une icône X permettant aux utilisateurs de supprimer leurs sélections.
  2. Puces de choix : les puces de choix permettent une sélection unique ou multiple à partir d'un ensemble d'options de saisie dans un formulaire. Il doit y avoir au moins 2 options parmi lesquelles les utilisateurs peuvent faire leur choix. Les puces de choix peuvent servir d'alternative aux boutons à bascule, aux boutons d'option et aux menus à sélection unique.
  3. Puces de filtre : les puces de filtre utilisent des termes pertinents pour filtrer certains types de contenu. Les puces de filtre peuvent servir d'alternative aux boutons à bascule ou aux cases à cocher.
  4. Puces d'action : les puces d'action déclenchent une action. Vous pouvez utiliser une icône de début facultative pour ajouter une description visuelle du texte sur l'étiquette.

Contenu​

Directives générales relatives à la rédaction​

  • Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
  • Utilisez des verbes au présent et la forme active dans la plupart des cas.
  • Utilisez des contractions courantes pour donner à votre texte un ton plus naturel et informel.
  • Utilisez un langage simple. Évitez tout jargon inutile et les formulations complexes.
  • Utilisez des termes et des phrases concis.

Inclure une étiquette​

  • Tous les types de puces doivent inclure une étiquette pour identifier la puce.
  • Utilisez des étiquettes de puces concises et descriptives pour transmettre la signification en un coup d'œil.
  • Utilisez une seule ligne de texte pour les étiquettes de puces. Évitez d'utiliser des étiquettes de texte longues qui s'étendent sur une deuxième ligne.
Gardez l'étiquette de texte concise.
N'utilisez pas d'étiquettes de texte longues.

Accessibilité​

  • Assurez-vous que le flux est conçu pour être accessible aux utilisateurs en situation de handicap, notamment ceux qui ont besoin d'une compatibilité avec un lecteur d'écran et d'une navigation au clavier.
  • Lorsque vous utilisez des puces avec des échantillons de couleur et des icônes, nommez la couleur ou l'icône dans l'étiquette de texte. Ne comptez pas uniquement sur la couleur pour transmettre la signification.

Réactivité​

Image illustrant comment le modèle de puce d'interface utilisateur s'adapte à des facteurs de forme plus petits, tels que les appareils mobiles

Le modèle de puce d'interface utilisateur est conçu de sorte que peu de modifications sont requises en cas d'utilisation sur une tablette ou un smartphone. L'enveloppement des puces dans le modèle peut se produire à mesure que la largeur de l'écran rétrécit.

  1. Enveloppement de puces sur mobile. Les puces qui ne peuvent plus tenir dans l'espace vont sur une deuxième ligne.
  2. Les puces avec suffisamment d'espace restent sur une ligne.

Création de thèmes​

Par défaut, le thème et la marque correspondent à ceux de l'application, sauf s'ils sont remplacés.

Il est possible de donner un thème aux modèles pour répondre à des exigences spécifiques en matière de valorisation de la marque et aux besoins des clients. Cela inclut des éléments visuels tels que les couleurs, la typographie, les icônes, les boutons et d'autres composants et éléments graphiques.

En savoir plus sur les thèmes avec les jetons de conception

Composants​

Les puces d'entrée ont les composants connexes suivants :

Modèles​

Ressources​

Téléchargez un fichier ZIP contenant tous les derniers modèles Jutro et commencez à concevoir des expériences.

Bibliothèque de modèles Jutro (19.6 MB)