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.
|
|
|
|
|
|
Ícono de la appEl desarrollador de apps proporciona los íconos, y estos se muestran temporalmente en la pantalla. |
Área de diseñoCada 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 inferiorLos 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.
Figura 1: Ejemplos de íconos de apps
Wear muestra automáticamente el ícono de la app
Qué debes hacer
Qué no debes hacer
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.
|
|
|
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.
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 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 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 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.
Color
Para que se puedan visualizar las tarjetas, limítate a tres colores.
Qué debes hacer
Qué no debes hacer
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.
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  |
| Botón | Botón de texto estándar | Tamaños disponibles: Estándar, grande y extragrande  |
| Chip | Chip estándar principal |
 |
| Chip | Chip estándar secundario |
 |
| Chip | Chip de avatar pequeño |
 |
| Chip | Chip de avatar grande |
 |
| Chip | Chip compacto (inferior) |
 |
| Indicador de progreso | Indicador de progreso estándar |
 |
| Indicador de progreso | Indicador de progreso con intervalo |
 |
Recursos
Para obtener más información, consulta los Lineamientos del diseño de tarjetas.