Глазья

Графический элемент-персонаж, который мы используем для управления вниманием

Форма глазьев сформировалась из линий логотипа Авиасейлс.

Глазья работают как подсказка, направляют взгляд, показывают эмоции. Ставим их рядом с элементами, на которые хотим обратить внимание человека.

Физика

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

Глаза и блики располагаем так, чтобы персонаж отводил взгляд или смотрел в нужную сторону.

Чтобы направить взгляд вперёд, располагаем зрачки ближе к центру. Если хотим, чтобы глазья смотрели прямо на человека, ставим блики с разных сторон.

А ещё блики в зрачках с разных сторон помогают показать головокружение.

Эмоции

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

Глазья в коммуникациях

Как используем

Ставим отдельно как стикер или встраиваем в фон как часть иллюстрации.

Это акцентный элемент, поэтому добавляем не больше одних глазьев на креатив, экран или страницу. Иначе вторые начинают спорить с первыми: взгляд разрывается, указатель перестаёт работать.

Можно
Нельзя

На объекте

Глазья можно поставить прямо на объект: предмет на фотографии, плашку, иконку. Объект оживёт, станет персонажем и будет смотреть туда, куда мы ведём человека. Правила те же: одни глазья на макет, а цвет и обводку выбираем по тому, что под ними.

Со спичбаблом

Если персонаж что-то говорит, добавляем к глазьям спичбабл — тот же, что в заголовках. Пипка смотрит на глазья, а реплика короткая.

Цвет

На цветном или чёрном однородном фоне внутренняя часть глазьев подстраивается под его цвет.

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

Если на фоне фотография, подстроиться может быть сложно — получится рябь. Тогда либо ищем подходящий однородный контрастный участок, либо создаём его искусственно…

Можно
Можно
Нельзя

…либо используем глазья с обводкой как стикер.

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

Можно
Нельзя
Можно
Нельзя

Размер

Масштабируем глазья только целиком: все части вместе, включая обводку, чтобы сохранялись пропорции. Для этого в Фигме есть инструмент Scale, клавиша K.

Ограничений по размерам нет, но персонаж должен оставаться частью общей композиции, не слишком большим и не слишком маленьким.

Можно
Нельзя

Ассеты для графики

В ассетах Фигмы есть варианты глазьев для работы: 9 базовых с разными направлениями взгляда и 7 с эмоциями. Каждый — в двух видах: стикер и вариант для фона.

Глазья в Фигме

9 направлений взгляда и 7 эмоций — стикером и под фон

Открыть

В интерфейсе

Используем глазья внутри иллюстраций, как иконки или стикер.

У стикеров в светлой теме обводка белая, #FFFFFF

У стикеров в тёмной теме обводка graphite/500