跳到主要內容區塊

政府網站營運交流平台-中文

網路趨勢與社群應用分享

回歸資訊傳達的本質—提升北捷路線圖的閱讀體驗(三)

 

我們想讓你知道的是

經二十多年來的發展,臺北捷運圖已逐漸複雜化。如何應用網格系統及色彩、字體等元素的改善提升閱讀體驗,回歸其資訊傳達的本質? 

文:孫廷睿(平面設計師,大同大學工業設計學系畢)

 

定義了主要元素之後,細節呢?

現行版本中,黃線的色彩明度過高,直視時易造成不適;而藍、綠線則明度偏低且過於相近,在轉乘站圖標細線的呈現時較難辨別。因此在新版本中,路線色彩的明度及色相皆做了些許調整,使閱讀過程更為舒適。

 

維基百科,各路線色彩皆有指定的 Pantone 及 HEX 色碼。但由於設計目的非取代官方版本,且未找到明確的指定色碼,故未遵循其規範。

 

除外型與色彩變化,圖標尺寸也依其資訊層級優先性漸縮,以大小的相對關係為使用者提供視覺暗示,可更輕易地在圖面中捕捉所需資訊。

 

左:調整後的路線及圖示色彩 / 右:圖標間的尺寸相對關係

圖左:調整後的路線及圖示色彩 / 圖右:圖標間的尺寸相對關係

 

如何有邏輯的說明圖例?

既有版本中的圖例,資訊豐富卻未經有條理的分類:佔據正中的營運模式未明確說明其意涵,主要圖面中也毫無線索;車站圖標說明參差不齊如隨機貼上;周邊轉乘、通道與地標等說明都一併都塞入雜項。雖含大量訊息,但草率呈現頗有「說明都在這了自己慢慢找」的意味。

 

再設計版本中,則將各種大眾運輸方式納入同一區塊。車站與通道說明也以更接近主要圖面的樣貌傳達,不單獨拆出元素以提高使用者的理解度。地標與及營運模式則考慮到使用流程上的不符邏輯,予以刪除。

 

在使用流程中,路線圖對使用者的價值應在查詢如何由 A 站搭乘至 B 站,而非傳達各種營運區間或觀光景點。雖非全然多餘,但比起佔據空間僅提供較低價值,將這類資訊放在實體車站及車廂中的單一路線圖更為合適。

 

新舊版本中的圖例資訊分類

圖:新舊版本中的圖例資訊分類

 

做完前面這些事後,路線圖變成怎樣?

通過逐步分析、整理及再設計,新舊北捷路線圖的對比如下方所示。新版本的路線架構明顯較為簡潔而方向一致,可在路線間迅速切換視覺焦點不感到混亂;站名文字在不縮小字級的前提下確保閱讀動線的流暢,與路線呈平行;各轉乘站於應用鏤空、放大的圖標後,在眾多車站中有較高顯著性,可快速辨別;車站代碼部分在些微放大與字體變更後,相同檢視尺寸下也提升了閱讀性。

 

新舊版本北捷路線圖比較

圖:新舊版本北捷路線圖比較

 

魚與熊掌,如何選擇?

如文章前段所敘,製作過程曾面臨許多需要捨棄 A 達到 B 的情形,在幾經考慮後才選擇完稿中的樣貌。這些問題沒有標準答案,結果也僅為我就目前路網複雜度做出的抉擇,以下列出其中最困難的兩項:

 

1. 車站代碼的英文字母保留與否?

在類似設計案例中常有類似議題,為友善色盲使用者應設車站代碼方便閱讀。毋庸置疑的,東京地鐵這類極端複雜的系統需詳列於圖面否則容易迷失;但以北捷論,系統相對簡潔可輕易而快速的找到各路線端點標註,數字也可協助判斷前後站關係,且完全喪失特定色彩感知能力的使用者為極少數,是否真的如此迫切需要降低絕大多數使用者之閱讀效率?

 

據文獻,色盲的全球盛行率約為男性 8%、女性 0.5%(亞洲略低,男性約 5%)且多為綠色弱。藍色弱/盲及全色盲極少見,皆低於 0.001%

 

(未完待續)

 

孫廷睿 / Memphis Sun

hi@memphissun.info

原文出處Medium;政府網站營運交流平台授權轉載