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

Илья Бир­ман

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

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

 
между важными местами
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
© Бюро Горбунова

Оглавление

    Задача 

    Принцип 

    Конструкция 

    Детали 

    Система 

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

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

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

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

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

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

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

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

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

Текстура 

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

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

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

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

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

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

Текстура 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Графема 

Москва

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

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

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

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

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

  • Графема 

Москва

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

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

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

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

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

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

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

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

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

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

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

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

Стандарти­зация

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

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

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

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

Поэтому по мере взрос­ле­ния схемы при­хо­дится выра­ба­ты­вать стандарты.

Эксперименты со схемой метро Вашингтона

Стандарти­зация

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

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

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

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

Поэтому по мере взросления схемы приходится вырабатывать стандарты.

Эксперименты со схемой метро Вашингтона

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

Заключение

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

  • bureau.ru

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