Partager via

Instructions relatives à la conception des interactions des widgets

  • Article

Remarque

Certaines informations portent sur la préversion du produit, qui est susceptible d’être en grande partie modifié avant sa commercialisation. Microsoft n’offre aucune garantie, expresse ou implicite, concernant les informations fournies ici.

Important

La fonctionnalité décrite dans cette rubrique est disponible dans les versions d’évaluation du Canal développeurs de Windows à partir de la build 25217. Pour plus d’informations sur les versions d’évaluation de Windows, consultez Windows 10 Insider Préversion.

Cet article fournit des instructions détaillées pour la conception d’interactions pour les widgets Windows.

Un widget doit être visible et ciblé et représenter un aspect unique de l’objectif principal de l’application. Les widgets peuvent fournir un ou plusieurs appels à l’action. Lorsque l’utilisateur clique sur un appel à l’action, le widget doit lancer l’application ou le site web associé au lieu d’implémenter l’action dans le widget lui-même. Un widget n’a qu’une seule page principale qui peut héberger plusieurs interactions. Cliquer sur un élément dans le widget ne doit jamais vous amener à une vue complètement différente du widget. Par exemple, dans un widget météo, vous pouvez afficher le temps pendant plusieurs jours, mais cliquer sur l’un des jours ne développera pas les détails inline, mais lancera plutôt l’application ou le web.

Voici le nombre maximal de points tactiles recommandés pour chaque taille de widget prise en charge.

Taille du widget Nombre maximal de points tactiles
small 1
 Moyen 3
large 4

Les éléments de navigation suivants ne sont pas pris en charge dans les widgets Windows :

  • Les tableaux croisés dynamiques ne sont pas pris en charge dans les widgets
  • Les pages L2 ne sont pas prises en charge dans les widgets
  • Le défilement vertical ou horizontal ne sera pas pris en charge dans les widgets

conteneurs

Les images suivantes montrent des exemples d’utilisations d’éléments de conteneur dans un modèle de widget. Les conteneurs regroupent des éléments visuels en colonnes et en lignes pour créer une structure de grille hiérarchique.

Quatre images de widgets qui illustrent des conteneurs. Les widgets des images ont des éléments divisés en lignes et colonnes pour fournir une structure de grille hiérarchique.

Les images suivantes montrent des exemples d’utilisations d’éléments de lien d’image dans un modèle de widget.

Deux images de widgets qui illustrent des liens d’image. Les images sont organisées dans les colonnes et les lignes faisant une grille.

Pagination

Les images suivantes montrent des exemples de pagination dans un modèle de widget. Les contrôles de pagination peuvent être alignés horizontalement ou verticalement. Les flèches de navigation s’affichent en réponse à un pointage de curseur.

Cet ensemble de deux images affiche la pagination horizontale. Dans la première image, une colonne de points est alignée le long du côté droit. Un point est plus grand pour indiquer la page actuellement active. Dans la deuxième image, un curseur se déplace sur une flèche pointant vers le bas du widget qui permet à l’utilisateur de passer à la page suivante. Il existe une flèche pointant vers le haut correspondante en haut du widget pour accéder à la page précédente.

Cet ensemble de deux images affiche la pagination verticale. Dans la première image, une ligne de points est alignée le long du bas. Un point est plus grand pour indiquer la page actuellement active. Dans la deuxième image, un curseur se déplace sur une flèche pointant vers la droite du widget qui permet à l’utilisateur de passer à la page suivante. Il existe une flèche correspondante pointant vers la gauche du widget pour accéder à la page précédente.

Ces deux images illustrent l’apparence des contrôles de pagination lorsque le widget a un arrière-plan d’image.

Les images suivantes illustrent des exemples de liens hypertexte dans un modèle de widget.

Deux images de widgets qui illustrent des liens hypertexte. La première image montre une chaîne de texte avec lien hypertexte. Le texte est simple. Dans la deuxième image, un curseur de souris pointe sur le lien hypertexte, ce qui entraîne le soulignement du texte.

Image montrant un lien hypertexte centré au bas du widget, juste au-dessus de la ligne horizontale des points de pagination. Un X rouge indique que les points de pagination et le lien hypertexte ne doivent pas se trouver dans le même espace. Sur la droite, une autre image montre le lien hypertexte en bas, mais les points de pagination sont alignés verticalement dans une colonne située à droite. Une vérification verte indique que ce placement des deux éléments est correct.

Deux images de widgets qui illustrent des menus déroulants. Dans l’image de gauche, le menu déroulant est réduit. Dans l’image de droite, la liste déroulante est développée et s’étend sur la bordure du widget

Les widgets peuvent s’étendre légèrement au-delà de leur taille de widget temporairement si l’utilisateur interagit avec un menu ou une liste déroulante. Le comportement du menu doit être ignoré et fermer le menu si un utilisateur clique en dehors de la zone de menu/liste déroulante.