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, que incluyen 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 (BAF) proporcionan 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 Proporciona una alineación coherente entre el contenido y los elementos de la IU similares.
No debes interrumpir la legibilidad mediante un espaciado incoherente como los elementos, lo que puede hacer que los diseños se vean desordenados.
Qué hacer: Establece un espaciado coherente entre los elementos similares.
Figura 3: No interrumpa la legibilidad No utilices el diseño vertical ni idealizado: considera las 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 debe ubicarse el contenido dentro del diseño usando términos de alineación, restricciones o gravedad. Incluye cómo deben responder las imágenes a su contenedor para que se muestren de forma correcta.
Partes de la pantalla típica de una app para Android
La mayoría de las apps para Android constan de regiones denominadas 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 notificaciones, y proporcionan una interacción directa con el dispositivo desde cualquier lugar. Obtén más información acerca de 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 asumir erróneamente que la intención es ocultarlos, desaprovecharles la posibilidad de asignarles un estilo y, por consiguiente, el espaciado podría resultar desfavorable.
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 posibilidades que le permiten a un usuario navegar dentro de tu app, acceder a acciones importantes o recorrer 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 de navegación y del sistema.
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, 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 mediante la creación de una IU en la que los usuarios puedan actuar.
Composición y estructura del contenido
Crea un flujo y ritmo flexibles con una estructura y métodos de contención para tu contenido.
Estructura base: usar márgenes y columnas como 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 espaciado 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.
También puedes garantizar zonas seguras de inserción o inserciones en este paso. Las inserciones de la barra del sistema evitan que las acciones cruciales caigan debajo de las barras del sistema. Para obtener detalles, consulta Cómo dibujar tu contenido detrás de las barras del sistema.
Usa columnas para crear una estructura de cuadrícula flexible y 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 coloca 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 adaptarse a diferentes factores de forma y cambiar los tamaños y la cantidad de columnas según sea necesario en función del tamaño de la pantalla en ciertos puntos y permitir que también se ajuste el contenido. Evita ser demasiado detallado con la cuadrícula de columnas, ya que para eso sirve la cuadrícula de referencia: proporcionar unidades de espaciado coherentes.
Ten cuidado de establecer una cuadrícula de filas complementaria, ya que puede restringir el escalamiento horizontal de contenido entre orientaciones y factores de forma. Por lo general, establecer reglas de padding proporcionará la coherencia visual necesaria.
Usar la contención para agrupar visualmente los elementos
La contención hace referencia al uso del espacio en blanco y los 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 funcionalidad similares y separarlos de otros elementos mediante espacio abierto, tipografía y divisores.
Puedes agrupar elementos similares con espacio en blanco o división visible para ayudar a guiar al usuario a través del contenido.
La contención implícita usa espacio en blanco para agrupar visualmente el contenido y crear límites de contenedores, mientras que la contención explícita usa objetos como líneas divisorias y tarjetas para agrupar contenido.
En la siguiente figura, se muestra un ejemplo del 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 de manera correcta, lo que incluye la gravedad, el espaciado y el escalamiento.
La gravedad es un estándar que se utiliza para colocar un objeto dentro de un contenedor potencialmente más grande en casos de uso específicos. En la siguiente figura, 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 el derecho (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 tener en cuenta cómo se muestran las imágenes dentro de sus contenedores con el escalamiento y la posición para asegurarse de que se vea con el aspecto que quieres a pesar del contexto del dispositivo. De lo contrario, el enfoque principal de la imagen podría verse cortado, las imágenes podrían ser demasiado pequeñas o grandes para el diseño, o bien otros efectos no deseados.
El contenido que no está notado puede tener un aspecto distinto de lo que esperas o quieres.
Contenido fijado
Muchos elementos tienen interacciones, desplazamiento y posicionamiento integrados con ranuras o andamiajes. 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 de nivel superior pueden usar para alinear y posicionar sus elementos secundarios.
No debes interrumpir la legibilidad mediante espaciado de forma inconsistente como elementos, lo que puede hacer que los diseños parezcan desordenados.
Qué hacer: Establece un espaciado coherente entre los 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 ranuras para varios componentes y otros elementos de pantalla. Obtén más información sobre los componentes de Material y el diseño.
Diseños y patrones de navegación
Si tu app contiene varios destinos para que los usuarios los utilicen, te recomendamos que emplees vinculaciones de diseño y navegación que comúnmente usen otras apps. Debido a que muchos usuarios ya poseen los modelos mentales para estas vinculaciones, tu app les resultará más intuitiva.
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 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, 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 de Material 3 y la barra de la app inferior son patrones de navegación secundarios que puedes usar para complementar la navegación principal o aparecer en vistas secundarias.
Acciones de diseño
Proporcionar controles para permitir que los usuarios realicen acciones. Los patrones comunes incluyen acciones de la barra superior, botón de acción flotante (BAF) y menús.
En el caso de las acciones de mayor importancia, un BAF proporciona un botón grande y destacado para el usuario. En este nivel, proporciona solo una acción a la vez. Un BAF puede aparecer en varios tamaños y en un formulario expandido, que incluye una etiqueta. Usa Scaffold para fijar un BAF y asegúrate de que siempre esté visible incluso cuando te desplazas.
Puedes colocar acciones secundarias en la barra superior o, si están agrupadas cerca de contenido relacionado, dentro de la página.
Para cualquier acción adicional que no sea necesaria 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 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 el caso de los tamaños de pantalla compacta, solo se puede ver la vista de lista o la vista detallada. Cuando se muestra una colección de contenido en un diseño basado en filas, las listas constituyen la forma de diseño más común para las 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 aquel que tu app entrega sobre la marcha y es ideal para mostrar contenido generado por usuarios o reflejar sus preferencias o acciones. 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 codificado, 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 cualquier usuario puede 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 sobre el diseño de los componentes y las especificaciones de las listas.
Diseño del feed
Un diseño de feed organiza los 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). En pantallas compactas, los feeds se pueden configurar según listas o cuadrículas, generalmente en tarjetas o mosaicos. El contenido puede ser dinámico, es decir, que se “alimenta” desde 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 se puede aplicar de manera más rígida o escalonar para variar las filas y columnas. Ambos deben aplicar una lógica y el espaciado de manera coherente para evitar confundir a los usuarios. Explora los lineamientos de Material 3 para diseñar 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 de panel complementario
Es posible que la vista para dispositivos móviles requiera contenido o controles complementarios. 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 información sobre la guía de M3 sobre las 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 seguir agrupaciones, columnas y espaciados coherentes.
Los diseños también pueden usar una combinación de tipos de diseño. Por ejemplo, puedes combinar un carrusel o un desplazamiento horizontal con tarjetas verticales. O puedes presentar un gráfico personalizado con datos de lista vertical.
Puedes presentar contenido en filas o columnas de desplazamiento con filas diferidas 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, tal como 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 superior, lo que permite diseños grandes y complejos.
ConstraintLayout te permite compilar solo con la funció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 diseñar diseños que se adapten a dispositivos y puntos de interrupción 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 utilizan conceptos de diseño responsivos, como imágenes y cuadrículas flexibles, para crear diseños que respondan mejor a su contexto.
Si deseas obtener lineamientos de diseño para adaptar diseños a tamaños de pantalla expandidos, consulta la guía para desarrolladores Cómo brindar compatibilidad con diferentes tamaños de pantalla en Compose y la página Cómo aplicar diseño en M3. También puedes consultar la galería canónica de pantallas grandes de Android para inspirarte y también implementar diseños de pantalla grande.
Si bien no es necesario que todas las apps estén disponibles en todos los tamaños de pantalla, los usuarios tendrán 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 tomando nota de cómo se debe restringir, expandir o reprocesar 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.