專案背景使用者研究
問題分析
使用情境
設計目標
資訊架構
使用者流程
線框稿
設計系統
高保真設計稿
原型展示
學習與反思

嗨,我是 Charlie Lin

我熱衷於將想法化為直覺且愉悅的數位體驗。
從平面設計、動態影像出發,如今專注於以使用者為核心的產品設計,讓介面同時兼具美感與功能。

UI / UX

幸福公路 APP Redesign

改善即時路況查詢體驗,讓使用者在行車途中能更快獲取資訊。

專案背景

幸福公路 APP 是交通部公路局提供的即時路況查詢工具,用來幫助用路人掌握全台道路資訊。
我在今年四月獨自單車環島時,常透過它確認路況,避免因道路封鎖影響行程,也會利用即時影像替自己留下紀錄。然而實際使用過程中,發現介面設計不夠直覺,資訊顯示也顯得不足與混亂。這些痛點促使我決定進行 Redesign,希望能讓這款工具更符合用路人的真實需求。

設計流程

本專案依循設計思考流程展開,從蒐集使用者經驗與評論開始,逐步歸納問題與需求,進而定義設計目標,再透過資訊架構與使用者流程的發想,逐漸發展出具體的介面設計與驗證。

使用者研究

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

.UI 操作不直覺

.路況資訊更新延遲

.影像查詢指引不明確

.缺乏導航功能

.缺乏夜間模式切換設定

.App 穩定性不足,易閃退

問題分析

透過使用者評論與自身經驗的整理,可以歸納出幸福公路 App 在介面設計功能體驗兩大面向上存在的核心問題。以下將這些痛點條列與拆解,作為後續設計方向的依據:

介面與設計問題

.頁面 UI 不直覺,資訊層級不清晰
⭢ 導致使用者難以快速理解,增加查詢時間。
.夜間模式僅能依賴系統設定
⭢ App 缺乏獨立的夜間模式切換,無法滿足使用者在不同情境下的需求。

功能與體驗問題

.影像查詢指引不明確
⭢ 使用者難以快速定位 CCTV 位置,增加查詢時間與操作成本。
.缺乏與導航的結合
⭢ 用路人無法邊駕駛邊獲取路況資訊,需頻繁切換 App,增加駕駛分心風險。
.APP 未能即時更新路況
⭢ 資訊可靠度不足,駕駛人可能因此誤判路況。
.APP 程式穩定性不足
⭢ 易閃退或卡頓,導致使用者體驗不佳。

(後面兩點屬於技術與後端的挑戰,非本次 Redesign 範疇,本專案將聚焦於 UI/UX 層面。)

現有介面痛點

在分析現有的幸福公路 App 介面時,發現存在多個影響使用體驗的問題,例如多餘的啟動畫面、色彩使用不當、資訊層級不清與介面老舊等。這些痛點將作為 Redesign 的切入點,指引後續的設計方向。

啟動畫面需額外點擊「進入系統」,增加不必要的操作步驟,可能降低使用效率。
夜間模式僅能將畫面整體變黑
 對駕駛而言可讀性模糊,無法有效解決夜間視覺需求。
右下角 Level 文字意義不明,缺乏清楚的資訊傳達,容易造成混淆。
色彩與對比使用不佳
 資訊層級不清,使用者難以快速判讀重點。
介面設計老舊,文字過小
 視覺不直覺,資訊瀏覽困難。

使用情境描述

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

通勤駕駛人
.早晨開車上班,希望導航途中能即時收到事故或壅塞通知。
.需求:導航整合 + 路況推播,避免浪費時間。
長途駕駛人
.出發前想即時查看國道或快速道路的車流與 CCTV。
.需求:清楚的影像分類與索引,快速找到想要的路段。
夜間駕駛用路人
.晚上開車返家,強烈螢幕亮度容易造成眩光,影響視線。
.需求:可在 App 內獨立切換夜間模式,提升行車安全。
單車旅行人
.環島途中需要確認前方路段是否施工或封閉,以便調整路線。
.需求:快速查看施工與路況資訊,避免行程受阻。

設計目標

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

提供導航跳轉與即時提醒
確保駕駛人能即時獲得事故或路況更新資訊,減少駕駛人在行進間的分心。
強化影像檢索效率
透過「即時路況」頁面與分類索引,讓使用者能快速定位國道與快速道路的 CCTV 與車流資訊。
優化介面架構與使用效率
透過清晰的資訊層級與一致的設計語言,幫助使用者快速理解路況資訊,減少操作成本,提升整體體驗。
支援夜間模式切換
在 App 內提供獨立夜間模式切換,不依賴系統設定,避免互相影響並提升夜間行車安全。

資訊架構

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

分類原則
五大主架構(首頁、最新消息、即時路況、常用路況、設定中心),避免內容分散與重複,並讓首頁整合搜尋與導航,方便用戶快速進入導覽流程。
改善重點
移除多餘頁面、將「搜尋與導航」整合在首頁,並新增「即時路況」主頁面,提供國道與快速道路的分類影像檢索,讓資訊取得更主動且精準。
設計呼應
新架構對應「資訊層級清晰」、「導覽結合」、「夜間模式」及「影像檢索效率」等目標,提升整體使用效率。

使用者流程

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

Flow 1:查詢即時路況及影像(依國道 / 快速道路)
使用者情境
汽車駕駛人希望快速查詢國道或快速道路的車流速率與 CCTV 即時影像,以判斷是否有壅塞或事故。
設計對策
許多汽車駕駛在長途行車中,最關心的是國道與快速道路的壅塞狀況,因此我將「即時路況」獨立成專區,並提供依「國道 / 快速道路」的雙重分類,搭配 CCTV 即時影像,讓駕駛能即時驗證資訊,增加資訊可信度。
Flow 2:路線規劃 / 伴隨導航 / 路況通知
使用者情境
開車途中需要導航,並希望隨時掌握最新事故或壅塞狀況,並可透過通知一鍵改道,重新規劃路線導航。
設計對策
幸福公路並不試圖取代 Google Maps 的完整導航功能,而是設計為「伴隨式導航」。在行駛途中若發生事故,App 會透過推播通知提醒(搭配語音),使用者點擊後自動重新規劃新路線,再跳轉回 Google Maps 持續導航。此設計兼顧了技術可行性與使用者熟悉的導航體驗,同時保留幸福公路在地即時資訊的價值。
Flow 3:設定常用路況
使用者情境
通勤或經常經過固定路段的使用者,希望能快速存取特定路段資訊。
設計對策
通勤族或長途駕駛常需要反覆查詢相同路段。為了減少重複操作,我設計了「常用路況」分頁,讓使用者能直接存取收藏的路段。加入後以 Toast 提示回饋,既不會打斷操作,又能即時確認已成功加入,符合駕駛中低干擾的需求。
Flow 4:夜間模式切換
使用者情境
夜間開車的使用者,希望避免刺眼的畫面影響視線。
設計對策
原本的夜間模式僅能跟隨系統設定,無法在 App 內獨立切換,使用上缺乏彈性。
 因此我在「設定中心」新增獨立的「夜間模式」切換,提供自動與手動選擇,讓駕駛能根據情境快速調整畫面,減少夜間眩光並提升行車安全。

線框稿

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

Flow 1:查詢即時路況及影像(依國道 / 快速道路)

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

Flow 2:路線規劃 / 伴隨導航 / 路況通知

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

在導航過程中,幸福公路提供分層式的 bottom sheet:

.收合狀態:僅顯示核心資訊(距離、天氣、延誤),便於快速確認。

.半展開狀態:顯示車流、事故、施工等即時資訊,幫助駕駛掌握路況。

.全展開狀態:提供完整細節(含天氣條件、CCTV 影像等),讓使用者能深入查看。此設計能依需求快速切換資訊層級,減少駕駛分心。

當路段出現事故或壅塞時,幸福公路會即時推播提醒。通知會提供三種操作選項(改道、維持原導航、稍後提醒),其中「改道」作為主要行動,讓駕駛快速決策。若選擇改道,系統會自動重新規劃並顯示新路線,同時同步至 Google Maps 導航,確保行程不中斷。

設計系統

在進入高保真設計前,我先建立了設計系統,定義了顏色、字體、間距、按鈕、圖標等基礎元素,並規範了常用元件(如導航列、tab bar、卡片、清單等)的狀態與使用方式。透過設計系統,能確保整體介面的一致性與延展性,同時在日間與夜間模式之間能快速切換,提升設計維護與開發效率。

高保真設計稿

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

首頁 / 地圖
首頁 / 導航 / 收合狀態
首頁 / 導航 / 半開狀態
首頁 / 導航 / 全開狀態
首頁 / 即時影像卡片
即時路況 / 國道列表
國道列表 / 路段影像列表
路段影像列表 / 即時影像
路段影像列表 / 搜尋 / 國道分區
路段影像列表 / 搜尋 / 輸入
最新消息
最新消息 / 詳細資訊
常用路況 / 路段與地點
常用路況 / 國道與快速公路
設定中心
設定中心 / 夜間模式切換

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

原型流程展示

在完成高保真設計稿後,我將 Flow1 與 Flow2 的核心操作流程製作成影片,模擬使用者在實際情境下的操作樣貌以更直觀方式呈現介面與功能的串聯。

Flow 1:查詢即時路況及影像 / 加到常用路況
Flow 2:圖層資訊 / 路線規劃
Flow 2:路況通知 + 伴隨導航

在前段影片中,我展示了從路線規劃到跳轉 Google Maps 開始導航的流程。接下來這三張圖片,則模擬了導航途中出現事故通知的互動情境:駕駛人可即時收到幸福公路的路況提醒,並快速選擇是否改道或維持原路,確保行駛決策更有效率與安全。

在 Google Maps 導航中,幸福公路推播即時路況通知,提醒前方有事故或塞車。使用者可在通知中快速選擇「改道」、「維持原路」或「稍後提醒」。
若選擇改道,會回到幸福公路顯示新路況資訊,並可再次點選「開始導航」回到 Google Maps。

學習與反思

在專案進行的過程中,我深刻體會到設計並非單純的畫面美化,而是必須時時站在使用者的角度去思考,透過反覆的實驗與迭代來驗證想法。同時,也需要在發想階段就考量技術的可行性。

例如,本專案中我提出「幸福公路能否在背景追蹤 Google Maps 導航,並即時推送路況提醒」的設計構想,但這部分涉及技術限制,必須透過與工程師的充分討論與溝通,確認可行性後再展開後續設計作業。這樣的過程讓我更加理解,設計與工程的協作是產品能否落地的關鍵。

此外,本專案也讓我體會到設計規範與系統化思維的重要性。透過遵循設計規範、採用原子設計思維,並建立一套設計系統,不僅能讓畫面在一致性與延展性上更具規模化,也能讓後續團隊在維護與開發時更有效率。這讓我認識到,好的設計並不是單一畫面的精美,而是整體系統能夠長期被使用、維護並持續優化。

在未來,我希望能持續深化自己在UI/UX 設計流程、使用者研究與互動設計方面的能力,讓設計不只解決問題,也能帶來更具體的價值與使用體驗。

謝謝您的閱讀與觀看。