NewsPortfolioenru

Mjolnir studio

We design, develop and launch
effective business solutions
for web and more.

Схема общественного транспорта Киева

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

Пол­ная вер­сия

Вер­сия с вре­мен­ны­ми про­межут­ка­ми

Толь­ко мет­ро (и толь­ко для те­бя, Игорь)

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

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

Яс­ное де­ло, что до­пол­ни­тель­ная ин­форма­ция не дол­жна пе­рег­ру­жать схе­му:

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

Слож­ным мо­мен­том бы­ла стан­ция Гид­ро­парк. Она на­ходит­ся на ос­тро­ве, и на схе­ме не так мно­го мес­та, что­бы ак­ку­рат­но его впи­сать, не пе­рек­рыв Днепр. Во­об­ще, с уче­том дос­та­точ­но строй­но­го, тан­цу­юще­го си­лу­эта Днеп­ра, и не­умес­тнос­ти уп­ро­щения его до ши­рокой ли­нии (как это час­то про­ис­хо­дит на раз­ных схе­мах), за­дача ус­ложни­лась в свя­зи с по­ис­ком умес­тной фор­мы ос­тро­ва, но об этом даль­ше.

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

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

Центр

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

*Ста­рые схе­мы*

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

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

Пе­рехо­ды

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

От­ме­чу о пе­рехо­дах с пе­рете­кани­ем цве­та: мне ни­ког­да не нра­вились пе­рехо­ды, сде­лан­ные на схе­ме мет­ро Лон­до­на, нап­ри­мер:

Да­же с уче­том об­щей пес­тро­ты схе­мы и заг­ру­жен­ностью ли­ний, та­кое вы­деле­ние пе­рехо­дов меж­ду стан­ци­ями ско­рее от­вле­ка­ет, чем ак­центи­ру­ет вни­мание. Чер­ным на схе­ме дол­жен быть толь­ко ос­новной текст, по­тому и вто­рос­те­пен­ные пе­рехо­ды, ко­торые от­части нас­ле­ду­ют лон­дон­ский под­ход, я сде­лал в цвет ли­ний (стан­ции) и ико­нок пе­шего-плат­но­го пе­рехо­да (со­еди­нитель­ные ли­нии).

Трам­вай­ные вет­ки

Я ви­дел нес­коль­ко ре­шений, суть ко­торых сво­дилась к двум ва­ри­ан­там:

  1. Вет­ки трам­вая ри­совать ли­ни­ями бок-о-бок, сох­ра­няя чи­та­емость по цве­ту.
  2. Объ­еди­нять в од­ну, не пе­рег­ру­жая прос­транс­тво.

В прин­ци­пе, мне был всег­да бли­же вто­рой под­ход, хо­тя я не брал­ся его при­менить, по­ка не при­думал, как его нем­но­го улуч­шить. Вет­ки поз­во­ля­ют раз­местить их внах­лест так, что­бы мож­но бы­ло, вчи­тав­шись, уви­деть от­ку­да и ку­да ка­кая вет­ка идет. Осо­бен­но хо­рошо это по­лучи­лось с ли­ни­ями 4-5, ко­торые прос­то нап­ра­шива­лись на это. Ре­шение с вет­ка­ми 1-2-3 я счи­таю нем­но­го нес­тандар­тным, но по-сво­ему изящ­ным и ре­ша­ющим сра­зу две проб­ле­мы.

Днепр

Днепр ока­зал­ся креп­ким ореш­ком, ни­как не хо­тел ак­ку­рат­но встро­ить­ся в схе­му (бы­ли под­хо­ды и со сто­роны Днепр-схе­ма, и со сто­роны схе­ма-Днепр).

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

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

К че­му я это? Нем­но­го виль­ну в сто­рону о том, что та­кое во­об­ще схе­ма.

Из­ло­жение, изоб­ра­жение, пред­став­ле­ние че­го-ли­бо в са­мых об­щих чер­тах, уп­ро­щён­но. © Ло­патин В. В., Ло­пати­на Л. Е. Рус­ский тол­ко­вый сло­варь

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

Уп­ро­щен­но, вет­ки мет­ро и Днепр соз­да­вали со­вер­шенно неп­ра­виль­ное впе­чат­ле­ние от­да­лен­ности Поч­то­вой Пло­щади от Днеп­ра и, на­обо­рот, чрез­мерно­го сбли­жения с ним стан­ций вы­ше. Че­рез не­кото­рое вре­мя по­ис­ков, фор­ма та­ки наш­лась.

А­эро­пор­ты

С э­аро­пор­та­ми си­ту­ация дос­та­точ­но прос­тая, од­на­ко я ре­шил их вы­делить IATA-ко­дами. Воз­можно, это про­фес­си­ональ­ная де­фор­ма­ция, но для ме­ня и, ду­маю, мно­гих лю­дей, трех­буквен­ное обоз­на­чение а­эро­пор­та рез­ко бро­са­ет­ся в гла­за. Так­же ин­те­рес­на си­ту­ация с мар­шрут­кой, ко­торая идёт от Юж­но­го жд-вок­за­ла до Бо­рис­по­ля: она де­ла­ет толь­ко од­ну про­межу­точ­ную ос­та­нов­ку, на мет­ро Харь­ков­ской, что мо­жет под­вести не­задач­ли­вого пу­тешес­твен­ни­ка, рас­счи­тыва­юще­го пе­ресесть на нее, нап­ри­мер, на цен­траль­ном Ав­то­вок­за­ле, по­тому я спе­ци­аль­но вы­делил пе­реход с этой стан­ции мет­ро и пос­та­рал­ся от­де­лить мар­шрут от дру­гих объ­ек­тов.

Де­тали

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

Наз­ва­ния

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

Да­лее, в про­цес­се рас­ста­нов­ки и раз­личных эк­спе­римен­тов, мною бы­ло най­де­но ин­те­рес­ное ре­шение, ко­торое поз­во­лило сде­лать схе­му и ком­пак­тней, и гиб­че, и чи­та­емей. В во­рохе наз­ва­ний раз­ных стан­ций иног­да слож­но сле­ту оп­ре­делить, ка­кая от­но­сит­ся к мет­ро, а ка­кая, нап­ри­мер, к трам­ваю. Ес­тес­твен­но, пра­виль­ное по­зици­они­рова­ние и вос­по­мога­тель­ные ука­зате­ли дол­жны ре­шать эту проб­ле­му, но ес­ли пой­ти нем­но­го даль­ше и от­де­лить ка­ким-ли­бо об­ра­зом стан­ции од­но­го ти­па от дру­гих? Пер­вые мыс­ли о цве­те и икон­ках тут же от­ме­та­ют­ся, так как они мгно­вен­но пе­рег­ру­зят схе­му или прев­ра­тят ее в цвет­ное чер­ти-что. А что ес­ли по­вер­нуть наз­ва­ния ста­ниций?

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

Ва­ри­ации кар­ты

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

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

Про­дол­жая рас­сказ, по­кажу еще нес­коль­ко ва­ри­ан­тов, ко­торые со­бира­лись во вре­мя от­ды­ха или ту­пежа:

Вот тут ис­ка­ли аль­тер­на­тив­но­го, ме­нее нап­ряжно­го, цве­та.

Здесь сде­лали «ноч­ную» схе­му:

А тут прос­то раз­вле­кались и нам пон­ра­вил­ся ре­зуль­тат :)

Как соз­да­валась схе­ма

Пер­вые на­работ­ки (ужас­ные) бы­ли сде­ланы еще в 2011 го­ду, от ску­ки. За­дача час­то от­кла­дыва­лась в да­лекий ящик и не осо­бо прог­ресси­рова­ла, так как бы­ло мо­ре дру­гой ра­боты, а вос­тре­бован­ности не чувс­тво­валось.

Пос­мотри­те на этот ужас­ный центр с те­нями:

В ка­кой-то мо­мент бы­ла по­пыт­ка вып­ря­мить схе­му и при­вязать ее к сет­ке:

Как я рас­ска­зывал вы­ше, са­мым ло­гич­ным и изящ­ным ре­шени­ем бы­ло на­чать все за­ново с цен­тра, и опи­сать его вок­руг рав­носто­рон­не­го тре­уголь­ни­ка. И тут все за­вер­те­лось.

Да­же та­кую не­боль­шую (по срав­не­нию с Лон­до­ном, к при­меру) схе­му все рав­но слож­но удер­жать в го­лове, от то­го про­цесс пе­рес­борки выг­ля­дел так:

Кста­ти, для лю­бите­лей эк­зо­тики. В кон­це-кон­цов, я всег­да ос­та­вал­ся веб-раз­ра­бот­чи­ком, и ду­мал об ин­те­рак­тивнос­ти схе­мы. По­кажу чуть-чуть за­кулисья :)

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

Это, фак­ти­чес­ки, оз­на­ча­ет ог­ромный ус­пех в мо­ем стрем­ле­нии сде­лать ин­те­рак­тивную кар­ту со скры­ва­емы­ми, ме­ня­ющи­ми цвет, на­сыщен­ность и т.п. груп­па­ми объ­ек­тов без мно­год­невно­го ту­пого пе­реби­рания и ор­га­низа­ции sgv-ко­да.

Об svg-вер­сии

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

Чем, кста­ти, так ин­те­ресен svg. Это век­торный фор­мат, поз­во­ля­ющий дер­жать в нем и обыч­ные тек­сто­вые объ­ек­ты. Из это­го есть нес­коль­ко чу­дес­тных следс­твий. Во-пер­вых, аб­со­лют­но не важ­но, в ка­ком раз­ре­шении его бу­дут смот­реть — мож­но пос­мотреть и де­таль­но на ог­ромном мо­нито­ре, и про­бежать­ся с зу­мом на мо­биль­ни­ке. Плюс, тек­сто­вые объ­ек­ты в svg мож­но вы­делять мышью и ко­пиро­вать. Плюс, кар­тинка в ито­ге ве­сит не мно­гим боль­ше рас­тро­вого изоб­ра­жения, но мо­жет как угод­но из­ме­нять­ся как пол­ностью, так и по час­тям, си­лами прос­тень­ко­го js и css. Я ду­маю, за­ин­те­ресо­вав­ши­еся лег­ко най­дут в ин­терне­те мно­го ин­те­рес­но­го на эту те­му, по­тому ос­тавлю это для от­дель­ной статьи.

Даль­ней­шие пла­ны

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

Бла­годар­ности

Кол­ле­гам, ко­торых я раз за ра­зом вы­тас­ки­вал на пос­мотреть-по­гово­рить. Соз­да­телям схем мет­ро по все­му ми­ру и Аген­там Змін лич­но, за хо­роший при­мер. Иго­рюне за «Со­берись!» и со­веты. Кри­тика и кон­ку­рен­ция — од­ни из са­мых силь­ных дви­гате­лей на пу­ти к хо­роше­му ре­зуль­та­ту. Спа­сибо вам всем.

Олесь Кри­жанівсь­кий, 2015 рік.

Solving problems,
not improving them

We are excited to share our approach to design and development, as we believe in it.
Our ultimate goal is to make things work and reach the goals you set, that is what we call
"solving". We can decline a task which is not changing the game, but will only make outdated look modern.

We're open

You can ask us about design and development, offer to make something for you and get consultations. Or just to meet with us :)

It's good idea to ask us for hel with web projects, graphical design, brand management, typography, and much more.

Contact us

Thank you. We'll reply you soon.