Directrices para el escalado en pantallas (aplicaciones de la Tienda Windows)

En este tema se describen los procedimientos recomendados para diseñar y crear un diseño para tu aplicación de la Tienda Windows cuya escala se ajuste a los diferentes tamaños de pantalla compatibles con Windows 8.

Windows 8 se ejecuta en diferentes tamaños de pantalla; desde la pantalla pequeña de una tableta hasta la pantalla mediana de un equipo portátil y hasta la pantalla grande de un equipo de escritorio o todo en uno. Las aplicaciones de la Tienda Windows se pueden ejecutar en cualquiera de los tamaños de pantalla compatibles con Windows 8. En general, los tamaños grandes de pantalla también tienen resoluciones de pantalla más altos. El resultado es que en estas pantallas más grandes, la aplicación tiene la ventaja de una mayor área visible.

Los siguientes términos se usan en este documento.

Term	Description
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.

 

Tamaño de la pantalla

El mayor impacto que tiene el tamaño de la pantalla en las aplicaciones de la Tienda Windows es en realidad la resolución de la pantalla. En pantallas más grandes, hay una resolución de pantalla más alta y, por lo tanto, más espacio disponible en la pantalla para la aplicación. Los usuarios esperan ver más contenido y más funcionalidad en pantallas más grandes.

El manejo de este espacio de pantalla requiere consideración por parte del diseñador y desarrollador de la aplicación. El aspecto que presenta la aplicación en pantallas grandes está definido por los parámetros establecidos para el diseño en el momento del diseño y desarrollo.

La plataforma, los controles y las plantillas se diseñaron para ajustarse a diferentes tamaños de pantalla. Una gran parte del diseño de la aplicación se ajustará con poco esfuerzo o código adicional. Deben tenerse en cuenta ciertas consideraciones en cuanto al diseño de nivel superior, las regiones de contenido, la navegación de la aplicación y los comandos para garantizar que se coloquen de forma predecible e intuitiva en las pantallas grandes.

La siguiente imagen demuestra cómo se producen las regiones vacías al no crear un diseño adaptable a pantallas grandes.

Resoluciones mínimas de pantalla

Hay dos resoluciones de pantalla principales que la aplicación debería admitir:

• La resolución mínima en la que se pueden ejecutar las aplicaciones de la Tienda Windows es 1024x768.
• La resolución mínima necesaria para admitir todas las características de Windows 8 (inclusive multitareas acopladas) es 1366x768. Para obtener más información sobre las vistas acopladas, consulta las directrices para vistas acopladas y rellenas.

Las aplicaciones de la Tienda Windows no se pueden ejecutar con resoluciones de 1024x600 o 1280x720.

La siguiente tabla presenta los procedimientos recomendados para las resoluciones de pantalla primarias.

Procedimiento	Descripción
Diseño para una resolución mínima de 1024x768.	Este procedimiento proporciona las siguientes ventajas: Asegura que todas las UI (tales como navegación, controles y contenido) se ajustan a la pantalla sin cortes.
Diseño para una resolución óptima de 1366x768	Este procedimiento proporciona las siguientes ventajas: Asegura que todas las UI (tales como navegación, controles y contenido) se ajustan en la pantalla sin regiones en blanco.

 

Diseños para pantallas más grandes

Al diseñar una aplicación para pantallas más grandes, debes tener en cuenta cómo pueden aplicarse el diseño, la estética, las proporciones y los controles de la aplicación a un Canvas más grande. Además, cualquier aplicación puede tener cualquier cantidad de diseños de complejidad variable. Cada diseño se puede considerar individualmente para pantallas más grandes.

La siguiente tabla presenta los procedimientos recomendados para las pantallas más grandes.

Procedimiento	Descripción
Rellenar la pantalla	Este procedimiento proporciona la ventaja de una experiencia del usuario tan envolvente como sea posible independientemente del tamaño de pantalla. Las aplicaciones deberían verse rellenando la pantalla del mejor modo posible y deberían verse cuidadosamente diseñadas al variar los tamaños de pantalla. Los usuarios que compran monitores más grandes esperan que las aplicaciones se sigan viendo bien en estas pantallas grandes y rellenen la pantalla con más contenido, cuando sea posible.
Determinar si el diseño debería ser fijo o adaptable	Se pueden usar dos técnicas para crear una aplicación cuya escala se ajuste a los diferentes tamaños de pantalla. Según la complejidad del diseño y los escenarios de uso, elegirás una o la otra.

 

Diseño fijo

Un diseño fijo se encuentra más a menudo en juegos o aplicaciones tipo juegos que están formadas principalmente por imágenes de mapa de bits. Muy a menudo, estos tipos de diseños tienen una cantidad fija de contenido (por ejemplo, un tablero de juego) donde no es posible mostrar más contenido o no agrega quizás más valores. Estos diseños no pueden, y no lo harán, cambiar o adaptarse dinámicamente a distintos tamaños de pantalla ya que están diseñados con valores fijos de píxeles. Windows 8 aloja a estas aplicaciones con un enfoque de "escalar para ajustar" que está integrado en la plataforma.

Diseño fijo: escalar para ajustar

Si determinas que la aplicación necesita un diseño fijo que no se puede 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 la siguiente imagen.

En la siguiente tabla, se presentan los procedimientos recomendados para las aplicaciones que usan la funcionalidad escalar para ajustar.

Procedimiento	Descripción
Empieza con las resoluciones base.	Al realizar un diseño fijo, comienza por diseñar la distribución de las resoluciones de línea de base: 1024x768 y 1366x768. 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.	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 del ViewBox según los tamaños fijos de los píxeles del diseño (por ejemplo, 1366x768).
Evita poner controles adaptables (como la barra de la aplicación) en el ViewBox.	Estos controles se adaptan automáticamente a distintos tamaños de pantalla.
Define el color y el estilo del formato letterbox.	Los diseños fijos de aplicaciones 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). La definición de un color y estilo para el formato letterbox, que complemente el color de la aplicación o del hardware puede proporcionar una gran experiencia. El color del formato letterbox está definido por el color de fondo del diseño de la aplicación del nivel superior. Es aconsejable elegir un color oscuro como el negro que se integrará 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 hasta un 200% del tamaño del diseño para la aplicación en un monitor grande de escritorio. Los activos vectoriales como Scalable Vector Graphics (SVG), XAMLExtensible Application Markup Language (XAML), o primitivas de diseño se ajustan sin defectos de ajuste de escala o sin verse borrosos. Si hacen falta activos de mapa de bits (como las imágenes de mapa de bits), proporciona imágenes cuyo tamaño sea el doble del tamaño de diseño así se pueden reducir en lugar de aumentar. 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).

 

Diseño adaptable

Los diseños adaptables se encuentran más frecuentemente en aplicaciones de consumo de contenido, administración y creación. Estos diseños están compuestos más frecuentemente por elementos proporcionales definidos con un bastidor de nivel superior. Por ejemplo, una aplicación de lector de noticias tiene una región de encabezado, pie de página y contenido en el centro. Estos diseños cambian de modo dinámico y se adaptan a diferentes tamaños de pantalla, aportan más contenido y rellenan el espacio de modo dinámico de acuerdo con las reglas del diseño. Windows 8 aloja estas aplicaciones con técnicas de diseño adaptable que serán tratadas en mayor profundidad más adelante.

Diseño adaptable: administrar el espacio

Si determinas que el diseño de la aplicación puede admitir un diseño adaptable para alojar diferentes tamaños de pantalla, usa las siguientes consideraciones para determinar cómo puede la aplicación hacer uso de todo el espacio de pantalla disponible.

En la siguiente tabla, se presentan los procedimientos recomendados para las aplicaciones que usan diseños adaptables.

Procedimiento	Descripción
Determina cómo cada región adaptable puede hacer uso del espacio disponible.	Para cada celda que has identificado como adaptable en la dirección horizontal o vertical, determina cómo el diseño de la aplicación hará uso de ese espacio en una pantalla más grande.
Determina el bastidor de diseño de nivel superior.	Este bastidor debería describir cuáles son las regiones de nivel superior de la aplicación. Este bastidor debería incluir dónde están las regiones de encabezado, navegación y contenido. La siguiente imagen demuestra un bastidor de nivel superior.
Determina qué partes del diseño son fijas frente a las adaptables.	Para cada celda del bastidor de nivel superior, determina cómo cada celda debería ajustar su tamaño para la dimensión vertical y horizontal cuando la aplicación se muestra en diferentes tamaños. Esta descripción del bastidor de nivel superior y el comportamiento de cambio de tamaño se pueden usar para definir los parámetros para un GridLayout.
Determina en cuáles dimensiones se adaptará cada región adaptable.	Para cada celda que has identificado como adaptable en la dirección horizontal o vertical, determina cómo el diseño de la aplicación hará uso de ese espacio en pantallas más grandes.
Determina cómo la aplicación hará uso del espacio en dimensiones adaptables.	Después de que hayas determinado cómo cada región de la aplicación se adaptará a los diferentes tamaños, el próximo paso es considerar cómo la aplicación hará uso del espacio. La aplicación puede usar y combinar muchas técnicas para hacer uso del espacio; todas son compatibles con la plataforma y los controles de Windows 8.
Asegúrate de que el ancho y la altura de todas las vistas de colección estén al 100% de su tamaño.	Un control ListView rellena automáticamente el espacio disponible con más elementos.
Usa el diseño multicolumna para el texto, donde corresponda.	El diseño multicolumna automáticamente agrega columnas por motivos de legibilidad y contenido de flujos para rellenar el espacio disponible.
Usa un canvas para imágenes, donde corresponda.	Un canvas se expande automáticamente para rellenar el espacio disponible.
Muestra más espacio en blanco.	Mantén la cantidad de contenido de la aplicación que vas a mostrar compensándolo con espacio en blanco.
Muestra más aplicaciones	Mostrar más contenido de la aplicación. Según como vayas a redistribuir tu contenido, también puedes mostrar más espacio en blanco (si quieres).

 

Prueba del diseño de la aplicación

Es importante probar las aplicaciones en distintos tamaños de pantalla. Nos damos cuenta de que la mayoría de la gente no tiene muchos dispositivos a su disposición, por eso creamos soportes para probar aplicaciones en diferentes pantallas en forma de herramientas tales como Visual Studio 11. Este ofrece el simulador de Windows que le permite a los desarrolladores ejecutar sus aplicaciones en una variedad de tamaños de pantalla, orientaciones y densidades de píxeles, como se muestra en la siguiente imagen.

Blend para Microsoft Visual Studio 2012 para Windows 8, que se muestra en la siguiente imagen, ofrece un menú de plataforma que permite a los desarrolladores diseñar la aplicación en diferentes tamaños de pantalla y densidades de píxeles sobre la marcha. El Canvas de Blend se actualiza de forma dinámica según la opción de pantalla elegida en el menú de plataforma.

Related topics

Directrices para diseños

 

 

Build date: 7/2/2013