Sistema de diseño de tarjetas

Las tarjetas comparten algunos elementos fundamentales de diseño. Usa plantillas y componentes de tarjetas para compilar tarjetas únicas para tu app.

Elementos fundamentales

En la siguiente tabla, se describen los elementos fundamentales del diseño de tarjetas.

alt_text alt_text
alt_text alt_text alt_text

Ícono de la app

El desarrollador de apps proporciona los íconos, y estos se muestran temporalmente en la pantalla.

Área de diseño

Cada plantilla de tarjeta tiene sus propias reglas relacionadas con el área de contenido principal. Asegúrate de consultar la guía de diseño.

Botón inferior

Los botones son importantes para habilitar acciones secundarias en la tarjeta. Coloca los botones un 6.3% sobre la parte inferior de la pantalla.

Ícono de la app

Wear muestra automáticamente el ícono de la app a medida que el usuario se desplaza por el carrusel de tarjetas. El ícono de la app se atenúa y no debe implementarse dentro de la tarjeta. Si quieres obtener más información para crear íconos de apps, consulta Íconos de productos.

alt_text

Figura 1: Ejemplos de íconos de apps

Wear muestra automáticamente el ícono de la app

Asume que Wear OS muestra automáticamente el ícono de la app.
No incluyas el ícono de la app en el diseño de la tarjeta, o este aparecerá dos veces.

Botón

Elige texto corto para tus botones. Usa texto específico para la acción y el destino del llamado a la acción. Asegúrate de que la traducción del texto del botón se adapte a la cantidad de caracteres. Si el texto del botón traducido es demasiado largo, configúralo para que incluya la palabra Más.

alt_text alt_text alt_text

Posición

Especificación del botón

Tipo

Coloca el botón un 6.3% desde la parte inferior de la cara de reloj. Deja un padding de 12 dp de ambos lados. Los tamaños de la fuente no son escalables. Establece un tamaño de fuente mínimo de nueve. Para idiomas no latinos, usa un tamaño de fuente mínimo de siete.

Plantillas

Hay cuatro tipos de plantillas de tarjetas disponibles. Descarga el Kit de diseño de tarjetas (Figma) para ver los ejemplos y enviar comentarios sobre tu experiencia con el uso de esta plantilla.

Centrada en el texto

La plantilla de tarjetas basada en texto está diseñada para mostrar texto, como las noticias más recientes, los próximos eventos y los recordatorios. Por lo general, se usa para los estados de acceso, error y configuración para informarles a los usuarios sobre lo que sucede y ofrecer un llamado a la acción claro.

centrada en el texto

Centrada en los botones

La plantilla de tarjeta centrada en los botones está diseñada para tarjetas con hasta cinco acciones principales. Usa esta plantilla para iniciar tareas específicas con rapidez.

centrada en los botones

Centrada en la información

La plantilla de tarjetas centrada en la información muestra las métricas de alto nivel y el progreso. Esta es particularmente útil para tarjetas relacionadas con la salud y el fitness. Proporciona opciones flexibles para la visualización de contenido. Para mantener la visibilidad, prioriza los datos importantes y evita llenar la plantilla.

centrada en la información

Centrada en los datos

La plantilla de tarjetas centrada en los datos es versátil y está diseñada para mostrar gráficos y elementos gráficos que resumen la información periódica. Ofrece flexibilidad en la visualización de datos y es útil para crear estados visuales vacíos. Mantener elementos gráficos simples es fundamental para garantizar que la tarjeta permanezca visible.

centrada en los datos

Color

Para que se puedan visualizar las tarjetas, limítate a tres colores.

Establece el color de fondo en negro.
No establezcas una imagen de color o con sangrado completo como color del fondo.

Tipografía

Usa Roboto como la fuente principal en Wear OS. Usa Body 2 como el tamaño de fuente predeterminado y el más pequeño, y Display 2 como el más grande.

tamaño de la fuente

Para obtener más información sobre la fuente, el grosor y el tamaño, consulta Tipografía.

Componentes

Usa componentes para compilar tus tarjetas. Personaliza los colores del componente a fin de expresar tu marca según los lineamientos de temas de Material para Wear.

Descarga el Kit de diseño de tarjetas (Figma) para ver ejemplos de componentes.

Componente Variante Ejemplo
Botón Botón estándar

Tamaños disponibles: Estándar, grande y extragrande

alt_text
Botón Botón de texto estándar

Tamaños disponibles: Estándar, grande y extragrande

alt_text
Chip Chip estándar principal alt_text
Chip Chip estándar secundario alt_text
Chip Chip de avatar pequeño alt_text
Chip Chip de avatar grande alt_text
Chip Chip compacto (inferior) alt_text
Indicador de progreso Indicador de progreso estándar alt_text
Indicador de progreso Indicador de progreso con intervalo alt_text

Recursos

Para obtener más información, consulta los Lineamientos del diseño de tarjetas.