[閒聊] 手機用的北捷路線圖

[but (←殺千刀的UAO始作俑者)]

圖文版 http://but.tw/2014/11/phone-metro-map/

日鐵連一張不經意的路線圖，經過台灣媒體過度的渲染，竟然變成一場大
鬧劇，有人擁護日本版，有人擁護北捷版，好像非分出一個勝負不可。也
激起一堆網站試圖從一堆觀點來分析這兩張路線圖，替某一方站台。但讀
著讀著，我覺得總是搔不到癢處。這些分析根本沒有先搞清楚後頭的背景
就天花亂墜在比較（跟電視上的名嘴們差不多）。

有人批評沒英文、有人批評轉乘站畫太大很礙眼、有人批評塞得太擠沒有
喘息….

直接就講清楚吧，就好不好看來說，當然是北捷版的好看。但這並不是這
裡的重點。日鐵連這個路線圖是同人誌「日式台灣時刻表」裏面附的臺北
捷運圖，畫面只有7x10cm左右大小，大約是A7左右，跟北捷路線圖的比例
相差極大。

「設計」跟「藝術」是不一樣的，藝術是為了追求美，但設計是先設定要
解決的問題，而在兼顧美觀與機能的要求下，去解決問題。
以日鐵連這張圖來說，「在一小張紙上呈現」是最重要的功能性。A7尺寸
是大前提的情況下，這些批評顯得全部不知所云。

總之，我想先確定用途是什麼，再來討論好壞，是比較健康的方式。

有人批評為什麼日鐵連這張沒有標示英文。但以一張以「小巧」為最主要
目標的路線圖來說，英文當然不必要。標示出中英文重複的資訊，就跟最
初「精簡」的目標衝突了。如果需要考慮外國人需求，應該做的是另外做
一份英文版。

最好笑的是，剛好就在這個節骨眼上，北捷還真的忽然發新聞稿說提供民
眾下載手機用的路線圖。這張圖根本就是原始路線圖拿掉英文而已，文字
還是小得半死，實在不知道憑什麼說適合在手機上觀看。看來大家還真是
沒冤枉北捷，完全沒罵錯。


標示站名的方式

不過看網友的討論，似乎大家對站名的標示方式很有意見。日鐵連版，站
名橫排、直排交錯，有人嫌相當混亂；另外轉乘站大方框的標識方式，贊
成派認為這樣轉乘點比較明顯容易換車，反對派則認為這樣一條路線被切
成很多段，不連續看起來很花。而北捷版本的路線圖在松山線通車之前，
站名全部統一橫著打，這次的新版本首度用上了斜排的文字，也有人覺得
斜的字不好閱讀，「好的不學學壞的」。

雖然在 infodesign 這領域我稱不上專業，但這幾年畫過一些路線圖，我
想趁機分享一下這些標示方式，為什麼這些圖會這樣做。

站名標示最大的原則是：要跟車站一對一

車站的圓圈，通常會直接畫在路線上。應該沒有人會看到一個車站，看不
出來它屬於哪一條線。但站名就不是了，站名是寫在車站旁邊的，意外地
要讓車站跟站名視覺上一一對齊，不是一件這麼簡單的事情。

最完美的情況是：讓車站跟站名寫在一條直線上

車站與站名最好的關係是：寫在一條直線上。日鐵連的版本有的直排，有
的橫排，其實就是為了解決這個問題。

但是，交會站會是相當棘手的問題。當路線垂直交會的情況下，無論要把
站名寫成直的還是橫的，都勢必壓在線上。如果寫在左下角跟右下角，就
會失去直線關係。車站跟站名的關係連結性變弱，閱讀時需要在車站的四
周尋找站名。

悠遊卡公司最新版本的路線圖悠遊卡，請注意「台北車站」與「大安森林
公園」。如果拿掉我們對路線的既有認知，這些站名標示足以識別是指示
在哪個車站上嗎？為什麼善導寺那個車站，不是台北車站？

日鐵連的版本，乾脆用一個框來標明交會站，而把站名寫在框裡面，這是
一種替代的方案。如此一來，就沒有站名跟車站對不齊的問題，不會看錯
一對一關係。缺點是一條路線會被切好幾段。

如果無法構成直線，至少能夠淨空

那以前的北捷版本，為什麼不會有這個問題？相當重要的原因是，他尺寸
夠大。站跟站的距離可以拉開，文字又不需要太大，所以能夠取得一定的
淨空空間。當車站的四周只有一個站名時，這個車站當然就是這個站名；
當站名文字的四周，只有一個車站時，這個標示當然就是屬於這個車站。

但是這樣的做法，就是需要很大的空間取得淨空。碰到站名長的情況，站
距就會受限很大。因為是橫排的關係，在東西向的路段就會特別占空間，
例如板南線。結果北捷當時採取的做法是，上下交錯去排列這些站名。
其實以前我也常這樣做，但實用時發現並不太理想，例如要數還要搭幾站
時，就比較容易沒注意到標在另外一邊的車站。

解法：不是路擺斜，就是字擺斜

要怎麼解決這些問題呢？ 北捷最新版的路線圖，則決定把站名文字斜排
了。似乎滿多人不喜歡斜排，但我覺得這是可以接受的一種trade-off。
在還能夠閱讀的角度之內，斜排同時解決了太多問題。不止站名不容易跟
左右重疊，連續的站名得以全部排在上方，不再上下交錯。另一方面，交
會站的對齊問題也得到理想的解決，車站跟站名的關係更明確了。只是我
覺得北捷版45度傾斜似乎太斜了一點，真的讀起來比較累，我個人覺得30
度是比較能接受的。

當車站能夠與站名保持連成一直線，就可以省掉很多為了淨空留下的空間。
斜排文字的方法，對於小張的路線圖，更是實用。


給自己功課：試著畫一張手機用的路線圖

於是我也給自己這個功能，畫一張智慧型手機用的北捷路線圖。我的手機
是 HTC One (M7)，解析度是 FullHD，1080×1920。一開始設定滿足的目
標如下：

- 一個版面可以看清楚整張路線圖，不需要放大縮小，容易查詢換車。
- 看個路線圖還要橫擺手機很麻煩，希望直接做成直的版面。
- 文字儘量統一方向，不要又直又橫。
- 路線的扭曲儘量精簡一點（日鐵連那張為了標示平行轉乘，古亭一帶有
  過分扭曲）。
- 追求實用性，不要過分實驗性。

在初期的檢討中，文字完全統一方向這一點，就稍微修正了。路線保持水
平的情況下，版面又是直的，在板南線等地方，基本上不太可能不斜排文
字。一當決定接受斜排文字後，同時交會站的問題就得到解決了。不需要
使用日鐵連的方框方式，可以直接斜排在車站旁邊，也能保持良好的一對
一關係。於是加上了一條文字可以斜排的條件，設定為30度。

但我傾向交會站還是要某個程度被強調的，北捷版路線圖的轉乘站實在太
不清楚。其實北捷到今天的規模，本來就不該像以前憑印象在台北車站、
忠孝復興換車就對了。台北人該有大都會城市居民的自覺，東京人當然不
會把路線圖背在腦裡，會隨時帶著路線圖在查。台北也是，要搭不熟的路
線，查路線圖怎麼換車最輕鬆，是天經地義的。而既然如此，轉乘站一定
程度凸顯還是相當重要的。所以轉乘站用最大的字去標示。

最後畫完的版本在這裏：
http://but.tw/wp-content/uploads/2014/11/metro_map_phone.png

我想大致上滿足一開始設定的目標了。雖然還是有一些缺點，有些站名橫
的、有些是斜的。另外，有些站名壓線（如大安森林公園），不過它站名
實在太長，如果要淨空附近的路線讓文字不壓線，反而會讓路線扭曲更難
閱讀。在權衡優缺後，決定以壓線處理，我認為這是相對比較好閱讀的。

請注意明年預計通車的頂埔跟機場捷運也畫進去了，目前還沒通車。
（其實未來畫環狀線的空間也稍微預留了一點XD）

圖片是 1080×1920 大小，在 Android 上使用ES檔案瀏覽器之類的App，
可以在桌面上建立圖片的捷徑。可以當作一個精簡的北捷路線圖App用。

為什麼沒英文？

我想，以手機螢幕這用途來說，中英並排是不可能的，太浪費空間了。至
於要不要另外做英文版，我想這挑戰也相當大。

依照北捷的規定，中文站名有字數限制，最多不能超過6個字，例如「南
港軟體園區」「大安森林公園」。但英文長度是完全沒有限制的，這真的
很該死。「Taipei Nangang Exhibition Center」一行字就快塞滿半個螢
幕了，蘆洲那一排學園都市線，每個英文站名都在比賽長的，我目前還想
不到辦法排出手機用的英文版，太難搞了。

--
《字型散步》第一本討論台灣生活中文印刷字體的科普書籍。好評熱賣中！

博客來http://goo.gl/sR4W2O 讀冊http://goo.gl/wzQ8OA 誠品http://goo.gl/keeZGd

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.34.64.147
※ 文章網址: http://www.ptt.cc/bbs/MRT/M.1416756509.A.C05.html
推 wutonyuugi: 先推 智慧型行動裝置越來越普及 適合小尺寸的路線圖
→ wutonyuugi: 開發是有必要 然而電子檔案尚可拉大縮小 但像是悠遊卡
→ wutonyuugi: 名片之類(僅小弟個人試作) 或許又可討論和精進 :)
→ chewie: 推
→ chewie: 不過用黑底會在戶外環境中不太好觀看...雖然說捷運有不少
→ chewie: 室內空間 不過總是會有可能在進站前看看地圖的...
推 YellowWolf: 推
推 spiritman: 推
推 tonysdfg: 推 北捷那個實在是..只把英文移掉中文還飄在上面....
推 abc480528: 很喜歡北捷現在的路網圖風格 不過只把英文移掉的偽手機
→ abc480528: 版就真的很敷衍 尤其才剛被罵...
推 ciswww: 已收
→ but: 我是覺得自發光的手機 黑底白字 文字反而比較凸顯?
→ but: 我明天在強光下試試看好了 :)
推 all0pha765: 讚 這圖
推 leemiyinghao: 其實，有運算能力的裝置不需要路線圖吧？
推 hoyunxian: 唔喔我的版本也進去了(驚
推 wangdon: 三和國中
推 jwph: 大推這篇文章
→ but: 先感謝樓樓樓上！
→ but: 我倒是覺得，習慣看路線圖的話，手機上也沒必要非用行程規劃a
→ but: pp不可。有點殺雞用牛刀的感覺。
→ but: ....die 三和國中錯字晚上改 (死)
推 ffwind: 拜託不要黑底 辨識度很低
我覺得螢幕(RGB)環境下，黑體是比較不傷眼的。
光學環境跟印刷色環境很多特性是完全顛倒的。
印刷上，黑底白字，因為黑色墨水過多，很容易因為滲墨吃掉筆畫。
但在光學上，白色才是高能量的光線，白底黑字，文字筆畫容易被吃掉，顯得比較細。
但黑體白字，筆畫容易顯得比較粗，理論上文字會清楚一點點。
(試著在螢幕上看新細明體，理論上黑底白字會比白底黑字清晰一點)

另外，像是原生Android的畫面，幾乎也是黑底白字為主。
在Android環境下，黑體白字似乎比較自然。

既然一開始就假設這是螢幕用而不是印刷用，就決定用黑體白字了。
不過這部分，我也支持做更多實驗。

推 ddmarine: 尾站標示路線編號不錯，比官方簡潔易讀
→ but: 標在尾站省很多空間 只是1,5號線共用南港展覽館 沒辦法標
→ but: 之後環狀線的6要怎麼標 可能是個麻煩問題 (兩頭都是轉乘站)
推 hoyunxian: 我聽說螢幕用黑底可以保護螢幕，不知道是不是真的
→ hoyunxian: (理由據說是因為黑色的話螢幕就不用亮起來)
在CRT跟LED是真的，保護螢幕跟省電。
但LCD下是假的，LCD的發光原理是後面打白光，前面液晶去遮擋光線。
就算整片螢幕是黑的，其實後面的光都還在，指示全被遮而已。
（所以液晶會有漏光現象，在漆黑的房間裡，螢幕全黑還是有一點亮）。

推 ciswww: 南港展覽館用豬鼻子吧！
→ chewie: 我的想法是 無論Android或ios 黑底桌面是對應亮的app icon
→ chewie: 也就是你是辨識較大的icon而非下面的字體 但路網圖辨識
Android 系統通知畫面是黑底白字 http://i.imgur.com/a16eAPM.png
正是現在，用 MoPTT 看 PTT，也是黑底白字 http://i.imgur.com/GMCYAV2.png

→ chewie: 字體的辨識就相形重要 像東京METRO的官方APP也是以白底
→ chewie: 為主 應該還是因為考慮白底的發光量還是能幫助辨識
→ chewie: http://goo.gl/uM5y5 http://goo.gl/WXiDHJ
正是字體辨識的問題。
有沒有經驗，新細明體做的投影片，用投影機打的時候，常常模糊到無法閱讀？

光學上，高能量的部分會吃掉低能量的部分。
發光的白底能量比較高，視覺上容易吃掉黑色線條的視覺。
所以，一樣的字體，印出來看的效果會比螢幕上顯示的效果來得粗（白底）。
這在字體設計上是個經典議題。
本來印報紙很剛好的儷宋，拿到螢幕上顯示，細到閱讀很吃力。
印刷的內文普遍W3－W4，但螢幕上要W4－W5才會得到類似的效果。
甚至，蘋果用的儷黑Pro、黑體-繁，甚至是W6－W7的粗細，
拿來印刷會覺得粗得過分，但在螢幕上反而是比較好讀的。

事實上，黑底白字的投影片，新細明體會清晰不少。
這是一張實驗圖： http://i.imgur.com/hC1lTcY.png
我自己是覺得黑底上無論是線條還是文字，都比白底粗而明顯。
不知道您的看法如何？

那為什麼iOS要以白底黑字為主？
我覺得這是蘋果從第一代Mac的初衷：在電腦提供擬真、就像印刷的環境。
也就是說，就光學來說，白底黑字其實不是真正最清晰的，
就醫學來說，螢幕上白底黑字的能量太高，也是比較傷眼的。

但白底黑字能夠提供一個再現紙張的環境，不需要打破既有習慣。
我們在筆記本上喜歡用紅字強調，用黃色螢光筆劃重點。
白底黑字能夠提供一樣的情境重現，但黑底白字會打破習慣，
紅字比白字更不明顯，黃色畫重點顯得過亮。
打個比方，BBS上強調的文字可能用黃字會比紅色好，畫重點用綠線可能比較剛好。
也就是說，MacOS / iOS / Windows 的白底黑字設計，並不是易讀性的考量，
而是為了提供使用者一個擬真紙張、印刷環境的色彩模型。

之前Jedi與老貓也論戰過這個問題 (http://jedi.org/blog/archives/006102.html)

所以我覺得東京Metro使用白底黑字是合理的，
以企業的角度來說，當然是提供使用者統一的形象。
螢幕版與印刷版的色彩模型差太多，會失去企業的整體形象一體性。
但我個人設計時，必較傾向去為螢幕環境特化較佳的方案。

我剛才去大陽光下用手機試看了一下，我覺得是足夠清晰的。
當然因為手邊沒有做白底版可以作為對照組，就實驗來說是不夠完備的。
以上是我的拙見。

推 shirokii: 大推原Po！
推 lina7inverse: 已收
→ chewie: http://goo.gl/87SFEF 關於簡報可以查到很多建議 盡量避免
→ chewie: 黑底白字的簡報 這是我們實際在跟年齡層不同的年齡群對象
→ chewie: (如年紀大的業主,社區居民等)收到的意見 而字體改黑體等
Fred跟老貓一樣啊，長期在出版業的人，閱讀習慣就是白底黑字。
Jedi是醫生跟程式設計背景，看法就不一樣。

像我是程式設計師出身的，白底黑字寫程式碼太痛苦了，比較習慣閱讀黑底白字。

Fred提到的點其實有矛盾。
他後面提到，白底太亮閱讀起來會很吃力，可以考慮讓背景暗一點。
其實一樣意思，黑底白字下，白色從#FFF減到#999左右，
其實他說的錯覺效應之類問題也都可以解決。

→ chewie: 就可以解決被"吃掉"的問題 我是覺得您還是實際去陽光下實
→ chewie: 驗看看啦 我自己會避免在陽光下使用MOPTT XD
剛才在陽光下實驗的結果，正因為黑底不發光，螢幕上白字反而看起來比較明顯。

我真的覺得會認為白底黑字比較好讀，主因是習慣而不是實際上的對比清晰度。
至少實驗上， http://i.imgur.com/hC1lTcY.png ，黑底白字明顯太多了。

→ chewie: 而且會場提供的投影機無法掌握 http://goo.gl/nzW7js
→ chewie: 所以黑底白字要小心使用....
環境光太強的時候，無論黑底白字還是白底黑字，效果都不好 :(
但這麼說來，我記得Jobs的產品發表會投影片，幾乎都接近黑底白字耶。

→ chewie: Jobs可以控制會場 我們不行啊XD 嘛 總之一些意見交換囉
我晚上試試看弄個版本來實驗
（不過工程有點大，在想有沒有維護兩個版本的好方法）
※ 編輯: but (210.71.217.245), 11/24/2014 14:42:52
推 spiritman: 確實寫程式的話比較習慣黑底...白底反而覺得不易讀
→ hoyunxian: 現在好像上不去的說
推 kimchimars: 連不上呢
→ but: 美國人還沒起床 今晚應該是沒救了..... (等)
→ but: 伺服器回來了 三和國中改了 實驗用的臨時白底版放了.....
推 james732: 推
白底版做了，但壓線效果差很多。感覺需要考慮其他處理方式。
（文字加在小畫面框會顯得太雜....）
※ 編輯: but (1.34.64.147), 11/25/2014 23:57:01