Un diseño define la estructura visual para que un usuario interactúe con tu app, como en una actividad. Android proporciona una variedad de bibliotecas, puntos de partida canónicos y técnicas para mostrar y posicionar contenido.
Conclusiones
Honora las áreas seguras del dispositivo, que incluyen partes de la IU, como cortes de pantalla, inserciones de borde a borde, pantallas laterales, teclados de software y barras del sistema.
Qué hacer: Proporciona un diseño flexible para que los usuarios interactúen con el teclado.
Video 1: Proporciona un diseño flexible para que los usuarios interactúen
Mantén las interacciones esenciales, como la navegación principal, en un área de la pantalla accesible.
Figura 1: Los botones de acción flotantes (BAF) proporcionan un punto de interacción prominente y accesible. Usa la contención para agrupar contenido relacionado y guiar al usuario a través del contenido y las acciones.
Figura 2: Tarjetas que usan contención explícita para agrupar contenido con acciones relacionadas Proporciona una alineación coherente entre el contenido similar y los elementos de la IU.
No hagas lo siguiente: No interrumpas la legibilidad con espacios incoherentes entre elementos similares, lo que puede hacer que los diseños se vean desordenados.
Qué hacer: Establece un espaciado coherente entre elementos similares.
Figura 3: No interrumpas la legibilidad No te limites a un diseño vertical o idealizado: considera las diferentes relaciones de aspecto, clases de tamaño y resoluciones que pueden encontrar los usuarios.
No abrumes al usuario con demasiadas acciones por vista.
Cuando crees diseños personalizados, toma nota de cómo debe ubicarse el contenido dentro del diseño con términos de alineación, restricciones o gravedad. Incluye cómo las imágenes deben responder a su contenedor para mostrarse correctamente.
Partes de una pantalla típica de una app para Android
La mayoría de las apps para Android consisten en regiones, conocidas como las barras del sistema, el área de navegación y el cuerpo.
Barras del sistema
La barra de estado y la barra de navegación, conocidas colectivamente como barras del sistema, muestran información importante, como el nivel de batería, la hora y las alertas de notificaciones, y proporcionan interacción directa con el dispositivo desde cualquier lugar. Obtén más información sobre las barras del sistema.
Región de navegación
La navegación representa las diferentes indicaciones visuales que permiten al usuario navegar en la app o en la plataforma de Android y acceder a acciones importantes.
Región del cuerpo
La región del cuerpo contiene el contenido de la pantalla. El contenido del cuerpo está compuesto por grupos adicionales y parámetros de diseño. Debe continuar debajo de las regiones de navegación y barras del sistema.
Declara WindowCompat.setDecorFitsSystemWindows(window, false) para inserciones de borde a borde.
Para determinar los patrones de composición y navegación adecuados para tu diseño, intenta comprender cómo interactúan los usuarios con tu contenido y cómo navegan por la arquitectura de la información de tu app. Esta comprensión puede guiar tu diseño para que se enfoque más en el usuario, ya que creas una IU en la que los usuarios pueden actuar.
Composición y estructura del contenido
Crea un flujo y un ritmo flexibles con una estructura y métodos de contención para tu contenido.
Estructura base: usa márgenes y columnas para los elementos visuales de protección
Para comenzar a crear una estructura sólida con protecciones coherentes, agrega márgenes y columnas a tus diseños.
Los márgenes proporcionan espaciado en los bordes izquierdo y derecho de la pantalla y el contenido. Un valor de margen estándar para el tamaño compacto es de 16 dp, pero los márgenes deben adaptarse para adaptarse a pantallas más grandes. El contenido y las acciones del cuerpo de tu app deben mantenerse dentro de estos márgenes y alinearse con ellos.
También puedes asegurarte de que haya zonas seguras o inserciones en este paso. Los rellenos de las barras del sistema impiden que las acciones cruciales queden debajo de las barras del sistema. Consulta Cómo dibujar tu contenido detrás de las barras del sistema para obtener más información.
Usa columnas para crear una estructura de cuadrícula flexible que permita una alineación coherente y para proporcionar definición vertical a un diseño dividiendo el contenido dentro del área del cuerpo. El contenido se coloca en las áreas de la pantalla que contienen columnas. Estas columnas le dan estructura a tu diseño y proporcionan una estructura conveniente para organizar los elementos.
Usa una cuadrícula de columnas para alinear el contenido con una cuadrícula subyacente, pero conserva el tamaño flexible. La cuadrícula de columnas puede adaptarse a diferentes factores de forma cambiando los tamaños de las columnas y la cantidad de columnas según sea necesario para el tamaño de la pantalla en ciertos puntos, a la vez que permite que el contenido también se escale. Evita ser demasiado detallado con la cuadrícula de columnas. Para eso está la cuadrícula de referencia: proporcionar unidades de espaciado coherentes.
Ten cuidado de no establecer una cuadrícula de filas complementaria, ya que puede restringir la escala horizontal del contenido en diferentes orientaciones y factores de forma. Por lo general, establecer reglas de padding proporcionará la coherencia visual necesaria.
Usa la contención para agrupar elementos visualmente
La contención se refiere al uso conjunto de espacio en blanco y elementos visibles para crear una agrupación visual. Un contenedor es una forma que representa un área cerrada. En un solo diseño, puedes agrupar elementos que comparten contenido o funcionalidad similares y separarlos de otros elementos con espacio abierto, tipografía y divisores.
Puedes agrupar elementos similares con espacio en blanco o una división visible que ayude a guiar al usuario por el contenido.
La contención implícita usa el espacio en blanco para agrupar visualmente el contenido y crear límites de contenedor, mientras que la contención explícita usa objetos, como líneas divisorias y tarjetas, para agrupar el contenido.
En la siguiente imagen, se muestra un ejemplo del uso del confinamiento implícito para contener el encabezado y la copia principal. La cuadrícula de columnas se usa para alinear y crear agrupaciones. Los elementos destacados se incluyen de forma explícita en las tarjetas. Usar iconografía y jerarquía de tipo para lograr una mayor separación visual
Posicionamiento del contenido
Android tiene varias formas de controlar los elementos de contenido en sus respectivos contenedores que pueden ayudar a posicionarlos de manera adecuada, como la gravedad, el espaciado y el escalamiento.
Gravity es un estándar para colocar un objeto dentro de un contenedor potencialmente más grande para casos de uso específicos. En la siguiente imagen, se muestran ejemplos de posicionamiento de objetos en la parte superior y central (1), en la parte superior y central horizontal (2), en la parte inferior izquierda (3) y en la parte final y derecha (1).
Escalado
El escalamiento es fundamental para adaptarse al contenido dinámico, la orientación del dispositivo y los tamaños de pantalla. Los elementos pueden permanecer fijos o escalarse.
Es importante tener en cuenta cómo se muestran las imágenes dentro de sus contenedores con escalamiento y posición para garantizar que se muestren como deseas, a pesar del contexto del dispositivo. De lo contrario, el enfoque principal de la imagen podría aparecer cortado, las imágenes podrían ser demasiado pequeñas o grandes para el diseño, o podrían producirse otros efectos no deseados.
El contenido sin anotaciones puede aparecer de forma diferente de lo que esperas o deseas.
Contenido fijado
Muchos elementos tienen interacciones, desplazamiento y posicionamiento integrados con ranuras o andamios. Algunos elementos se pueden modificar para que permanezcan fijos en lugar de reaccionar al desplazamiento, por ejemplo, los botones de acción flotantes (BAF) que contienen acciones críticas.
Alineación
Usa AlignmentLine para crear líneas de alineación personalizadas que los diseños superiores pueden usar para alinear y posicionar sus elementos secundarios.
No hagas lo siguiente: No interrumpas la legibilidad con espacios incoherentes, como elementos, lo que puede hacer que los diseños parezcan desordenados.
Qué hacer: Establece un espaciado coherente entre elementos similares.
Diseño del componente
Los componentes de Material 3 proporcionan sus propias configuraciones y estados para la interacción y el contenido.
Compose proporciona diseños convenientes para combinar componentes de Material en patrones de pantalla comunes. Los elementos componibles, como Scaffold, proporcionan espacios para varios componentes y otros elementos de pantalla. Obtén más información sobre los componentes y el diseño de Material.
Diseños y patrones de navegación
Si tu app contiene varios destinos para que los usuarios recorran, te recomendamos que uses combinaciones de diseño y navegación que otras apps suelen usar. Debido a que muchos usuarios ya poseen los modelos mentales para estas vinculaciones, tu app será más intuitiva para ellos.
Vinculaciones de diseño y navegación
La barra de navegación y el panel lateral de navegación modal se usan como patrones de navegación principales para las vistas de diseño superior y los destinos de navegación principales.
La barra de navegación puede contener entre tres y cinco destinos de navegación en el mismo nivel de jerarquía. Este componente se traduce en el riel de navegación para pantallas grandes.
Aunque el panel lateral de navegación puede contener más de cinco destinos de navegación, el patrón no es tan ideal como la barra de navegación debido a la necesidad de llegar a la barra superior en tamaños compactos.
Las pestañas y la barra de la aplicación inferior de Material 3 son patrones de navegación secundarios que puedes usar para complementar la navegación principal o aparecer en vistas secundarias.
Acciones de diseño
Proporciona controles para permitir que los usuarios realicen acciones. Los patrones comunes incluyen acciones de la barra superior, botones de acción flotantes (BAF) y menús.
Para las acciones de mayor importancia, un BAF proporciona un botón grande y destacado para el usuario. Proporciona solo una acción a la vez en este nivel. Un FAB puede aparecer en varios tamaños y en un formato expandido, que incluye una etiqueta. Usa Scaffold para fijar un FAB y asegúrate de que siempre sea visible, incluso cuando se desplace.
Puedes colocar acciones secundarias dentro de la barra superior o, si están agrupadas cerca de contenido relacionado, dentro de la página.
Para las acciones adicionales que no se necesitan con rapidez o frecuencia, agrégalas en un menú ampliado.
Diseños canónicos
Utiliza diseños canónicos como punto de partida, composiciones listas para usar que ayudan a que los diseños se adapten a casos de uso y tamaños de pantalla comunes. Estos diseños son estéticos y funcionales, y se derivan de la guía de Material 3.
El framework de Android incluye componentes especializados que hacen que la implementación de los diseños sea sencilla y confiable mediante las APIs de Jetpack Compose o Views.
Diseño de lista-detalles
Un diseño de lista-detalles les permite a los usuarios explorar las listas de elementos que tienen información descriptiva, explicativa o de otro tipo: los detalles del elemento. En el caso de los tamaños de pantalla compactos, solo se ven la lista o la vista de detalles. Las listas, que muestran una recopilación de contenido en un diseño basado en filas, constituyen la forma más común de diseños para apps. El diseño de lista-detalles es ideal para apps de mensajería, administradores de contactos, navegadores de archivos o cualquier app en la que el contenido se pueda organizar como una lista de elementos que muestran información adicional.
El contenido puede ser estático o dinámico.
- El contenido dinámico es el que tu app entrega sobre la marcha y es ideal para mostrar contenido generado por usuarios o reflejar las preferencias o acciones del usuario. Por ejemplo, imagina una app de fotos con una lista desplazable de fotos generadas por el usuario, que es única para cada usuario y cambia a medida que sube más imágenes. Estas imágenes son contenido dinámico.
- El contenido estático representa el contenido hard-coded, que solo se puede modificar si se realizan cambios directamente en el código de la app. Algunos ejemplos de contenido estático son las imágenes y el texto que podría ver cualquier usuario.
El archivo de Figma Now in Android proporciona varios ejemplos de diseño. En el siguiente ejemplo, se muestra una colección de contenido unidimensional.
Explora las listas de Material 3 para obtener más orientación de diseño sobre los componentes y las especificaciones de las listas.
Diseño del feed
Un diseño de feed dispone elementos de contenido equivalentes en una cuadrícula configurable para permitir una visualización rápida y conveniente de una gran cantidad de contenido. (Consulta los lineamientos de Material 3 para usar tarjetas en una colección). Los feeds pueden tener una configuración basada en listas o cuadrículas en pantallas compactas, por lo general, en tarjetas o tarjetas de información. El contenido puede ser dinámico, lo que significa que se “alimenta” desde una fuente externa dinámica, como una API.
Un diseño de cuadrícula se compone de filas y columnas que se forman a partir de principios de contención implícitos o explícitos. (consulta contención en esta página para obtener más información). Un diseño de cuadrícula se puede aplicar de forma más rígida o intercalada para variar las filas y columnas. Ambos deben tener una aplicación coherente de espaciado y lógica para evitar confundir a los usuarios. Explora los lineamientos de Material 3 sobre el diseño de feeds.
Puedes implementar un diseño de feed en Compose con listas o cuadrículas diferidas, o en Views con RecyclerView o CardView.
Diseño del panel complementario
Es posible que una vista para dispositivos móviles requiera contenido o controles compatibles. Por lo general, en forma de hojas o diálogos, pueden ayudar a que la vista principal se mantenga enfocada y despejada. Consulta la guía de M3 para usar el diseño canónico del panel de apoyo.
Obtén información sobre la orientación de M3 para las hojas inferiores.
Diseños relativos
Las entradas, el contenido y otras acciones pueden aparecer en relación con otras o restringidas a un contenedor superior. Los diseños pueden ser más personalizados, pero asegúrate de seguir una agrupación, columnas y espaciado coherentes.
Los diseños también pueden usar una combinación de tipos de diseño. Por ejemplo, puedes vincular un carrusel o un desplazamiento horizontal con tarjetas verticales. También puedes presentar un gráfico personalizado con datos de lista vertical.
Puedes presentar contenido en filas o columnas de desplazamiento con filas y columnas diferidas.
Obtén más información sobre los conceptos básicos del diseño de Compose y los elementos que conforman un elemento componible.
La autenticación es un diseño relativo común, como se muestra en la siguiente figura.
El diseño de pantalla completa es otro diseño común, como se usa en el modo envolvente.
Si trabajas con Views en lugar de Compose, puedes usar ConstraintLayout para diseñar vistas según las relaciones entre las vistas del mismo nivel y el diseño superior, lo que permite diseños grandes y complejos.
ConstraintLayout te permite compilar todo arrastrando y soltando elementos, en lugar de editar el XML con el editor de diseño. Obtén más información para compilar una IU con el editor de diseño.
Adapta los diseños
El diseño adaptable es la práctica de crear diseños que se adapten a puntos de interrupción y dispositivos específicos. Por lo general, tenemos en cuenta el ancho del dispositivo para determinar dónde debería cambiar (o adaptarse) el diseño. Tanto la Web como Android usan con conceptos de diseño responsivo, como imágenes y cuadrículas flexibles, para crear diseños que respondan mejor a su contexto.
Para obtener lineamientos de diseño sobre cómo adaptar los diseños a tamaños de pantalla expandidos, lee la guía para desarrolladores sobre Cómo brindar compatibilidad con diferentes tamaños de pantalla en Compose y la página Cómo aplicar un diseño de M3. También puedes consultar la galería de diseños canónicos de pantalla grande de Android para inspirarte y, luego, implementar diseños de pantalla grande.
Si bien no todas las apps necesitan estar disponibles en todos los tamaños de pantalla, hacerlo brinda mayor libertad a los usuarios y mejora la experiencia en cuanto a ergonomía, usabilidad y calidad de la app.
- Puedes diseñar pantallas clave (comunicar los conceptos esenciales de tu app) con tamaños de clase como puntos de inflexión para que funcionen como lineamientos.
- O bien, diseña contenido para que actúe de forma responsiva anotando cómo se debe restringir, expandir o volver a fluir.
Para obtener más información sobre los diseños, consulta la página de Material Design 3 (M3) sobre la comprensión del diseño.
WebViews
Un WebView es una vista que muestra páginas web en la app. En la mayoría de los casos, recomendamos usar un navegador web estándar, como Chrome, para entregar contenido al usuario. Para obtener más información sobre los navegadores web, lee la guía para invocar un navegador con un intent.