介面設計的兩難:易讀或美觀?北捷官方路線圖並沒你想的那麼「垃圾」,日本鄉民版也沒那麼「完美」


台北捷運松山線宣佈即將通車到現在正式通車,關於新捷運設計的各種議題就不斷在網路上被熱烈討論,從南京復興站在同一個地方設置兩個相對的出口、捷運松山線轉乘站內標示、到這兩天「日本人畫的台北捷運圖」,每一個都掀起一波「捷運設計就是爛」的討論風潮,在社群網路上不斷的被轉貼、討論。

介面設計的兩難:易讀或美觀?北捷官方路線圖並沒你想的那麼「垃圾」,日本鄉民版也沒那麼「完美」
上圖:南京復興站三、四號出口為節省人行道空間而將出口設計為單行道,卻被質疑為愚蠢設計。(引用自蘋果日報

我對於這些討論其實是不太喜歡的,因為我非常討厭不先思考「為何要這麼做」就直接先否定台灣、罵台灣鬼島、要求台灣向國外學習的說法,但很不幸這些常常都是社群網站上的主流言論。今天我就從台北捷運官方推出的路線圖以及日本鄉民繪製的路線圖來互相比較,探討到底兩者之間在使用者介面設計上有何不同、兩者各有何優缺點,希望大家能做個參考並想想為何兩者的設計會如此不同,而不一味地認為台灣應該向國外學習,並不是國外的月亮就比較圓啊!

--

北捷官方路線圖反映真實路線位置,日本鄉民版較著重路線轉乘交錯位置
介面設計的兩難:易讀或美觀?北捷官方路線圖並沒你想的那麼「垃圾」,日本鄉民版也沒那麼「完美」
大家曾經想過為什麼我們的捷運圖都是彎彎曲曲的嗎?這是因為北捷官方的路線圖反映的是真實的地圖路徑,如果你把他跟台北地圖放在一起,你會發現北捷的路線圖跟真實世界的路線位置是非常相近的,不管是文湖線的大曲折、或是竹圍、關渡附近的曲線,都反映出真實世界的地圖路徑。

介面設計的兩難:易讀或美觀?北捷官方路線圖並沒你想的那麼「垃圾」,日本鄉民版也沒那麼「完美」
但日本鄉民版本的地圖就不是這樣了,除了一些較大的方向轉折之外,基本上日本版的路線圖還是以「線路路徑」為主要設計方向,著重於線路的交叉點與相對方向,但對於捷運線路在真實地圖上的還原性就不是那麼高。

介面設計的兩難:易讀或美觀?北捷官方路線圖並沒你想的那麼「垃圾」,日本鄉民版也沒那麼「完美」
或許你會想,那這有什麼大不了的嘛?確實,如果我們只需要知道某一站的前後面有哪些站點,那麼日本鄉民版的地圖不僅夠用,更大的字體與轉乘點位置標示絕對大勝台北捷運那字體小不拉嘰的設計。但如果你仔細對照台北捷運官方路線圖與真實世界的地圖,你會發現不僅官方版路線圖反映了真實世界的路線曲折,甚至連站點的相對位置都是以真實世界為根據所繪製的!以上圖為例,在路線圖上信義安和剛好位於忠孝敦化與國父紀念館中間,而在真實世界中信義安和路口也確實是在忠孝敦化與國父紀念館之間。這對於需要下車走路到特定地點的乘客來說特別實用,不僅能提供相對位置的參考,同時也能在一定程度上反映兩站之間的相對距離。

介面設計的兩難:易讀或美觀?北捷官方路線圖並沒你想的那麼「垃圾」,日本鄉民版也沒那麼「完美」
另外一個明顯的地方就是動物園站與貓空纜車之間的設計,官方版本不僅把貓空纜車跟動物園兩站分開,且在圖面上標示了「350 公尺」的文字,讓大家知道動物園跟動物園站不僅分開來,而且距離還有點遠。但日本鄉民版就沒有著重這件事,僅讓大家知道動物園這站是一個轉乘點,但對於真實世界的路線則沒有更詳盡的指示。簡單說,台北捷運官方版在設計上「著重了真實路徑位置的呈現」,日本鄉民版則「著重轉乘路徑位置的呈現」,兩者的設計各有其著重的方向與目標,並沒有誰比較優秀的問題在,只能說各取所需了。

介面設計的兩難:易讀或美觀?北捷官方路線圖並沒你想的那麼「垃圾」,日本鄉民版也沒那麼「完美」
上圖:北捷官方路線圖不僅反映真實世界的路線折彎,連在哪個位置過河都有明確標示(圖面上最淡的灰線就是河流)

--

圖示差異:官方以圖示搭路線,日本鄉民以路線代表一切
介面設計的兩難:易讀或美觀?北捷官方路線圖並沒你想的那麼「垃圾」,日本鄉民版也沒那麼「完美」
在寫這篇文章之前,我稍微訪問了一下我的朋友們,問問他們為什麼覺得台北官方版本的比較難懂。得出的結論大同小異,都在於「標示」這個問題上。台北捷運將捷運線路與特定站點用路線與圖示標記,例如高鐵站、台鐵站等都用圖示標記。日本鄉民版則無論是不是捷運都一律以「線路」來標記,不管是台鐵或高鐵這些不在捷運系統內的線也都畫在一起,利用線路的交錯來標示台鐵站、高鐵站的位置。

介面設計的兩難:易讀或美觀?北捷官方路線圖並沒你想的那麼「垃圾」,日本鄉民版也沒那麼「完美」
其實會出現這樣的差異主要在於台北與東京線路的設計不同,在東京有非常複雜的火車、電車、地鐵網路且地域範圍遠大過台北/新北市,因此不管是東京都交通局或是各家鐵路系統商推出的線路圖,都會把所有的線路不分是否為捷運系統都畫在地圖上。反觀台北一開始就是把台鐵與捷運兩大系統分開繪製,加上除了幾個新北市的城鎮之外,在台北只有萬華、南港、松山、台北車站等幾個站點有台鐵停靠,因此台鐵在臺北市內移動日常的交通網路中本身就不是那麼受到重視的一條線路。此外,北捷官方路線圖是來自「台北捷運局」的官方路線圖,因此把捷運畫得很清楚、台鐵草草帶過其實也是他們讓你覺得「還是搭捷運好了」的一種手段,這點在東京各大鐵路系統商推出的線路圖中也可看到類似狀況,其實就是很單純的商業考量罷了。

介面設計的兩難:易讀或美觀?北捷官方路線圖並沒你想的那麼「垃圾」,日本鄉民版也沒那麼「完美」
上圖:台北捷運官方圖其實也是有標示台鐵路線,只是弄得淡淡的所以很多人都沒看出來

--

北捷官方以美觀為考量,日本鄉民版以「易讀」為考量
介面設計的兩難:易讀或美觀?北捷官方路線圖並沒你想的那麼「垃圾」,日本鄉民版也沒那麼「完美」
在製作印刷品有一個兩難議題:內文字太大不美觀,字太小看不清楚,到底要好看還是易讀?這是平面設計的一大難題。在這次的轉乘標示中有一個很大的問題,就是很多人認為北捷官方的圖在轉乘方面設計不清楚,但我們仔細觀察一下,台北捷運官方圖跟日本鄉民圖有什麼不同呢?其實就是在「轉乘點」的大小設計上。

介面設計的兩難:易讀或美觀?北捷官方路線圖並沒你想的那麼「垃圾」,日本鄉民版也沒那麼「完美」
北捷犯了一個錯誤,就是認為「轉乘點只要長得跟其他點不一樣,使用者就看得懂」。因此北捷把轉乘點用雙圈圈標示,而不是用更大、或是更明確且形狀不同的圖示來註明。反觀日本鄉民版的路線圖直接用好大好大的方塊把可以轉乘的站點標示出來,雖然造成整張路線圖看起來過度壅擠、不美觀,但卻也創造了更高的易讀性,讓使用者能更快速的找到轉乘點位置。

介面設計的兩難:易讀或美觀?北捷官方路線圖並沒你想的那麼「垃圾」,日本鄉民版也沒那麼「完美」
在轉乘點的設計上,日本人在日常生活中有著台灣人幾年內都無法比得上的「熟悉感」。上圖是東京都的路線總圖,裡面超過三條線轉乘的轉乘點比比皆是,甚至還有五線共構的超大站「大手町」,因此不管是在轉乘點的標示上、或是對於轉乘方式的判讀能力都比我們高上不少。反觀台北一直到松山線啟用之後才開始出現「比較複雜」的轉乘機制,因此大家會覺得麻煩、很爛、看不懂其實也是很正常的事情。

--

其實設計這種東西就是這麼一回事,每個設計都無法同時滿足所有人的口味,這就是為什麼同樣一塊綠格子布在某些人眼裡是綠豆糕、在某些人眼裡又是棋盤了。

「台北捷運在轉乘點設計上有著圖示過小、標示相對不明確等問題,而這些恰好都是日本鄉民版路線圖的優勢;相較於日本鄉民版的地圖,北捷官方圖卻擁有日本版所沒有的畫面整潔度、留白、文字排版美觀性、以及對真實地理位置的反映等特色。」

兩者設計各有千秋,著重的使用者體驗也有很大的不同,因此我們無法說誰優誰劣,就我這個看一眼就知道怎麼轉乘的人來說,設計美感永遠重於一切,所以覺得日本版地圖根本醜爆;但對於本來就搞不清楚要怎麼轉乘的使用者來說,日本版地圖卻用最明確的標示解決了他們的大麻煩,因此覺得北捷官方版根本廢渣,說穿了,就是使用者著重的觀點與設計者所在意的設計元素不同罷了,真的沒有誰該學誰的問題,硬要說該學誰 ... 大概就是學芬蘭赫爾辛基,蓋一條線就好,轉乘點只有一個。

介面設計的兩難:易讀或美觀?北捷官方路線圖並沒你想的那麼「垃圾」,日本鄉民版也沒那麼「完美」
上圖:大概芬蘭赫爾辛基的地鐵就沒有這種爭議了吧...(圖片來源:維基百科


延伸閱讀
達到宣導且讓人想收藏的東京地鐵禮儀海報
韓國地鐵裡的車廂雜貨店
【讀者投稿】不是老弱婦孺,就不需要博愛座?


大人物噗浪」跟「大人物臉書」跟「大人物G+」 你....還沒加嗎?
若想分享創意或新聞訊息,歡迎寄至[email protected]

------本文經授權引用自友站 癮科技 ------

陳寗
陳寗

興趣和專業完美結合,凡事悠游自得的樂天派。 音響、攝影、3C 與蘋果的狂熱者,專業科技新聞作者,對科技發展具有超高敏感度。 正職是致力於整合資訊與教育,並以此改良教育環境的博士研究生,深信「科技是台灣教育的唯一救贖」。

【台灣旅行】老外來台北不會錯過但你可能不會去的景點

【生活玩物】全部都想帶回家♥ 迪士尼米奇系列電暖器

推薦閱讀

更多網路潮流

更多陳寗

大人物 大人物小明

多讀一篇生活靈感