Recomendaciones de diseño

Android te ayuda a desarrollar una app que se ejecute bien en una amplia variedad de tamaños de pantalla y factores de forma de dispositivos. Esta amplia compatibilidad te ayuda a diseñar una sola app que puedes distribuir ampliamente a todos los dispositivos a los que te orientes.

Sin embargo, para brindar a tus usuarios la mejor experiencia posible en cada configuración de pantalla, debes optimizar tus diseños y otros componentes de la IU para diferentes tamaños. En ChromeOS, la optimización de tu IU te permite aprovechar al máximo el espacio de pantalla adicional para ofrecer nuevas funciones, presentar contenido nuevo o mejorar la experiencia y aumentar la participación de los usuarios.

Diseños para pantallas más grandes

Si desarrollaste tu app para teléfonos celulares y quieres mejorar su diseño en ChromeOS y otros factores de forma de pantalla grande, comienza por realizar ajustes menores en tus diseños, fuentes y espaciados. En el caso de las tablets de 7 pulgadas o los juegos con lienzos grandes, estos ajustes pueden ser todo lo que necesitas.

En el caso de las pantallas más grandes, puedes rediseñar partes de la IU para reemplazar una IU "estirada" por una IU eficiente con varios paneles, una navegación más simple y contenido adicional. Los Estudios de Material del equipo de Material Design proporcionan ejemplos de cómo se puede ver esto. Por ejemplo, observa cómo Reply se adapta a diferentes tamaños de pantalla.

Aquí te proporcionamos algunas sugerencias:

• Proporciona diseños personalizados para estas pantallas más grandes. Para ello, puedes usar la dimensión más corta de la pantalla o el ancho y la altura mínimos disponibles.
• Imagina cómo funcionan tu UX y tus diseños en un entorno centrado en el modo horizontal, como ChromeOS. Adapta tus diseños para que se vean y funcionen bien en estas orientaciones según el tamaño de la ventana, o bien proporciona diseños horizontales específicos con el calificador de recursos land. Puedes obtener más información sobre el cambio de tamaño dinámico de ventanas y otras consideraciones para pantallas grandes en la página Administración de ventanas.
• Las barras de navegación inferiores no se ajustan bien cuando tu app se estira para que sea ancha. Considera mover la navegación a un menú del lado izquierdo, donde sea más accesible y pueda mostrar más opciones. El ejemplo de Reply ilustra esto bien.
• Como mínimo, personaliza las dimensiones (por ejemplo, los tamaños de las fuentes, los márgenes y el espaciado para pantallas más grandes) a fin de mejorar el uso del espacio y la legibilidad del contenido. Ten en cuenta cómo se verán las cosas cuando los usuarios estén un poco más lejos del dispositivo, como un dispositivo ChromeOS o cualquier otro entorno de escritorio.
• Ajusta el posicionamiento de los controles de la IU de modo que los usuarios puedan acceder a ellos cuando usen un mouse o sujeten una tablet (por ejemplo, hacia los laterales y lejos del centro).
• En general, el padding de los elementos de la IU debería ser más grande en ChromeOS y otros dispositivos con pantalla grande que en los teléfonos celulares. Tus márgenes y medianiles deben adaptarse a medida que cambias a diferentes tamaños de pantalla.
• Aplica un padding adecuado para el contenido de texto de modo que no se alinee directamente a lo largo de los bordes de la pantalla. Usa un padding mínimo de 16 dp alrededor del contenido cercano a los bordes de la pantalla.

En especial, asegúrate de que tus diseños no parezcan "estirados" en la pantalla:

• Las líneas de texto no deben ser demasiado largas. Optimízalas para que tengan un máximo de 100 caracteres por línea (los mejores resultados se dan cuando tienes entre 50 y 75).
• Los menús y las listas no deben usar el ancho completo de la pantalla.
• Usa el padding para administrar los anchos de los elementos en pantalla o cambia a una IU con varios paneles para dispositivos con pantallas más grandes (consulta la siguiente sección).

Aprovecha el área adicional de la pantalla

Los dispositivos ChromeOS brindan mucho más espacio de pantalla para tu app. Cuando diseñes la IU de tu app para pantallas más grandes, aprovecha al máximo el área adicional.

En los ejemplos de Reply y Rally, las apps adoptan diferentes enfoques para usar el mayor tamaño de pantalla. Reply agrega espacio para que se vea más limpia, mientras que Rally muestra más datos para reducir los desplazamientos y los toques.

Un buen punto de partida es analizar los elementos que pueden estar ocultos para el usuario y cómo puedes hacerlos visibles. Esto podría mostrar más información sobre un elemento, hacer visibles los menús que podrían estar ocultos detrás de un clic con el botón derecho o una presión prolongada, o mostrar opciones de navegación diferentes o más detalladas ahora que tienes un área de navegación lateral más grande. Estas son grandes ventajas de usabilidad que pueden mejorar tu UX y darle a tu app una sensación más similar a la de una computadora de escritorio, sin necesidad de rediseñar por completo la experiencia actual.

Estas son algunas recomendaciones para tu app:

• Tu marca dicta la dirección que debes seguir cuando piensas en estos diferentes tamaños de pantalla. Decidir qué priorizar y mostrarle al usuario depende de los tipos de recorridos del usuario que existen y de las funciones que se usan con mayor frecuencia. Para inspirarte, consulta los Estudios de Material y observa cómo cada producto responde de manera diferente a una pantalla más grande.
• Piensa en cómo debería comportarse el diseño de tu app con un sistema de cuadrícula adaptable y cómo deberían moverse el contenido, la navegación y las opciones a medida que obtienes más espacio en la pantalla.
• Decide en qué tamaños de pantalla usarás un diseño diferente y, luego, proporciona los diferentes diseños en los grupos de tamaño de ventana correspondientes (como large/xlarge) o los anchos mínimos de ventana (como sw600dp/sw720). Recuerda que, a medida que llegues a estos diseños, el contexto general en el que se encontraba el usuario no debería cambiar, y deberías intentar conservar todo el estado del usuario mientras realizas la transición entre diseños (posición de desplazamiento, texto que se escribe, etcétera).

Usa recursos diseñados para pantallas más grandes y de mayor densidad

Para que tu app se vea de la mejor manera, proporciona íconos y otros recursos de mapa de bits para cada densidad en el rango que ChromeOS admite en general. En particular, debes diseñar tus íconos para la barra de la app, las notificaciones y el selector conforme a los lineamientos de iconografía y proporcionarlos en formatos vectoriales para que se puedan escalar correctamente con las diferentes pantallas en las que se encontrará tu app.

Si quieres obtener más información sobre VectorDrawables y recursos vectoriales en Android, consulta esta entrada de blog de Nick Butcher.

Ajusta los tamaños de fuente y los objetivos táctiles

Para que tu app se pueda usar en ChromeOS y en pantallas de mayor densidad, ajusta los tamaños de fuente y los objetivos táctiles en la IU para todas las configuraciones de pantalla a las que te orientes. Puedes cambiar los tamaños de fuente a través de atributos modificables o recursos de dimensión, y puedes ajustar los objetivos táctiles a través de diseños y elementos de diseño de mapa de bits, como se mencionó anteriormente.

Aquí se incluyen algunos aspectos a tener en cuenta:

• El texto no debe ser muy grande ni muy pequeño en los tamaños y densidades de pantalla más grandes. Asegúrate de que las etiquetas estén dimensionadas correctamente para los elementos de la IU con los que se correspondan y comprueba que no haya saltos de línea inadecuados en etiquetas, títulos y otros elementos.
• El tamaño recomendado para los objetivos táctiles en pantalla es de 48 dp. Es posible que debas realizar algunos ajustes en la IU de la pantalla más grande. Obtén más información sobre los métodos de espaciado para conocer los objetivos táctiles y el espaciado entre elementos a medida que cambian los tamaños de pantalla. Estas recomendaciones también cumplen con los lineamientos de accesibilidad mínimos.
• Cuando sea posible, para los íconos más pequeños, expande el área táctil a más de 48 dp con TouchDelegate o simplemente centrando el ícono dentro del botón transparente.