UX 設計流程怎麼做？從使用者研究到原型測試的六個步驟

UX 是什麼？這裡討論的是使用者體驗，不是 Lexus UX

這篇文章討論的是使用者體驗設計中的 UX，不是 Lexus UX 車款。你會看到 UX 設計從使用者研究、需求整理、資訊架構、線框圖、原型製作到可用性測試的完整流程。

UX 是 User Experience 的縮寫，中文通常稱為使用者體驗。放在網站或 App 專案裡，UX Design 指的是用使用者需求、任務流程、互動阻礙與測試回饋來做設計決策。畫面好看當然重要，但真正影響成果的，往往是使用者能不能快速找到資訊、理解下一步、順利完成表單或購買。

UX 的中文是什麼？

UX 的中文是使用者體驗，重點在「使用者」與「任務」。如果只把 UX 翻成體驗設計，很容易忽略它背後的研究、流程、驗證與迭代。

UX 和 UI 有什麼不同？

UI 偏向介面視覺、按鈕、色彩、字級與元件呈現；UX 偏向需求、路徑、資訊順序、任務完成率與測試回饋。好的 UI 可以讓介面更清楚，好的 UX 則讓使用者更少卡關。

為什麼搜尋 UX 會看到 Lexus UX？

因為 UX 同時也是車款名稱與設計領域縮寫。若搜尋意圖是 User Experience，應聚焦在 UX 設計流程、使用者研究、Wireframe、Prototype 與可用性測試，不需要延伸到車款內容。

UX 設計流程總覽：從研究到測試的 6 個步驟

UX 設計流程通常包含使用者研究、需求定義、資訊架構、Wireframe、Prototype、可用性測試與迭代。重點不是照表操課，而是讓每一步都能降低猜測、留下交付物，並支援下一個決策。

階段	目的	常用方法	產出物	常用工具
使用者研究	找出使用者任務、痛點與決策條件	訪談、問卷、客服紀錄、行為資料	研究摘要、痛點清單	Google Forms、GA4、Notion
需求定義	把模糊需求整理成可設計問題	Persona、旅程整理、指標設定	Persona、User Journey Map、設計目標	FigJam、Notion
資訊架構	規劃資訊分類、導覽與任務路徑	網站地圖、User Flow、內容排序	IA、User Flow	FigJam、Miro、Figma
線框圖	確認版面結構、內容優先順序與功能位置	低保真 Wireframe	主要頁面線框圖	Figma、Whimsical
互動原型	模擬點擊路徑與狀態變化	Prototype、表單狀態、手機版路徑	可操作原型	Figma Prototype
可用性測試	觀察使用者是否能完成任務	任務測試、觀察、訪談	測試紀錄、修改優先順序	Google Meet、Lookback、試算表

步驟 1：使用者研究

先確認誰會使用網站、他們要完成什麼任務、現在卡在哪裡。沒有這一步，後面的設計很容易變成內部喜好投票。

步驟 2：需求整理與問題定義

把研究資料整理成 Persona、使用者旅程、痛點排序與成功指標。好的需求定義會讓設計問題變窄，團隊也比較容易驗收。

步驟 3：資訊架構與使用者流程

規劃網站資訊如何分類、導覽如何命名、使用者從入口到完成任務要經過哪些步驟。這一步會直接影響轉換與找資料效率。

步驟 4：線框圖 Wireframe

Wireframe 用低成本方式確認頁面結構、內容順序、按鈕位置與功能關係。此時不應花太多時間討論品牌色或細節視覺。

步驟 5：互動原型 Prototype

Prototype 把重要頁面串成可點擊路徑，用來檢查使用者是否看得懂下一步、表單狀態是否完整、手機操作是否順手。

步驟 6：可用性測試與迭代

讓接近目標族群的人完成指定任務，觀察錯誤點、猶豫點與完成情況。測試後依影響程度修改，而不是把所有意見平均處理。

步驟 1：使用者研究要研究什麼？

使用者研究要找出目標使用者、主要任務、阻礙、期待與決策條件。小型網站不一定要做大型研究，但至少要用訪談、問卷、客服紀錄或網站資料建立基本判斷。

常見研究方法：訪談、問卷、行為資料、客服紀錄

訪談適合挖出動機與語言，問卷適合收集較多人的偏好與常見問題，行為資料能看出使用者在哪些頁面離開，客服紀錄則常反映資訊不清、流程太長或表單難填。我的判斷是，小型網站最該先看客服與表單失敗紀錄，因為那裡通常直接連到轉換損失。

網站專案可問的 5 個使用者研究問題

• 你進入這個網站時，最想完成哪一件事？
• 你通常會先看哪些資訊，才決定是否詢問或購買？
• 過去在哪個步驟最容易放棄？
• 哪些文字、欄位或價格資訊讓你不確定？
• 如果只能保留一個最重要的功能，你會選哪一個？

研究結果要整理成什麼？

研究結果至少要整理成目標族群、任務、痛點、常見疑問、決策條件與設計機會。不要只留下逐字稿，因為逐字稿無法直接指導 Wireframe 或 Prototype。

步驟 2：如何把研究結果變成需求與設計目標？

研究結果要轉成可設計、可驗收的需求，關鍵是把使用者任務、痛點、商業目標與衡量指標放在同一張決策表裡。需求定義做得清楚，後續爭論會少很多。

Persona 不是人設，而是決策假設

Persona 不該寫成「30 歲上班族、喜歡美食」這類鬆散描述，而要回答設計決策會用到的問題，例如他在意價格還是速度、需要多少信任資訊、會不會用手機填表單。Persona 的價值在於幫團隊做取捨。

User Journey Map 要看哪幾個節點？

User Journey Map 可分成發現需求、比較選項、閱讀重點資訊、採取行動、完成後確認幾個節點。以網站預約表單為例，使用者可能先看服務內容，再看案例與價格，最後才願意填表單；如果表單前缺少信任資訊，轉換就會卡住。

如何設定 UX 成功指標？

UX 成功指標要對應任務。電商結帳可看加入購物車後完成率、表單錯誤率、結帳完成時間；預約網站可看表單完成率、欄位放棄點、送出後詢問品質。不要只用「看起來比較好」當驗收標準。

步驟 3：資訊架構與使用者流程怎麼規劃？

資訊架構負責規劃網站資訊分類、層級、導覽與路徑，User Flow 則描述使用者如何完成任務。這一步會決定使用者能不能找到資訊，以及是否能順利走到轉換點。

資訊架構要解決什麼問題？

資訊架構要解決三件事：內容放在哪裡、導覽怎麼命名、使用者下一步要去哪裡。網站常見問題不是內容不夠，而是重要資訊藏太深，或分類是公司內部邏輯，使用者看不懂。

User Flow 如何設計主要任務路徑？

User Flow 可以用文字流程先寫出來：入口頁面、關鍵資訊、信任補強、行動按鈕、表單或結帳、完成確認。以電商結帳流程為例，使用者應清楚知道商品規格、運費、付款方式、錯誤提示與訂單是否成立。

網站常見 UX 路徑問題

• 主要行動按鈕不明顯，使用者看完不知道下一步。
• 分類名稱太內部，訪客無法判斷自己該點哪裡。
• 手機版導覽層級過深，重要頁面被收在多層選單裡。
• 表單前沒有足夠信任資訊，使用者不願留下資料。

步驟 4：Wireframe 線框圖要畫到什麼程度？

Wireframe 線框圖要畫到足以確認內容、功能、版面優先順序與互動邏輯。它不是視覺稿，也不是最終畫面，而是用低成本方式先檢查網站結構是否合理。

Wireframe 應該包含哪些內容？

Do	原因
標示主要內容區塊	確認使用者先看到什麼、後看到什麼
放入主要 CTA 與表單位置	檢查任務路徑是否順
標出導覽、篩選、錯誤提示位置	避免功能到開發前才被發現缺漏

Wireframe 不需要先處理什麼？

Don’t	原因
過早討論精緻視覺	會讓團隊忽略結構問題
把所有文案都寫到最終版	此階段先確認資訊順序即可
把 Wireframe 當成 Mockup	兩者用途不同，混用容易造成驗收誤會

業主如何驗收線框圖？

驗收線框圖時，應檢查每個頁面是否有明確目的、重要資訊是否在合理位置、使用者能否走到下一步、手機版是否有對應安排。我的經驗是，這一階段少爭一個視覺細節，後面通常能少改一輪設計稿。

步驟 5：Prototype 原型測試前要先確認哪些互動？

Prototype 原型測試前，要先確認核心頁面、點擊路徑、表單狀態、錯誤提示、成功訊息與行動版操作。原型的目的在驗證任務流程是否順暢，不是展示成品完成度。

Prototype 和 Wireframe 差在哪？

Wireframe 確認結構與內容優先順序，Prototype 則把頁面串起來，讓使用者可以點擊、返回、填表、看到狀態變化。Wireframe 問的是「放得對不對」，Prototype 問的是「用起來順不順」。

哪些頁面或流程最需要做原型？

最需要做原型的地方通常是高風險流程，例如註冊、登入、搜尋篩選、預約表單、電商結帳、方案選擇、會員中心與手機版選單。只要使用者中途放棄會造成商業損失，就值得先做互動原型。

原型至少要包含哪些互動狀態？

• 主要按鈕點擊後會到哪裡。
• 表單必填、錯誤、成功送出的狀態。
• 手機版選單、篩選與返回路徑。
• 載入中、無資料、錯誤訊息等例外狀態。
• 使用者完成任務後看到的確認訊息。

步驟 6：可用性測試怎麼做？

可用性測試是讓真實或接近真實的使用者完成任務，觀察阻礙、錯誤與完成情況。小型網站可以先找 5 位接近目標族群的人，測核心任務，不必等到大型實驗室等級才開始。

可用性測試的 5 個基本步驟

1. 選定一個核心任務，例如完成預約或找到方案價格。
2. 準備測試腳本，避免引導使用者答案。
3. 請使用者邊操作邊說出想法。
4. 記錄卡關、錯誤、猶豫與完成時間。
5. 整理問題優先順序，回到原型或線框圖修改。

測試時要觀察哪些指標？

可觀察任務是否完成、完成時間、錯誤次數、在哪裡停下來、是否需要協助、使用者如何理解文字與按鈕。精確數字可依專案規模累積，但一開始更重要的是找出重複出現的阻礙。

測試後如何決定要改哪裡？

優先修改影響核心任務、多人都遇到、會造成放棄的問題。若只有一位受測者提出偏好意見，不一定要立刻改；若多位使用者都看不懂同一個按鈕，那就是流程問題，不是個人口味。

UX 流程每個階段會產出什麼？

UX 交付物是每個階段用來對齊決策、降低返工與協助驗收的具體成果。專案不一定每份文件都要做滿，但研究、流程、線框、原型與測試結果至少要留下可追蹤紀錄。

流程階段與交付物對照表

流程	目的	交付物	驗收方式
使用者研究	建立設計依據	訪談摘要、痛點清單	是否能說明主要使用者與任務
需求定義	統一問題與目標	Persona、Journey Map、成功指標	是否能支援設計取捨
資訊架構	規劃網站結構	網站地圖、User Flow	是否能完成主要任務路徑
Wireframe	確認頁面骨架	低保真線框圖	是否清楚呈現內容與功能順序
Prototype	驗證互動流程	可點擊原型	是否可測試核心任務
可用性測試	找出阻礙	測試紀錄、改善清單	是否有明確修改優先順序

哪些交付物是必要？哪些可依專案規模調整？

必要交付物通常包含需求摘要、主要流程、Wireframe、Prototype 與測試紀錄。Persona、Journey Map、完整研究報告可依預算與複雜度調整。小案子可以輕量，但不能完全沒有決策依據。

沒有交付物會發生什麼問題？

沒有交付物時，需求很容易反覆改、驗收變成主觀喜好、設計師與工程師理解不同。最後最貴的不是多做一份文件，而是開發後才發現流程錯了。

UX 設計流程如何影響網站轉換率與 SEO？

UX 設計流程可以透過降低摩擦、提升任務完成率、改善行動體驗與內容理解，間接影響網站轉換率與 SEO 表現。但 UX 不是排名保證，也不能取代技術 SEO 或內容策略。

UX 對轉換率的影響

UX 問題	可能影響	改善方向
表單欄位太多	填寫意願下降	減少非必要欄位，補清楚錯誤提示
方案資訊不清楚	使用者無法比較	整理價格、差異、適合對象
行動版按鈕難點	手機轉換流失	調整按鈕尺寸、間距與固定行動區

UX 對 SEO 的間接影響

UX 會影響使用者是否能理解內容、是否願意繼續瀏覽、手機版是否好用，以及頁面體驗是否符合基本品質。Core Web Vitals 屬於技術體驗指標，可與 UX 一起檢查，但不能把所有排名變化都歸因於 UX。

哪些 UX 問題最容易讓網站流失使用者？

• 首頁沒有清楚說明服務或產品價值。
• 導覽命名模糊，使用者找不到需要的資訊。
• 手機版閱讀與點擊困難。
• 表單錯誤訊息不清楚，送出後沒有確認。
• 重要信任資訊放太後面，例如案例、評價、價格與保固。

UX 新手要學哪些工具？

UX 新手學工具時，應把工具對應到流程階段：研究、整理、設計、原型與測試。工具能提高效率，但不能取代使用者研究、需求判斷與可用性測試。

研究階段工具

Google Forms 可收集問卷，GA4 可觀察流量與事件，客服紀錄或表單回覆可整理常見痛點。若有預算，也可使用行為分析工具觀察滾動、點擊與錄影回放。

資訊整理與流程工具

FigJam、Miro、Notion 適合整理 Persona、User Journey Map、需求清單與 User Flow。新手不要一開始追求漂亮模板，先把任務、痛點與決策條件寫清楚。

線框圖與原型工具

Figma 是常見的 Wireframe、UI 與 Prototype 工具。低保真階段可先用灰階區塊與簡短文字，等流程確認後再進入高保真視覺。

測試與行為分析工具

小型測試可用 Google Meet 錄影搭配試算表紀錄。行為分析工具可輔助找出點擊與停留問題，但解讀資料時仍要回到使用者任務，避免只看熱區圖就下結論。

常見 UX 流程錯誤：為什麼很多專案做了設計還是不好用？

很多專案做了設計卻不好用，通常是流程缺少研究、定義、驗證或迭代。UX 問題很少只出在畫面美醜，更多時候是任務路徑、資訊順序與測試不足造成落差。

一開始就畫 UI

錯誤在於先把注意力放到顏色、圖片與版面風格，卻還沒確認使用者要完成什麼任務。修正方式是先做需求整理、資訊架構與 Wireframe，再進入視覺設計。

只問內部意見，不問使用者

內部熟悉產品，反而容易低估新訪客的疑惑。修正方式是至少訪談幾位接近目標族群的人，或從客服、搜尋字詞、表單失敗紀錄補使用者視角。

沒有測試就直接開發

跳過 Prototype 與可用性測試，會讓流程問題延後到開發後才浮現。修正方式是先測核心任務，例如結帳、預約、註冊與方案比較，再決定是否進入開發。

只做桌機版，忽略手機情境

許多網站流量來自手機，若手機導覽、表單、按鈕與閱讀行距沒有檢查，使用者很容易中途離開。修正方式是從 Wireframe 階段就同步規劃行動版，而不是最後才縮版。

如果你找的是 Lexus UX，這篇不是車款介紹

Lexus UX 是汽車品牌的車款名稱，和 User Experience 使用者體驗設計沒有關係。若你的搜尋目的是查車款，應前往汽車品牌或車訊網站；這裡只處理 UX 設計流程與網站、App 的使用者體驗。

UX 是什麼意思？

UX 是 User Experience 的縮寫，中文通常稱為使用者體驗。放在網站或 App 裡，UX 關心的是使用者完成任務時是否順利、是否理解資訊、是否遇到阻礙，以及流程是否需要被測試與改善。

UX 中文是什麼？UX 怎麼念？

UX 通常唸作 U-X，中文可譯為使用者體驗。不建議只翻成體驗設計，因為 UX 的核心包含使用者、任務、流程、互動與測試回饋。

UX 和 UI 有什麼不同？

UI 偏向介面視覺與元件呈現，例如按鈕、色彩、排版與圖示。UX 偏向使用者需求、任務流程、資訊架構、原型測試與可用性驗證。兩者會互相影響，但解決的問題不同。

UX 設計流程包含哪些步驟？

UX 設計流程通常包含使用者研究、需求定義、資訊架構、Wireframe 線框圖、Prototype 互動原型、可用性測試與迭代。每一步都應有目的、方法、交付物與驗收標準。

UX 設計一定要做使用者研究嗎？

正式專案建議要做使用者研究。小型網站可用輕量方式執行，例如訪談幾位目標使用者、整理問卷、分析客服紀錄、查看 GA4 行為資料與表單放棄點。重點是不要完全靠內部猜測。

Wireframe 和 Prototype 差在哪？

Wireframe 用來確認頁面結構、內容優先順序與功能位置，通常是低保真交付物。Prototype 則把頁面串成可操作的互動模型，用來測試點擊路徑、表單狀態與任務流程。

可用性測試要找幾個人？

小型網站可先找 5 位接近目標族群的人測試核心任務。這不是統計結論，而是用相對低成本找出高頻阻礙、錯誤理解與流程斷點。

UX 設計師需要會寫程式嗎？

UX 設計師不一定要會開發，但理解 HTML、CSS、RWD、表單限制與前端實作成本，會讓設計更容易落地，也能減少與工程師溝通時的落差。

UX 會影響 SEO 嗎？

UX 不等於 SEO 排名技巧，但會影響行動體驗、頁面可用性、內容理解、互動品質與表單完成率。好的 UX 能支援使用者完成任務，也能和內容品質、技術體驗一起提升網站整體表現。

Lexus UX 和本文的 UX 有關嗎？

沒有。Lexus UX 是車款名稱，這裡的 UX 指的是 User Experience，也就是使用者體驗設計。兩者搜尋字相同，但意圖完全不同。