4×
資訊同時競爭注意力
時間、票價、業者與剩餘座位都很重要，但它們需要清楚的優先順序，才能支持快速比較。
UI/UX · Transportation · Mobile Ticketing
Integrated Ticketing Experience
讓購票到通關，成為一段連續旅程。
整合跨業者的班次查詢、票價比較、付款與電子票券，打造適合移動情境的臺北轉運站手機通關體驗。
Industry交通／票務
PlatformMobile App
RoleUI/UX Design
ScopeService Flow＋Interface
Core JourneySearch to Boarding
ExperienceIntegrated Ticketing
01 / CHALLENGE
複雜的不是購票，而是不斷切換脈絡。
跨業者的班次、票價、付款與票券資訊分散在不同層級；使用者卻必須在有限時間內完成搜尋、比較與決策，並在搭乘現場迅速找到通關資訊。
1
一條需要被完整銜接的旅程
從搜尋到 QR 通關，讓每個步驟都承接上一個選擇，而不是把功能拆成彼此孤立的頁面。
核心設計命題如何在高資訊密度與時間壓力並存的情境中，維持清楚、可比較且可預期的操作體驗？
02 / USER FLOW
把每個選擇，串成一條可預期的路徑。
搜尋條件會延續到班次、乘客與付款階段；完成購票後，電子票券自然成為搭乘現場的主要入口。
01搜尋行程
02比較班次
03路線詳情
04乘客資料
05訂單確認
06完成付款
07電子票券／通關
03 / DESIGN DECISIONS
不只展示畫面，也展示為什麼。
四個產品決策分別回應比較、理解、確認與通關情境。每一組以使用情境、使用者需求、設計回應與完整介面，建立可看見的設計邏輯。
Decision 01
在幾秒內，比較不同班次。
購票者需要同時理解時間、價格、業者與行程狀態。設計的任務不是放入更多資訊，而是讓比較順序保持一致。
資訊密度高，而且每個選項看起來都同樣重要。
先確認能否趕上，再衡量抵達時間與價格。
讓視線不必在不同卡片間重新尋找資訊。
Information hierarchy
時間先回答能不能搭上；價格再協助選擇。
放大並固定時間位置，形成第一層掃讀節奏。
以交通橘強化比較，但不超越時間資訊。
品牌提供快速辨識，但不超越時間與價格。
查詢條件持續可見，避免在比較途中失去脈絡。
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
座位與月台完成搭乘前的最後準備。
04 / WALKTHROUGH
介面沿著旅程出現，而不是按頁面種類排列。
從行程規劃到現場通關，每個畫面都回應當下最重要的決策與資訊需求。
01
從今天的行程開始
首頁先回答「下一班是什麼」與「我要去哪裡」，把高頻操作與即將出發行程放在最短距離內。
02
在同一套規則下比較班次
時間、價格與業者保持穩定位置；橘色只用於價格、選取狀態與關鍵操作。
03
把路線變成可掃讀的時間軸
以站點、抵達時間與目前狀態形成單一路徑，減少傳統時刻表帶來的水平掃描負擔。
04–05
先補齊乘客，再確認價格
乘客資料與訂單摘要分開承擔輸入及核對，讓使用者在付款前仍能清楚發現錯誤。
06
付款只保留最後一次確認
行程、乘客與費用在同一頁完成核對，固定底部 CTA 讓主要動作始終可見。
07
需要通關時，票券就是首頁
QR Code 位於視覺中心，班次、時間、座位與月台保持在同一張票券中，降低搭乘現場的操作成本。
05 / KEY MOMENTS
三個關鍵時刻，建立整段服務的信任。
旅程開始時提供方向、比較時提供秩序、搭乘時提供確定性。三個時刻共同定義票務服務的使用品質。
01
ORIENTATION
ORIENTATION
快速找到方向首頁
02
COMPARISON
COMPARISON
有效比較選項班次結果
03
CONFIDENCE
CONFIDENCE
安心完成通關電子票券
06 / UI SYSTEM
為移動情境建立高辨識度的視覺語言。
深藍負責信任與資訊層級，交通橘只出現在需要立即辨認的動作、價格和狀態。
Primary#00193C
Action#F87B00
Surface#FBF9F8
Error#BA1A1A
Noto Sans TC / Display
下一班，14:30 出發。
Inter / Data
14:30 · $280 · 05A
Body / Information
資訊必須在明亮車站、昏暗車廂與行走情境中保持清楚。
07 / EXPERIENCE PRINCIPLES
一致的服務品質，來自每個細節的共同方向。
從資訊呈現、操作回饋到搭乘現場，所有設計都遵循四個體驗原則。
PRODUCT EXPERIENCE PRINCIPLES
讓時間、票價、業者與狀態保持固定順序，降低比較成本。
讓已選條件延續到下一步，避免使用者重複理解或輸入。
重要操作與狀態以明確色彩、文字和位置提供即時回應。
將通關所需資訊集中在電子票券，支援移動與單手操作。
Design Outcome
好的票務體驗，不只讓人買到一張票，更讓每個人清楚知道下一步。
從跨業者班次比較、乘客與付款資訊，到現場使用的電子票券，這套設計以連續脈絡和清楚層級，支持使用者完成一段有時間壓力的行動旅程。
Start a project