Tarjetas

Las tarjetas pueden contener una amplia variedad de información, como texto, íconos, imágenes, respuestas de Gemini o acciones.

Principios

Cohesión: Las tarjetas agrupan información y acciones relacionadas en una sola unidad fácil de comprender.

Claridad: Presentan el contenido de una manera clara y organizada, lo que mejora la capacidad de exploración.

Versatilidad: Las tarjetas pueden adaptarse para mostrar una amplia variedad de contenido, desde textos breves simples hasta resúmenes más complejos con varios elementos.

Modularidad: Están diseñadas para ser modulares y reutilizables en diferentes partes de la interfaz de Jetpack Compose Glimmer para Glasses.

Uso y ubicación

Las tarjetas pueden contener una amplia variedad de información, como texto, íconos, imágenes, acciones o respuestas de Gemini.

Usa las plantillas de tarjetas de Jetpack Compose Glimmer para el contenido, ya que vienen en muchas variaciones y están optimizadas para seguir los principios de diseño de Glasses de inmediato.

check_circle

Qué debes hacer

Mantén el contenido conciso y ten en cuenta las prácticas recomendadas de estilo, como el uso del color.

cancel

Qué no debes hacer

No abrumes a los usuarios con demasiado contenido en las tarjetas ni abandones los lineamientos de estilo.

No uses un grupo de botones con una tarjeta para mostrar más de una acción.

check_circle

Qué debes hacer

Ten exactamente un botón anidado en una tarjeta para un enfoque más claro.

cancel

Qué no debes hacer

No tengas varios botones dentro de una tarjeta. Las tarjetas no deben tratarse como un diálogo para dispositivos móviles.

Anatomía

Las tarjetas se compilan con plantillas de ranuras preestablecidas.

1. Encabezado: Es la sección superior de la tarjeta, diseñada para contener una imagen. 

2. Título y subtítulo: Estos campos de texto proporcionan las etiquetas principales y secundarias de la tarjeta. 

3. Ícono inicial: Es un ícono opcional que aparece al comienzo del área de contenido de la tarjeta.

4. Ícono final: Es un ícono opcional que aparece al final del área de contenido de la tarjeta.

5. Acción: Es una ranura para un elemento interactivo principal, como un botón. Esto permite que los usuarios realicen una acción directamente desde la tarjeta. Si una tarjeta tiene una acción, solo debe contener una.

6. Contenido principal: Es el cuerpo principal de la tarjeta, donde colocas el texto principal o cualquier otro contenido.

Enfoque

En el caso de las tarjetas cuyo propósito principal es alojar un elemento interactivo específico (como el botón de la acción), el enfoque debe ir directamente a ese elemento, no al contenedor de la tarjeta. Una tarjeta se puede enfocar cuando representa un solo elemento navegable, como una entrada en una lista. Esto proporciona una experiencia del usuario más directa y accesible.

Una tarjeta que tiene enfoque como elemento de lista

Se enfoca un botón dentro de una tarjeta como elemento procesable.

Personalización