[分享] 回歸本質—台北捷運路線圖再設計

MRT 板友們大家好，這是我之前嘗試做的 Case Study，在這邊與各位分享。由於篇幅極長，此版本經過精簡，若有興趣閱讀完整版也可從下方連結至我的 Behance 和 Medium 平台閱讀。 Behance - https://reurl.cc/oL3rZQ Medium - https://reurl.cc/lVOgvd（中文版） Medium - https://reurl.cc/D9p4me（英文版） ————————————————————— 經二十多年來的發展，那張以地理事實為基礎的台北捷運路線圖已逐漸複雜化。它原應加深大眾對城市樣貌的認知，隨著發展與擴張，卻成為拖累閱讀效率的束縛。本案例試圖探討如何應用網格系統及色彩、字體等元素的改善提升閱讀體驗。針對現行圖面中的元素分析、重整並改進，以另一種角度切入，創造一套提高閱讀效率、最大化資訊傳達本質的台北捷運路線圖。 https://i.imgur.com/RcqwWH3.jpg 路線圖的設計意圖？ 北捷路線圖於 2009 年首次加入水文資訊，將圖面的路線曲折至貼近地理事實，在當時可作為簡易版的大台北地圖以理解各地間相對關係。11 年後的今天，北捷路網規模已幾乎翻倍，圖面逐漸複雜且不利閱讀。在行動網路發達的現代社會，各式電子地圖隨手可得，捷運路線圖是否仍須堅持其真實地貌的反映？亦或者可向更為極端的拓撲地圖形式發展？ https://i.imgur.com/2gEn2S1.jpg 所以現在有哪些問題？ 目前最大問題是站名位置不統一造成視覺動線曲折。（可嘗試從台北車站向右閱讀至永春站）此外，車站代碼的英文部分不斷重複出現也降低其閱讀性。可理解為這是友善色盲使用者的體貼，但相對於東京地鐵的複雜至極，北捷結構相對單純可迅速找到任一路線起迄站的英文代碼。 再者，現行版的資訊未作明確分級，機捷及淡海輕軌都做了淡化縮小處理。也許為商業考量（北捷、機捷及輕軌分屬不同公司營運）但這種介於顯示與不顯示之間的樣貌的確徒增使用者誤解。最後則是水文資訊，路網初期的確有助旅客瞭解台北地理，但隨路網擴張，目前圖面中的河流反造成畫面混亂。 https://i.imgur.com/RFHLMxI.jpg 找出問題了，那目標呢？ 捷運路網是一項快速發展的系統，可能每半年、每季就面臨更新。因此這項企劃旨在創造一套「標準」而非無法發展的一次性圖像，並訂出六個關鍵字作為反覆檢視的標準，分別為：易懂的，未看說明即可理解；有條理的，同類元素有相同的視覺邏輯；易讀的，閱讀動線流暢無阻；通用的，友善所有使用者；有辨識度的，可迅速掌握重點；可擴展的，未來發展有章可循。 https://i.imgur.com/qbuvlqX.jpg 以乘客的閱讀體驗為優先，怎麼做？ 第一步是設定路線結構。將性質類似、轉乘率高且站距短的機捷、輕軌與貓纜提升至與北捷路線一致的資訊層級，與高鐵、台鐵等長站距聯外交通做出區隔。以外，不再拘泥於地理真實性，盡可能減少轉折次數並預留站名空間，使之視覺等距外並提升閱讀效率。修改後的樣貌不致使用者感到陌生，且地理相對位置仍大致合理。車站圖標則延續了圓角元素，在普通站、端點站做出尺寸差異，也將人流較多的轉乘站以鏤空呈現使之更為突出。代碼則去除重複出現的英文字母僅保留數字，搭配色彩呈現。（此階段有許多兩難抉擇，詳細說明在文章後段講述） https://i.imgur.com/Lzl13WR.jpg 字裡行間的眉角 在圖面中，文字可最直觀地提供資訊。「Cera Pro」作為車站代碼數字使用，特徵鮮明的結構補足小字及多色呈現的缺陷，不再出現分不清楚 3、6、8、9 的窘境。站名中英字體則分別選擇「文鼎晶熙黑」及「FF Clan」。前者的外型構成有助於辨認內容；後者相對現行字體 Helvetica 有著更良好的閱讀性。 https://i.imgur.com/z5kffaC.jpg 定義了主要元素之後，細節呢？ 現行版本的黃色明度過高，易造成閱讀不適；而藍、綠線則明度皆偏低且過於相似。因此在新版本中，路線色彩的明度及色相皆做了些許調整，使閱讀過程更為舒適。圖標尺寸也依其資訊層級優先性漸縮，以大小相對關係為使用者提供視覺暗示，可更輕易地在圖面中捕捉所需資訊。 https://i.imgur.com/HeKKyFM.jpg 如何有邏輯的說明圖例？ 既有版本的圖例雖豐富卻嫌混亂：佔據正中的營運模式未明確說明其意涵；車站圖標說明參差不齊；周邊轉乘、通道與地標等說明都胡亂都塞入雜項，雖含大量訊息卻頗為草率。再設計版本則將各種大眾運輸納入同一區塊；車站與通道說明也以更接近圖面的樣貌傳達；地標與及營運模式則考慮到使用流程上的不符邏輯予以刪除。（路線圖的價值應在查詢如何由 A 站至 B 站，而非傳達各種營運區間或觀光景點。雖非全然多餘，但與其佔據空間，將它放在車站、車廂中的單一路線圖更為合適。） https://i.imgur.com/ZiRoycB.jpg 做完前面這些事後，路線圖變成怎樣？ 通過逐步分析、整理及再設計，新舊版本的對比如下。新版本的路線架構明顯較為簡潔而方向一致，可在路線間迅速切換視覺焦點不感到混亂；站名文字在不縮小字級的前提下確保閱讀動線的流暢，與路線呈平行；各轉乘站於應用鏤空、放大的圖標後，在眾多車站中有較高顯著性，可快速辨別；車站代碼部分在些微放大與字體變更後，相同檢視尺寸下也提升了閱讀性。 https://i.imgur.com/E0Hk0vh.jpg 魚與熊掌，如何選擇？ 如先前所敘，製作過程曾面臨許多許多兩難的抉擇。這些問題沒有標準答案，結果也僅為我就目前路網複雜度做出的抉擇，以下列出其中最困難的兩項： 1.車站代碼的英文字母保留與否？ 在類似案例中常有友善色盲使用者的議題，但以北捷論，路網相對簡潔可輕易找到各路線端點標註，數字也可協助判斷前後站關係，且完全喪失特定色彩感知能力的使用者為極少數，是否必要需要降低絕大多數使用者之閱讀效率？ 2.反映實際距離或精簡路線結構？ 新版圖面中「民權西路 — 大橋頭 — 三重國小」及「中正紀念堂 — 東門 — 古亭」站距明顯較大，其中後者間的三角區更稍嫌不自然。最後選擇這結果的原因為：比起距離失真有違使用者潛在認知，為縮短圖面站距可能導致更多轉折造成畫面複雜化，前者是較可接受的短處。 https://i.imgur.com/X0C2TqQ.jpg 那些與現行圖面有不同解讀的地方 相比於日本地鐵轉乘步行時間動輒五分鐘起，北捷大部分轉乘距離皆在兩分鐘內。對應此時間，新版路線圖針對「紅樹林」、「新北產業園區」做不同解讀。因其閘門至閘門間距離皆在步行一分鐘內且為室內空間，感受上與多數站內轉乘無異故取消其標註，在使用流程上更符合「站外轉乘＝要走比較遠」的心理預期。此外，原先僅註記距離的「貓空纜車動物園站 — 文湖線動物園站」也比照板橋站等做站外轉乘標註。 https://i.imgur.com/pyXZAYA.jpg 新版本的優勢與檢討 結束了長篇分析與比較，我們在文章尾聲再次檢視這個再設計版本的捷運路線圖之優點與缺陷： 優勢：圖面簡明無冗餘元素、視覺動線流暢符合閱讀邏輯，回歸呈現捷運路網資訊的原始需求，可高效率提供「自 A 站如何搭乘至 B 站」的查詢功能，適合純捷運使用者或搭配 Google Maps 使用。此外，元件設計皆有嚴謹的網格應用與尺寸、色彩規範，有利未來路網圖的更新參考。 缺陷：距離、相對位置等地理關係失真，且無水文資訊、方位等元素，無法良好地以該路線圖反推為簡易版大台北地圖並用以安排自駕、長距離步行等交通，不利於僅以該圖作為其他捷運路網外的旅遊方式參考。 https://i.imgur.com/Zrsl0Mw.jpg 文章至此，感謝各位的閱讀！若有轉載需求請站內信詢問。 ----- Sent from JPTT on my iPhone -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 111.71.99.13 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/MRT/M.1592386425.A.64D.html