Роман Камушкин рассмотрел примеры использования аватарок (userpic) в интерфейсах. Полезно, если планируете сделать хороший компонент или дизайните взаимодействие с группами и отдельными пользователями.
— Состояния: пустое, инициалы, фото;
— Размеры: 24−40dp для шапки сайта, 40−48dp для списков; 56+dp для пользовательского профиля и настроек;
— Дополнительные элементы: индикатор статуса (например, что человек онлайн), бейдж с числом (количество сообщений от человека), кнопка действия с этим пользователем;
— Рядом с аватаром может быть текст: имя пользователя, расшифровка статуса, дополнительные детали (например, когда был онлайн, должность);
— В профиле текст часто размещают под аватаркой;
— Об отдельных событиях (пользователь опубликовал новую историю) можно сообщить с помощью рамки вокруг аватара;
— Пользовательский прогресс можно показать частично закрашенной рамкой;
— То, что пользователь выбран из списка, можно показать рамкой и бейджем с галочкой или большой галочкой поверх аватара;
— Плюс рядом с группой аватаров символизирует возможность добавить ещё людей;
— А число (например, +5) — что по нажатию можно увидеть ещё 5 пользователей из этой группы;
— При наведении курсора на аватар в группе можно показать тултип с именем пользователя.
Перевод плохой, так что ссылки две:
— Перевод: https://ux.pub/vse-chto-nuzhno-znat-o-dizayne-avatarok/
— Оригинал [English]: https://blog.prototypr.io/a22af3daa1f2
Post #844
5.12K
- 👍 1