Для распознавания людей или групп
Изображения профиля не должны быть единственным способом идентифицировать пользователя.
Аватар Система дизайна
Покажите личность и предоставьте контролируемые обновления фотографий.
Содержание чек-листа
Прогресс проверки
01
Структура и значение
Сравните информацию и представление в контексте использования.
02
Взаимодействие и удобство использования
Попробуйте выполнить операцию, измените статус и продолжайте работу.
Прогресс автоматически сохраняется в этом браузере.
РЕКОМЕНДАЦИИ
Как проверять
ПРИМЕРЫ
Примеры использования
Для распознавания людей или групп
В списке участников отображается как аватар, так и имя «Линь Нгуен».
Варианты и сценарии использования
Форма аватара
Для одного типа объектов используйте одинаковую форму и сохраняйте важную часть изображения при обрезке.
Проверьте портрет у края и горизонтальный логотип: узнаваемая часть не должна обрезаться.
Пример У пользователя круглый аватар, а у организации — квадрат со скруглёнными углами.
Шкала размеров
Определите размеры для списков, комментариев и профилей вместо произвольного масштабирования на разных экранах.
Сравните аватар в плотной строке и в заголовке профиля: маленькая фотография не должна чрезмерно увеличивать высоту строки.
Пример В списке используется 32px, в профиле — 80px, с одинаковым способом обрезки.
Отметка состояния
Размещайте состояние рядом с аватаром и добавляйте его название, чтобы не приходилось угадывать цвет.
Проверьте светлую и тёмную темы, затем уберите цвет: отметка присутствия в сети должна оставаться понятной.
Пример Зелёная точка сопровождается подписью «В сети» в сведениях пользователя.
Отсутствующее изображение
Сохраняйте размеры и идентификацию при ошибке ссылки, отсутствии или загрузке изображения.
Заблокируйте запрос изображения: строка не должна сдвигаться, а пользователя всё ещё можно узнать.
Пример При ошибке фотографии аккаунта Anh Nguyen отображаются инициалы AN.
AN
Запасное изображение