Блог ИконПак

Психология цвета в интерфейсах

Как спектральный выбор влияет на поведенческие паттерны пользователей и конверсию.

Алексей Горин, Арт-директор 14 октября 2023

Цветовые ассоциации

Цвет — это не просто украшение. Это когнитивный якорь. Исследования показывают, что до 90% мнений о продукте формируются исключительно на основе цветовой палитры в первые 90 секунд взаимодействия.

В наших проектах мы редко используем цвет ради эстетики. Если мы выбираем терракотовый (как наш акцентный #C85A3C), это делается для создания ощущения тепла и органичности в холодном цифровом пространстве. Глубокий индиго (#4B4C68) вызывает доверие и ассоциируется с интеллектом, что критично для финтех-сектора.

Ошибка в оттенке может стоить проекту. Слишком яркий синий может восприниматься как «дешевый», а неверный серый — как «устаревший».

Пример профессиональной палитры для дизайн-системы

Выбор палитры для бренда

Оттенки, которые продают, и оттенки, которые отпугивают.

Монохром и нейтралы

Использование масштаба серого (Matte Black / Milk White). Идеально для фокусировки внимания на контенте. Мы используем #1C1C1E вместо чистого черного для снижения нагрузки на зрение.

Изучить гайдлайны →

Акцентные цвета

Правило 60-30-10. 10% интерфейса занимают CTA (кнопки действия). Выбор правильного акцента повышает кликабельность на 20-30%.

Смотреть примеры →

Семантическая палитра

Цвета состояний: Success (зеленый), Error (красный), Warning (желтый). Как адаптировать их для слабовидящих и пользователей с дальтонизмом.

Проверить доступность →

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

01

Контраст как навигация

Пользовательское сканирование экрана происходит по Z-паттерну. Высококонтрастные элементы должны находиться на пересечениях этого паттерна. В наших системах мы гарантируем контрастность текста минимум 4.5:1 (стандарт WCAG AA).

02

Темная тема: не просто инверсия

Многие ошибочно считают, что темная тема — это белый текст на черном фоне. Это вызывает эффект «вибрации» и утомляет глаза. Правильный подход — использование темных серых поверхностей (например, #1C1C1E) и приглушенного белого текста (#F4F4F2).

90% Судейство по цвету
+20% Конверсия CTA
4.5:1 Контраст WCAG
0.1s Время реакции

Нужна профессиональная палитра?

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

Заказать дизайн-систему