Instructions pour les cibles tactiles

  • Article

Tous les éléments d’interface utilisateur interactifs de votre application Windows doivent être suffisamment volumineux pour que les utilisateurs puissent y accéder et les utiliser avec précision, quel que soit le type d’appareil ou la méthode d’entrée.

La prise en charge de l’entrée tactile (et la nature relativement imprécise de la zone de contact tactile) nécessitent une optimisation supplémentaire en ce qui concerne la taille de la cible et la disposition des contrôles, car l’ensemble plus vaste et plus complexe de données d’entrée 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 cibles tactiles par défaut qui vous permettent de créer des applications visuellement équilibrées et attrayantes qui sont confortables, faciles à utiliser et qui inspirent confiance.

Dans cette rubrique, nous décrivons ces comportements par défaut afin que vous puissiez concevoir votre application pour une 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.

Notes

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 plus élevé de densité d’informations avec le dimensionnement Fluent Compact. Le dimensionnement compact aligne les éléments d’interface utilisateur sur une cible epx 32 x 32, ce qui permet aux éléments d’interface utilisateur de s’aligner sur une grille plus étroite et d’effectuer 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 de 135 ppp à 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 de 7,5 mm (cela peut varier en fonction du contrôle spécifique et des modèles d’utilisation courants). Pour plus d’informations, consultez Taille et densité du contrôle .

Vous pouvez modifier ces recommandations en matière de tailles de cibles en fonction du scénario particulier de votre application. Voici quelques possibilités d’opérations à prendre en considération :

  • Fréquence des touches : envisagez de faire en sorte que les cibles qui sont enfoncées à plusieurs reprises ou fréquemment dépassent la taille minimale.
  • Conséquence de l’erreur : les cibles qui ont des conséquences graves si elles sont touchées par erreur doivent avoir un remplissage plus important et être placées plus loin du bord de la zone de contenu. Ceci concerne tout particulièrement les cibles fréquemment utilisées.
  • Position dans la zone de contenu.
  • Facteur de forme et taille d’écran.
  • Posture des doigts.
  • Visualisations tactiles.

Exemples

Exemples d’archive