Генерация цвета для аватара
Я опущу детали о том что аватары могут быть разных типов, размеров, с различными индикаторами. Все это можно почитать тут или тут.
Речь пойдет о генерации цвета фона аватара в тех случаях когда не загружено фото.
Во-первых нужно определиться как будет назначаться цвет пользователю. Я решил привязать цвет к его имени и фамилии. После этого Сергей Пескоструев всегда будет иметь Оранжевый цвет, а Антон Криворогов — другой.
На первом изображении видим, что некоторые цвета аватаров забирают слишком много внимания на себя, отвлекая от целевых действий. Хочется у всех аватаров приглушить/выровнять цвета как снизу, чтобы они были менее навязчивыми.
Это легко сделать если перевести цвета в цветовое пространство HSL. Это цветовое пространство имеет 3 значения:
Оттенок (0° — 360°)
- Оттенок определяет цвет сам по себе и измеряется в градусах вокруг цветового круга. Например, 0° соответствует красному, 120° — зеленому, 240° — синему, и так далее.
Насыщенность (0% — 100%):
- Насыщенность определяет чистоту цвета. На 100% цвет максимально насыщенный и яркий, а на 0% цвет полностью выгорел и становится оттенком серого.
Светлота (0% — 100%):
- Светлота представляет собой яркость цвета. 0% соответствует черному цвету, 100% — белому цвету, а значения между ними определяют, насколько светлым или темным является цвет.
Например:
Для каждой темы можно задать статичную насыщенность и светлоту и на основе имени и фамилии генерировать только оттенок
Надеюсь было интересно. Если это так - залетайте на мой телеграм-канальчик про UI/UX/AI
поставить фото на аватар и тогда генерировать ничего не нужно
А какому целевому действию мешают перенасыщщеные аватары в первом варианте? Второй вариант уж совсем сперморазбавленный, лучше поменьше люминосити на 20-30%
Ну например на их фоне нотификейшены не так бросаются в глаза. В высоконагруженных системах аватар - не самая важная вещь на которую нужно смотреть. Зачастую есть более важные вещи.
то что ты перечислил, это не целевые действия, это данные) целевое действие – это конкретное действие решающее задачу юзера, в интерфейсе списка чатов целевой действие – открыть чат, поэтому, ты свой аргумент натянул на свой вкус и желание просто цвета выбрать другие
Целевое действие нотификейшена - привлечь внимание к чату. Когда аватары пестрые внимание смещается на них. Я сделал это исходя из желания меньше привлекать внимание к аватарам
По поводу разбавленности - дело вкуса, дизайн системы и уместности
ну такое, оч неконтрастные элементы аватара, провал по тесту контрастности между цветом фона аватарки и текста полюбас будет
можешь привести примеры реальных аппок, где такие разбавленные светлотой АВАТАРЫ на БЕЛОМ фоне?
-15 уже гораздо лучше, зелёный правда калище, лучше тон другой выбрать, не салатовый
вот варик ещё с твоим цветом, но буквы оттенок фона, например
А как же те цвета, которые нравятся именно тебе?
Всегда можно задать большой список цветов каждому из которых будет присвоен ID. и потом назначать один из этих цветов. Но это другой подход и он на мой взгляд менее гибкий. В статье же я рассказал про свой кейс. Надеюсь кому-то будет полезно
Если честно, никогда не любил какие-либо заморочки с именным аватарами. Куда проще и правильней - дать возможность самому пользователю загружать аватар на свой вкус. Благо, мало кто не дает это сделать. Из "неправильных", пока, могу вспомнить лишь Epic Games Store с полной невозможностью в нынешний момент загружать собственный аватар, что сильно удручает.
Аватар, я считаю, это очень сильная эмоциональная привязка пользователя к своему профилю, буквальный минимум комфортности и ассоциации своего профиля с "домом" внутри той или иной соц.сети, магазина и т.д.
Даже если это сугубо корпоративная платформа, в ней почти обязательно должна быть возможность догружать аватар.
Так никто не говорит об ограничении в загрузке своего аватара. В статье об этом нет ни слова. Но по-умолчанию мы не можем заставлять пользователя грузить аватар. Это неправильно. Изначально у него имя-фамилия, но есть возможность загрузить аватар.