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

Поговорим о создании цветовой схемы с непосредственным исполнителем, нашим ведущим дизайнером, — Викторией Самохваловой, и координатором проекта — Марией Крюковой.

Цветовая индикация — что это и как появилась задача?

Мария Крюкова: ПГК осуществляет перевозки по сети Российских железных дорог. У каждой дороги есть название — Северная, Московская, Горьковская. Клиенты ПГК отслеживают дислокацию вагона и важно без лишних движений, кликов, понять, где дороги сменяют друг друга.В старой версии личного кабинета каждой дороге, по которой может пройти вагон, уже был присвоен свой цвет. Но цвета были абсолютно неподходящие задаче — они не сочетались и не контрастировали друг с другом.

Виктория Самохвалова: Смотря на эту ниточку пути, раскрашенную в несколько цветов, пользователь должен четко понимать и адекватно воспринимать граничащие дороги. Взгляд должен легко, без лишнего напряжения читать карту. Без резкого перехода от кислотно розового к красному.

М.К: Это была наша инициатива — полностью переработать цветовую систему дорог. Сделать ее читаемой и подходящей под определение «цветовая гамма делового портала».

Как строилась работа?

В.С: Задача была непростая. Для выстраивания системы взаимодействия цвета требовалась общая карта пересечений железнодорожных путей, чтобы понять, какие дороги с какими граничат. А ее нет. Есть или индивидуальные карты дорог, или единая, без разграничений.

Поэтому первым шагом стало формирование системы соседства. Я прописала, с какими дорогами пересекается каждая из 16 дорог, по которым ходят вагоны ПГК (без ж/д за границей РФ).

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

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

Все это выстраивалось в каком-то специальном инструменте?

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

Потом начался перенос в цифровую среду. В палитре подбирала аналогичный цвет и сразу же выстраивала все возможные связи дорог в разном направлении.

Давайте посмотрим на примере, как работает схема. Прямоугольник — вагон. Допустим, сейчас вагон находится на Куйбышевской дороге, значит, он пришел с Северной, Московской или Восточно-Сибирской. Дальше пойдет по Горьковской, Южно-Уральской, Приволжской, Юго-Восточной или Московской. И такую декомпозицию можно проделать с каждой дорогой из пяти столбцов. Плюс, у нас есть активный цвет — пройденный путь и неактивный цвет — непройденный путь, в 50 процентов прозрачный от основного. Эта прозрачность тоже учитывалась при выборе цвета.

М.К: Назначение индикации — наглядно показать, по каким дорогам проехал вагон, какие остались, где была стыковка дорог. Наша работа помогла клиентам ПГК быстрее и проще читать карту. Со временем цвета основных дорог для клиентов станут привычкой и даже не будут требовать легенды.

Как упростить слежение за вагонами. Цветовая индикация дорог для Первой грузовой компании