Все что нужно знать о дизайне аватарок

Создания аватара: различные события, состояния, действия, выбор цвета. А также множество вдохновляющих примеров.

Я UI-дизайнер, переквалифицировавшийся в онлайн-предпринимателя. В 2018 году я начал создавать UI kits для Figma, запустив сайт Setproduct. Его миссия – помочь дизайнерам, разработчикам и компаниям сэкономить на дизайне деньги и время, выпуская свои продукты намного быстрее.

Я занимаюсь графическим дизайном более 20 лет. В последние годы почти каждый день своей жизни я посвящал просмотру десятков тысяч отдельных компонентов, экранов, различных сайтов и приложений, изучению их структуры, макетов и цветовых решений. Моя цель – создать исчерпывающее руководство по проектированию интерфейсов приложений и их компонентов, шаблонов и т. д.

Данное руководство еще находится в стадии разработки. К сожалению, не всегда возможно изложить на бумаге все знания. Надеюсь, вы, ребята, внесете свой вклад в выпуск этого руководства. Поэтому делитесь своими мыслями. Я всегда открыт для диалога.

В этой статье вы узнаете состояния, стили, размеры, использование и шаблоны аватаров.

👇 Поехали!

Figma UI kits, дизайн-системы и шаблоны приложений

Исследование UI-дизайна аватара

Аватар (также известный как Userpic) – это компонент, с помощью которого пользователь идентифицирует себя.

Что может входить в состав аватара

Следующие типы контента можно использовать для создания Аватара:

  • Пустое состояние
  • Инициалы
  • Фото или изображение пользователя.
Все что нужно знать о дизайне аватарок

Цвет и размер

В зависимости от ситуации можно использовать самые разные варианты цветов и размеров:

  • Для лучшего узнавания цветовую палитру можно разнообразить;
  • Заголовки, панели приложений и т. д. являются основными целями для аватаров с шириной 24–40 dp;
  • Аватары 40–48dpобычно используются в блоках или списках контента;
  • Если вы хотите использовать аватары в таких шаблонах, как Профиль, Настройки и т. д., вам следует использовать 56+ dp.
Все что нужно знать о дизайне аватарок

События и информирование

Когда мы хотим сообщить о чем-то или продемонстрировать призыв к действию с помощью аватара, мы можем использовать для этого дополнительные компоненты:

  • Индикаторы, которые показывают, находится ли пользователь в сети или офлайн.
  • Информация посредством уведомлений и визуального фидбека с числовой меткой
  • Дополнительный значок может быть показан пользователю для выполнения действия.
Все что нужно знать о дизайне аватарок

Статус пользователя

Наиболее распространенная практика отображения статуса пользователя – это размещение цветного индикатора в правом нижнем углу аватара.

  • Зеленый цвет указывает на онлайн-статус, серый – офлайн.
  • Закрашенная фигура используется для онлайн-статуса, пустая – для офлайн (альтернативный вариант)
Все что нужно знать о дизайне аватарок

Метки уведомлений

В зависимости от ваших приоритетов и для того, чтобы привлечь внимание пользователя, метки аватара могут быть изменены.

  • Для обозначения высокого приоритета могут использоваться яркие цвета.
  • Для других ситуаций используйте гладкий или светлый фон.
Все что нужно знать о дизайне аватарок

Действие

При нажатии на «Аватар» обычно используются такие компоненты, как закругленные кнопки или вложенные сбоку иконки, чтобы показать, что предстоящее действие будет выполнено.

  • Измените значок на результат, соответствующий ожиданиям пользователя
  • Использование цветов должно быть разумным и подчеркивать значение события или действия.
Все что нужно знать о дизайне аватарок

Material X UI kit – дизайн-система, компоненты, шаблоны приложений для Figma

Текстовые аватары

Текст сбоку

Когда необходимо добавить дополнительную информацию, можно использовать второстепенные заголовки вместе с аватаром. Эта функция довольно часто используется в панелях приложений, списках, таблицах и т. д.

  • Более крупные заголовки используются для обозначения имени персонажа.
  • Субтитры для дополнительных сведений не являются обязательными (например: статус, род занятий, последний визит, количество подписчиков и т. д.)
Все что нужно знать о дизайне аватарок

Текст снизу

Можно использовать аватар большего размера с текстом, размещенным внизу. Это распространённый паттерн для таких разделов приложения, как Социальные сети, Профиль, Настройки и т. д.

Все что нужно знать о дизайне аватарок

Пользовательский опыт паттернов аватаров

События

Для дальнейшего обозначения событий новых пользователей вокруг Аватара может быть добавлена рамка. Вы также можете добавить счетчик с бейджем, который окажет сильное влияние на дизайн.

Все что нужно знать о дизайне аватарок

Прогресс

Постепенно заполняемая обводка, служащая индикатором достижений, остается довольно популярным и удобным приемом.

Все что нужно знать о дизайне аватарок

Выделение

При выбранном состоянии одним из самых надежных методов подтверждения для пользователя является сочетание значка подтверждения и обводка.

Все что нужно знать о дизайне аватарок

Вот так выглядит типичный вариант состояния выделения:

Все что нужно знать о дизайне аватарок

Xela UI kit – дашборд для дизайн-системы Figma  

Группа аватаров

С кнопкой

В момент, когда аватары сгруппированы, кнопка призыва к действию может сообщить пользователю об определенном действии.

Например, кнопка «Плюс» приводит к ряду опций, связанных с взаимодействием (добавление, редактирование, сортировка и т. д.), которые могут быть выполнены для сгруппированных аватаров.

Все что нужно знать о дизайне аватарок

С бейджем

Числовой бейдж – отличное решение для обозначения количества пользователей, оставшихся в очереди.

Все что нужно знать о дизайне аватарок

Бейдж с состоянием наведения курсора

Наведение курсора – один из наиболее распространенных паттернов бейджа. Он представляет раскрытие дополнительной информации о пользователях.

Все что нужно знать о дизайне аватарок

Аватар с состоянием наведения курсора

Наведение курсора на аватар в сложенной в стек группе, отличный способ показать полное имя пользователя с помощью компонента «Всплывающая подсказка».

Все что нужно знать о дизайне аватарок

Система дизайна Eclipse – декстопный и мобильный UI kit для Figma

Шаблоны

Самый популярный вариант использования аватаров в приложениях или на веб-сайтах – это встраивание небольшого изображения пользователя в заголовок или более крупных размеров в разделах «Профиль» / «Настройки». Таким образом, пользователь может редактировать изображение.

Все что нужно знать о дизайне аватарок
Все что нужно знать о дизайне аватарок

Вот и все. Надеюсь теперь вы знаете как проектировать аватары.

Если вы ищете карточки аватаров из этой статьи, можете смело ⚡ использовать их.

Надеюсь, что мое исследование было полезным, и UX ваших приложений будет улучшен. В следующей статье мы поговорим об аккордеонах. Следите за обновлениями!

Страницы автора  👉 DribbbleLinkedInRedditYouTubeTwitter.

0 Комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи

Лучшие статьи, раз в неделю, с доставкой на почту

Total
7
Share