時間 · 票價 · 業者 · 座位
四類資訊同時競爭注意力
它們都很重要，但需要清楚的優先順序，才能支持快速比較與決策。
UI/UX · Transportation · Mobile Ticketing
Taipei Transfer Station
從搜尋班次到拿著電子票券上車
整合跨業者班次查詢、票價比較、付款與電子票券，讓旅客在轉運站的移動情境中，仍能清楚完成每一段旅程。
- 01搜尋
- 02比較
- 03訂位
- 04付款
- 05通關
Industry交通／票務
PlatformMobile App
RoleUI/UX Design
Core JourneySearch → Boarding
01 / Challenge
複雜的不是購票，而是不斷切換脈絡。
設計焦點不在堆疊更多功能，而是重整搜尋、比較、訂位、票券與行程管理之間的資訊關係——讓旅客在時間壓力與移動中，仍能做出清楚的選擇。
一條完整旅程
從搜尋銜接到 QR 通關
讓每個步驟承接上一個選擇，而不是把功能拆成彼此孤立的頁面。
核心設計命題如何在高資訊密度與時間壓力並存的情境中，維持清楚、可比較且可預期的操作體驗？
Search with context
先看時間，再比較價格與座位。
把出發與抵達時間放在第一閱讀層，讓旅客快速縮小選擇，再確認票價、業者與座位。
02 / Design Decisions
不只展示畫面，也展示為什麼。
四個產品決策分別回應比較、理解、確認與通關。每一組以情境、需求、回應與畫面證據，建立可看見的設計邏輯。
Decision 01
在幾秒內，比較不同班次。
購票者需要同時理解時間、價格、業者與行程狀態。設計的任務不是放入更多資訊，而是讓比較順序保持一致。
資訊密度高，而且每個選項看起來都同樣重要。
先確認能否趕上，再衡量抵達時間與價格。
讓視線不必在不同卡片間重新尋找資訊。
Information hierarchy
時間先回答能不能搭上；價格再協助選擇。
出發與抵達時間固定在第一閱讀層，票價與業者依序跟上，查詢條件則持續可見。
- 01時間優先
- 02價格對照
- 03業者辨識
- 04條件延續
Decision 02
把路線，變成可以理解的時間進度。
選定班次後，使用者不只想知道停靠站，也需要確認站點順序、預計抵達時間，以及目前選擇是否符合行程。
傳統表格容易造成橫向掃描與欄位對照。
站點與時間必須形成一條連續的閱讀路徑。
使用位置、節點與狀態共同表達行程進度。
Information model
站點、時間與狀態沿著同一條路徑被閱讀。
垂直時間軸取代多欄對照，讓「從哪裡到哪裡」更容易被理解。
Fragmented comparison→Continuous progress
多欄資料需要反覆對照。
臺北轉運站 · 15:00
三重站 · 15:20
重陽站 · 15:35
台中朝馬 · 17:30
Decision 03
在付款前，建立最後一次確認。
票務交易同時包含行程、乘客與費用。設計把三類資訊延續到付款階段，讓使用者不必重新理解，也能在送出前發現錯誤。
錯班次、錯日期或錯乘客都會造成額外處理成本。
所有關鍵資訊必須在付款前被再次看見。
訂單摘要自然延續到付款，不重新排列閱讀邏輯。
→
Context carried forward
01行程持續可見
02乘客資訊不需重填
03總額與 CTA 保持一致
Decision 04
需要通關時，票券就是整個介面的中心。
排隊、移動、單手持機與環境光線都會降低操作餘裕。此刻不需要探索功能，而是迅速完成驗票並確認搭乘資訊。
多一步尋找，都可能增加通關的不確定感。
QR、班次、時間、座位與月台必須同時可見。
先通關、再確認班次，最後完成座位與月台準備。
Scan first
QR Code 佔據主要視覺區，支援立即出示與掃描。
Confirm the trip
時間與起訖站協助確認是否拿對票。
Ready to board
座位與月台完成搭乘前的最後準備。
Electronic ticket
把完成訂位，轉成準備上車的明確憑證。
票券以固定代表性 Demo 資料呈現，不代表即時營運資訊；設計重點在於通關當下，QR、班次與座位能否被立即找到。
03 / Core Journey
先把一件事做完整：從想搭車，到可以上車。
八個 Prototype 畫面串起搜尋、比較、訂位、電子票券與行程管理；三個關鍵時刻建立整段服務的信任。班次、票價與月台皆為代表性 Demo 資料。
01
Orientation
Orientation
快速找到方向首頁
02
Comparison
Comparison
有效比較選項班次結果
03
Confidence
Confidence
安心完成通關電子票券
04 / System & Principles
為移動情境建立高辨識度的視覺語言。
深藍負責信任與資訊層級，交通橘只出現在需要立即辨認的動作、價格和狀態。
Primary#00193C
Action#F87B00
Surface#FBF9F8
Error#BA1A1A
Noto Sans TC / Display
下一班，14:30 出發。
Inter / Data
14:30 · $280 · 05A
Body / Information
資訊必須在明亮車站、昏暗車廂與行走情境中保持清楚。
Product experience principles
讓時間、票價、業者與狀態保持固定順序，降低比較成本。
讓已選條件延續到下一步，避免使用者重複理解或輸入。
重要操作與狀態以明確色彩、文字和位置提供即時回應。
將通關所需資訊集中在電子票券，支援移動與單手操作。
From search to boarding
一條完整旅程，讓每個決定都有上下文。
從規劃行程、完成購票到現場通關，介面與情境始終指向同一個目標：讓旅客知道下一步該做什麼。
Design Outcome
好的票務體驗，不只讓人買到一張票，更讓每個人清楚知道下一步。
從跨業者班次比較、乘客與付款資訊，到現場使用的電子票券，這套設計以連續脈絡和清楚層級，支持使用者完成一段有時間壓力的行動旅程。
Start a project