Tamaños de pantalla y puntos de interrupción

Las aplicaciones de Windows se pueden ejecutar en cualquier dispositivo que ejecute Windows, lo que incluye tabletas, escritorios, televisores, etc. Con un gran número de destinos de dispositivo y tamaños de pantalla en todo el ecosistema de Windows, en lugar de optimizar la interfaz de usuario para cada dispositivo, se recomienda diseñar para algunas categorías de ancho clave (también denominadas "puntos de interrupción"):

  • Pequeño (menos de 640 píxeles)
  • Medio (de 641 a 1007 píxeles)
  • Grande (1008 píxeles o más)

Sugerencia

Cuando diseñes para puntos de interrupción específicos, diseña para la cantidad de espacio en pantalla disponible para tu aplicación (ventana de la aplicación), no el tamaño de la pantalla. Cuando la aplicación se ejecuta a pantalla completa, la ventana de la aplicación tiene el mismo tamaño que la pantalla, pero cuando la aplicación no está a pantalla completa, la ventana es menor que la pantalla.

Puntos de interrupción

En esta tabla se describen las distintas clases de tamaño y puntos de interrupción.

Puntos de interrupción con diseño dinámico

Clase de tamaño Puntos de interrupción Tamaño de pantalla típico Dispositivos Tamaños de ventana
Pequeña hasta 640 píxeles 20" a 65" Televisores 320x569, 360x640, 480x854
Medio 641 - 1007px 7" a 12" Tabletas 960 x 540
Grande 1008 píxeles y versiones posteriores 13" y versiones posteriores Equipos, portátiles, Surface Hub 1024 x 640, 1366 x 768, 1920 x 1080

¿Por qué los televisores se consideran "pequeños"?

Aunque la mayoría de los televisores son físicamente bastante grandes (de 40 a 65 pulgadas es lo habitual) y tienen resoluciones altas (HD o 4k), el diseño para una televisión de 1080 píxeles que se ve a 3 m de distancia es diferente del diseño de un monitor de 1080 píxeles cuando se está sentado a una distancia de 30 cm en el escritorio. Cuando tienes en cuenta la distancia, los 1080 píxeles de los televisores son más similares al monitor 540 píxeles que está mucho más cerca.

El sistema de píxeles efectivo de XAML toma automáticamente la distancia de visualización en cuenta. Al especificar un tamaño para un control o un intervalo de punto de interrupción, estás usando realmente píxeles "efectivos". Por ejemplo, si crea código con capacidad de respuesta para 1080 píxeles o más, un monitor de 1080 usará ese código, pero un televisor de 1080p no --porque aunque un televisor de 1080p tiene 1080 píxeles físicos, solo tiene 540 píxeles efectivos. Lo que hace que el diseño de un televisor sea similar al diseño de una pantalla pequeña.

Píxeles efectivos y factor de escala

XAML ayuda a ajustar automáticamente los elementos de la interfaz de usuario para que sean legibles y fáciles de interactuar con en todos los dispositivos y tamaños de pantalla.

Cuando la aplicación se ejecuta en un dispositivo, el sistema usa un algoritmo para normalizar la manera en que los elementos de la interfaz de usuario se muestran en la pantalla. Este algoritmo de escalado tiene en cuenta la distancia de visualización y la densidad de la pantalla (píxeles por pulgada) para optimizar el tamaño percibido (en lugar del tamaño físico). El algoritmo de escalado garantiza que una fuente de 24 px en un dispositivo Surface Hub a 3 metros de distancia sea tan legible para el usuario como una fuente de 24 px en un teléfono de 5 pulgadas a unos centímetros de distancia.

El contenido se escala de forma diferente en diferentes dispositivos en función de la distancia que se espera que el usuario esté desde la pantalla del dispositivo.

Debido a cómo funciona el sistema de escalado, al diseñar la aplicación XAML, estás diseñando en píxeles efectivos, no en píxeles físicos reales. Los píxeles efectivos (epx) son una unidad de medida virtual y se utilizan para expresar las dimensiones y el espaciado del diseño, con independencia de la densidad de la pantalla. (En nuestras instrucciones, epx, ep y px se usan indistintamente).

Al diseñar, puedes ignorar la densidad de píxeles y la resolución de pantalla real. En su lugar, diseña la resolución efectiva (la resolución en píxeles efectivos) de una clase de tamaño (para obtener más información, consulta el artículo Tamaños de pantalla y puntos de interrupción).

Sugerencia

Al crear bocetos de pantalla en los programas de edición de imágenes, establece el valor de PPP en 72 y las dimensiones de imagen en la resolución eficaz de la clase de tamaño que quieres obtener.

Múltiplo de cuatro

Una imagen epx de 4 epx que se escala a muchas dimensiones sin píxeles fraccionarios.

Los tamaños, los márgenes y las posiciones de los elementos de la interfaz de usuario siempre deberían estar en múltiplos de 4 epx en tus aplicaciones para UWP.

XAML se escala en una gama de dispositivos con escalado de 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350% y 400%. La unidad base es 4 porque se puede escalar a estos niveles como número entero (por ejemplo, 4 x 125 % = 5, 4 x 150 % = 6). Al usar múltiplos de cuatro, se alinean todos los elementos de la interfaz de usuario con píxeles enteros y se garantiza que los elementos de la interfaz de usuario tengan contornos afilados y nítidos. (Ten en cuenta que el texto no tiene este requisito; el texto puede tener cualquier tamaño y posición).