Психология цвета в дизайне

Каждый цвет является решением. Красный на кнопке это не украшение, это ставка на конверсию. Синий в приложении здравоохранения это не эстетическое предпочтение, это сигнал доверия. Бренды, которые это понимают, отправляют палитры, которые работают. Те, которые не понимают, отправляют палитры, которые выглядят хорошо и ничего не конвертируют.

Вот как выглядит психология цвета когда она встречается с реальными решениями дизайна.

Цвета не декоративны

Цвет это первое, что обрабатывает мозг, когда встречает визуал. Прежде чем глаз прочитает заголовок или узнает логотип, он уже ответил на цвет. Этот ответ эмоциональный, мгновенный и в основном бессознательный.

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

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

Что на самом деле общает каждый цвет

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

Красный привлекает внимание быстрее любого другого цвета. Coca-Cola, YouTube и Netflix используют его, потому что красный вызывает срочность и аппетит. В пользовательском интерфейсе красный это ваш цвет "действуй сейчас": значки продаж, состояния ошибок, основной призыв к действию на нейтральных страницах. Используйте его экономно или он перестанет означать что-либо.

Синий это любимый цвет интернета по причине. Он сигнализирует доверие, стабильность и компетентность. PayPal, LinkedIn и Calm полагаются на синий чтобы сказать "ты в безопасности здесь". Риск это тривиальность. Если каждый конкурент в вашем пространстве использует синий, ваша синяя идентичность исчезает в толпе.

Зеленый имеет двойное назначение. В брендах здоровья и эко (Whole Foods, Beyond Meat) он читается как естественный и здоровый. В финтехе (Robinhood, Mint) он читается как деньги и рост. Spotify нарушил традицию используя зеленый для музыки, доказав что сильный брендинг может переопределить стандартные ассоциации.

Желтый это чистый оптимизм и теплота, но это самый сложный цвет для использования. Слишком много желтого давит. Слишком мало исчезает. Snapchat, IKEA и National Geographic используют его как доминирующий сигнал, не как фоновое заполнение. Он работает лучше всего в малых дозах с высокой контрастностью.

Фиолетовый сигнализирует о премиум и нетрадиционности. Figma, Twitch и Cadbury используют его чтобы выделиться из большинства синего и зеленого. В финтехе фиолетовый говорит "мы не банк вашего отца". Он читается как творческий без того чтобы быть детским.

Оранжевый это дружелюбный середина между срочностью красного и теплотой желтого. Headspace, HubSpot и Fanta используют его чтобы казаться энергичным но доступным. Это один из самых сильных цветов призыва к действию потому что выделяется на светлом и темном фоне без красного будильника.

Черный коммуницирует авторитет и роскошь. Apple, Chanel и The New York Times используют его чтобы сказать "нам не нужен цвет чтобы быть интересным". В редакционном дизайне черный это уверенность. В моде это премиум. В технологии это изощренность без усилий.

Контекст побеждает теорию

Spotify зеленый. Whole Foods тоже. Один продает потоковую музыку. Другой продает органические продукты. Тот же цвет, совершенно разные ассоциации. Зеленый не выполняет одну и ту же работу в обоих контекстах.

Здесь большинство совета о психологии цвета разваливается. Это рассматривает цвета как неподвижные смыслы когда они фактически гибкие сигналы которые меняются на основе трех факторов.

Насыщенность и значение. Приглушенный пыльный розовый коммуницирует что-то совершенно отличное от неонового горячего розового. Тот же оттенок, другая планета. Ненасыщенные цвета читаются как изощренные и спокойные. Насыщенные цвета читаются как смелые и энергичные.

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

Культурный контекст. Белый означает чистоту в западном дизайне. Это означает траур в частях Восточной Азии. Любая структура которая игнорирует географию неполна.

Три правила для палитр которые конвертируют

Если вы не возьмете ничего больше из этой статьи, возьмите эти три.

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

Правило 2: Последовательность строит узнаваемость. Выбирайте меньше цветов и используйте их одинаково везде. Stripe последовательно использует фиолетовый. Mailchimp последовательно использует желтый. Цветовая палитра сама по себе важна меньше чем последовательность ее применения по каждой точке взаимодействия с брендом.

Правило 3: Доступность не опциональна. 8% мужчин и 0,5% женщин имеют некоторую форму цветовой слепоты. Если ваш дизайн полагается только на цвет для коммуникации смысла, вы исключаете миллионы пользователей. Всегда сочетайте цвет с текстом, значками или узорами.

Как тестировать вашу палитру

Четыре теста. Пять минут. Не отправляйте без прохождения всех четырех.

1. Тест прищура. Прищурьтесь на ваш дизайн пока все не размоется. Можете ли вы сказать где основное действие? Если призыв к действию исчезает, ваша контрастность не работает.
2. Тест в оттенках серого. Конвертируйте ваш дизайн в оттенки серого. Иерархия по-прежнему держится? Если все становится серым, ваша визуальная идентичность зависит слишком много от оттенка и недостаточно от значения.
3. Контекстный тест. Покажите вашу палитру пяти людям без контекста дизайна. Спросите их к какому типу компании она принадлежит. Если их ответы сильно отличаются от вашего намерения, палитра не коммуницирует.
4. Аудит доступности. Запустите ваши цветовые комбинации через проверку контраста WCAG. Текст корпуса нуждается в минимальном соотношении 4.5:1. Крупный текст нуждается в 3:1.

Часто задаваемые вопросы

Влияет ли психология цвета на конверсии?

Да, но не так как утверждают большинство статей. Изменение кнопки с зеленого на красный не увеличит конверсии на 21%. Что важно это контрастность и контекст. Кнопка которая выделяется конвертирует лучше независимо от ее конкретного цвета.

Какой самый лучший цвет для кнопки призыва к действию?

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

Сколько цветов должна содержать палитра бренда?

Три до пяти. Один основной, один вторичный, один акцентный и один или два нейтральных. Больше создает шум. Меньше ограничивает гибкость. Ограничение это особенность.