使用者體驗
UX 從頭到尾

一份完整的圖解指南，幫助理解以人為本的設計

01 — 定義

什麼是使用者體驗？

UX（User Experience，使用者體驗）是一個人在與數字產品互動時形成的整體感受。它不僅關乎產品看起來怎麼樣，還關乎使用時 感覺如何：是否直觀、有用、令人滿意。

以人為本
設計決策始終從使用者真實的需求、動機和使用情境出發。
不只是美觀
UX 涵蓋資訊架構、導航流程、無障礙和效能，而不僅僅是視覺外觀。
基於證據
決策要用資料支撐：可用性測試、訪談和真實的行為指標。
迭代過程
UX 並不隨著上線而結束：它會根據反饋和新的需求不斷演進。

02 — 關鍵區別

UX 與 UI：有什麼區別？

UX
使用者研究
資訊架構
使用者旅程圖
可用性測試
線框圖和原型
vs
UI
色彩與字型
圖示與插圖
視覺元件
動畫與過渡
風格指南

UX = 如何運作 · UI = 看起來怎樣 · 兩者相輔相成

03 — 方法

UX 設計流程

1
調研（Research）
使用者訪談、問卷調查、競品分析以及使用情境研究。目的是弄清楚使用者是誰，以及他們面臨哪些真實的問題。
工具：訪談、問卷、資料分析
2
定義（Define）
把資訊歸納為虛構角色（使用者畫像）、同理心地圖和問題陳述。回答：我們要解決什麼問題，為誰解決？
工具：使用者畫像、使用者旅程圖、HMW
3
構思（Ideate）
頭腦風暴、親和圖和集體創意技巧。先不加篩選地產生大量想法，再從中挑選最有希望的。
工具：瘋狂 8 分鐘（crazy 8s）、我們可以如何（how might we）、草圖
4
原型（Prototype）
製作低保真或高保真的方案表現形式：從紙上草圖到互動原型。目的是儘快把想法變成看得見的東西。
工具：Figma、Balsamiq、Marvel
5
驗證（Test）
與真實使用者一起測試，發現可用性問題。測試結果再次反饋到調研階段，形成閉合的迭代迴圈。
工具：主持式測試、眼動追蹤、A/B 測試

04 — 基礎

尼爾森十大可用性原則

1
系統狀態可見
系統應始終讓使用者知道正在發生什麼。
2
與現實世界一致
使用使用者的語言，而不是系統的語言。
3
使用者控制與自由
讓使用者可以輕鬆撤銷和重做操作。
4
一致性與標準
相同的元素應始終以相同的方式運作。
5
預防錯誤
預防錯誤勝過顯示錯誤資訊。
6
識別 > 回憶
展示選項；不要迫使使用者記憶。
7
靈活與高效
為熟練使用者提供快捷方式，為新手保持簡單。
8
極簡設計
去掉對主要流程沒有價值的內容。
9
幫助識別錯誤
清晰的提示資訊，解釋問題並給出解決辦法。
10
幫助與文件
必要時提供易於查詢和使用的文件。

05 — 常見錯誤

UX 中應避免什麼？

✗
不研究使用者就開始設計
→ 設計之前至少做 5 次訪談
✗
把美觀放在功能之上
→ 漂亮卻看不見的按鈕是沒用的按鈕
✗
不和真實使用者一起測試
→ 5 個使用者就能發現 85% 的可用性問題
✗
一開始就忽視無障礙
→ 從設計階段起就遵循 WCAG 2.1 指南
✗
產品上線後不再迭代
→ 收集資料，找出摩擦點，持續改進

06 — 資源

UX 必備工具

原型設計
Figma
在雲端協作設計和製作原型
調研
Maze
遠端和自動化的可用性測試
分析
Hotjar
熱力圖和會話錄製
問卷
Typeform
收集反饋的表單和問卷
協作
Miro
用於工作坊和構思的數字白板
流程
Whimsical
快速繪製流程圖和線框圖

「設計不僅僅是看起來和摸起來的樣子。設計是它如何運作。」

— 史蒂夫·喬布斯