Mantenga un tema por tarjeta
Determine qué necesitan saber los usuarios antes de decidir abrir una tarjeta.
tarjeta Sistema de diseño
Recopile información y acciones en una unidad fácil de escanear.
Contenido de la lista
Progreso de la revisión
01
Estructura y significado
Comparar información y presentación en contexto de uso.
02
Interacción y usabilidad
Pruebe la operación, cambie el estado y continúe trabajando.
El progreso se guarda automáticamente en este navegador.
GUÍA
Cómo revisar
EJEMPLOS
Ejemplos de uso
Mantenga un tema por tarjeta
La tarjeta del curso indica el nombre, el nivel y la duración antes del botón "Ver curso".
Variantes y casos de uso
Cómo separar tarjetas
Utilice un borde o fondo para diferenciar la tarjeta de la página, manteniendo las mismas reglas para el mismo tipo de contenido.
Tarjetas de prueba sobre fondos claros y oscuros; El límite debe ser visible independientemente de la sombra.
Ejemplo Las etiquetas de documentos utilizan bordes claros y un título vinculado.
Espaciado en etiquetas
Agrupe fotografías, títulos, descripciones y acciones con un espaciado que refleje las relaciones de contenido.
Pruebe con títulos de dos líneas y fotografías faltantes; La distancia no crea un espacio sin sentido.
Ejemplo Imagen a 12 píxeles del título; La descripción está más cerca del título que del botón de finalización de la etiqueta.
Esquinas redondeadas y contenido recortado
Usa radios de esquina de la misma escala de diseño y recorta la imagen respetando las esquinas del marco.
Coloca la imagen junto al borde de la tarjeta y activa el foco; la imagen debe respetar las esquinas y el contorno de foco debe verse completo.
Ejemplo La imagen superior solo redondea las dos esquinas superiores; el pie mantiene un fondo continuo con el marco.