- Статьи
- 6 мин на чтение
- 6062
UI-дизайн аватара
Анатомия аватара: содержание, состояния, сценарии использования. В статье мы рассмотрим цвета и идеи UI-дизайна. А для вдохновения вы найдёте несколько примеров аватаров.
Что такое аватар
Аватар (или юзерпик) — компонент, которые представляет изображение профиля пользователя.
Давайте сделаем аватар с действием, которое ведёт к разделу приложения, где пользователь может менять предпочтения, настройки или редактировать собственные данные.
Анатомия
Состояния
Стандартные состояния аватара:
- пустой
- инициалы
- изображение пользователя
![](https://infogra.ru/wp-content/uploads/2024/01/wWKmEEwScE-K-gMtTks127mRq9MRC6XeZ_uzhU0KRgKe6wB9LfZYCA-hn-Q6-Cc8hVYNqFp9NfR0BV_rppIjZVyM_3Gk-JZ4-_PmNIeoWl9SH2ralFVkPuKw0fJrKKEB4QADzsqyQSo7ec5eCJuloGo-1440x1080.png)
Размер и цвет
Размер и цвет аватара могут меняться в зависимости от сценария использования:
- Размер 24–40 dp в основном применяют для размещения на панелях в приложениях, в хедерах и на других элементах
- 40–48 dp — для аватаров, которые находятся в списках или контентных блоках
- +56 dp — при использовании в Профиле, Настройках и других разделах
- Цвета можно менять для лучшего распознавания
![](https://infogra.ru/wp-content/uploads/2024/01/G0YntcMXryfFKHYueuBDsDZ-U6goCh_hmJdX5BR1rdISspY9BVsO6vnrZOFmxVJECrw_Y0U9prz61Pjf5oIlw5UMuK3EDkjKCAbxmT0_dDSX72ESQHV4ZNva949UMqlESkoGUA2SCAAvgzWSWOXW1Hw-1440x1080.png)
Действия
Аватар может содержать дополнительные элементы, которые указывают, уведомляют или призывают к действию.
Вы можете показать, в сети пользователь или нет. Можно уведомить и предоставить визуальную обратную связь с помощью иконки с номером. Или показать дополнительную иконку, чтобы побудить человека к действию.
![](https://infogra.ru/wp-content/uploads/2024/01/lQwliJW-SH5l2cxjv_byx49QO32dwLKgsu0e66gXdMQcgX2tlhp6fgIQrjKRXghnuRevj5v2Let8deix887_e71psq_gckhk4EPTsPAdot2EKINBey_Maty1wBwKaP0ulXtvT_DwNPlYm8F-TVa5UnI-1440x1080.png)
Статус пользователя
Обычный шаблон отображения статуса пользователя — круглый индикатор в правом нижнем углу.
Используйте зеленый цвет для статуса «в сети», а серый — для статуса «офлайн». Или альтернативный вариант — индикатор с заливкой для статуса «в сети», без заливки — для статуса «офлайн».
![](https://infogra.ru/wp-content/uploads/2024/01/emDNJ_dy-6SYYRFs1KehdL-hnKOVeQESNMqyUFE6nkS9RueydqRczwyLOxNHQSublGzN34fvPb_swxJRM8V35pwrpuq0hXeSqJf5DuQYnAAPJi83KfetLlO5q8ROr5fMhL7-yyCtoo5y4PW2ahbu00Q-1440x1080.png)
Бейджи уведомлений
Бейджи на аватаре можно стилизовать в соответствии с приоритетом, чтобы привлечь внимание пользователя.
- Выбирайте насыщенные и яркие цвета для уведомлений с высоким приоритетом
- А для остальных случаев используйте более мягкий или светлый фон
![](https://infogra.ru/wp-content/uploads/2024/01/E-emMxxEeo0cZxS4LmP0jkD8PaJSC5kftv9MigD6teyxsGufhtnP6baJIiCub5rTqIOrLl9srRHNaZ4HwC_zAEy73Oz0vVZsBjFR5YiKo8mK-eEstdvXM1s2U9OqVWgJG5Tv0YjUKBtPeqvCc88a3uI-1440x1080.png)
Призыв к действию
Используйте вложенные сбоку иконки/круглые кнопки, чтобы уточнить действие, которое произойдёт при клике на аватар.
Замените иконку в соответствии с ожидаемым результатом, который пользователь собирается получить. Применяйте цвета с осторожностью, чтобы усилить значение действия.
![](https://infogra.ru/wp-content/uploads/2024/01/hbA_7JPYsS7YpmIyHttdpnOVRpEbnqgnMHfWfg6t66taUJ77uNRLqy39YiuWKMJChFChx-MHTbc3aZwL9WOA4ru6cndTiJCihO_uunzzmUc6a2KQNeM55UVJ142kiYihQOE3Wx3d-ot38m0L3_MFy5c-1440x1080.png)
Текст и подписи
Аватар с боковым текстом
Чтобы предоставить дополнительные сведения, к аватару можно добавить подходящий заголовок. В основном его используют в списках, на панелях приложений, в таблицах и т.д.
- Более крупная подпись служит для указания имени человека.
- Подзаголовок — необязателен и используется для указания дополнительной информации, например, статуса, последнего посещения, роли, количества подписчиков и других целей
![](https://infogra.ru/wp-content/uploads/2024/01/W2BG1Zm1gCO9vBhmvQb4KTb9a1DKeLdvvxKrvCy_nAJlfVuKH-eTXCXDm44UN6nVGBmn9LKW9Rau-CagECBOVl1YwW6U91V06upWcQ9_94R03CqT9F1jQrRDxHh66rmiezyxAMPZIzUO7kd0eCu_I7A-1440x1080.png)
Аватар с текстом под ним
В шаблонах вы можете поставить более крупный аватар и расположить под ним текст. Как правило, такое решение используют в таких разделах приложения, как Профиль, Настройки, Социальные сети.
![](https://infogra.ru/wp-content/uploads/2024/01/nK_DYel5YJeFAzPTz3XHfHkXz-6x-tAa06bafTcOU1pVfFr99Xs4FJ-yX5ae5q0Wugzo-aRjfDEQuy-AbSnoaq3mhHAO8uneHyHD2XBoFD8YoBgyd4Rvn4j2raoioTSkjZPOlWRQ08zsPgBYfig_Tu8-1440x1080.png)
UX и юзабилити
События
Вы можете дополнительно указать на новые события, которые происходят с пользователем, если добавите аватару слегка размытую обводку. Комбинация с бейджем-счётчиком — мощное решение для вовлечения.
![](https://infogra.ru/wp-content/uploads/2024/01/vfVKMu9B-r9KtUO5ymNZjoZ3OF_257HCyfXVenImX-9xKQlBSQg6OrhBo9sjI69ylUxTjs-kU7cToEKM0p2wfTONR3dBapjPGeYDnNn0LMdGOYkN46UZE4uzDv3T5lKZ8OloSwnO_xbau_piI8I2UAM-1440x1080.png)
Прогресс
Есть дополнительный вариант применения обводки в качестве индикатора прогресса. Это удобный способ визуально отобразить достижения аватара.
![](https://infogra.ru/wp-content/uploads/2024/01/AVLlaEBj2YdrQQP3ZzEG6wGysKrqVA44S9E9dh1mJ-BsaVPPnmPR8x6nX7ZbGAmZIp7JVfXFssqy0slHn7WRgES08_VDRHMwhnAOvw99rbAac9GR33XZrD0Ku7ycih6vorYyzj50ICAbPTAIp_1UZ9I-1440x1080.png)
Выбор
Обводка в сочетании с подтверждающей иконкой даёт пользователю чёткую обратную связь о состоянии его выбора.
![](https://infogra.ru/wp-content/uploads/2024/01/vp_VzBr-LilJ4c_pJZOJ-WoWDoHcGeaSFM8aYmzZPYF0ZmArzdHAAkJvVfxa2m-LPFsvVMhqzw3yuoSpoBRlXc2q-nPh0a3kPm2aFrPpp0Tk0ycZ9LpVsW16zU2cKVQux948yf9Y8N7P6cz3XbksHxU-1440x1080.png)
Классический вариант выбранного состояния «выполнено»:
![](https://infogra.ru/wp-content/uploads/2024/01/z2sOhikYnwXcHhjT0u70ae7juE7AfyreR53fV1izICee7zkTTmA1uZPdlIsXwhQosjMrlAS0kO-ObVCF_ZHfuf_ghCHY29bX9fAhf3aoEDQVZ_gKOrZ5wDxFHzKBdDYjlvijjiiob8SWC9wz4rEV9cE-1440x1080.png)
Группа аватаров
Вложенная кнопка
Когда аватары находятся в группе, в случае необходимости пользователь может нажимать на кнопку призыва к действию.
Например, кнопка «Плюс» перенаправляет на поток, связанный с взаимодействием с группой аватаров — добавлением, сортировкой, редактированием и другими действиями.
![](https://infogra.ru/wp-content/uploads/2024/01/1ndLkrl6nzyWxVZLq5rHzuO1U-xRTH9l5mALsLNyxF5zZZIM_BYQ8RfZ8I21h_dZsBACjZwW3DJ7dTB8MQvGqZ3jeh3MA8sNH9TLTmdXDN8onDho3t7CWf5GyNMOfY5e4_GAgQ2KqiCdL6sjLdin0mU-1440x1080.png)
Вложенная иконка
Используйте иконку с числом, чтобы показать количество пользователей, которые остались под стопкой аватаров.
![](https://infogra.ru/wp-content/uploads/2024/01/g0rpPMpVpoErLWY52-xjVu3SA_92Iv1pOdsWjXe-iaLpSmWfmX9pR8mc5CLp0hWR_NjmRh04PZZlMVZKQCxO-0bVbxhhxPQXdDLTnPXK7bjlhG7kQHEp5J30R-RkbXFAQqYzf6jZo2MEvq0GcU56ifE-1440x1080.png)
Бейдж при наведении
Частый паттерн — раскрытие дополнительных данных о пользователях при наведении на бейдж.
![](https://infogra.ru/wp-content/uploads/2024/01/fKuRfvSnSlCEkjsPdtpkUE6wJc_ZlPTxthMo8elAi4qpqow3KSaOzGMLD5WiFt3FgUVIecgfwDXkj2nazJALJn93mITVdgcvE38sL-4aScY_a8pUKjFIBJAu1s34RktOmveTepgDiZLva43xGVAy8FE-1440x1080.png)
Аватар при наведении
При наведении на любой юзерпик можно отобразить полное имя аватара с помощью подсказки.
![](https://infogra.ru/wp-content/uploads/2024/01/3HaMG-S_lRrKAAyfyvUCYUXm_u4DMVacC7XmIi2F0rRo6dv-1-sUynwwhXId3syjO8iBmMhpz5cJ3AYfePZ65pcDStaeXb8Et8ihJIplDWfh1KiE9D6n9vDuyGwnJHXMBV45Kt57idDKcyuC28f76Ro-1440x1080.png)
Сценарии использования
Наиболее распространённые сценарии использования аватара — расположение на панели приложения или применение более крупной версии в разделе Профиль/Настройки, чтобы пользователь мог редактировать изображение.
![](https://infogra.ru/wp-content/uploads/2024/01/v8mCAxXSuPpGQHYmahsB1iVfC3lo2woot0nnmTQxP8VZ8s2o7WSdUY-LuM0EBsSfHlQjrRTtNCwttMm0f7ZPK26Hvc0n1AnbemCDvwm4nbpitIs1qJEvtL7SSSRYEA1A9hBLSe1fr60Qg4wbGKtzf2A-1440x1080.png)
![](https://infogra.ru/wp-content/uploads/2024/01/oHkHYu5HJqPDGzqWKOgyZTtLrTjmsZ-av9EaPpX9wnij_yVnMKthTYrTZ9Xj8_kU6PtY1kg-dp1o6dy7FlCS-jo0St60tjJ5VrIOfXy3iaaSwQbuRYZUeuQ8cBZZ2O-sDBJmDPcZ7A8XOa7jXW7mVeg-1440x1080.png)
Это всё, что вам нужно знать о создании качественных аватаров.
Перевод статьи от UX Teddy – в их телеграме найдете так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- setproduct.com
/?=num_word(get_comments_number(), array('комментарий', 'комментария', 'комментариев'))?>