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