Tamaños de pantalla y puntos de interrupción

Windows aplicaciones se ejecutan en una amplia gama de dispositivos, desde tabletas y portátiles hasta equipos de escritorio, monitores grandes y TELEVISORes. En lugar de optimizar la interfaz de usuario para cada tamaño de pantalla, diseñe algunas categorías de ancho clave 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

Al diseñar puntos de interrupción específicos, diseñe la cantidad de espacio de pantalla disponible para la aplicación (la ventana de la aplicación), no el tamaño de la pantalla física. Cuando la aplicación se ejecuta en pantalla completa, la ventana de la aplicación coincide con el tamaño de la pantalla. Cuando no es así, 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ño hasta 640px 20" a 65" Televisores 480x854, 540x960
Medio 641 - 1007px 7" a 12" Tabletas 960 x 540
Grande 1008 px y superior 13" y arriba Equipos, portátiles, Surface Hub 1024 x 640, 1366 x 768, 1920 x 1080

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

La mayoría de los televisores son físicamente grandes (de 40 a 65 pulgadas es común) y tienen resoluciones altas (HD o 4K). Sin embargo, el diseño de un televisor de 1080p que se ve a partir de 10 pies es diferente del diseño de un monitor de 1080p en su escritorio. Cuando se tiene en cuenta la distancia de visualización, los 1080 píxeles del televisor son más parecidos a un monitor de 540 píxeles que está mucho más cerca.

El sistema de píxeles efectivos de XAML tiene en cuenta automáticamente la distancia de visualización. Al especificar un tamaño para un control o un intervalo de puntos de interrupción, se usan píxeles efectivos . Por ejemplo, si crea código dinámico para 1080 píxeles o más, un monitor de 1080p usa ese código, pero un televisor de 1080p no , porque aunque el televisor tiene 1080 píxeles físicos, solo tiene 540 píxeles efectivos. Esto 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 ajusta automáticamente los elementos de la interfaz de usuario para que sean legibles y fáciles de interactuar 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 cómo se muestran los elementos de la interfaz de usuario en la pantalla. Este algoritmo de escalado tiene en cuenta la distancia de visualización y la densidad de pantalla (píxeles por pulgada) para optimizar el tamaño percibido en lugar del tamaño físico. El algoritmo garantiza que una fuente de 24 px en una pantalla grande a 10 pies de distancia es tan legible como una fuente de 24 px en una pantalla pequeña a unos pocos pulgadas de distancia.

Diagrama que muestra cómo se escala el contenido de forma diferente en los dispositivos a diferentes distancias de visualización.

Al diseñar la aplicación XAML, diseñas en píxeles efectivos, no en píxeles físicos reales. Los píxeles efectivos (epx) son una unidad virtual de medida utilizada para expresar dimensiones de diseño y espaciado, independientemente de la densidad de la pantalla. (En nuestras instrucciones, epx, ep y px se usan indistintamente).

Puede omitir la densidad de píxeles y la resolución de pantalla real al diseñar. En su lugar, diseñe en función de la resolución efectiva (la resolución en píxeles efectivos) correspondiente a una clase de tamaño.

Sugerencia

Al crear maquetas de pantalla en programas de edición de imágenes, establezca los PPP en 72 y configure las dimensiones de la imagen según la resolución efectiva de la clase de tamaño a la que se dirige.

Múltiplo de cuatro

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

Los tamaños, márgenes y posiciones de los elementos de la interfaz de usuario siempre deben estar en múltiplos de 4 epx en las aplicaciones XAML.

XAML se escala en una gama de dispositivos con niveles de escalado del 100 %, 125 %, 150 %, 175 %, 200 %, 225 %, 250 %, 300 %, 350 % y 400 %. La unidad base es 4 porque, al escalarse a estos niveles, da como resultado un número entero (por ejemplo, 4 × 125 % = 5; 4 × 150 % = 6). El uso de múltiplos de cuatro alinea todos los elementos de la interfaz de usuario con píxeles enteros y garantiza bordes nítidos y afilados. (El texto no tiene este requisito; el texto puede tener cualquier tamaño y posición).

  • Last updated on