Recomendaciones de diseño

Diseños para pantallas más grandes

Si desarrolló su aplicación para teléfonos y ahora desea mejorar su diseño en ChromeOS y otros factores de forma de pantalla grande, puede comenzar haciendo pequeños ajustes en sus diseños, fuentes y espacios. En algunos casos, como para tabletas de 7 pulgadas o un juego con un lienzo grande, estos ajustes pueden ser todo lo que necesita para que su aplicación se vea genial. En otros casos, como para pantallas más grandes, puede rediseñar partes de su interfaz de usuario para reemplazar una “interfaz de usuario extendida” con una interfaz de usuario eficiente de múltiples paneles, navegación más fácil y contenido adicional. Pruebe visitar los “Material Studies”⁠ (recursos en inglés) realizados por el equipo de Material Design para ver ejemplos de cómo se vería esto para diferentes productos. A continuación puede ver cómo se ve la aplicación “Reply”⁠ para diferentes tamaños de pantalla.

Aquí hay algunas sugerencias:

• Proporcione diseños personalizados para estas pantallas más grandes. Puede hacerlo utilizando la dimensión más corta de⁠ la pantalla o el ancho y la altura mínimos disponibles .

• Imagine cómo funcionan su UX y sus diseños en un entorno donde la configuración horizontal es más común como ChromeOS. Adapte sus diseños para que se vean y funcionen bien en estas orientaciones basadas en el tamaño de la ventana o proporcione diseños horizontales específicos utilizando el “land resource qualifier”. Puede obtener más información sobre el cambio de tamaño dinámico de la ventana y otras consideraciones para pantallas grandes en la página de administración de ventanas .

• Las barras de navegación inferiores no escalan bien cuando su aplicación se estira para ser bastante ancha. Piense en extraer su navegación desde el menú inferior hacia el lado izquierdo, donde es más fácil de encontrar y usar, al mismo tiempo que tiene la oportunidad de mostrar más opciones. El ejemplo anterior Reply muestra esto muy bien.

• Como mínimo, personalice dimensiones como tamaños de fuente, márgenes y espaciado para pantallas más grandes, para mejorar el uso del espacio y la legibilidad del contenido. Piense especialmente en cómo se verán las cosas cuando los usuarios estén un poco más lejos del dispositivo, como en un dispositivo ChromeOS u otros entornos de escritorio.

• Ajuste la posición de los controles de la interfaz de usuario para que sean fácilmente accesibles para los usuarios cuando usan un mouse o sostienen una tableta, como hacia los lados y lejos del centro.

• El espacio entre elementos de la interfaz de usuario normalmente debería ser mayor en ChromeOS y otros dispositivos de pantalla grande que en los teléfonos. Sus márgenes y canaletas⁠ deben adaptarse a medida que llega a diferentes tamaños de pantalla.

• Agregue espacio adecuadamente al contenido de texto para que no esté alineado directamente a lo largo de los bordes de la pantalla. Use un espacio mínimo de 16dp alrededor del contenido cerca de los bordes de la pantalla.

En particular, asegúrese de que sus diseños no aparezcan “estirados” en la pantalla:

• Las líneas de texto no deben ser excesivamente largas: optimice para un máximo de 100 caracteres por línea, con los mejores resultados entre 50 y 75.

• Las listas y los menús no deben usar el ancho de pantalla completa.

• Use el relleno para administrar el ancho de los elementos en pantalla o cambie a una interfaz de usuario de múltiples paneles para dispositivos de pantalla más grande (consulte la siguiente sección).

Aproveche el área de pantalla adicional

Los dispositivos de ChromeOS brindan significativamente más espacio en la pantalla a su aplicación Cuando considere la interfaz de usuario de su aplicación para que se ejecute en pantallas más grandes, asegúrese de aprovechar al máximo el área de pantalla adicional disponible. Tanto en el ejemplo anterior de Reply⁠ como en el ejemplo de Rally⁠ a continuación, puede ver que ambas aplicaciones adoptan un enfoque diferente para aprovechar el aumento del tamaño de la pantalla. Reply agrega espacio para que se vea más limpio y amigable, mientras que Rally agrega más datos en la pantalla para que los usuarios puedan ver más con menos desplazamiento o clics.

Un buen lugar para comenzar es ver las cosas que pueden estar ocultas para el usuario y cómo puede sacarlas y hacerlas visibles. Ya sea que esté mostrando más información sobre un elemento, haciendo visible el menú que puede estar oculto detrás de un clic derecho o una pulsación larga, o mostrando opciones de navegación diferentes o más profundas ahora que tiene un área de navegación del lado izquierdo más grande. Estas son pequeñas victorias que pueden mejorar su UX y darle una sensación más nativa, sin un rediseño completo y una revisión de la experiencia actual.

Aquí hay algunas recomendaciones para su aplicación:

• Su marca dictará la dirección que debe seguir al pensar en los diferentes tamaños de pantalla. Decidir las cosas para priorizar y mostrar al usuario depende de la forma que el usuario use el app y las características más utilizadas. Para obtener inspiración sobre cómo es posible atacar esto, consulte los Material Studies⁠ y observe cómo cada producto diferente responde de manera diferente cuando llega a una pantalla más grande.

• Piense en cómo debería comportarse el diseño de su aplicación utilizando un sistema de cuadrícula adaptable⁠ y cómo debería moverse el contenido / navegación / opciones a medida que aumenta el espacio en la pantalla.

• Decida en qué tamaños de pantalla usará un diseño diferente, luego proporcione los diferentes diseños en los intervalos de tamaño de ventana apropiados (como grande / xlarge) o anchos mínimos de ventana (como sw600dp / sw720). Recuerde que a medida que llega a estos diseños, el contexto general en el que se encontraba el usuario no debe cambiar, y debe intentar retener todo el estado del usuario mientras realiza la transición entre diseños (posición de desplazamiento, texto escrito, etc.)

Use activos diseñados para pantallas de mayor densidad y más grandes

Para garantizar que su aplicación se vea mejor, proporcione íconos y otros recursos para cada densidad en el rango comúnmente admitido por ChromeOS. Específicamente, debe diseñar sus iconos para la barra de acción, las notificaciones y el iniciador de acuerdo con las pautas de iconografía⁠ y proporcionarlos en formatos vectoriales para que puedan escalar con gracia con las diferentes pantallas en las que encontrará su aplicación.

Para obtener más información sobre VectorDrawables y los activos de vectores en Android, consulte esta publicación⁠ de Nick Butcher⁠.

Ajustar tamaños de fuente y objetivos táctiles

Para asegurarse de que su aplicación sea fácil de usar en ChromeOS y pantallas de mayor densidad, ajuste los tamaños de fuente y los objetivos táctiles en su interfaz de usuario, para todas las configuraciones de pantalla a las que se dirige. Puede ajustar los tamaños de fuente a través de atributos con estilo⁠ o recursos de dimensión⁠ , y puede ajustar los objetivos táctiles a través de diseños y dibujos de bitmaps, como se discutió anteriormente.

Aquí hay algunas consideraciones:

• El texto no debe ser excesivamente grande o pequeño en pantallas y densidades más grandes. Asegúrese de que las etiquetas tengan el tamaño adecuado para los elementos de la IU a las que corresponden y asegúrese de que no haya saltos de línea inadecuados en las etiquetas, títulos y otros elementos.

• El tamaño recomendado para un objetivo con el que el usuario interactuará en la pantalla es 48dp — puede que se necesiten algunos ajustes en su UI para pantallas más grandes. Lea más sobre Spacing Methods⁠ para aprender sobre objetivos en la pantalla y como agregar espacio entre elementos conforme el tamaño de la pantalla cambia. Estas recomendaciones también cumplen con las guías de accesibilidad⁠ básicas.

• Cuando sea posible, para íconos más pequeños, expanda el área táctil a más de 48dp usando TouchDelegate⁠ o simplemente centrando el ícono dentro del botón transparente.