Diseños comunes

Usa diseños comunes para ayudarte a diseñar tu app para casos de uso y tamaños de pantalla comunes. Estas composiciones listas para usar son buenos puntos de partida.

Diseños comunes

Diseño de lista-detalles

El 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. Para tamaños de pantalla compactos, solo se ven la lista o la vista de detalles. Las listas muestran una colección de contenido en un diseño basado en filas y 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 publica 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 son contenido dinámico.
  • El contenido estático representa el contenido codificado, que solo se puede modificar si se realizan cambios directamente en el código de tu app. Algunos ejemplos de contenido estático son las imágenes y el texto que todos los usuarios pueden ver.

El archivo de Figma de Now in Android proporciona varios ejemplos de diseño. En el siguiente ejemplo, se muestra una colección de contenido unidimensional.

Colección de contenido unidimensional

Explora las listas de Material 3 para obtener más orientación sobre el diseño de componentes y especificaciones de listas.

Lista-detalles en una pantalla extra grande
Lista-detalles en una pantalla extragrande

Diseño de 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. Obtén más información sobre los lineamientos de Material 3 para usar tarjetas en una colección. Los feeds pueden ser una configuración basada en listas o cuadrículas en pantallas compactas, por lo general, en tarjetas o mosaicos. El contenido puede ser dinámico, lo que significa que se "transmite" desde una fuente externa dinámica, como una API.

Un diseño de cuadrícula se compone de filas y columnas formadas por principios de contención implícitos o explícitos. Un diseño de cuadrícula se puede aplicar de forma más rígida o escalonada para variar las filas y las columnas. Ambos deben tener una aplicación coherente de espaciado y lógica para evitar confundir a los usuarios.

Puedes implementar un diseño de feed con listas o cuadrículas diferidas.

Diseño del feed

Por ejemplo, aquí una galería de fotos y podcasts en un diseño de cuadrícula son formatos de feed comunes.

Diseño del panel de asistencia

Es posible que una vista para dispositivos móviles requiera contenido o controles de asistencia, como hojas o diálogos. Ayudan a que la vista principal se mantenga enfocada y ordenada.

Las hojas inferiores pueden actuar como contenido de asistencia para la vista principal

Obtén información sobre la guía de M3 para las hojas inferiores.

Pantalla de compatibilidad con la playlist
En pantallas más grandes, las hojas de asistencia se pueden abrir como un panel.

WebViews

Una WebView 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.