

改善即時路況查詢體驗,讓使用者在行車途中能更快獲取資訊。
幸福公路 APP 是交通部公路局提供的即時路況查詢工具,用來幫助用路人掌握全台道路資訊。
我在今年四月獨自單車環島時,常透過它確認路況,避免因道路封鎖影響行程,也會利用即時影像替自己留下紀錄。然而實際使用過程中,發現介面設計不夠直覺,資訊顯示也顯得不足與混亂。這些痛點促使我決定進行 Redesign,希望能讓這款工具更符合用路人的真實需求。
本專案依循設計思考流程展開,從蒐集使用者經驗與評論開始,逐步歸納問題與需求,進而定義設計目標,再透過資訊架構與使用者流程的發想,逐漸發展出具體的介面設計與驗證。

由於幸福公路 APP 的使用者相對分散,且我無法接觸到第一線駕駛族群,因此使用者研究的資料來源以 自身實際使用經驗 與 App Store / Google Play 的公開評論為主。經過整理與歸納後,列出下面主要幾個問題點:功能不足、即時性不佳,以及使用體驗不直覺等等。

.UI 操作不直覺
.路況資訊更新延遲
.影像查詢指引不明確
.缺乏導航功能
.缺乏夜間模式切換設定
.App 穩定性不足,易閃退
透過使用者評論與自身經驗的整理,可以歸納出幸福公路 App 在介面設計與功能體驗兩大面向上存在的核心問題。以下將這些痛點條列與拆解,作為後續設計方向的依據:
(後面兩點屬於技術與後端的挑戰,非本次 Redesign 範疇,本專案將聚焦於 UI/UX 層面。)
在分析現有的幸福公路 App 介面時,發現存在多個影響使用體驗的問題,例如多餘的啟動畫面、色彩使用不當、資訊層級不清與介面老舊等。這些痛點將作為 Redesign 的切入點,指引後續的設計方向。




為了更具體呈現這些問題如何影響用路人,我透過使用情境描述 (User Scenario) 將常見的需求與痛點放入實際場景中,模擬不同類型使用者在日常使用幸福公路 App 時可能面臨的狀況。




根據使用者研究、問題分析與使用情境,我歸納出以下設計目標,作為本次 Redesign 的方向。




在確立設計目標後,我重新梳理了幸福公路 App 的資訊架構,透過清晰的層級關係與分類方式,讓使用者能更直覺地找到所需資訊。

在完成資訊架構後,我進一步繪製了四個核心 User Flow,模擬使用者在不同情境下的操作流程。這些流程有助於確認設計邏輯是否順暢,並確保功能能夠滿足實際需求。




建立使用者流程後,我開始繪製草稿與線框稿,把發想具體化,並快速驗證資訊架構與操作流程。在這個階段我針對架構與互動細節反覆迭代,最後選擇 Flow1(查詢即時路況) 與 Flow2(導航與路況通知) 作為展示,因為這兩個情境最能突顯本次 Redesign 的核心價值。





使用者可以依照國道、快速道路或快速篩選方式,迅速找到對應路段的攝影機與路況資訊。在介面設計上,參考了其他路況 App 的上下滑動檢視模式,並透過資訊簡化呈現,提升了瀏覽效率與可讀性。同時,使用者也能透過搜尋或單項選單快速定位,查看南下與北上的路況影像與時速數據。最後,在攝影機列表中清楚標示異常路況或事故訊息,幫助駕駛即時掌握路況,降低使用操作的時間成本。



使用者可以透過首頁地圖搜尋目的地,即時取得距離、路況、天氣與延誤資訊。規劃完成後,系統會在地圖上顯示完整路線,並於下方卡片呈現摘要,方便快速掌握旅程狀況。點擊「開始導航」後,將切換至 Google Maps 進行導航。




在導航過程中,幸福公路提供分層式的 bottom sheet:
.收合狀態:僅顯示核心資訊(距離、天氣、延誤),便於快速確認。
.半展開狀態:顯示車流、事故、施工等即時資訊,幫助駕駛掌握路況。
.全展開狀態:提供完整細節(含天氣條件、CCTV 影像等),讓使用者能深入查看。此設計能依需求快速切換資訊層級,減少駕駛分心。


當路段出現事故或壅塞時,幸福公路會即時推播提醒。通知會提供三種操作選項(改道、維持原導航、稍後提醒),其中「改道」作為主要行動,讓駕駛快速決策。若選擇改道,系統會自動重新規劃並顯示新路線,同時同步至 Google Maps 導航,確保行程不中斷。
在進入高保真設計前,我先建立了設計系統,定義了顏色、字體、間距、按鈕、圖標等基礎元素,並規範了常用元件(如導航列、tab bar、卡片、清單等)的狀態與使用方式。透過設計系統,能確保整體介面的一致性與延展性,同時在日間與夜間模式之間能快速切換,提升設計維護與開發效率。


我將前期的草稿與線框稿進一步視覺化,建立完整的色彩系統、字體層級與元件樣式,並套用至實際畫面。這些高保真設計稿不僅展示了介面的最終風格,也確保了日間與夜間模式的一致性與可讀性。
















夜間模式以 深色背景搭配高對比的文字與圖示,降低使用者在夜間駕駛或低光源環境中的視覺負擔。





在完成高保真設計稿後,我將 Flow1 與 Flow2 的核心操作流程製作成影片,模擬使用者在實際情境下的操作樣貌以更直觀方式呈現介面與功能的串聯。
在前段影片中,我展示了從路線規劃到跳轉 Google Maps 開始導航的流程。接下來這三張圖片,則模擬了導航途中出現事故通知的互動情境:駕駛人可即時收到幸福公路的路況提醒,並快速選擇是否改道或維持原路,確保行駛決策更有效率與安全。


在專案進行的過程中,我深刻體會到設計並非單純的畫面美化,而是必須時時站在使用者的角度去思考,透過反覆的實驗與迭代來驗證想法。同時,也需要在發想階段就考量技術的可行性。
例如,本專案中我提出「幸福公路能否在背景追蹤 Google Maps 導航,並即時推送路況提醒」的設計構想,但這部分涉及技術限制,必須透過與工程師的充分討論與溝通,確認可行性後再展開後續設計作業。這樣的過程讓我更加理解,設計與工程的協作是產品能否落地的關鍵。
此外,本專案也讓我體會到設計規範與系統化思維的重要性。透過遵循設計規範、採用原子設計思維,並建立一套設計系統,不僅能讓畫面在一致性與延展性上更具規模化,也能讓後續團隊在維護與開發時更有效率。這讓我認識到,好的設計並不是單一畫面的精美,而是整體系統能夠長期被使用、維護並持續優化。
在未來,我希望能持續深化自己在UI/UX 設計流程、使用者研究與互動設計方面的能力,讓設計不只解決問題,也能帶來更具體的價值與使用體驗。