Para reconocer personas o grupos
Las imágenes de perfil no deberían ser la única forma de identificar a un usuario.
avatar Sistema de diseño
Muestre identidad y proporcione actualizaciones fotográficas controladas.
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
Para reconocer personas o grupos
La lista de miembros muestra tanto el avatar como el nombre "Linh Nguyen".
Variantes y casos de uso
Forma del avatar
Usa una forma coherente para cada tipo de entidad y conserva las partes importantes de la imagen al recortarla.
Prueba retratos próximos al borde y logotipos horizontales; conserva los detalles necesarios para reconocer a la persona u organización.
Ejemplo Las personas usan imágenes circulares; las organizaciones, marcos cuadrados con esquinas redondeadas.
Escala de tamaños
Define tamaños para listas, comentarios y perfiles, en lugar de ajustarlos arbitrariamente en cada pantalla.
Compara los avatares en listas compactas y cabeceras de perfil; una imagen pequeña no debe aumentar inesperadamente la altura de la fila.
Ejemplo Usa 32px en listas y 80px en perfiles, con la misma regla de recorte.
Indicador de estado
Coloca el estado junto al avatar y añade su nombre para que no haya que interpretar únicamente el color.
Comprueba los temas claro y oscuro y la vista sin colores; el indicador de conexión debe seguir siendo comprensible.
Ejemplo El punto verde incluye la etiqueta «En línea» en la información de la persona.
Cuando falta la imagen
Conserva el tamaño y la identidad cuando la imagen falla, falta o está cargando.
Bloquea la solicitud de la imagen; la fila debe mantener su posición y la persona debe seguir siendo identificable.
Ejemplo Si falla la imagen de la cuenta Anh Nguyen, muestra las iniciales AN.
AN
Imagen alternativa