[ad_1]
Успех любой визуальной коммуникации зависит от цвета. Исследования влияния цвета на маркетинг говорят нам, что среднему человеку требуется всего 90 секунд, чтобы принять подсознательное решение о продукте, и что 62-90% (откроется в новой вкладке) из этих решений основаны только на цвете.
Следовательно, оттачивая свои знания теории цвета (откроется в новой вкладке) и психология могут иметь большое значение для увеличения конверсии и во многих случаях могут улучшить удобство использования ваших интерфейсов (чтобы создавать удобные сайты по своей сути, не усложняйте задачу с помощью конструктора веб-сайтов).
Вот некоторые факторы, которые необходимо учитывать при выборе цвета в дизайне. Чувствуете вдохновение? Создайте доску настроения и храните ее в безопасном месте в облачном хранилище.
Поймите, что цвет означает для вашей аудитории
(откроется в новой вкладке)
Когда дело доходит до цвета, вы обязательно столкнетесь с противоречиями. Было предпринято несколько попыток отобразить человеческие чувства и эмоции по отношению к цвету. В целом, разные цвета отображают следующее:
Красный
- Положительные коннотации: Энергия, страсть, сила, теплота, волнение
- Отрицательные коннотации: Гнев, агрессия, страх, бунт, зло
- Привыкший: Создавать срочность, стимулировать аппетит, сигнализировать об остановке
Желтый
- Положительные коннотации: Счастья, оптимизма, тепла, игривости, веселья
- Отрицательные коннотации: Критический, трусливый, нетерпеливый, пессимистичный, импульсивный
- Привыкший: Поднимите настроение, продемонстрируйте игривость, проявите тепло
Зеленый
- Положительные коннотации: Рост, жизненная сила, естественный, земной, сбалансированный
- Отрицательные коннотации: Жадный, материалистичный, завистливый, коварный, безразличный
- Привыкший: Продемонстрируйте рост, продемонстрируйте эко-сертификаты, подайте сигнал
Синий
- Положительные коннотации: Доверие, стабильность, спокойствие, принципиальность, лояльность
- Отрицательные коннотации: Грусть, холодность, предсказуемость, консерватизм, жесткость
- Привыкший: Способствовать спокойствию, завоевывать доверие, проявлять чистоплотность
Черный
- Положительные коннотации: Власть, контроль, сила, изысканность, соблазнительность
- Отрицательные коннотации: Скрытный, негативный, темный, депрессивный, отчужденный
- Привыкший: Создайте тайну, заявите о себе, продемонстрируйте изысканность
Хотя это отличные ориентиры, исследования говорят нам (откроется в новой вкладке) что наше восприятие цвета сильно зависит от нашего личного происхождения, культуры, опыта и предпочтений.
В Китае, например, желтый цвет стал синонимом порнографических публикаций. (откроется в новой вкладке)так что в то время как домашняя страница Mailchimp Cavendish Yellow (вверху) красиво означает счастье, оптимизм и теплоту для некоторых, эти нахальные обезьяны могут быть истолкованы немного неожиданно в самой густонаселенной стране мира.
Как только вы узнаете, для кого вы разрабатываете дизайн, примите во внимание влияние вашего использования цвета, чтобы убедиться, что вы не отправляете пользователям неправильное сообщение, предполагая, что все будут реагировать одинаково.
Правило 60-30-10
Эта трехцветная формула, традиционно используемая для дизайна интерьера, придаст сбалансированность и согласованность вашим интерфейсам. Если вы позволите своему основному цвету 60%, вашему вторичному цвету 30% и вашему акцентному цвету 10%, пользователи смогут удобно перемещаться между фокусами вашего интерфейса, не перегружаясь чрезмерной палитрой.
Заставьте цвет работать на вас
(откроется в новой вкладке)
Понимание того, что некоторые части вашей аудитории будут реагировать на выбранные вами цвета иначе, чем другие, должно служить напоминанием о том, что цвет может работать как на вас, так и против вас. Красный и зеленый в контексте физической системы светофора означают две совершенно разные вещи; Остановись и иди. Однако эта логика не всегда применима к цифровому миру дизайна интерфейсов.
В эксперименте под названием A/B-тестирование цвета кнопки: красный лучше зеленого. (откроется в новой вкладке), Джошуа Портер сравнил зеленую и красную кнопки на целевой странице, чтобы увидеть, какая из них привела больше людей к подписке на его платформу Performable. Учитывая упомянутые коннотации для каждого цвета, можно было бы предположить, что зеленый будет более эффективным, но на красную кнопку нажимало на 21% больше людей. Мы можем предположить, что это было связано с тем, что красный цвет привлекал внимание, или, возможно, потому, что красный цвет больше контрастировал с ранее существовавшими зелеными бликами в интерфейсе.
Как бы вы ни смотрели на это, мы должны иметь в виду, что, хотя цвета означают значение, всегда стоит протестировать их с пользователями в контексте макета вашей страницы. Это гарантирует, что цвет работает в вашу пользу, а не в ущерб коэффициенту конверсии. И что бы вы ни выбрали с цветом, убедитесь, что ваш веб-хостинг работает на вас.
Подчеркните свое сообщение цветом
Чтобы не подрывать послание вашего бренда, выбирайте цвета для своего интерфейса, которые усиливают его ценности или предложение. Легко попасть в ловушку, выбирая привлекательные цвета и модные градиенты, но функциональный выбор может быть лучше в долгосрочной перспективе.
Хотя у Монзо (откроется в новой вкладке) физические банковские карты — привлекательный и очень практичный коралловый цвет, цветовая схема веб-сайта рассказывает историю стабильности и надежности, используя темно-синий фон в сочетании со светло-голубыми бликами, достаточно яркими, чтобы привлечь ваше внимание, но достаточно приглушенными, чтобы поддерживать воздух целостности.
Играя со значениями CSS домашней страницы, мы можем сделать коралловый цвет основным цветом фона, создав молодежную и энергичную домашнюю страницу. Это, несомненно, привлекает внимание, но будут ли потенциальные клиенты с большей вероятностью доверять финансовой организации, основанной на этих качествах? Вы должны были бы проверить это с пользователями, чтобы быть уверенными, но психология цвета предлагает большое нет.
Цвет и доступность
Примерно один из 12 мужчин и одна из 200 женщин. (откроется в новой вкладке) страдают цветовой слепотой. Это, в сочетании с тем фактом, что программы чтения с экрана не передают цвет слабовидящим пользователям, означает, что мы должны помнить, что цвет сам по себе не всегда является подходящим средством передачи смысла в наших интерфейсах.
Если, например, вам нужно сообщить об ошибке на вашей странице, одного красного цвета может быть недостаточно. Следует использовать хороший копирайтинг в сочетании с пространственной и типографской иерархией, чтобы люди с цветовой слепотой и те, кто использует программы чтения с экрана, могли лучше понять любые ошибки, которые вы пытаетесь отобразить. При разработке следующего интерфейса попробуйте просмотреть файл в оттенках серого, чтобы проверить, имеют ли смысл ваши сообщения об ошибках, призывы к действию и уведомления, не полагаясь на цвет.
(откроется в новой вкладке)
Эта статья была первоначально опубликована в выпуске 284 Веб-дизайнер (откроется в новой вкладке). Купить выпуск 284 (откроется в новой вкладке)или подписаться здесь (откроется в новой вкладке).
Читать далее:
- 50 потрясающих новых инструментов для разработчиков (откроется в новой вкладке)
- Создавайте идеальные потоки пользователей (откроется в новой вкладке)
- 12 цветов и эмоции, которые они вызывают (откроется в новой вкладке)
[ad_2]
