Дизайн транспортных схем

Илья Бир­ман

🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

Удобно листать не только прокруткой, но и клавишами‑стрелками:

 
между важными местами
Shift
между
разворотами
Илья Бир­ман

Дизайн
транспорт­ных
схем

Изда­тель­ство Бюро Гор­бу­нова
2018⁠—2022
Илья Бирман

Дизайн
транспорт­ных
схем

Издательство Бюро Горбунова
2018⁠—2022
удк 655.262
ббк 85.15
Б64
Бир­ман И. Б.
Б64
Дизайн транс­порт­ных схем. —
М.: Изд‑во Бюро Гор­бу­нова, 2018⁠—2022

Пред­став­ляем пер­вое в мире прак­ти­че­ское руко­вод­ство по дизайну транс­порт­ных схем. В книге гово­рится об исто­рии появ­ле­ния схем, о прин­ци­пах их устрой­ства, о пла­ни­ро­ва­нии раз­ви­тия схемы вме­сте с транс­порт­ной систе­мой. Автор рас­ска­зы­вает о тех­ни­че­ских при­ё­мах — про­кла­ды­ва­нии линий, спо­со­бах обо­зна­че­ния оста­но­вок, под­боре цве­тов и шриф­тов, вёрстке.

ISBN 978‑5‑9907024‑5‑5
© Бюро Гор­бу­нова

Оглавление

    Задача 

    Принцип 

    Конструкция 

    Детали 

    Система 

удк 655.262
ббк 85.15
Б64
Б64
Бирман И. Б.
Дизайн транспортных схем. —
М.: Изд‑во Бюро Горбунова, 2018⁠—2022

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

ISBN 978‑5‑9907024‑5‑5
© Бюро Горбунова

Оглавление

    Задача 

    Принцип 

    Конструкция 

    Детали 

    Система 

Скрыто 680 разворотов

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

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

Пока экран не тро­гают, на нём про­сто под­све­чи­ва­ется теку­щая линия. Осталь­ные линии заблед­нены, что затруд­няет чте­ние схемы.

Если при­кос­нуться к экрану, все линии «зажи­га­ются». Если бы на схеме было ука­зано наше поло­же­ние и направ­ле­ние дви­же­ния — то, что умеют даже све­то­ди­од­ные табло — саму линию выде­лять бы вообще не потребовалось.

Теперь можно нажать на стан­цию — появится окно с двумя кноп­ками. Туль­ская отсюда сюда? Сложно понять, что от тебя хотят, пока не зна­ешь, как рабо­тает интер­фейс. Лучше было бы дать выбор: «Постро­ить марш­рут от стан­ции Туль­ская / до стан­ции Туль­ская». И саму Туль­скую на схеме как‑то под­све­тить как выбранную.

Можно также нажать на кнопку «Марш­рут» в углу, чтобы вве­сти назва­ния стан­ций на кла­ви­а­туре или выбрать из списка. Этот интер­фейс — интер­ак­тив­ный ана­лог алфа­вит­ного ука­за­теля; он нужен тем, кто не знает, где нахо­дится стан­ция на карте.

Когда экс­пе­ри­мен­ти­ро­вал, я хотел найти стан­цию Улица 1905 года и нажал на цифры 123 с мыс­лью напе­ча­тать «19» — почему‑то именно так сра­бо­тал мой мозг.

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

В итоге постро­ен­ный марш­рут выгля­дит так.

Москва

Москва

Москва

Москва

Москва

Москва

Москва

Москва

Москва

Москва

Москва

Москва

Москва

Москва

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

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

Пока экран не трогают, на нём просто подсвечивается текущая линия. Остальные линии забледнены, что затрудняет чтение схемы.

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

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

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

Когда экспериментировал, я хотел найти станцию Улица 1905 года и нажал на цифры 123 с мыслью напечатать «19» — почему‑то именно так сработал мой мозг.

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

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

Приложение Транспорта Лондона

Приложение Транспорта Лондона

Приложение Транспорта Лондона

Приложение Транспорта Лондона

А это айфон­ное при­ло­же­ние Транс­порта Лон­дона. В основе — карта метро.

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

Стоит хоть немного умень­шить мас­штаб — начи­нают про­па­дать подпи­си станций.

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

Текстура 

При выборе стан­ции в её кружке появ­ля­ется точка (пеньки при выборе так же пре­вра­ща­ются в кружки с точ­кой). Неплохо: и внешне, и по смыслу похоже на радиокнопку.

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

А это айфонное приложение Транспорта Лондона. В основе — карта метро.

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

Стоит хоть немного уменьшить масштаб — начинают пропадать подписи станций.

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

Текстура 

При выборе станции в её кружке появляется точка (пеньки при выборе так же превращаются в кружки с точкой). Неплохо: и внешне, и по смыслу похоже на радиокнопку.

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

Приложение Транспорта Лондона

Соот­не­сём про­блемы рас­смот­рен­ных интер­ак­тив­ных схем с прин­ци­пами про­ек­ти­ро­ва­ния интер­фейса, о кото­рых я пишу в своей книге «Поль­зо­ва­тель­ский интерфейс».

В главе «При­вычка» я рас­ска­зы­ваю о том, что кон­крет­ные подпи­си или пик­то­граммы в интер­фейсе хоть и важны, но при­вычка поль­зо­ва­те­лей важнее.

Нельзя уби­рать про­бел с при­выч­ного места на кла­ви­а­туре или ста­вить туда дей­ствие, кото­рое при­вычно видеть на кнопке «Энтер», как в слу­чае кнопки «Пока­зать марш­рут» из мос­ков­ской интер­ак­тив­ной схемы. И за кноп­кой «123» мы ожи­даем уви­деть циф­ро­вую кла­ви­а­туру, а не спи­сок линий.

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

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

Пока­зы­вать мел­кие детали хорошо и с точки зре­ния сооб­ра­же­ний из главы «Информативность».

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

Электронный учебник «Пользовательский интерфейс»

Электронный учебник «Пользовательский интерфейс»

Электронный учебник «Пользовательский интерфейс»

Электронный учебник «Пользовательский интерфейс»

Электронный учебник «Пользовательский интерфейс»

Электронный учебник «Пользовательский интерфейс»

Электронный учебник «Пользовательский интерфейс»

Электронный учебник «Пользовательский интерфейс»

Электронный учебник «Пользовательский интерфейс»

Электронный учебник «Пользовательский интерфейс»

Электронный учебник «Пользовательский интерфейс»

Электронный учебник «Пользовательский интерфейс»

Электронный учебник «Пользовательский интерфейс»

Электронный учебник «Пользовательский интерфейс»

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

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

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

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

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

Показывать мелкие детали хорошо и с точки зрения соображений из главы «Информативность».

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

Я зани­ма­юсь дизай­ном транс­порт­ных схем с 2006 года, то есть при­мерно всю айфон­ную эпоху. Посто­янно зву­чит мне­ние, что транс­порт­ные при­ло­же­ния в теле­фоне вот‑вот сде­лают ненуж­ными напе­ча­тан­ные схемы на транспорте.

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

Улич­ные пеше­ход­ные стелы появи­лись в Нью‑Йорке и Москве именно в 2010‑е. Боль­шин­ство транс­порт­ных схем, кото­рые я пока­зы­ваю в этой книге, также нари­со­ваны в послед­ние годы. И как раз из‑за кон­ку­рен­ции с при­ло­же­ни­ями каче­ство этих схем посто­янно растёт.

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

Как «впечатать» схему в голову:

  • Графема 

Москва

Я занимаюсь дизайном транспортных схем с 2006 года, то есть примерно всю айфонную эпоху. Постоянно звучит мнение, что транспортные приложения в телефоне вот‑вот сделают ненужными напечатанные схемы на транспорте.

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

Уличные пешеходные стелы появились в Нью‑Йорке и Москве именно в 2010‑е. Большинство транспортных схем, которые я показываю в этой книге, также нарисованы в последние годы. И как раз из‑за конкуренции с приложениями качество этих схем постоянно растёт.

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

Как «впечатать» схему в голову:

  • Графема 

Москва

Нави­га­ци­он­ные при­ло­же­ния делают нас бес­по­мощ­ными, когда что‑то идёт не по плану: ты при­шёл на оста­новку, а нуж­ного авто­буса нет!

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

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

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

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

Схема ночных автобусов
на остановке в Лондоне

Навигационные приложения делают нас беспомощными, когда что‑то идёт не по плану: ты пришёл на остановку, а нужного автобуса нет!

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

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

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

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

Схема ночных автобусов
на остановке в Лондоне

Скрыто 9 разворотов

Заключение

С одной сто­роны, транс­порт­ная схема — ути­ли­тар­ная вещь. Её про­ек­ти­ро­ва­ние — дол­гая, кро­пот­ли­вая работа, тре­бу­ю­щая боль­шого вни­ма­ния и тер­пе­ния. Для мно­гих в ней нет ничего вдохновляющего.

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

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

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

Раз вы дочи­тали книгу до конца, думаю, вы пони­ма­ете, о чём я.

Транспортная схема Вестероса из «Игры престолов»,
дизайнер Майкл Тызник

Схема маршрутов Средиземья из «Властелина колец»,
дизайнер Кристиан Тейт

Московское метро,
художник Дмитрий Раков

Заключение

С одной сто­роны, транс­порт­ная схема — ути­ли­тар­ная вещь. Её про­ек­ти­ро­ва­ние — дол­гая, кро­пот­ли­вая работа, тре­бу­ю­щая боль­шого вни­ма­ния и тер­пе­ния. Для мно­гих в ней нет ничего вдохновляющего.

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

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

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

Раз вы дочи­тали книгу до конца, думаю, вы пони­ма­ете, о чём я.

Транспортная схема Вестероса из «Игры престолов»,
дизайнер Майкл Тызник

Схема маршрутов Средиземья из «Властелина колец»,
дизайнер Кристиан Тейт

Московское метро,
художник Дмитрий Раков

Бир­ман Илья Бори­со­вич
Дизайн транс­порт­ных схем


  • Изда­тель Артём Горбунов

  • Редак­тор Сёма Сёмочкин

  • Фото­граф Вла­ди­мир Колпаков

  • Раз­ра­бот­чики Рустам Кул­ма­тов,
    Васи­лий Полов­нёв, Мария Попова,
    Юрий Мазур­ский и Андрей Ерес

  • Тести­ров­щик Сер­гей Фролов

  • Помощ­ники Алан Кад­жаев,
    Намор Воти­лав, Никита Щер­ба­ков,
    Вита­лий Тезяев

  • Книга набрана шрифтом «Бюросанс»

  • Дизайн‑бюро Артёма Горбунова
    Большая Новодмитровская улица,
    дом 36, строение 2
    Москва, Россия, 127015

  • bureau.ru

Бирман Илья Борисович
Дизайн транспортных схем

  • Издатель Артём Горбунов

  • Редактор Сёма Сёмочкин

  • Фотограф Владимир Колпаков

  • Разработчики Рустам Кулматов,
    Василий Половнёв, Мария Попова,
    Юрий Мазурский и Андрей Ерес

  • Тестировщик Сергей Фролов

  • Помощники Алан Каджаев,
    Намор Вотилав, Никита Щербаков,
    Виталий Тезяев

  • Книга набрана шрифтом «Бюросанс»

  • Дизайн‑бюро Артёма Горбунова
    Большая Новодмитровская улица,
    дом 36, строение 2
    Москва, Россия, 127015

  • bureau.ru

Закладки
Добавьте закладки
Ничего не нашлось