{"id":14287,"url":"\/distributions\/14287\/click?bit=1&hash=1d1b6427c21936742162fc18778388fc58ebf8e17517414e1bfb1d3edd9b94c0","title":"\u0412\u044b\u0440\u0430\u0441\u0442\u0438 \u0438\u0437 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0434\u043e \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0437\u0430 \u0433\u043e\u0434","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 комментариев
Раскрывать всегда