Directrices para el ajuste de escala de la densidad de píxeles

Artículo
05/15/2015

El sistema escala de forma automática las aplicaciones de Windows en tiempo de ejecución (que se ejecuten en Windows, Windows Phone o ambos) para garantizar una legibilidad y funcionalidad consistentes independientemente de la densidad de píxeles de una pantalla. Sigue estas directrices para preservar la calidad de la interfaz de usuario de tu aplicación cuando se escala para dispositivos con diferentes densidades de píxeles.

Nota Estas directrices no se aplican a las aplicaciones de Windows Phone que utilicen Silverlight. Para ver instrucciones específicas sobre Silverlight, consulta Multi-resolution apps for Windows Phone 8.

Diferencia en densidad de píxeles entre una tableta táctil estándar y una HD

Descripción

Sin escalado, los tamaños físicos de los objetos mostrados en pantalla se reducen cuando aumenta la densidad de píxeles del dispositivo. Si llega el momento en que los elementos de la interfaz de usuario van a ser demasiado pequeños como para poder tocarlos y el texto demasiado pequeño como para poder leerlo, Windows escala automáticamente tu aplicación basándose en las siguientes mesetas de escalado:

Aplicaciones de la Tienda Windows:

1.0 (100%, no se aplica ninguna escala)
1.4 (140% de escala)
1.8 (180% de escala)

Aplicaciones de la Tienda de Windows Phone:

1,0 (100%, sin escalado)
1.4 (140% de escala)
2.4 (240% de escala)

Windows determina qué meseta de escalado se usará en función del tamaño físico de la pantalla, la resolución de la pantalla, los ppp de la pantalla y el factor de forma. Si las especificaciones de la pantalla cumplen un umbral específico, Windows usa la siguiente meseta de escalado superior. Puedes usar ResolutionScale (Windows) o RawPixelsPerViewPixel (Windows Phone) para determinar el factor de escala.

El sistema escalará automáticamente tu aplicación, pero para garantizar que tu interfaz de usuario sea nítida y funcional independientemente de la densidad de píxeles del dispositivo, sigue las instrucciones proporcionadas a continuación para preparar tu aplicación para el escalado.

Qué hacer y qué no hacer

Utiliza gráficos vectoriales escalables (SVG). Windows ajusta la escala de estos formatos automáticamente, sin defectos perceptibles. Para las aplicaciones JavaScript, usa SVG. Puedes utilizar gráficos definidos por XAML en las aplicaciones con C#, C++ o Visual Basic.
Usa la carga de recursos para imágenes de mapas de bits en el paquete de la aplicación y proporciona una imagen independiente para cada factor de escalado . Incluye el factor de escala en el nombre de tu archivo de imagen (por ejemplo, Assets\Square7070Logo.scale-100.png). Ten en cuenta que Windows cargará automáticamente la imagen adecuada para la escala actual. En la muestra de cómo escalar según ppp, se indica cómo usar la carga de recursos para imágenes.

Para los requisitos de imagen relacionados con la certificación de aplicaciones, consulta Elegir las imágenes de tu aplicación. Para obtener información detallada sobre las convenciones de nomenclatura, consulta Inicio rápido: usar recursos de archivos o imágenes (aplicaciones de la Tienda Windows con JavaScript y HTML) e Inicio rápido: Usar recursos de archivos o imágenes (aplicaciones de la Tienda Windows con C#/VB/C++ y XAML).
Al crear tus activos para diferentes mesetas de escalado:
- No diseñes imágenes de mapas de bits al 100% para escalarlos manualmente. Aunque utilices un programa de edición de imágenes de gran calidad, es muy probable que el resultado sea borroso.
- Ten en cuenta que reducir el escalado de una imagen grande con una resolución alta no producirá siempre resultados claros y nítidos. Sin embargo, si el vector original no está disponible, reducir manualmente el escalado de un archivo de mayor resolución es mejor que aumentar el escalado de un archivo de baja resolución.
Si la aplicación carga imágenes en tiempo de ejecución mediante código (por ejemplo, si usas DirectX directamente y no XAML ni HTML para crear la interfaz de usuario), usa ResolutionScale(Windows) o RawPixelsPerViewPixel (Windows Phone) para determinar la escala y cargar manualmente las imágenes en función del porcentaje de escala.
Usa las API Thumbnail para las imágenes del sistema de archivos. Las API de miniaturas optimizan el rendimiento almacenando en caché versiones más pequeñas de la imagen para usarlas como miniaturas. Consulta Acceso eficaz al sistema de archivos para obtener información detallada.
Especifica un ancho y un alto para las imágenes en lugar de usar un ajuste de tamaño automático para evitar que los diseños cambien cuando se carguen imágenes más grandes.
Usa unidades y subunidades de cuadrícula tipográficas. Usa los tamaños definidos de la cuadrícula tipográfica de 20 px para unidades de cuadrícula principales y 5 px para unidades de cuadrícula secundarias. Así te aseguras de que tu diseño no experimente un desplazamiento de píxeles debido al redondeo de píxeles. Toda unidad cuyo tamaño sea divisible por 5 px no experimentará el redondeo de píxeles.
Usa la consulta de medios de resolución para imágenes web remotas. Si tu aplicación utiliza JavaScript y tienes una imagen web remota, usa la característica de medios de resolución @media con la propiedad background-image para reemplazar las imágenes en tiempo de ejecución.
No utilices imágenes que no tengan un tamaño que no sea múltiplo de 5 px. Las unidades que no son múltiplos de 5 px pueden experimentar el desplazamiento de píxeles cuando se aplica una escala de 140%, 180% y 240%.