Tailles d’écran et points de rupture

Windows applications s’exécutent sur un large éventail d’appareils, de tablettes et d’ordinateurs portables aux ordinateurs de bureau, aux grands moniteurs et aux téléviseurs. Au lieu d’optimiser votre interface utilisateur pour chaque taille d’écran, concevez quelques catégories de largeur clés appelées points d’arrêt :

  • Petite (inférieure à 640 pixels)
  • Moyenne (641 à 1 007 pixels)
  • Grande (supérieure ou égale à 1008 pixels)

Conseil

Lorsque vous concevez des points d’arrêt spécifiques, concevez la quantité d’espace d’écran disponible pour votre application (fenêtre de l’application), et non la taille de l’écran physique. Lorsque votre application s’exécute en plein écran, la fenêtre de l’application correspond à la taille de l’écran. Quand ce n’est pas le cas, la fenêtre est plus petite que l’écran.

Points d’arrêt

Ce tableau décrit les différentes classes de taille et les points d’arrêt.

Points d’arrêt de la conception réactive

Classe de taille Points d’arrêt Taille d’écran classique Appareils Tailles de fenêtre
Petit jusqu’à 640 px 20 " à 65 " TVs 480x854, 540x960
Moyenne 641 - 1007px 7 » à 12 » Tablettes 960 x 540
grand 1008px et haut 13 pouces et versions ultérieures PC, ordinateurs portables, Surface Hub 1024 x 640, 1366 x 768, 1920 x 1080

Pourquoi les téléviseurs sont-ils considérés comme de « petite » taille ?

La plupart des téléviseurs sont physiquement volumineux (40 à 65 pouces est courant) et ont des résolutions élevées (HD ou 4K). Toutefois, concevoir pour un téléviseur 1080p regardé à une distance de 10 pieds est différent de concevoir pour un écran 1080p sur votre bureau. Lorsque vous comptez pour la distance d’affichage, les 1080 pixels de la télévision sont plus similaires à un moniteur de 540 pixels qui est beaucoup plus proche.

Le système de pixels effectifs de XAML prend automatiquement en compte la distance de visualisation. Lorsque vous spécifiez une taille pour un contrôle ou une plage de points d’arrêt, vous utilisez des pixels effectifs . Par exemple, si vous créez du code réactif pour 1080 pixels ou plus, un moniteur de 1080p utilise ce code, mais un téléviseur 1080p ne le fait pas , car bien que la télévision ait 1080 pixels physiques, elle n’a que 540 pixels effectifs. Cela rend la conception d’une télévision similaire à la conception pour un petit écran.

Pixels effectifs et facteur d’échelle

XAML ajuste automatiquement les éléments d’interface utilisateur afin qu’ils soient lisibles et faciles à interagir avec tous les appareils et toutes les tailles d’écran.

Lorsque votre application s’exécute sur un appareil, le système utilise un algorithme pour normaliser la façon dont les éléments d’interface utilisateur s’affichent à l’écran. Cet algorithme de mise à l’échelle prend en compte la distance d’affichage et la densité d’écran (pixels par pouce) pour optimiser la taille perçue plutôt que la taille physique. L’algorithme garantit qu’une police de 24 px sur un grand écran de 10 pieds est aussi lisible qu’une police de 24 px sur un petit écran à quelques pouces.

Diagramme montrant comment le contenu est mis à l’échelle différemment sur les appareils à différentes distances d’affichage.

Lorsque vous concevez votre application XAML, vous concevez en pixels effectifs, et non en pixels physiques réels. Les pixels effectifs (epx) sont une unité virtuelle de mesure utilisée pour exprimer les dimensions de disposition et l’espacement, indépendamment de la densité de l’écran. (Dans nos directives, epx, ep et px sont utilisés indifféremment.)

Vous pouvez ignorer la densité de pixels et la résolution d’écran réelle lorsque vous concevez. Au lieu de cela, concevez la résolution effective (la résolution en pixels effectifs) pour une classe de taille.

Conseil

Lorsque vous créez des maquettes d’écran dans les programmes d’édition d’images, définissez le DPI sur 72 et définissez les dimensions de l’image sur la résolution effective pour la classe de taille que vous ciblez.

Multiples de quatre

Une image de 4 epx redimensionnée à de nombreuses tailles sans pixels fractionnaires.

Les tailles, les marges et les positions des éléments d’interface utilisateur doivent toujours être des multiples de 4 epx dans vos applications XAML.

XAML s’adapte à une large gamme d’appareils avec des paliers de mise à l’échelle de 100 %, 125 %, 150 %, 175 %, 200 %, 225 %, 250 %, 300 %, 350 % et 400 %. L’unité de base est 4, car elle s’adapte à ces plateaux sous la forme d’un nombre entier (par exemple, 4 × 125% = 5, 4 × 150% = 6). L’utilisation de multiples de quatre aligne tous les éléments de l’interface utilisateur sur des pixels entiers et garantit des contours nets et bien définis. (Le texte n’a pas cette exigence ; le texte peut avoir n’importe quelle taille et position.)

  • Last updated on