Directrices para cambio de tamaño a diseños estrechos

Artículo
07/22/2015

Diseña la interfaz de usuario de tus aplicaciones de modo que se ajusten cuando un usuario cambia su tamaño a una vista alargada o estrecha. Las directrices proporcionadas en este tema son aplicables si pretendes:

Modificar el ancho mínimo de tu aplicación a 320 píxeles en lugar de los 500 píxeles predeterminados (diseño estrecho).
Diseñar tu aplicación para que cambie a un diseño vertical cuando el usuario cambie el tamaño y el alto sea mayor que el ancho (diseño alargado).

Si quieres obtener más recomendaciones generales, consulta Guidelines for supporting multiple screen sizes. Para obtener directrices específicas sobre el diseño estrecho de juegos, consulta el libro de ideas Juegos.

Si quieres ver estas directrices aplicadas en una muestra, consulta:

Ejemplos

Diseños estrechos

De forma predeterminada, el ancho mínimo de las aplicaciones de la Tienda Windows es de 500 píxeles. Esta es una aplicación de 500 píxeles de ancho.

Aplicación con un ancho mínimo predeterminado de 500 píxeles.

Y esta es la aplicación con 320 píxeles de ancho.

Aplicación con un ancho mínimo estrecho de 320 píxeles.

Si decides admitir un ancho mínimo inferior a 500 píxeles, debes realizar algunos cambios de diseño para que la aplicación sea funcional y se pueda utilizar en ese tamaño. Sigue las recomendaciones indicadas en la sección Qué hacer y qué no hacer para garantizar que tu aplicación sea eficaz en anchos inferiores a 500 píxeles.

Diseños alargados

Asimismo, puedes realizar cambios en el diseño de la aplicación cuando sea más alargada que ancha. Por ejemplo, podrías diseñarla para que realice un movimiento panorámico vertical en lugar de horizontal cuando sea más alargada que ancha.

Esta es una aplicación que realiza un movimiento panorámico horizontal cuando está a pantalla completa.

Aplicación que realiza un movimiento panorámico horizontal a pantalla completa

Y esta es la aplicación cuando es más alargada que ancha. La aplicación realiza ahora un desplazamiento panorámico vertical.

Aplicación más alargada que ancha y realiza un movimiento panorámico vertical.

¿Debería admitir mi aplicación un ancho mínimo de 320 píxeles?

La respuesta a si su aplicación debería permitir anchos inferiores al mínimo predeterminado depende de lo que esperas que los usuarios hagan con tu aplicación. A continuación te indicamos algunos escenarios habituales en los que se deben admitir anchos limitados de hasta 320 píxeles:

La multitarea es importante en tu aplicación.
Quieres que los usuarios conserven tu aplicación en pantalla.
Tu aplicación funciona junto a otra aplicación en un escenario complementario.
Tu aplicación se adapta correctamente a anchos reducidos.

Si mantienes el ancho mínimo predeterminado de 500 píxeles, no tienes que tener en cuenta ninguna consideración especial para tu aplicación con anchos reducidos.

Qué hacer y qué no hacer

Si la aplicación realiza un movimiento panorámico horizontal cuando está a pantalla completa, cámbialo a vertical cuando la ventana de la aplicación sea más alta que ancha.
Para permitir el tamaño estrecho, realiza los siguientes cambios en el diseño cuando tu aplicación sea inferior a 500 píxeles:
- Usa el estilo de botón atrás más pequeño. Para obtener más información sobre los tamaños del botón atrás, consulta la lista de iconos de Symbol.
- Establece un margen izquierdo de 20 píxeles.
- Utiliza un encabezado de la aplicación de 20 pto de tamaño.
- Usa los valores de desplazamiento más pequeños para las animaciones de transición de página y las animaciones de transición de contenido.
Aquí se muestra la aplicación Calculadora con un ancho normal:

Esta es la misma aplicación con 320 píxeles de ancho. Ahora su margen izquierdo es de 20 píxeles y la fuente del encabezado se redujo a un tamaño de 20 puntos, de acuerdo con las recomendaciones de diseño estrecho.
Si la aplicación realiza un movimiento panorámico vertical cuando está a pantalla completa, reduce la escala a una sola columna o panel cuando la aplicación sea más alta que ancha. Tú decides el ancho exacto al que quieres que la aplicación cambie a una sola columna o panel. En la vista de columna o panel único, asegúrate de incluir navegación para que los usuarios se puedan mover entre un panel y otro.
Diseña tu aplicación y todos los controles para que puedan escalar al tamaño mínimo, se puedan usar tanto en ventanas de aplicación alargadas como estrechas. Estos son los controles importantes que hay que tener presentes:
No desplaces al usuario a otra parte de la aplicación cuando el tamaño de la ventana cambie a ancho limitado.
No permitas anchos inferiores al mínimo predeterminado (500 píxeles) si no puedes preservar la mayor parte de la funcionalidad de tu aplicación en tamaños estrechos.