{"id":14291,"url":"\/distributions\/14291\/click?bit=1&hash=257d5375fbb462be671b713a7a4184bd5d4f9c6ce46e0d204104db0e88eadadd","hash":"257d5375fbb462be671b713a7a4184bd5d4f9c6ce46e0d204104db0e88eadadd","title":"\u0420\u0435\u043a\u043b\u0430\u043c\u0430 \u043d\u0430 Ozon \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u0442\u0430\u043c \u043d\u0435 \u043f\u0440\u043e\u0434\u0430\u0451\u0442","buttonText":"","imageUuid":""}

Генерация цвета для аватара

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

Речь пойдет о генерации цвета фона аватара в тех случаях когда не загружено фото.

Во-первых нужно определиться как будет назначаться цвет пользователю. Я решил привязать цвет к его имени и фамилии. После этого Сергей Пескоструев всегда будет иметь Оранжевый цвет, а Антон Криворогов — другой.

⛔ Но тут возникает проблема: т.к. цвета случайные - они зачастую вырвиглазные
✅ Так получше

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

Это легко сделать если перевести цвета в цветовое пространство HSL. Это цветовое пространство имеет 3 значения:

Оттенок (0° — 360°)

  • Оттенок определяет цвет сам по себе и измеряется в градусах вокруг цветового круга. Например, 0° соответствует красному, 120° — зеленому, 240° — синему, и так далее.

Насыщенность (0% — 100%):

  • Насыщенность определяет чистоту цвета. На 100% цвет максимально насыщенный и яркий, а на 0% цвет полностью выгорел и становится оттенком серого.

Светлота (0% — 100%):

  • Светлота представляет собой яркость цвета. 0% соответствует черному цвету, 100% — белому цвету, а значения между ними определяют, насколько светлым или темным является цвет.

Например:

HSL для темной темы: (X, 30, 30)
HSL для светлой темы: (X, 80, 80)

Для каждой темы можно задать статичную насыщенность и светлоту и на основе имени и фамилии генерировать только оттенок

// Преобразование строки в хеш const hue = computed(() => { const hash = md5(props.name || props.label).toString() return parseInt(hash, 16) % 361 })
&.v-theme--light { background: hsl(var(--avatar-hue) 80% 80%); } &.v-theme--dark { background: hsl(var(--avatar-hue) 30% 30%); }

Надеюсь было интересно. Если это так - залетайте на мой телеграм-канальчик про UI/UX/AI

0
13 комментариев
Написать комментарий...
Cindy Moore

поставить фото на аватар и тогда генерировать ничего не нужно

Ответить
Развернуть ветку
Freddy Monk

А какому целевому действию мешают перенасыщщеные аватары в первом варианте? Второй вариант уж совсем сперморазбавленный, лучше поменьше люминосити на 20-30%

Ответить
Развернуть ветку
Виталий Разраз
Автор

Ну например на их фоне нотификейшены не так бросаются в глаза. В высоконагруженных системах аватар - не самая важная вещь на которую нужно смотреть. Зачастую есть более важные вещи.

Ответить
Развернуть ветку
Freddy Monk

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

Ответить
Развернуть ветку
Виталий Разраз
Автор

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

Ответить
Развернуть ветку
Виталий Разраз
Автор

По поводу разбавленности - дело вкуса, дизайн системы и уместности

Ответить
Развернуть ветку
Freddy Monk

ну такое, оч неконтрастные элементы аватара, провал по тесту контрастности между цветом фона аватарки и текста полюбас будет

можешь привести примеры реальных аппок, где такие разбавленные светлотой АВАТАРЫ на БЕЛОМ фоне?

Ответить
Развернуть ветку
Freddy Monk

-15 уже гораздо лучше, зелёный правда калище, лучше тон другой выбрать, не салатовый

Ответить
Развернуть ветку
Freddy Monk

вот варик ещё с твоим цветом, но буквы оттенок фона, например

Ответить
Развернуть ветку
Милая Мила

А как же те цвета, которые нравятся именно тебе?

Ответить
Развернуть ветку
Виталий Разраз
Автор

Всегда можно задать большой список цветов каждому из которых будет присвоен ID. и потом назначать один из этих цветов. Но это другой подход и он на мой взгляд менее гибкий. В статье же я рассказал про свой кейс. Надеюсь кому-то будет полезно

Ответить
Развернуть ветку
DOPPEL BOX

Если честно, никогда не любил какие-либо заморочки с именным аватарами. Куда проще и правильней - дать возможность самому пользователю загружать аватар на свой вкус. Благо, мало кто не дает это сделать. Из "неправильных", пока, могу вспомнить лишь Epic Games Store с полной невозможностью в нынешний момент загружать собственный аватар, что сильно удручает.

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

Ответить
Развернуть ветку
Виталий Разраз
Автор

Так никто не говорит об ограничении в загрузке своего аватара. В статье об этом нет ни слова. Но по-умолчанию мы не можем заставлять пользователя грузить аватар. Это неправильно. Изначально у него имя-фамилия, но есть возможность загрузить аватар.

Ответить
Развернуть ветку
10 комментариев
Раскрывать всегда