UX 案例分享-JFK AirTrain 的告示螢幕再設計

閱讀時間約 3 分鐘
圖片來自 Adam Fisher-Cox
Adam Fisher-Cox 是一位設計師,最近看到他分享與甘迺迪國際機場合作改造 JFK AirTrain 告示螢幕的案例,覺得很值得借鏡,在這裡摘要這個設計案的思考過程分享給大家。
JFK AirTrain 相當於台灣的桃園機場捷運,做為甘迺迪國際機場對外的捷運系統,和市內的捷運系統最大的差異是,JFK AirTrain 主要的乘客是來自於各個航班的旅客,整個設計案的假設情境也是根基於此,這些旅客絕大多數來自外地,對甘迺迪機場鄰近城際間的運輸路線並不熟悉,甚至對 AirTrain 的路線與班次也是陌生的,在這樣的假設下,如何讓陌生的旅客快速的掌握到 AirTrain 的班次與對外路線就會是這個任務的目標與挑戰。

版面重構

JFK AirTrain old screen
圖片來自 Adam Fisher-Cox
JFK AirTrain screen
圖片來自 Adam Fisher-Cox
對比同樣是位於八號航站的告示螢幕,舊的設計顏色太過花俏,版面也過於雜亂,很難讓人在幾秒內迅速獲得路線與班次資訊,經過重構後的新設計更貼近現代化的設計風格、減少了裝飾性元素(文字藝術師、過多的色彩等),也重新安排了佈局,讓旅客更關心的資訊(轉乘站、接駁運輸)佔有最多的空間、放大標示旅客當前所在的站點,剩下的空間留給顯示班次資訊,這些改變對一位初來乍到的旅客,顯然是更清晰易懂的。

取捨

JFK AirTrain master map A
圖片來自 Adam Fisher-Cox
JFK AirTrain master map B
圖片來自 Adam Fisher-Cox
在新版面的設計思考上,設計師也做了取捨,雖然上圖 A 版的設計更符合實際的地理位置,軌道也更符合實際的走向,但這對初心者來說卻可能是難以理解的,特別是在八號航站、一號航站、Federal Circle 三站之間的三角區域,不論是那行進方向混淆的紅綠線,或是環狀黃線,旅客大概都需要花上幾分鐘時間在腦中盤旋一遍才能確定自己要搭的路線,相對的 B 版則打破了貼近現實的框架,改用更簡單明確的線條和方向指示來引導旅客,由醒目的「YOU ARE HERE」開始引導旅客的視線由左至右的掃過,沿路找到自己的下一個目的地,B 版的環狀黃線也頗具巧思,刻意在七號和八號航站間做出間隔卻又留個小尾巴,讓旅客知道黃線的行進方向又不會迷惑於沒有起終點的圓環。

結語

這次分享的 JFK AirTrain 告示螢幕設計案例,上面的文摘只涵蓋了原文內容的一部分,對案例或設計師有興趣的朋友,可以閱讀下面連結的原文了解更多的幕後故事。
在產品設計的理念上,設計師 Adam Fisher-Cox 有許多和我們不謀而合的地方,在流程上,我們都重視情境的擬定並以情境為出發點去追求產品在這個情境下的表現,在機場的案例,目標情境是滿足初來乍到的旅客的運輸需求,他們正趕著往下一個目的地前進;在版面資訊上,我們也都有所取捨,取捨之間的平衡,同樣是取決於情境的設定,在機場的案例,為了能讓旅客們更迅速的讀取所需要的資訊,路線圖被刻意的捨去某些次要資訊,這種做法其實在大眾運輸界相當普遍(桃機捷運路線圖也是同樣的設計),民眾也習以為常,但在別的產業,我們就需要花費更多的「巧思」來構思出高效又簡潔的產品頁面,關於我們對 POS 產品的設計原則,有興趣的朋友可以看看另外一篇〈談 POS 設計背後的原則〉,裡面有更多我們對於 POS 設計的基礎原則。
為什麼會看到廣告
13會員
64Content count
Where I go and what I get.
留言0
查看全部
發表第一個留言支持創作者!
Leon的沙龍 的其他內容
介紹一下 MailPoet 和它的發信設定。
本文描述 Plesk / Cloudflare / Lightsail 混合架構下的一些好像很安全,令人感到安心的安全規劃。
建立資安意識絕對只會是 top-down 的策略,頭家不對內宣示對資安的重視程度與相關教育作為,就不可能期待員工會有相對的資安意識。
Jamstack 是個描述前後端分離下的字彙,因為老外就愛發明新字,所以這篇我們來用 Jamstack 的角度來看前後端分離。
圖片來自 Nilesh Thonte 只有 LaTeX 能打出優美、結構優良的文件的神話早就破滅了,那些期刊出版商只用 LaTeX 範本也是完全故步自封的作法,從一篇  paper  賣幾十塊美金就看得出來,做研究的也不是它們憑什麼賣這麼貴,它們也只會把你的成果轉寄給大師評而已,沒跟它簽約的個人戶誰
圖片來自 Julien G. 這一篇文談談揪竟為什麼我要買 Mac。 話說我有一台從大三至今用了五年以上的電腦,這台聯強的筆電作業系統當然是  Windows,不過我既不用 IE,也不用 Office,我慣用的瀏覽器以前是 Firefox,後來是 Google Chrome(←  因為實在是太快了
介紹一下 MailPoet 和它的發信設定。
本文描述 Plesk / Cloudflare / Lightsail 混合架構下的一些好像很安全,令人感到安心的安全規劃。
建立資安意識絕對只會是 top-down 的策略,頭家不對內宣示對資安的重視程度與相關教育作為,就不可能期待員工會有相對的資安意識。
Jamstack 是個描述前後端分離下的字彙,因為老外就愛發明新字,所以這篇我們來用 Jamstack 的角度來看前後端分離。
圖片來自 Nilesh Thonte 只有 LaTeX 能打出優美、結構優良的文件的神話早就破滅了,那些期刊出版商只用 LaTeX 範本也是完全故步自封的作法,從一篇  paper  賣幾十塊美金就看得出來,做研究的也不是它們憑什麼賣這麼貴,它們也只會把你的成果轉寄給大師評而已,沒跟它簽約的個人戶誰
圖片來自 Julien G. 這一篇文談談揪竟為什麼我要買 Mac。 話說我有一台從大三至今用了五年以上的電腦,這台聯強的筆電作業系統當然是  Windows,不過我既不用 IE,也不用 Office,我慣用的瀏覽器以前是 Firefox,後來是 Google Chrome(←  因為實在是太快了
你可能也想看
Thumbnail
1.加權指數與櫃買指數 週五的加權指數在非農就業數據開出來後,雖稍微低於預期,但指數仍向上噴出,在美股開盤後於21500形成一個爆量假突破後急轉直下,就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後,週二或週三開始有無買單進場支撐,在沒有明確的反轉訊號形成前,小夥伴盡量不要貿然抄底,或是追空
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
The Metaverse and Extended Reality (XR) are rapidly emerging as the next frontier in digital interaction, blending the physical and virtual worlds...
Thumbnail
本文討論UX設計師面試中的常見問題,並提供有效的回答建議。這些問題涉及個人介紹、職位申請動機、貢獻、擅長項目、薪酬期望、職業發展計劃等。
Thumbnail
歡迎來到 UX(用戶體驗)設計顧問的世界!每一天,我們像是探險家般,深入用戶的心智地圖,解開產品與服務中的謎題。想知道如何讓一天的工作既有成就感又富有創意嗎?讓我帶你一探究竟!
Thumbnail
在設計的世界裡,字體遠遠不止是文字的表達,它們是情感的傳遞者,是風格的塑造者。選擇正確的字體對於達成溝通目的至關重要。一個不恰當的字體選擇可能會讓你的設計失去本應有的魅力。為此,我們在這裡推薦一系列與不同情緒相匹配的字體,讓你的設計作品更加精準地傳達出想要的感覺。
Thumbnail
設計師經常尋找可以提升工作效率和創意的資源。幸運的是,Figma社群總是樂於分享,這裡我們整理了一些免費的Figma檔案和設計資源,幫助你在App/ 網頁設計界面(UI)和呈現方面更上一層樓。
Thumbnail
加入商業思維學院3個月,就能把學到的東西運用在工作中。而6個月後參加產品經理學習營,還入圍Final Pitch拿到嘖嘖 Manny 老師的評審最愛獎,因此想和大家分享! 推薦給這些朋友: 持續在設計領域努力,最近卻有點茫然 對產品有熱情,卻找不到機會實 過去買線上課的糟糕經驗,導致現在購課都很猶豫
Thumbnail
What UX topic will you choose for a social good project? What's gamification mindset in UX Design? Check out SkillEX app and find out!
Thumbnail
Can a complete UX Design newbie finish an app design after taking Coursera's Google UX Design courses? Only true museum lovers will know!
Thumbnail
許多剛學習UX的朋友,對於訪談這件事情聞之色變,有的人會說自己個性內向不適合訪談,有的人會說訪談要受過訓練的專家才有辦法進行,其實訪談對於產品設計師來說,是一個值得長期投資的UX技能,今天先來聊一下大家為什麼覺得很難。 首先最常經歷的一個狀況,就是訪談時一開口,腦袋就當機,那你知道為什麼會當機嗎?
Thumbnail
最近收到了一封學生的信,詢問在職場中UI Designer是什麼?想在公司建立一套基本的流程,這張圖片應該許多人都看過,裡頭有很多專業的名詞,以及像金字一樣往上堆疊的順序,在討論工作流程前,我們一樣先來了解每個詞彙代表什麼、以及它存在的目的是什麼。 Us
Thumbnail
1.加權指數與櫃買指數 週五的加權指數在非農就業數據開出來後,雖稍微低於預期,但指數仍向上噴出,在美股開盤後於21500形成一個爆量假突破後急轉直下,就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後,週二或週三開始有無買單進場支撐,在沒有明確的反轉訊號形成前,小夥伴盡量不要貿然抄底,或是追空
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
The Metaverse and Extended Reality (XR) are rapidly emerging as the next frontier in digital interaction, blending the physical and virtual worlds...
Thumbnail
本文討論UX設計師面試中的常見問題,並提供有效的回答建議。這些問題涉及個人介紹、職位申請動機、貢獻、擅長項目、薪酬期望、職業發展計劃等。
Thumbnail
歡迎來到 UX(用戶體驗)設計顧問的世界!每一天,我們像是探險家般,深入用戶的心智地圖,解開產品與服務中的謎題。想知道如何讓一天的工作既有成就感又富有創意嗎?讓我帶你一探究竟!
Thumbnail
在設計的世界裡,字體遠遠不止是文字的表達,它們是情感的傳遞者,是風格的塑造者。選擇正確的字體對於達成溝通目的至關重要。一個不恰當的字體選擇可能會讓你的設計失去本應有的魅力。為此,我們在這裡推薦一系列與不同情緒相匹配的字體,讓你的設計作品更加精準地傳達出想要的感覺。
Thumbnail
設計師經常尋找可以提升工作效率和創意的資源。幸運的是,Figma社群總是樂於分享,這裡我們整理了一些免費的Figma檔案和設計資源,幫助你在App/ 網頁設計界面(UI)和呈現方面更上一層樓。
Thumbnail
加入商業思維學院3個月,就能把學到的東西運用在工作中。而6個月後參加產品經理學習營,還入圍Final Pitch拿到嘖嘖 Manny 老師的評審最愛獎,因此想和大家分享! 推薦給這些朋友: 持續在設計領域努力,最近卻有點茫然 對產品有熱情,卻找不到機會實 過去買線上課的糟糕經驗,導致現在購課都很猶豫
Thumbnail
What UX topic will you choose for a social good project? What's gamification mindset in UX Design? Check out SkillEX app and find out!
Thumbnail
Can a complete UX Design newbie finish an app design after taking Coursera's Google UX Design courses? Only true museum lovers will know!
Thumbnail
許多剛學習UX的朋友,對於訪談這件事情聞之色變,有的人會說自己個性內向不適合訪談,有的人會說訪談要受過訓練的專家才有辦法進行,其實訪談對於產品設計師來說,是一個值得長期投資的UX技能,今天先來聊一下大家為什麼覺得很難。 首先最常經歷的一個狀況,就是訪談時一開口,腦袋就當機,那你知道為什麼會當機嗎?
Thumbnail
最近收到了一封學生的信,詢問在職場中UI Designer是什麼?想在公司建立一套基本的流程,這張圖片應該許多人都看過,裡頭有很多專業的名詞,以及像金字一樣往上堆疊的順序,在討論工作流程前,我們一樣先來了解每個詞彙代表什麼、以及它存在的目的是什麼。 Us