使用者旅程地圖完整教學：從零開始畫出你的第一張 User Journey Map

什麼是使用者旅程地圖（User Journey Map）？

如果你曾經坐下來，試著用使用者的眼光重新看一遍自己設計的產品，你就會明白那種既震驚又感動的感受。使用者旅程地圖（User Journey Map）就是幫助我們做到這件事的工具——它把使用者與產品互動的完整過程，以視覺化的方式呈現出來，讓設計師、產品經理、工程師甚至行銷人員，都能站在同一個起點，理解使用者的真實體驗。

簡單來說，使用者旅程地圖是一張「敘事地圖」。它記錄了某一個特定使用者（通常是一個 Persona，也就是虛構但有據可查的代表性使用者），在完成某個目標的過程中，所經歷的每一個步驟、情緒起伏、接觸點與痛點。它不只是流程圖，更是一個帶有情感溫度的故事。

使用者旅程地圖 vs 客戶旅程地圖：有什麼差別？

很多人會把 User Journey Map（使用者旅程地圖）和 Customer Journey Map（客戶旅程地圖）混為一談，但兩者其實有明確的區別。

• 使用者旅程地圖（User Journey Map）：聚焦在使用者與產品或系統互動的過程，通常由 UX 設計師製作，關注的是使用體驗層面，例如完成一筆結帳、找到某個功能等。
• 客戶旅程地圖（Customer Journey Map）：範圍更廣，涵蓋了品牌接觸的整個生命週期，從第一次聽說品牌、到購買、到售後服務，甚至包含離開的原因。通常由行銷或業務團隊主導。

在 UX 實務上，我們更常用的是使用者旅程地圖，因為它讓我們能夠精準地聚焦在產品介面和互動體驗的改善上。不過兩者並不互斥，很多成熟的團隊會同時維護這兩種地圖。

使用者旅程地圖的五大核心元素

一張完整的使用者旅程地圖，通常包含以下幾個關鍵組成部分：

1. Persona（使用者人物誌）

地圖的主角。這個 Persona 必須基於真實的使用者研究，而不是憑空捏造。Persona 定義了這個使用者是誰、他的目標是什麼、他有什麼背景與限制。如果你還沒有建立 Persona，建議先進行易用性測試完整教學所介紹的使用者研究方法，蒐集足夠的資料再來繪製地圖。

2. Stages（旅程階段）

把使用者的旅程分成幾個主要階段。以電商結帳為例，可能是：發現產品 → 瀏覽商品 → 加入購物車 → 結帳付款 → 收到商品 → 售後服務。每個階段代表使用者在不同情境下的目標與行為。

3. Touchpoints（接觸點）

使用者在每個階段與產品或品牌互動的具體時刻，例如：點擊廣告、打開 App、填寫表單、接收確認信等。接觸點的識別對於找出體驗斷點非常重要。

4. Emotions（情緒曲線）

這是旅程地圖最有力量的部分。在每個階段，使用者的情緒是正面的、中性的還是負面的？通常用曲線或表情符號來呈現，讓人一眼看出哪些環節讓使用者感到挫折或喜悅。

5. Pain Points & Opportunities（痛點與機會點）

根據情緒曲線和行為分析，找出使用者在旅程中遇到的困難（痛點），以及設計上可以改善或創新的機會（機會點）。這些才是旅程地圖最終要產出的洞見。

製作使用者旅程地圖的完整步驟

現在讓我們進入實作階段。以下是我在實際專案中使用的流程，你可以根據團隊情況調整節奏。

Step 1：確認目標與範圍

開始之前，先問自己：「這張地圖要解答什麼問題？」是要找出新使用者的上手障礙？還是老用戶在某個功能的使用困難？範圍定得太大，地圖會失焦；太小，又可能看不到全貌。建議以「一個 Persona + 一個具體情境（scenario）」為一張地圖的範圍。

Step 2：蒐集使用者研究資料

旅程地圖的品質完全取決於研究資料的品質。常見的資料來源包括：

• 使用者訪談（深度訪談 5-8 人通常足夠）
• 易用性測試的錄影與紀錄
• 客服紀錄與使用者回饋
• 數據分析（如 Google Analytics 的流失率、熱力圖）
• 問卷調查的開放式回答

不要跳過這一步，直接從「感覺」出發畫地圖，那叫做假設地圖，不叫使用者旅程地圖。

Step 3：建立或確認 Persona

把你的研究資料整理成一個代表性 Persona。這個 Persona 應該有名字、年齡、職業、使用場景、目標，以及對產品的熟悉程度。如果你的產品有多種使用者類型，可以分別製作多張地圖。

Step 4：定義旅程階段

和團隊一起腦力激盪，把使用者完成目標的過程拆解成 4-7 個主要階段。這個步驟很適合用便利貼在白板上進行，或者在 FigJam、Miro 上協作。

Step 5：填入每個階段的細節

針對每個階段，依序填入：

• 使用者的行動（Actions）：他做了什麼？
• 想法（Thoughts）：他在想什麼？有什麼疑問？
• 情緒（Emotions）：他的感受如何？
• 接觸點（Touchpoints）：透過哪些管道或介面互動？
• 痛點（Pain Points）：遇到什麼困難或挫折？
• 機會點（Opportunities）：設計上可以怎麼改善？

Step 6：視覺化呈現

把所有資訊整理成清晰易讀的視覺地圖。好的旅程地圖不需要花哨的設計，但需要讓人一眼就能理解整體架構和重點洞見。這個階段可以用 Figma 搭配Figma Auto Layout 教學中介紹的排版技巧，快速建立整齊的表格式佈局。

Step 7：分享與對齊

完成地圖後，安排一次跨部門的分享會議，讓產品、工程、行銷等不同角色的人都能看到這張地圖，建立對使用者體驗的共同認知。

實戰範例：電商結帳流程的旅程地圖

讓我們用一個具體的例子來說明。假設你在設計一個電商平台，Persona 是「林小姐，35 歲，上班族，習慣在午休用手機購物」。

旅程階段拆解

階段一：發現商品
行動：在 Instagram 看到廣告，點擊連結進入商品頁。
情緒：好奇、有興趣（正面）
痛點：頁面載入太慢，等了 3 秒還沒出來
機會點：優化圖片壓縮，提升行動裝置載入速度

階段二：瀏覽與比較
行動：查看商品圖片、規格、評論，滑到「相關商品」區
情緒：思考中（中性），但找不到尺寸對照表感到困惑（負面）
痛點：尺寸說明不清楚，找不到真人穿搭參考
機會點：加入互動式尺寸建議工具、增加用戶上傳的真人照片

階段三：加入購物車
行動：選擇顏色和尺寸，點擊「加入購物車」
情緒：有些猶豫（是否真的需要？）
痛點：加入後沒有明顯的確認回饋
機會點：加入動畫回饋，顯示「已成功加入購物車」並提供繼續購物或前往結帳的選項

階段四：結帳付款
行動：進入結帳頁，填寫收件資訊，選擇付款方式
情緒：希望趕快完成（時間壓力），但表單太多欄位感到煩躁（負面）
痛點：沒有地址自動完成功能，要手動填寫完整地址；付款頁面跳轉到第三方頁面讓人不安心
機會點：整合地址自動補全 API；在結帳頁顯示安全認證標章

階段五：等待與收貨
行動：收到確認信、等待出貨通知、簽收包裹
情緒：期待（正面），但如果沒有即時更新則焦慮（負面）
痛點：物流追蹤資訊更新不即時
機會點：整合即時物流狀態推播通知

透過這個範例，你可以清楚看到旅程地圖如何把抽象的「使用者體驗不好」，轉化成具體可行動的設計改善方向。

常用工具推薦

製作旅程地圖不需要特殊軟體，但好的工具能大幅提升效率：

• Figma：最推薦的設計工具，可以搭配社群提供的旅程地圖模板快速上手，適合需要輸出高質量視覺稿的場合。設計完成後，也可以直接將旅程地圖的元件整合進設計系統 Design Tokens 教學所介紹的設計系統中。
• FigJam：Figma 的線上白板工具，非常適合和團隊一起協作腦力激盪，有各種便利貼和形狀，門檻低、上手快。
• Miro：功能強大的協作白板，有豐富的旅程地圖模板，適合大型跨部門協作，但免費版功能有限制。
• Notion / Google Sheets：如果預算有限或需要快速整理，表格式的旅程地圖也完全可行，重點是資訊的完整性。

製作旅程地圖常見的錯誤

做了很多年旅程地圖，我見過各種踩坑的方式，以下是最常見的幾個：

• 沒有研究基礎，憑感覺畫圖：這是最致命的錯誤。沒有真實資料支撐的旅程地圖，只是一張「假設地圖」，可能讓團隊對問題產生錯誤認知。
• 範圍太廣，什麼都想放進去：一張地圖試圖涵蓋所有使用者和所有情境，結果什麼都說不清楚。記住：一張地圖，一個 Persona，一個情境。
• 做完就放在抽屜裡：旅程地圖不是一次性的交付物，它應該成為團隊的共同參考文件，定期更新。
• 只有設計師看過：旅程地圖最大的價值在於建立跨部門的共同語言，如果只有 UX 團隊看過，就太可惜了。
• 情緒曲線流於形式：很多人的情緒曲線畫得很漂亮，但完全沒有依據。情緒評分應該來自訪談時使用者的真實描述或測試時的觀察。

何時需要更新旅程地圖？

旅程地圖不是做一次就永遠有效的文件。以下幾個情況，代表你需要重新檢視並更新地圖：

• 產品推出了重大新功能，改變了使用者的主要流程
• 重新進行了使用者研究，發現新的洞見或使用者行為改變
• 數據顯示某個特定環節的流失率突然上升
• 進入新市場或新的目標使用者族群
• 距離上次更新已超過六個月到一年

我的習慣是每個重大版本迭代前，都會把旅程地圖拿出來對照一次，確認我們設計的改動是否真的對應到使用者的痛點，而不是在解決自己想象中的問題。

開始畫你的第一張旅程地圖

看到這裡，你應該已經對使用者旅程地圖有了相當完整的認識。我知道第一次做可能會覺得無從下手，但其實只要你手邊有一些使用者訪談的錄音或記錄，就可以開始了。

不要追求完美。第一張地圖可能很粗糙，框架可能不夠完整，情緒曲線可能畫得歪歪扭扭——這些都沒關係。旅程地圖的價值不在於那張圖本身有多漂亮，而在於製作的過程中，你和你的團隊所進行的那些對話，以及那些讓你說出「原來使用者是這樣想的」的頓悟時刻。

打開 FigJam，貼上你的便利貼，開始你的第一張使用者旅程地圖吧。