Instructions pour les cibles tactiles
Tous les éléments d’interface utilisateur interactifs de votre application Windows doivent être suffisamment volumineux pour permettre aux utilisateurs d’accéder et d’utiliser avec précision, quel que soit le type d’appareil ou la méthode d’entrée.
La prise en charge des entrées tactiles (et la nature relativement imprécise de la zone de contact tactile) nécessite une optimisation supplémentaire en ce qui concerne la taille cible et la disposition de contrôle, car l’ensemble de données d’entrée plus volumineux et plus complexe signalé par le numériseur tactile est utilisé pour déterminer la cible prévue (ou la plus probable) de l’utilisateur.
Tous les contrôles UWP ont été conçus avec des tailles et des dispositions de cibles tactiles par défaut qui vous permettent de créer des applications visuellement équilibrées et attrayantes qui sont confortables, faciles à utiliser et inspirent la confiance.
Dans cette rubrique, nous décrivons ces comportements par défaut pour vous permettre de concevoir votre application pour une facilité d’utilisation maximale à l’aide de contrôles de plateforme et de contrôles personnalisés (si votre application en a besoin).
API importantes : Windows.UI.Core, Windows.UI.Input, Windows.UI.Xaml.Input
Taille Fluent Standard
La taille Fluent Standard a été créée pour fournir un équilibre entre le confort de l’utilisateur et la densité des informations. Tous les éléments sur l’écran s’alignent sur une cible de pixels effectifs (epx) de 40x40, ce qui permet d’aligner les éléments de l’interface utilisateur sur une grille et de les mettre à l’échelle de manière appropriée en fonction de la mise à l’échelle au niveau du système.
Remarque
Pour plus d’informations sur les pixels effectifs et la mise à l’échelle, consultez tailles d’écran et points d’arrêt
Pour plus d’informations sur la mise à l’échelle au niveau du système, consultez Alignement, marge, remplissage.
Taille Fluent Compact
Les applications peuvent afficher un niveau supérieur de densité d’informations avec le dimensionnement Fluent Compact. Le dimensionnement compact aligne les éléments d’interface utilisateur sur une cible epx de 32 x 32, ce qui permet aux éléments de l’interface utilisateur de s’aligner sur une grille plus étroite et de procéder à une mise à l’échelle appropriée en fonction de la mise à l’échelle au niveau du système.
Exemples
Le dimensionnement compact peut être appliqué au niveau de la page ou de la grille.
Niveau page
<Page.Resources>
<ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
</Page.Resources>
Niveau grille
<Grid>
<Grid.Resources>
<ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
</Grid.Resources>
</Grid>
Taille de la cible
En général, définissez la taille de votre cible tactile sur une plage carrée de 7,5 mm (40 x 40 pixels sur un écran PPI de 135 pixels sur un plateau de mise à l’échelle de 1,0x). En règle générale, les contrôles UWP s’alignent sur la cible tactile 7,5mm (cela peut varier en fonction du contrôle spécifique et des modèles d’utilisation courants). Pour plus d’informations, consultez la taille et la densité du contrôle.
Ces recommandations de taille cible peuvent être ajustées selon les besoins de votre scénario particulier. Voici quelques éléments à prendre en considération :
- Fréquence des touches : envisagez d’effectuer des cibles qui sont à plusieurs reprises ou fréquemment enfoncées plus grande que la taille minimale.
- Conséquence de l’erreur : les cibles qui ont des conséquences graves si elles sont touchées dans l’erreur doivent avoir un remplissage plus important et être placées plus loin du bord de la zone de contenu. Cela est particulièrement vrai pour les cibles qui sont fréquemment touchées.
- Position dans la zone de contenu.
- Facteur de forme et taille d’écran.
- Posture du doigt.
- Visualisations tactiles.
Articles connexes
- Concepts de base de la conception pour les applications Windows
- Tailles d’écran et points d’arrêt
- Taille et densité du contrôle
- Alignement, marge, remplissage
Exemples
- Exemple d’entrée de base
- Exemple d’entrée à faible latence
- Exemple de mode d’interaction utilisateur
- Exemples de visuels de focus
Exemples d’archive
Windows developer