Directrices sobre compatibilidad con distintos tamaños de pantalla

Artículo
05/15/2015

Las aplicaciones de la Tienda Windows y Windows Phone se pueden ejecutar en dispositivos de diversos tamaños y resoluciones de pantalla. Los usuarios también pueden modificar la orientación de la pantalla o, si la aplicación se ejecuta en Windows, cambiar su tamaño para minimizar su ancho o para mostrarla junto a otras aplicaciones. Si un usuario ejecuta la aplicación en un teléfono, tableta, escritorio o dispositivo PPI, asegúrate de que la interfaz de usuario tenga una apariencia correcta y mantenga sus características. Sigue estas directrices a la hora de diseñar una interfaz de usuario que se adapte a pantallas de todos los tamaños y orientaciones.

Para ver instrucciones específicas sobre cómo adaptar una aplicación de la Tienda Windows y estrechar el tamaño de sus ventanas, consulta Guidelines for resizing to narrow layouts.

Descripción

Probablemente, tu aplicación se ejecutará en diversos tamaños de pantalla: desde pequeñas pantallas de teléfono a pantallas medianas de portátiles, e incluso quizá pantallas de dispositivos PPI “todo en uno”. El tamaño y la resolución de la pantalla determinarán la cantidad de área visible de la que puede aprovecharse la aplicación.

aplicación de ejemplo en un dispositivo de tableta

aplicación de ejemplo en un monitor grande de escritorio

Los siguientes términos son importantes para comprender cómo escalar a diferentes tamaños de pantalla.

Periodo	Descripción
Tamaño de la pantalla	El tamaño físico de la pantalla, en pulgadas. Generalmente medido de forma diagonal.
Resolución de pantalla	El número de píxeles admitidos por la pantalla, en dimensiones horizontales y verticales. Por ejemplo, 1366x768.
Relación de aspecto	La forma de la pantalla como una proporción entre el ancho y el alto. Por ejemplo, 16:9.

La plataforma, los controles y las plantillas se diseñaron para ajustarse a diferentes resoluciones, relaciones de aspecto y tamaños de pantalla. Aunque una gran parte del diseño de la aplicación se ajustará automáticamente para mostrar los cambios, debes considerar el diseño de nivel superior, las regiones de contenido, la navegación de la aplicación y los comandos para que se coloquen de forma predecible e intuitiva en todas las pantallas.

Las siguientes tablas muestran los tamaños de pantalla más importantes a tener en cuenta cuando diseñes tu aplicación.

Tamaño de pantalla completa (resolución de píxeles efectiva)	Descripción del dispositivo
1366x768	Tabletas, convertibles y muchos portátiles (relación de aspecto 16:9); resolución de portátiles o equipos de escritorio de línea base
1920x1080	Portátiles y dispositivos grandes (relación de aspecto 16:9)
2560x1440	Dispositivos todo en uno muy grandes (relación de aspecto 16:9)
1280x800 y 800x1280	Dispositivos pequeños con orientación vertical predeterminada (relación de aspecto 16:10)
1024x768 y 768x1024	Dispositivos pequeños con orientación horizontal predeterminada (relación de aspecto 4:3)
1371x857 y 857x1371	Dispositivos pequeños (relación de aspecto 16:10)
384x640	Teléfono de 4,5" (relación de aspecto 15:9)
400x711	Teléfono de 4,7" (relación de aspecto 16:9)
450x800	Teléfono de 5,5" (relación de aspecto 16:9)
491x873	Teléfono de 6" (relación de aspecto 16:9)

Al diseñar una aplicación para Windows y no Windows Phone, ten en la cantidad de pantalla disponible cuando dos aplicaciones comparten pantalla o cuando el usuario reduce al máximo la anchura.

Tamaño de pantalla dividida (resolución de píxeles efectiva)	Descripción
672x768	Pantalla dividida por la mitad en un dispositivo de 1366x768
500x768	Tamaño mínimo predeterminado para una aplicación; pantalla dividida por la mitad en un dispositivo de 1024x768
320x768	Tamaño mínimo para aplicaciones que admiten un ancho mínimo de 320 píxeles

Para ver recomendaciones sobre escala, consulta Guidelines for scaling to pixel density.

Tamaños de ventana principales para pantalla completa y pantalla dividida

Qué hacer y qué no hacer

Cuando sea posible, usa controles flexibles que admitan contenido que se redistribuye automáticamente. Las XAML Grid control, cuadrículas CSS, el formato multicolumna CSS y el ScrollViewer control son ejemplos de controles flexibles. Los controles de cuadrícula, por ejemplo, moldean secciones específicas de la interfaz de usuario para rellenar espacios en función de la resolución de pantalla y asignan contenido a diferentes celdas según el espacio disponible en pantalla.
Elabora el diseño y los controles de la aplicación para que se ajusten y funcionen en pantallas de tamaño mínimo:
- Ancho mínimo predeterminado para aplicaciones de la Tienda Windows: 500 píxeles.
- Ancho mínimo no predeterminado para aplicaciones de la Tienda Windows: 320 píxeles.
- Mínimo (no ajustable) para aplicaciones de la Tienda de Windows Phone: 384 píxeles (vertical) y 640 píxeles (horizontal).
La interfaz de usuario y los controles deben poder usarse en todos los tamaños de pantalla, incluso en los mínimos (enumerados arriba). Estos son los controles importantes que hay que tener presentes:
Diseña tu aplicación para que haga un uso eficaz del espacio en las pantallas grandes y esté dotada de un diseño que se redistribuya automáticamente. No dejes espacios amplios vacíos.
Comprueba que la aplicación funciona bien en los principales tamaños de dispositivo. Además de probar la aplicación en dispositivos reales, puedes usar el simulador de Microsoft Visual Studio para aplicaciones de la Tienda Windows para simular la ejecución de tu aplicación en distintos tamaños físicos de pantalla, resoluciones y orientaciones.
Especifica un tamaño mínimo para todos los input fields. Los tamaños mínimos evitan que los campos de entrada desaparezcan cuando el usuario cambia el tamaño de la ventana.
Prueba que los campos de entrada de la aplicación no queden ocultos por el teclado en pantalla.
Usa el posicionamiento absoluto con precaución; si se usa de modo inadecuado, puede impedir que la interfaz de usuario responda a los cambios en el tamaño y la orientación de la ventana. En lugar de tener valores de codificado para el diseño, usa posiciones calculadas en tiempo de ejecución para el diseño de la interfaz de usuario.
Diseño para diferentes densidades de píxeles Para obtener más información, consulta Directrices para el escalado a la densidad de píxeles.

Solo aplicaciones de la Tienda Windows

Asegúrate de que la aplicación es funcional hasta el ancho mínimo predeterminado de 500 píxeles. Para recomendaciones específicas, consulta Guidelines for narrow layouts
Si tu aplicación funciona bien en tamaños más pequeños y quieres animar a los usuarios a que mantengan tu aplicación en pantalla, puedes admitir un ancho mínimo no predeterminado de 320 píxeles.
Asegúrate de que los usuarios puedan seguir realizando sus tareas actuales cuando cambien el tamaño de las aplicaciones. Por ejemplo, conserva la página actual de la aplicación, el estado de las barras de desplazamiento, la selección y el foco.
Admite accesos en todos los tamaños de pantalla. Asegúrate de que la escala de los paneles y controles flotantes se ajusta correctamente.

Nota En Windows 8, el tamaño de las aplicaciones se podía cambiar a únicamente tres estados de visualización: pantalla completa, acoplado y relleno. En Windows 8.1, el tamaño de las aplicaciones se puede cambiar a cualquier ancho, desde pantalla completa hasta el ancho mínimo posible.

Instrucciones de uso adicionales

Compatibilidad automática para cambios de orientación

Los usuarios pueden girar sus teléfonos, tabletas y monitores. Windows controla las orientaciones horizontal y vertical automáticamente, siempre que la aplicación no use un diseño fijo. Solo necesitas tener en cuenta cómo afecta el ancho de la aplicación a su diseño.

Consulta abajo la sección sobre diseño fijo para obtener más información sobre cuándo es apropiado renunciar a un diseño flexible.

Diseños horizontal y vertical

Comportamiento de aplicaciones redimensionadas (solo aplicaciones de la Tienda Windows)

Si un usuario tiene varias aplicaciones en la pantalla, ten en cuenta estas interacciones únicas de la interfaz de usuario:

Si un usuario invoca a los accesos, estos se aplican a la última aplicación que el usuario utilizó, independientemente del tamaño de la aplicación o de su posición en la pantalla.
Entre cada aplicación en la pantalla hay un controlador. Para cambiar el tamaño de las ventanas, los usuarios deslizan el controlador. El controlador también muestra qué aplicación tiene el foco.
Si un usuario selecciona el controlador entre dos aplicaciones e intenta cambiar el tamaño de una aplicación a un ancho inferior al ancho mínimo de la aplicación, esta sale de la pantalla.
Si el usuario gira un dispositivo o monitor cuando hay varias aplicaciones en la pantalla, estas no cambian su orientación.

Diseños fijos

Las aplicaciones, en su mayoría, pueden usar un diseño dinámico que se adapta a los cambios en el tamaño y la resolución de pantalla y que redistribuye el contenido automáticamente. Pero en algunos casos, es necesario emplear un diseño fijo. Las aplicaciones que no están enfocadas al contenido o que dependen de la integridad de los gráficos —por ejemplo, aplicaciones de juegos—, necesitan un diseño fijo (absoluto). Windows aloja a estas aplicaciones con un enfoque de “escalar para ajustar” que está integrado en la plataforma.

Si determinas que la aplicación necesita un diseño fijo que no se adaptará a distintos tamaños de pantalla, puedes usar un enfoque de escalar para ajustar para hacer que el diseño fijo rellene la pantalla en distintos tamaños de pantalla, como se muestra en las imágenes siguientes.

Escalar para ajustar a un juego de diseño fijo

Para implementar el enfoque de escalar para ajustar, sigue estos pasos:

Crea el diseño para la resolución de línea base, por ejemplo, 1366x768 píxeles (PC/tableta) o 384x640 píxeles (teléfono). Este es el diseño que se escalará para ajustarse a las pantallas más grandes.
Coloca el contenido fijo dentro de un control ViewBox (ViewBox in JavaScript and HTML o Viewbox in C#/VB/C++ and XAML). El control ViewBox escala un diseño fijo para ajustarse a la pantalla.
Asegúrate de que el tamaño del control ViewBox esté al 100% de ancho y alto.
Define las propiedades de tamaño fijo de ViewBox según los tamaños fijos de píxeles del diseño (por ejemplo, 1366x768 o 384x640).
Elige un color para dar formato letterbox. Los controles fijos no cambian de modo dinámico en respuesta a la relación de aspecto o a los cambios de tamaño de pantalla, de modo que la técnica de escalar para ajustar automáticamente centrará los contenidos de la aplicación y les dará formato letterbox (horizontalmente o verticalmente). El color del diseño de la aplicación de nivel superior determina el color de las barras de formato letterbox. Es aconsejable elegir un color oscuro como el negro que se integra bien con el hardware, un color neutro como el gris que se ve intencionado, o un color que combine con el color del contenido de la aplicación.
Proporciona activos vectoriales o de alta resolución. La técnica de escalar para ajustar ajusta la aplicación a tamaños variables de hasta un 180% (para Windows) o un 280% (para Windows Phone) del tamaño de diseño de tu aplicación en un monitor grande de escritorio. Los activos vectoriales como Scalable Vector Graphics (SVG), Lenguaje de marcado de aplicaciones extensible (XAML) o primitivas de diseño se ajustan sin defectos de ajuste de escala o sin verse borrosos. Si se necesitan activos de trama (como imágenes bitmap), proporciona activos MRT.

Las siguientes imágenes demuestran cómo las imágenes escalares (derecha) se deterioran al ser aumentadas en tamaño en comparación con las imágenes vectoriales (izquierda).
No coloques controles adaptables en un control ViewBox.