Un diseño define la estructura visual para que un usuario interactúe con tu app, como en una actividad. Android ofrece una variedad de bibliotecas, puntos de partida canónicos y técnicas para mostrar y posicionar contenido.
Puck robado
Respeta las áreas seguras del dispositivo, lo que incluye partes de la IU, como cortes de pantalla, inserciones de borde a borde, pantallas perimetrales, teclados en software y barras del sistema.
Qué hacer: Proporciona un diseño flexible para que los usuarios interactúen con el teclado.
Video 1: Cómo proporcionar un diseño flexible para que los usuarios interactúen
Mantén las interacciones esenciales, como la navegación principal, en un área de pantalla accesible.
Figura 1: Los botones de acción flotantes (BAFs) brindan un punto de interacción destacado y accesible. Usa la contención para agrupar contenido relacionado a fin de 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 Proporcionar una alineación coherente entre contenido similar y elementos de la IU
No debes interrumpir la legibilidad mediante un espaciado incoherente como los elementos, lo que puede hacer que los diseños parezcan aleatorios.
Qué debes hacer: Establece un espaciado coherente entre elementos similares.
Figura 3: No interrumpa la legibilidad. No te limites a la posición vertical o a un diseño idealizado: considera diferentes relaciones de aspecto, clases de tamaño y resoluciones que los usuarios puedan encontrar.
No abrumes al usuario con demasiadas acciones por vista.
Cuando crees diseños personalizados, toma nota de cómo se debe ubicar el contenido en el diseño mediante términos de alineación, restricciones o gravedad. Incluye la manera en que las imágenes deberían responder a su contenedor para mostrarse correctamente.
Partes de la pantalla típica de una app para Android
La mayoría de las apps para Android constan de regiones que se denominan barras del sistema, área de navegación y 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 notificación, y permiten una interacción directa con el dispositivo desde cualquier lugar. Obtén más información sobre las barras del sistema.
Las barras del sistema son una parte integral de la interfaz del dispositivo. Agrégalos como una capa superior de tus diseños para asegurarte de que se tengan en cuenta en el diseño de la pantalla. De lo contrario, los usuarios podrían suponer erróneamente que la intención es ocultarlos, desaprovecharles un estilo y terminar siendo el espaciado incorrecto.
Agrega las barras como una capa superior. Usa android:navigationBarColor y android:statusBarColor para aplicar colores a las barras del sistema del tema de tu app.
Región de navegación
Navigation representa las diferentes opciones que le permiten a un usuario navegar dentro de tu app, acceder a acciones importantes o usar la plataforma Android.
Región del cuerpo
La región del cuerpo contiene el contenido de la pantalla. El contenido del cuerpo se compone de agrupaciones adicionales y parámetros de diseño. Debe continuar en las regiones de la barra del sistema y de navegación.
Declara WindowCompat.setDecorFitsSystemWindows(window, false) para las inserciones de borde a borde.
Para determinar los patrones de composición y navegación adecuados para tu diseño, debes comprender cómo interactúan los usuarios con tu contenido y cómo navegan por la arquitectura de la información de tu app. De esta manera, podrás orientar tu diseño para que se enfoque más en el usuario mediante la creación de una IU en la que los usuarios puedan actuar.
Composición y estructura del contenido
Desarrolla un flujo y ritmo flexibles con una estructura y métodos de contención para tu contenido.
Estructura de base: usa márgenes y columnas para barreras visuales
Para comenzar a crear una estructura sólida con barreras de seguridad coherentes, agrega márgenes y columnas a tus diseños.
Los márgenes proporcionan espacio en los bordes izquierdo y derecho de la pantalla y el contenido. Un valor de margen estándar para tamaños compactos es de 16 dp, pero los márgenes deben adaptarse para adaptarse a pantallas más grandes. El contenido del cuerpo y las acciones de tu app deben mantenerse dentro de estos márgenes y alinearse con ellos.
En este paso, también puedes garantizar las zonas seguras o las inserciones. Las inserciones de la barra del sistema evitan que las acciones cruciales caigan bajo las barras del sistema. Consulta Cómo dibujar tu contenido detrás de las barras del sistema para obtener más detalles.
Usa columnas para crear una estructura de cuadrícula flexible a fin de lograr una alineación coherente y proporcionar definición vertical a un diseño dividiendo el contenido dentro del área del cuerpo. El contenido se ubica en las áreas de la pantalla que contienen columnas. Estas columnas proporcionan 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 admitir diferentes factores de forma, ya que cambia los tamaños de las columnas y la cantidad de columnas según lo necesite el tamaño de la pantalla en determinados puntos y, al mismo tiempo, permita que el contenido también escale. Evita ser demasiado detallado con la cuadrícula de columnas, ya que para esto sirve la cuadrícula de referencia: proporciona unidades de espaciado coherentes.
Ten cuidado de establecer una cuadrícula de filas complementaria, ya que puede restringir el escalamiento horizontal del contenido entre orientaciones y factores de forma. Por lo general, establecer reglas de relleno proporcionará la coherencia visual necesaria.
Usar la contención para agrupar los elementos visualmente
La contención hace referencia al uso de espacios en blanco y elementos visibles juntos 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 funcionalidades similares y separarlos de otros elementos mediante el espacio abierto, la tipografía y los divisores.
Puedes agrupar elementos similares con espacios en blanco o división visible para guiar al usuario a través del contenido.
La contención implícita usa espacios en blanco para agrupar visualmente el contenido y crear límites del contenedor, mientras que la contención explícita usa objetos como líneas divisorias y tarjetas para agrupar el contenido.
En la siguiente figura, se muestra un ejemplo de uso de la contención implícita 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 explícitamente en las tarjetas. Usar la iconografía y la jerarquía de tipos 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 correctamente, como la gravedad, el espaciado y el escalamiento.
Gravedad es un estándar que se utiliza 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 desde el inicio y el centro (1), la parte superior y el centro horizontal (2), la parte inferior izquierda (3), y el final y la derecha (1).
Escalamiento
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 ajustarse.
Es importante que tengas en cuenta cómo se muestran las imágenes dentro de sus contenedores con escalamiento y posición para garantizar que se vea como deseas que se vea la imagen sin importar el contexto del dispositivo. De lo contrario, el enfoque principal de la imagen podría parecer cortado, las imágenes podrían ser demasiado pequeñas o grandes para el diseño, o bien otros efectos no deseados.
El contenido sin anotaciones puede tener un aspecto distinto 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 flotante (BAF) que albergan 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 debes interrumpir la legibilidad mediante espaciado de elementos de forma inconsistente, lo que puede hacer que los diseños parezcan aleatorios.
Qué debes 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 de componibilidad, como Scaffold, proporcionan ranuras para varios componentes y otros elementos de pantalla. Obtén más información sobre el diseño y los componentes de Material.
Diseños y patrones de navegación
Si tu app contiene varios destinos para que los usuarios los recorran, te recomendamos que emplees vinculaciones de diseño y navegación que suelen usar otras apps. Dado que muchos usuarios ya poseen los modelos mentales de estas vinculaciones, tu app les resultará más intuitiva.
Vinculación 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 superiores y los destinos de navegación principales.
La barra de navegación puede contener de tres a 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.
Si bien 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 inferior de la app 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 que les permitan a los usuarios realizar acciones. Los patrones comunes incluyen acciones de la barra superior, botón de acción flotante (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 BAF puede aparecer en varios tamaños y en un formato expandido, que incluye una etiqueta. Usa Scaffold para fijar un BAF y asegúrate de que siempre sea visible incluso cuando el usuario se desplaza.
Puedes colocar acciones secundarias en la barra superior o, si están agrupadas cerca de contenido relacionado, en la página.
En el caso de las acciones adicionales que no se necesiten de manera oportuna o frecuente, agrégalas a 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 de Views.
Diseño de lista-detalles
Un diseño de lista-detalles permite a los usuarios explorar listas de elementos que tienen información descriptiva, explicativa o de otro tipo: los detalles del elemento. En los tamaños de pantalla compacta, solo se ven la vista de lista o detalles. Las listas, que muestran una colección de contenido en un diseño basado en filas, conforman la forma más común de diseños para las apps. El atributo 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 revelan información adicional.
El contenido puede ser estático o dinámico.
- El contenido dinámico es aquel que tu app publica 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 este sube más imágenes. Estas imágenes incluyen contenido dinámico.
- El contenido estático representa contenido hard-coded, que solo se puede modificar si se hacen cambios directamente en el código de la app. Algunos ejemplos de contenido estático son las imágenes y el texto que todos los usuarios pueden ver.
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 organiza 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 configurarse según listas o cuadrículas en pantallas compactas, por lo general, en tarjetas o mosaicos. El contenido puede ser dinámico, es decir, se “ingresa” de una fuente externa dinámica, como una API.
Un diseño de cuadrícula se compone de filas y columnas compuestas por 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 puede aplicarse de forma más rígida o escalonar para variar las filas y columnas. Ambos deben aplicar la lógica y el espaciado de manera coherente 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 diferidas o cuadrículas diferidas, o en Views con RecyclerView o CardView.
Diseño de panel complementario
Una vista para dispositivos móviles puede requerir 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 complementario.
Obtén más información sobre la guía de M3 sobre hojas inferiores.
Diseños relativos
Las entradas, el contenido y otras acciones pueden aparecer una respecto de la otra o estar restringidas a un contenedor superior. Los diseños pueden ser más personalizados, pero asegúrate de que sigan agrupaciones, 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. O bien, podrías presentar un gráfico personalizado con datos de lista vertical.
Puedes presentar contenido en filas o columnas desplazables con filas y columnas diferidas.
Obtén más información sobre los conceptos básicos del diseño de Compose y los componentes de 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, ya que se usa en el modo envolvente.
Si trabajas con Views en lugar de Compose, puedes usar ConstraintLayout para distribuirlas según las relaciones entre las vistas del mismo nivel y el diseño de nivel superior, lo que permite diseños grandes y complejos.
ConstraintLayout te permite compilar completamente mediante la acción de arrastrar y soltar, en lugar de editar el XML con el editor de diseño. Obtén más información para compilar una IU con un editor de diseño.
Adapta 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, consideramos el ancho del dispositivo para determinar dónde debe cambiar o adaptarse el diseño. Tanto la Web como Android usan conceptos de diseño responsivo, como imágenes y cuadrículas flexibles, para crear diseños que respondan mejor a su contexto.
Para conocer los lineamientos de diseño sobre cómo adaptar diseños a tamaños de pantalla expandidos, consulta la guía para desarrolladores sobre Cómo compilar diseños adaptables en Compose y la página Cómo aplicar diseño de M3. También puedes consultar la galería canónica de pantallas grandes de Android para obtener inspiración e implementación de diseños de pantallas grandes.
Aunque no todas las apps necesitan estar disponibles en todos los tamaños de pantalla, esto otorga a los usuarios más libertad en cuanto a la ergonomía, la usabilidad y la calidad de la app.
- Puedes diseñar pantallas clave (para comunicar los conceptos esenciales o tu app) con tamaños de clase como puntos de interrupción para que actúen como lineamientos.
- O bien, diseña el contenido para que actúe de manera responsiva indicando cómo se debe restringir, expandir o redistribuir el contenido.
Para obtener más información sobre los diseños, consulta la página Material Design 3 (M3) Información sobre el diseño.
WebViews
Una WebView es una vista que muestra páginas web en apps. En la mayoría de los casos, recomendamos usar un navegador web estándar, como Chrome, para entregar contenido al usuario. Si quieres obtener más información sobre los navegadores web, lee la guía para invocar un navegador con un intent.