«Оранжевое небо, оранжевое море»: каким цветом раскрасить b2b‑продукт

Цвета b2b‑продукта и их количество — это не только визуал и видение дизайнеров, но и часть стратегии компании. По идее, каждый оттенок в системе должен иметь своё предназначение, это усиливает работу фронтенд‑разработчиков. Но, к сожалению, не в каждом продукте этого правила придерживаются. В этой статье я расскажу, чем грозит изобилие цветов, и какая философия скрывается за визуалом BusinessPad.

Цвета BP и их предназначение

Интерфейс BusinessPad раскрашен в синий и оранжевый. Разработчики приняли стратегическое решение остановиться именно на двух цветах, чтобы не перегружать систему.

Представьте, что вы пилот и управляете самолётом с помощью приборной панели, каждая кнопка и лампочка на которой выкрашена в свой цвет: жёлтый, розовый, зелёный, бирюзовый, синий и т.д. В таком разнообразии очень трудно держать в фокусе важное и быстро принимать решения. И, скорее всего, уже через 5–10 минут работы с такой гирляндой у вас голова пойдёт кругом, и вы предпочтёте электронному документообороту бумажную работу. Кстати, лозунг BusinessPad — «Всё по папочкам», и команда старается придерживаться его во всём, в том числе и в цветах.

Почему выбрали именно их? Основным сделали синий — спокойный, уверенный и надёжный. Он ассоциируется с воздухом, небом, водой и символизирует свободу, мир и дзен. А вот акцентный оранжевый — его полная противоположность. Этот яркий, дерзкий и энергичный цвет даёт пользователю сигнал действовать.

Таким образом, синим и его оттенками в BusinessPad выполнены основные и постоянные элементы. Это делает интерфейс более упорядоченным и спокойным. А вот кнопки действия — оранжевые, за счёт чего пользователь интуитивно понимает, как работать в системе. Оранжевый балансирует между жизнерадостным жёлтым и опасным красным.

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

Психология цветов

Значение и эмоциональное восприятие цвета зависят от культурного контекста и в разных странах могут кардинально отличаться.Популярный пример: в России одежду белого цвета надевают на свадьбу, а в Китае — на похороны. Конечно, такие культурные различия необходимо учитывать при выборе цветов для IT‑решения, особенно ориентированного на международные рынки.

Обратимся к научным источникам и рассмотрим психологию синего и оранжевого более детально. Исследования показывают, что синий цвет:

• снижает тревожность, кровяное давление и частоту сердечных сокращений;
• воспринимается как цвет стабильности, честности и преданности (поэтому часто применяется в корпоративном брендинге);
• стимулирует ясность ума, улучшает концентрацию и когнитивные способности (поэтому синий рекомендован для рабочих и учебных пространств);
• создает атмосферу, благоприятную для решения задач и инновационного мышления.

У истоков психологии цвета стояли Иоганн Вольфганг фон Гёте и Василий Кандинский. Первый относил синий к группе «отрицательных» цветов, вызывающих грусть и покой, а второй отмечал его способность «влечь к бесконечности» и создавать ощущение холодного погружения. Позднее эти идеи легли в основу цветотерапии.

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

• устойчиво ассоциируется с положительными эмоциями высокой активности — радостью, весельем и энтузиазмом;
• заряжает энергией и помогает разрешать трудные задачи;
• стимулирует креативное мышление и создаёт среду, благоприятную для появления новых идей;
• ассоциируется с общительностью, дружелюбием и энтузиазмом, способствует открытости и лёгкости в общении;
• может ускорять метаболизм, незначительно увеличивать частоту сердечных сокращений и возбуждать аппетит.

Антиазиатский UX

Скорее всего, каждый россиянин, побывавший в азиатских странах, магазинах или кафе, обращал внимание на пестроту интерьеров, изобилие рекламы и вывесок. Для местных жителей такая красочность — залог доверия. В Азии считается, чем больше контента и цветов в интерфейсе, тем более авторитетным и законченным считается ресурс. Кстати, многие российские IT‑решения с минимализмом в дизайне азиаты считают прототипами.

Не исключено, что в Китае или Корее BusinessPad тоже примут за MVP. Но команда намеренно придерживается антиазиатского UX с минимальным количеством цветов и контента в одном окне. Ведь для российских пользователей в рабочем софте важна простота, прозрачность и порядок. А хаоса и перегруженности хватает и в обычной жизни.

Если бы BusinessPad разрабатывался в Азии, его интерфейс мог бы выглядеть так:

Но наша команда сделала его более спокойным:

А как у других

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

Интерфейсы этих IT‑решений пестрят разными цветами, которые часто не несут какой‑либо смысловой нагрузки. Они используются только для того, чтобы выделить раздел или кнопку. В итоге на экране — хаос и визуальный шум, который утомляет и отвлекает от работы.

Вот примеры интерфейсов известных российских b2b‑продуктов:

Советы по использованию цветов в b2b‑интерфейсах

Я наглядно показала, что цвет в интерфейсе — это не только визуал, но ещё и часть стратегии продукта и пользовательского опыта. Поэтому халатно относиться к выбору цветовой палитры точно не стоит. Делюсь советами, которые помогут сделать так, чтобы цвета играли в вашу пользу, а не наоборот.

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

Наделите каждый цвет чёткой функцией. Честно ответьте себе на вопросы: «Почему мы используем именно этот цвет? Как он связан с действиями в интерфейсе? Какое ощущение от использования продукта мы хотим создать?»

Изучите психологию цветов. При выборе палитры не опирайтесь на субъективное «нравится/не нравится». Лучше основываться на фактах: значении цвета, его влиянии на биологическом уровне, национальных нюансах восприятия (особенно, если работаете на международном рынке).

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

Заключение