Lineamientos sobre el diseño de tarjetas

Las tarjetas son una de las superficies más accesibles en Wear OS.

Las tarjetas brindan acceso rápido a la información y las acciones que los usuarios necesitan para realizar tareas. Con deslizar el dedo sobre la cara de reloj, un usuario puede ver cómo progresa hacia sus objetivos de entrenamiento, consultar el clima y mucho más. Inicia una app o realiza tareas esenciales con rapidez desde las tarjetas.

Los usuarios pueden elegir las tarjetas que quieren ver en el reloj. Wear OS permite que los usuarios administren sus tarjetas tanto en el reloj como desde la aplicación complementaria.

Principios de UX

En la siguiente tabla, se describen los principios de UX de las tarjetas.

Inmediatez

Predictibilidad

Relevancia
Las tarjetas están diseñadas para ayudar a los usuarios a completar tareas frecuentes con rapidez. Muestra contenido importante con una jerarquía de información clara para que sea fácil de entender. El contenido de cada tarjeta siempre debe enfocarse en una tarea del usuario. Esto permite a los usuarios predecir qué información podrán ver en la tarjeta y mejora la recuperación de contenido. Los usuarios llevan sus relojes a todas partes. Considera cuál es la relevancia del contenido de la tarjeta para el contexto del usuario.

Lineamientos

Ten en cuenta los siguientes lineamientos a la hora de crear tarjetas.

Enfócate en una sola tarea

Qué debes hacer

Enfoca cada tarjeta en una sola tarea, como iniciar carrera.

Qué no debes hacer

No admitas demasiadas tareas diferentes en una sola tarjeta.

Crea tarjetas diferentes para cada tarea

Si tu app admite varias tareas, ten en cuenta crear varias tarjetas para cada una de ellas. Por ejemplo, una app de fitness puede tener una tarjeta de objetivos y una de actividad de entrenamiento.

Tarjetas

Muestra representaciones de gráficos que puedan comprenderse de un vistazo

Qué debes hacer

Muestra representaciones rápidas y fáciles de ver de información estadística o numérica y permite que el usuario presione para ver más información en una app si es necesario.

Qué no debes hacer

No muestres información numérica o estadística detallada en la tarjeta.

Indica las actualizaciones de datos más recientes

Asegúrate de que el usuario esté al tanto de qué tan recientes son los datos que se muestran en el reloj. Muestra los datos almacenados en caché con una indicación de cuándo se actualizó por última vez cuando sea relevante para el usuario

Tarjetas

Usa una frecuencia de actualización de datos adecuada

Elige una frecuencia de actualización adecuada para tus tarjetas, teniendo en cuenta el impacto en la duración de batería del dispositivo. Si usas fuentes de datos de la plataforma, como la frecuencia cardíaca y el recuento de pasos, Wear OS controla la frecuencia de actualización por ti.

Estados vacíos

Las tarjetas tienen dos tipos de estados vacíos. Para ambos, te recomendamos que uses PrimaryLayout.

Errores o permisos

Dile al usuario que debe actualizar su configuración o preferencias desde la tarjeta.

Acceso

Brinda un llamado a la acción claro en una tarjeta de acceso.

Ejemplos de diálogo

Usa estados de diálogo para errores, permisos y configuración.

Tarjetas

Mostrar actividades en curso

Cuando una app realiza una actividad de larga duración, como el seguimiento de un entrenamiento o la reproducción de música, debería mostrar el progreso de la actividad en curso en una o más tarjetas.

Si tu app también admite tarjetas que permiten a los usuarios iniciar estas actividades, haz lo siguiente para minimizar su confusión:

  • Indica que una actividad en curso ya está en curso.
  • Si el usuario presiona una de estas tarjetas, inicia tu app y muestra la actividad en curso. No inicies una nueva instancia de una actividad en curso.

Tarjetas

Requisitos

Datos principales
El contenido principal que describe la actividad.

Etiqueta
Muestra el estado de la actividad.

Movimiento en las tarjetas

Cuando agregues animaciones a las tarjetas, ten en cuenta los siguientes principios:

Ayuda a los usuarios a comprender los cambios

Qué debes hacer

Destaca la actualización de información en una tarjeta, como el progreso en un gráfico de recuento de pasos.

Qué no debes hacer

Alterna entre valores de forma inesperada.

Vistas previas

Agrega una vista previa de tarjetas para ayudar al usuario a ver qué contenido se muestra en el administrador de tarjetas en su reloj y teléfono. Cada tarjeta puede tener una imagen de vista previa representativa. Esa imagen debe cumplir con los siguientes requisitos.

Requisitos

  • Exporta elementos a 400 x 400 píxeles.
  • Proporciona una imagen de vista previa circular.
  • Usa una fondo negro sólido.
  • Guarda el archivo como PNG o JPEG.
  • Agrega recursos localizados a los idiomas populares de tu app.
Se muestra una vista previa de tarjetas en el administrador de tarjetas de un reloj Vista previa de una tarjeta que se muestra en el administrador de tarjetas en un teléfono

Qué debes hacer

Muestra una vista previa donde la tarjeta se propaga con el contenido.

Qué no debes hacer

No muestres un estado vacío, no muestres el ícono de tarjeta en la IU de paginación y no coloques un trazo alrededor de la tarjeta.

Ejemplos de diseño

A continuación, se muestran algunos casos de uso frecuentes de las tarjetas, en los que se recurren a nuestras prácticas recomendadas para el diseño. Para obtener más información, consulta Tarjetas.

Seguimiento de objetivos

Comenzar entrenamiento

Comenzar entrenamiento

Comenzar entrenamiento

Resumen del entrenamiento

Iniciar temporizador

Frecuencia cardíaca actual

Frecuencia cardíaca

Próxima alarma

Meditar

Meditar

Noticias

Información meteorológica

Siguiente evento

Redes sociales

Reproducir contenido multimedia