Несколько лет мы работаем над личный кабинетом клиента Первой Грузовой Компании. Это многофункциональная, сложная система, которая с каждым релизом обрастает новыми деталями. Одна из них — цветовая индикация железных дорог.
Поговорим о создании цветовой схемы с непосредственным исполнителем, нашим ведущим дизайнером, — Викторией Самохваловой, и координатором проекта — Марией Крюковой.
Цветовая индикация — что это и как появилась задача?
Мария Крюкова: ПГК осуществляет перевозки по сети Российских железных дорог. У каждой дороги есть название — Северная, Московская, Горьковская. Клиенты ПГК отслеживают дислокацию вагона и важно без лишних движений, кликов, понять, где дороги сменяют друг друга.В старой версии личного кабинета каждой дороге, по которой может пройти вагон, уже был пр��своен свой цвет. Но цвета были абсолютно неподходящие задаче — они не сочетались и не контрастировали друг с другом.
Виктория Самохвалова: Смотря на эту ниточку пути, раскрашенную в несколько цветов, пользователь должен четко понимать и адекватно воспринимать граничащие дороги. Взгляд должен легко, без лишнего напряжения читать карту. Без резкого перехода от кислотно розового к красному.
М.К: Это была наша инициатива — полностью переработать цветовую систему дорог. Сделать ее читаемой и подходящей под определение «цветовая гамма делового портала».
Как строилась работа?
В.С: Задача была непростая. Для выстраивания системы взаимодействия цвета требовалась общая карта пересечений железнодорожных путей, чтобы понять, какие дороги с какими граничат. А ее нет. Есть или индивидуальные карты дорог, или единая, без разграничений.
Поэтому первым шагом стало формирование системы соседства. Я прописала, с какими дорогами пересекается каждая из 16 дорог, по которым ходят вагоны ПГК (без ж/д за границей РФ).
Второй шаг — работа с цветом. В основной палитре — 7 цветов, а у нас 16 дорог. Первое, что пришло в голову — посмотреть на линии метро разных городов, какие в этой практике используют цвета и как сочетают. Лондон, Москва. Отталкиваясь от этого референса, начала подбор цвета.
Наобум действовать нельзя, нужно было продумать визуальное взаимодействие цвета одной дороги с другой и третьей, и четвертой. Простроить контрастность и гармоничное сочетание.
Все это выстраивалось в каком-то специальном инструменте?
В.С: Нет, очень помогли карандаши и ватман. Карандаши похожи на линию дороги и, прежде чем отметить цветом дорогу на ватмане, я подбирала сочетания через сопоставления карандашей. Эта предметность облегчила задачу.
И так, перебирая цвета и оценивая, какая дорога с какой может пересечься, я строила цветовую систему. Чтобы одна дорога не выделялась на фоне другой, чтобы точка соприкосновения была различима.
Потом начался перенос в цифровую среду. В палитре подбирала аналогичный цвет и сразу же выстраивала все возможные связи дорог в разном направлении.
Давайте посмотрим на примере, как работает схема. Прямоугольник — вагон. Допустим, сейчас вагон находится на Куйбышевской дороге, значит, он пришел с Северной, Московской или Восточно-Сибирской. Дальше пойдет по Горьковской, Южно-Уральской, Приволжской, Юго-Восточной или Московской. И такую декомпозицию можно проделать с каждой дорогой из пяти столбцов. Плюс, у нас есть активный цвет — пройденный путь и неактивный цвет — непройденный путь, в 50 процентов прозрачный от основного. Эта прозрачность тоже учитывалась при выборе цвета.
М.К: Назначение индикации — наглядно показать, по каким дорогам проехал вагон, какие остались, где была стыковка дорог. Наша работа помогла клиентам ПГК быстрее и проще читать карту. Со временем цвета основных дорог для клиентов станут привычкой и даже не будут требовать легенды.
