ВакансіїВйоНаші роботиenru

Mjolnir studio

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

Схема громадського транспорту Києва

У без­межній лю­бові до Києва у студії бу­ла роз­робле­на схе­ма швидкісно­го гро­мадсь­ко­го тран­спор­ту.

Пов­на версія

Версія із ча­сови­ми проміжка­ми

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

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

У зв'яз­ку з та­кими мірку­ван­ня­ми, я про­поную та­ку па­радиг­му схе­ми тран­спор­ту, при якій на схемі бу­де по­каза­но біль­ше інфор­мації, ніж ми звик­ли ба­чити. Це бу­де ко­рис­но не тіль­ки гос­тям сто­лиці, але й нудь­гу­ючим ки­янам. Біль­ше то­го — не всі ки­яни мо­жуть пох­ва­лити­ся тим, что відвіда­ли, нап­риклад, усі пар­ки міста.

Яс­на річ, що до­дат­ко­ва інфор­мація не по­вин­на пе­реван­та­жува­ти схе­му:

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

Тяж­кким мо­мен­том бу­ла станція «Гідро­парк». Во­на зна­ходить­ся на ос­трові, і на схемі не так ба­гато місця, щоб аку­рат­но й­ого вмісти­ти, не пе­рек­ривши при ць­ому Дніпро. Вза­галі, із ура­хуван­ням вель­ми струн­ко­го, тан­цю­ючо­го си­лу­ету Дніпра і не­дореч­ності спро­щен­ня й­ого до ши­рокої лінії (як це час­то відбу­ваєть­ся на різних схе­мах), зав­дання ус­клад­ни­лося у зв'яз­ку из по­шуком до­реч­ної фор­ми ос­тро­ва. Але про це далі.

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

Зви­чай­но, вар­то відзна­чити, що це не са­ма не­обхідна інфор­мація, але во­на цілком мо­же ви­яви­тися ко­рис­ною, нап­риклад, па­сажи­ру, що спізнюєть­ся, і яко­му те­лефо­ну­ють пря­мо у ва­гоні. До речі, є ще й ок­ре­ма те­ма із пе­рехо­дом між станціями «Май­дан Не­залеж­ності» та «Хре­щатик». Пе­реходів між станціями два, один дов­гий, інший — ко­рот­ший і зручніший. Щоб пе­реміщен­ня бу­ло мак­си­маль­но зруч­ним, чи­тачу за­лише­не на­гаду­ван­ня про те, ко­ли швид­кий пе­рехід зак­ри­тий.

Центр

У зв'яз­ку із тим, що роз­та­шуван­ня і ком­по­зиція на схемі Києва дик­ту­ють­ся не стіль­ки жорс­тким об­ме­жен­ням місця, скіль­ки фан­тазією ди­зай­не­ра, варіацій бу­ло ство­рено ду­же ба­гато, і час від ча­су в них прог­ля­дали ідеї, приз­на­чені для еко­номії прос­то­ру, що не зовсім доб­ре відоб­ра­жало­ся на ре­зуль­тат. Спо­чат­ку я зби­рав схе­му на сітці, на­мага­ючись вит­ри­мува­ти од­на­кові проміжки між станціями, але це приз­ве­ло до то­го, що перші варіан­ти схе­ми бу­ли відки­нуті:

*Старі схе­ми*

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

До речі, це дає мож­ливість для різно­манітно­го ро­ду й­ого ви­корис­тання, ад­же, як мені підка­зу­ють ко­леги, од­но­час­но схо­же на ке­лих та го­лову му­рахи =)

Пе­рехо­ди

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

Відмічу про пе­рехо­ди із пе­ретікан­ням коль­ору: мені ніко­ли не по­доба­лися пе­рехо­ди, зроб­лені на схемі Лон­до­на, нап­риклад:

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

Трам­вайні гілки

Я ба­чив декіль­ка рішень, суть яких зво­дила­ся до двух варіантів:

  1. Гілки трам­вая ма­люва­ти по­руч, зберіга­ючи чи­табельність по коль­ору.
  2. Об'єдна­ти в од­ну, не пе­рена­ван­та­жу­ючи простір.

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

Дніпро

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

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

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

До чо­го це я? Тро­хи відій­ду в сто­рону та на­пишу про те, що та­ке схе­ма вза­галі.

Спро­щене зоб­ра­жен­ня в за­галь­них ри­сах сис­те­ми, бу­дови чо­го-не­будь або взаємо­роз­та­шуван­ня, зв'яз­ку час­тин чо­гось. Слов­ник ук­раїнсь­кої мо­ви в 11 то­мах. — Том 9, 1978.

Мені не од­но­разо­во до­вело­ся зіткну­тися із не­розумінням і обу­рен­ням від то­го, що схе­матич­не зоб­ра­жен­ня не над­то відповідає то­пог­рафічній ре­аль­ності. Час­тко­во (частіше всь­ого, у своїй біль­шості) — це не­об­грун­то­вана прискіпливість ко­рис­ту­вача, за яку й­ому мож­на тіль­ки по­дяку­вати. Схе­ма ви­конує певні функції, і відоб­ра­жен­ня із то­пог­рафічною точністю місце­вості не є однією з них. Во­на по­вин­на да­вати чітке ро­зуміння то­го, як лю­дині діста­тися від однієї станції гро­мадсь­ко­го тран­спор­ту до іншої, не біль­ше, од­нак пев­ний зв'язок із місцевістю до­помо­же із мен­шим дис­комфор­том зорієнту­вати­ся на місце­вості й оціни­ти своє місцез­на­ход­ження при відсут­ності інших до­поміжних за­собів. Інак­ше — простіше всь­ого зро­бити ліній­ну схе­му.

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

А­еро­пор­ти

З а­еро­пор­та­ми си­ту­ація дос­татньо прос­та, од­нак я вирішив виділи­ти їх IATA-ко­дами. Мож­ли­во, це про­фесій­на де­фор­мація, але для ме­не, як, ду­маю, і для інших лю­дей, ско­роче­на наз­ва а­еро­пор­ту (ти­пу KBP) різко ки­даєть­ся в очі. Та­кож ціка­ва си­ту­ація з мар­шрут­кою, яка й­де від Півден­но­го залізнич­но­го вок­за­лу до Бо­рис­по­ля: во­на ро­бить тіль­ки од­ну зу­пин­ку, на мет­ро Харківській, що мо­же ввес­ти в ома­ну мандрівни­ка, який роз­ра­ховує пе­ресісти на неї, нап­риклад, на цен­траль­но­му Ав­то­вок­залі. То­му я спеціаль­но виділив пе­рехід із цієї станції мет­ро і на­магав­ся відок­ре­мити мар­шрут від інших об'єктів.

Де­талі

Щоб спрос­ти­ти зна­ход­ження се­бе віднос­но об'єктів на схемі, я про­дуб­лю­вав відмітку об'єкта віднос­но станції, щоб шля­хом нес­клад­но­го прос­то­рово­го роз­ра­хун­ку мож­на бу­ло виз­на­чити вірний нап­ря­мок ру­ху. Так са­мо злег­ка, щоб не відволіка­ти чи­тача, я поз­на­чив на схемі мос­ти над Дніпром.

Наз­ви

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

Далі, у про­цесі роз­ста­нов­ки і різно­манітних ек­спе­риментів, мною бу­ло знай­де­не ціка­ве рішен­ня, яке доз­во­лило зро­бити схе­му більш ком­пак­тною, гнуч­кою, зруч­ною для чи­тан­ня. У купі назв різних станцій інко­ли важ­ко од­ра­зу виз­на­чити, яка має відно­шен­ня до мет­ро, а яка, нап­риклад, до трам­ваю. Пра­виль­не позіціюван­ня та до­поміжні вказівки по­винні виріша­ти цю проб­ле­му, але як­що піти тро­хи далі та відок­ре­мити яки­мось чи­ном станції од­но­го ти­пу від інших? Перші дум­ки про колір та ікон­ки од­ра­зу відки­да­ють­ся, так як во­ни миттєво пе­рена­ван­та­жать схе­му чи пе­рет­во­рять її у коль­оро­ве хтоз­на-що. А як­що пе­ревер­ну­ти наз­ви станцій?

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

Ва­ри­ації

Я при­хиль­ник то­го, ща такі схе­ми по­винні зігріва­тися лю­бов'ю лю­дей, але лю­ди різні у своїх сма­ках. Нап­риклад, я сам не люб­лю світлу схе­му. Дав­но зна­ючи, де зна­ходять­ся станції і пе­рехо­ди, я скоріше бу­ду щас­ли­вий спос­теріга­ти де­що быльш пох­му­ре із флу­орісценцією:

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

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

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

Тут зро­бив «нічну» схе­му:

А тут прос­то роз­ва­жав­ся, і ме­ня спо­добав­ся ре­зуль­тат =)

Як ство­рюва­лася схе­ма

Перші на­риси (жах­ливі) бу­ли зроб­лені ще у 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.