Utilice un lenguaje visual consistente
Los nombres de los iconos deben describir la figura; El significado operativo reside en la etiqueta de control.
Icono Sistema de diseño
Mantenga el ícono reconocible y significativo en cualquier tamaño.
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.
03
Completa la experiencia
Busque detalles que sean fáciles de pasar por alto al poner en uso el diseño.
El progreso se guarda automáticamente en este navegador.
GUÍA
Cómo revisar
EJEMPLOS
Ejemplos de uso
Utilice un lenguaje visual consistente
La misma imagen de "papelera" tiene la etiqueta "Eliminar borrador" o "Eliminar miembro" según el contexto.
Variantes y casos de uso
Estilo de icono
Utilice un sistema de líneas o bloques para iconos con la misma función y en la misma pantalla.
Coloque el nuevo ícono al lado del ícono anterior del mismo tamaño; La densidad y el espacio deben ser uniformes.
Ejemplo Los botones de correo, vídeo y documentos utilizan el mismo conjunto SVG de 1,6 píxeles.
Tamaño y área de interacción
Separe el tamaño del trazo del área de clic; Los iconos pequeños aún necesitan un área táctil adecuada.
Pruebe el icono de 16 píxeles en el botón móvil; El usuario no tiene que tocar con precisión el trazo.
Ejemplo El ícono de 18px está en el medio del área de clic de 44px.
Nombre según significado
Nombra la función claramente y evita que los usuarios adivinen el significado del dibujo.
El lector de pantalla debe poder leer el nombre de la acción; Los iconos decorativos no repiten etiquetas.
Ejemplo El ícono de campana del botón se llama "Abrir notificación", el ícono al lado del texto está oculto en el árbol de acceso.
Notificaciones
Cuenta
Buscar