回到頂部

📱 AI UI/UX 設計流程:用戶研究、Wireframe、設計系統

設計師如何用 AI 做用戶研究、生成 Wireframe、建立設計系統。從 Persona 到原型的 AI 加速流程。

UI/UX 設計不只是「畫漂亮的介面」——它是理解用戶 → 定義問題 → 設計解方 → 驗證效果的完整流程。AI 能加速每一個階段,特別是前期研究和中期原型這兩個最耗時的環節。

💡 本篇定位 這是設計師 AI 技能樹的「UI/UX 設計」支線。適合有基礎 UI/UX 概念的設計師。


AI 加速用戶研究

Persona 生成

作為 UX 研究顧問,請幫我建立使用者 Persona:

產品:[產品描述]
目標市場:[台灣 / 描述]
已知資訊:[你已經知道的用戶特徵]

請建立 3 個 Persona,每個包含:
1. 基本資訊(姓名、年齡、職業、收入)
2. 行為特徵(使用科技的習慣、決策模式)
3. 痛點(3 個,按嚴重度排序)
4. 目標和期望
5. 使用場景(在什麼時候、什麼地方會用到這個產品)
6. 引用語(一句話代表這個人的心聲)

3 個 Persona 要涵蓋:
- 主要用戶(核心受眾)
- 次要用戶(偶爾使用者)
- 負面用戶(不適合的人——幫助我們聚焦)

用戶旅程圖

根據以下 Persona,請設計一份用戶旅程圖(User Journey Map):

Persona:[貼上 Persona]
產品:[產品描述]
場景:[用戶要完成的任務]

旅程階段:
1. 發現(如何知道這個產品)
2. 評估(為什麼選擇/猶豫)
3. 註冊/購買(首次體驗)
4. 使用(核心功能體驗)
5. 推薦/流失(長期關係)

每個階段標注:
- 用戶行為(做什麼)
- 情緒曲線(😀 → 😐 → 😤 → 😊)
- 接觸點(在哪裡和產品互動)
- 痛點和機會點

競品 UX 分析

請分析以下 3 個競品的 UX 設計:

競品 A:[名稱 + URL]
競品 B:[名稱 + URL]
競品 C:[名稱 + URL]

分析維度:
1. 資訊架構(導航結構、分類邏輯)
2. 核心功能流程(完成主要任務的步驟數)
3. 視覺設計風格(色彩、字型、間距)
4. 互動設計亮點(動畫、回饋機制)
5. 最值得學習的 3 個設計決策
6. 最應該避免的 3 個問題

AI 生成 Wireframe

文字描述 → 線框圖

請描述以下頁面的 Wireframe 佈局:

頁面:[App 首頁 / 產品列表 / 結帳流程]
平台:[iOS / Android / Web]
目標:[讓用戶快速找到商品 / 完成註冊 / ...]

描述每個區塊的位置和內容:
1. 頂部區域:[導航、搜尋]
2. 主要內容區:[什麼內容、什麼排列方式]
3. 互動元素:[按鈕、表單、卡片]
4. 底部區域:[Tab Bar / Footer]

包含:元素的相對大小比例、對齊方式、間距建議

Figma AI 工具整合

2026 年的 Figma 已內建多項 AI 功能:

功能用途節省時間
AI 自動佈局智慧排列元素50%
AI 文案填充生成真實感的假文案80%
AI 設計建議間距、字級、配色建議30%
AI 原型自動建立頁面連結60%

設計系統建立

請幫我規劃一個設計系統的架構:

產品類型:[電商 / SaaS / 社群 / 媒體]
品牌調性:[現代/活潑/專業/溫暖]
目標平台:[Web + Mobile / Mobile only]

設計系統包含:

1. 色彩系統
- 主色:[品牌色]
- 語意色:成功/警告/錯誤/資訊
- 中性色階(10 階)
- 暗色模式對應

2. 字型系統
- 字型選擇建議(中英文各 1)
- 字級階梯(H1-H6 + Body + Caption)
- 行高和字距建議

3. 間距系統
- 基礎單位和倍數
- 元件內距/外距規範

4. 元件庫清單
- 按鈕(主要/次要/文字/圖示)
- 表單(輸入框/下拉/核取/單選)
- 卡片(產品/內容/功能)
- 導航(頂部/側邊/底部)
- 回饋(Toast/Modal/Loading)

Usability Testing 問題設計

我的產品 [產品名] 即將進行使用者測試。
請幫我設計測試腳本:

測試目標:驗證 [核心功能] 的使用體驗
受測者:[Persona 描述]
測試時間:30 分鐘

腳本包含:
1. 開場白(讓受測者放鬆)
2. 暖身問題(了解受測者背景,3 題)
3. 任務設計(5 個任務,由簡到難)
   - 每個任務的「成功標準」
   - 觀察重點
4. 任務後問題(SUS 量表或自訂)
5. 開放式討論問題
6. 結尾(感謝 + 後續說明)

效率對比

UX 任務傳統做法用 AI 後
3 個 Persona1-2 天30 分鐘
用戶旅程圖半天20 分鐘
Wireframe 初版2-3 小時30 分鐘
設計系統規劃1-2 週2 天
測試腳本2 小時15 分鐘

❓ FAQ

AI 生成的 Persona 準確嗎?

AI 的 Persona 是「合理假設」而非「真實數據」。它很適合作為初版——讓你快速有一個討論起點,再用真實訪談和數據修正。不要把 AI Persona 當作最終版本,但可以大幅減少從零開始的時間。

AI 能取代真實的用戶測試嗎?

不能。AI 可以幫你設計測試分析結果,但不能取代真人的反應。用戶測試的價值在於觀察「非預期的行為」——那些你和 AI 都想不到的使用方式。建議:AI 設計腳本 + 真人測試 + AI 分析結果。

📚 延伸閱讀