;-)

Создание навигации в подуличных переходах Московского метро

Описание• Процесс

Въезжаем

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

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

Кроме альбома документов на старте проекта нет. Зато в городе есть станции, где уже внедрены пилотные элементы. Едем смотреть на них в первую очередь.

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

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

Сравниваем разные варианты, пробуем навигацию без стрелок, проверяем дистанцию чтения, убеждаемся, действительно ли лучше со словом «Выход».

Со словом лучше, со стрелками лучше, читаемость лучше. Вписываем «Выход» в другие знаки, работаем с версткой и собираем презу с предложениями.

Принимаемся за верстку станций — на них уже спланировано размещение. От нас нужно наполнение и макеты. Попутно ребята из команды заказчика разъясняют свой ход мысли в дизайне знаков, мы тоже объясняем в презе все принятые решения. Правим и отдаем первые станции.

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

В погоне за крупным шрифтом потеряли в эстетике.


Организация работы

Времени мало, верстка идет медленно, нужно быстрее, умнее и конвейернее. Избавляем дизайнеров от верстки, чтобы они решали задачи, а не отвлекались на правки.

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

Карты сразу выводим в отдельный поток, алфавитные указатели тоже. Соединяет всю работу верстальщик. Редакторскую проверку делаем до соединения.

Добиваемся ускорения работы, но команда выросла, появился рассинхрон, поэтому нужны шаблоны, сверки и внутренние гайды.

Уточнение задач

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

Места на указателях мало, надо менять сетку, писать меньше, но емче, сокращать родовые признаки по правилам, которые тоже важно подготовить.

Не проработан вопрос общественного транспорта.

Непонятно, как верстать входные таблички для вестибюлей нескольких станций (например, из одного вестибюля возможно попасть и на «Курскую» и на «Чкаловскую» или на две «Курские» на разных линиях).

Также есть проблема в заголовках схем для общих вестибюлей. И мы проебываем последовательность решений — похожие по смыслу конструкции верстаются по разным правилам.


Информация на указателях

Чуть ли не самая важная часть в навигации.

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

Выводим предположения, которые лягут в основу работы:

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

Собираем на основе этих принципов несколько станций, на ходу добавляем нумерацию домов (чтобы отличать разные стороны улицы) и вводим те улицы, до которых далеко, но дома с таким адресом близко.

В целом, в команде складывается два полярных мнения о выборе информации для знаков: один подход — важнее улицы, второй подход — важнее объекты.

Чтобы не спорить попусту, собираемся и проводим примерку в метро. На станции «Митино» развешиваем два варианта навигации: на одном улицы главнее, на втором — торговые центры.

Первый:

Второй:

Все бы норм, но когда на указателях только торговые центры, появляется ощущение, будто сверху рынок. Так не пойдет.

Еще проверяем названия выходов: нужно, чтобы они напрямую ассоциировались с тем, что человек увидит, поднявшись наверх. Всё так — ассоциируются. Значит, сначала всегда пишем эту улицу. Например, выход 6 на станции «Митино»: до него главным ориентиром в переходе была Митинская улица, но сам выход параллелен Дубравной.

А че делать с реально важными ТЦ типа «Метрополиса» и «Европейского»?

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

И вот, когда появились понятные правила, открылась возможность отдать все в другие головы.


Дизайн знаков

Откатываемся к старой верстке, сохранив все интересное, что придумали в новой: «Выход», номера домов, больше объектов, чуть крупнее шрифт, правила сокращений.

Решаем не добавлять инфу о выходах на знаки, указывающие к метро.

Разбираемся с группировкой пиктограмм.

Про электрички. У метро есть М, а у электричек такого узнаваемого знака нет, пробуем оттолкнуться от стиля РЖД и сделать намек на железные дороги, чтобы без слов все было понятно. Выбираем красную полосочку.

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

И со схемой та же проблема.

Собираем все вместе в презу, заказчик выбирает второй вариант с доработкой «Китай-города».

Все работы по изменениям знаков ведутся в такой матрице вариаций, чтобы сразу проверять «гениальные» решения на всем, а не на удобном указателе.

Карты

Карты — отдельная часть работы. В них тоже нужно разобраться с дизайнерскими задачами и выстроить производственный процесс.

Задача: выработать правила в уже существующем стиле, понять, как показывать сложные развязки, тоннели и надземные переходы, а как — наземный транспорт и велодорожки, определить, как ставить пиктограммы на торговых центрах,рисовать кладбища и монорельс, разобраться с положением текста относительно пиктограмм и 3D-зданий.

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

Собираем все в гайд по картам.

Технические ограничения не позволяют выгружать из ГИС-систем карты в надлежащем качестве. Например, при выгрузке ломаются все кривые Безье, текстовые блоки становятся однострочными, паттерны разбиваются на миллион объектов, вылезают артефакты, теряются все свойства прозрачности и режимов наложения. И все это руками правят дизайнеры, что совсем не ложится в понятие конвейера.

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

Чтобы скрипт всегда использовал актуальные стили, заводим в общедоступном месте «Заповедник» — файл, куда скрипт заглядывает за идеальными образцами всех базовых элементов и стилей.

Шаблоны и автоматизация верстки

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

В итоге получается все эти прекрасные шаблоны заполнять из «Экселя».

Так постепенно подготавливаются макеты для всех 96 станций.