使用者經驗及界面設計
User Experience and Interface Design
| 節 | 週三 |
|---|---|
3 10:10–11:00 | 使用者經驗及界面設計 YR103（陽明） 2 節連堂 |
4 11:10–12:00 |
* 根據陽明交大上課時間表所列
從傳統介面設計到 AI 時代的人機互動 一、課程介紹 使用者經驗（User Experience, UX）已成為人們進入數位世界並有效使用資訊科技的重要門檻，而良好的使用者介面（User Interface, UI）則是建立優質使用者經驗的關鍵。 UI/UX 設計涵蓋互動設計（Interaction Design）、視覺設計（Visual Design）及資訊架構（Information Architecture）等重要領域。本課程特別著重互動設計與視覺設計的學習與實作，補強資訊與通訊科技（ICT）背景學生通常較缺乏的人因與設計能力。 在互動設計方面，將學習如何適當運用按鈕、表單、下拉選單等輸入控制元件，標籤、圖示與選單等導航元件，以及通知、提示、狀態與訊息框等資訊與回饋元件，使使用者能夠容易理解系統、與系統互動，並有效完成其目的。 在視覺設計方面，課程將介紹版面配置、色彩、字體、圖像、形狀、視覺層級、一致性及可近用性等基本原則。學生將透過大量優秀與失敗案例的閱讀、觀察、比較、批判與重新設計，逐步建立設計判斷能力。 課程將 Pinterest 納入重要的 UI/UX 視覺案例與靈感來源。大家將建立個人的 UI/UX Inspiration Board，持續蒐集與分類介面案例；但課程重點並非模仿漂亮的介面，而是要求大家能進一步分析： 為什麼這個設計有效？它解決了什麼使用者問題？如果使用情境改變，又應如何重新設計？ 隨著生成式 AI、大型語言模型（LLM）及 AI 智能體（AI Agent）的快速發展，本課程後半段將進一步探討 AI 時代的 UI/UX。 目前許多生成式 AI 採用： 使用者 → Prompt → LLM → 文字答案 的互動模式，將大量認知負擔留給使用者。本課程將引導學生思考如何利用熟悉且結構化的 UI，把複雜的 AI 隱藏於介面幕後，使系統逐步發展成： 使用者 → 意圖介面 → 結構化狀態 → AI／智能體 → 結構化結果 → 行動介面 課程的核心理念為：好的 AI 使用者經驗，不應要求使用者先學會 AI；好的 UI 應讓 AI 的智慧自然融入使用者完成任務的過程。 二、課程目標 完成本課程後，你應能： (1)理解 UI、UX、易用性（Usability）、互動設計、視覺設計及資訊架構的基本概念。 從使用者、目標、任務與情境分析資訊系統的使用需求。 (2)理解心理模型（Mental Model）與認知負荷（Cognitive Load）對介面設計的影響。 正確設計輸入、導航、資訊呈現、回饋、通知與錯誤處理機制。 (3)運用版面、色彩、字體、圖像、形狀及視覺層級建立一致且易理解的介面。 (4)從 Pinterest 等來源蒐集 UI/UX 案例，並建立「閱讀設計」與批判設計的能力。 (5)使用原型工具建立並測試 UI/UX prototype。 (6)理解生成式 AI、LLM 與對話式介面的基本特性及限制。 (7)分析 Prompt 所造成的使用者認知負荷，將非結構化需求轉換為結構化介面。 (8)將 AI 產生的非結構化文字轉換為清楚、可理解及可行動的 UI。 (9)理解 LLM、RAG、Workflow、AI Agent 與多智能體在資訊系統中的角色。 (10)設計結合傳統 GUI 與自然語言的混合式意圖介面（Hybrid Intent Interface）。 (11)理解 Human-in-the-loop、AI 信任、不確定性與使用者控制的重要性。 (12)設計一個讓一般使用者不需要理解 AI 也能使用 AI的智慧應用原型。
無
無備註
課堂進行方式將採取四個循環： 看（Observe） → 想（Critique） → 做（Design） → 驗證（Test） 其中 Pinterest 將貫穿整學期。 學生每週蒐集案例，但每個案例至少回答： ① 什麼首先吸引我的注意？ 分析 Visual Hierarchy。 ② 使用了什麼設計原則？ 例如 Contrast、Consistency、Affordance、Feedback、Navigation。 ③ 它真的改善 UX 嗎？ 區分「漂亮」與「好用」。 ④ 如果使用者或情境不同，我會怎麼修改？ 培養 redesign 能力。 Pinterest 的角色不是「圖片資料庫」，而是你的：UI/UX Visual Reading Library 除了案例分享之外,還會有一持續的學期作業, 期末專題:Make AI Invisible——讓 AI 消失於介面之後 你可選擇健康、高齡照護、教育、旅遊、政府服務、金融、校園或其他生活情境。 首先建立傳統 AI 版本： 使用者 → Prompt → LLM → Text 分析其：Prompt burden、資訊不足、回答變異、Hallucination、文字過長、缺乏明確行動等問題。 然後重新設計成： 使用者 ↓ 熟悉且簡單的 UI ↓ Intent / Structured State ↓ AI / Agent / Knowledge / Rules ↓ Structured Result ↓ Action Interface 最後比較 Before / After 的 UX 差異。
課堂參與、閱讀與案例批判 15% 使用者研究與Persona 10% 使用者旅程及需求分析 10% 資訊架構與任務流程 10% 期中低擬真原型 15% 視覺設計系統與UI Kit 10% 使用者測試 10% 期末高擬真原型與發表 20%
教師未提供此項資料
| 週次 | 主題 |
|---|---|
| 第 1 週 | 什麼是好的 UI/UX？ UI、UX、Usability、使用者經驗；Good vs. Bad Design 找出生活中 3 個好與 3 個不好的 UI 時數：[2026-09-09]張博論(2.00) |
| 第 2 週 | 了解使用者 User、Goal、Task、Context、Persona、Mental Model、Cognitive Load Persona＋User Journey 時數：[2026-09-16]張博論(2.00) |
| 第 3 週 | 從優秀案例學習設計 Design Pattern；如何觀察、閱讀、比較及批判 UI 建立個人 Pinterest UI/UX Inspiration Board 時數：[2026-09-23]張博論(2.00) |
| 第 4 週 | 資訊架構 資訊分類、Hierarchy、Navigation、Information Flow 重新整理一個複雜 App 的資訊架構 時數：[2026-09-30]張博論(2.00) |
| 第 5 週 | 互動設計（一）：輸入 Button、Form、Dropdown、Selection、Control、Error Prevention Bad Form → Good Form 時數：[2026-10-07]張博論(2.00) |
| 第 6 週 | 互動設計（二）：導航與回饋 Navigation、Status、Feedback、Notification、Confirmation、Error Recovery Task Flow Redesign 時數：[2026-10-14]張博論(2.00) |
| 第 7 週 | 視覺設計與原型 Layout、Typography、Color、Image、Shape、Visual Hierarchy、Consistency、Accessibility Pinterest 案例 → UI Prototype 時數：[2026-10-21]張博論(2.00) |
| 第 8 週 | 從 GUI 到 ChatGPT GUI、Conversational UI、Prompt、Generative AI；Chat 是否就是好的 UI？ GUI 與 ChatGPT 完成相同任務之比較 時數：[2026-10-28]張博論(2.00) |
| 第 9 週 | Prompt 的 UI/UX 問題 Goal、Context、Data、Constraint、Preference、Output；Prompt Burden 將 Prompt 轉換成 UI 時數：[2026-11-04]張博論(2.00) |
| 第 10 週 | 把 AI 放到介面幕後 LLM、RAG、Rule、Workflow、Agent；Coze／Flowise 入門 建立簡單 AI Workflow 時數：[2026-11-11]張博論(2.00) |
| 第 11 週 | AI 輸出如何成為好的 UI？ Variability、Hallucination、Structured Output、Evidence、Priority 將 AI Answer 轉換成 UI 12 混合式意圖介面 GUI＋Natural Language、Progressive Elicitation、Missing Information Hybrid Intent Interface Prototype 13 有狀態與自適應介面 User State、Task State、Context、Memory、Personalization、Adaptive UI 設計「記得使用者狀態」的介面 14 從 AI 到智能體 AI Agent、Multi-Agent、Orchestrator、Tool、Action；Codex 等案例 Human–Agent Workflow 設計 15 AI 信任、安全與人的控制 Hallucination、Evidence、Uncertainty、Confirmation、Override、Human-in-the-loop 高風險 AI UI 案例批判 16 期末專題：讓 AI 消失於介面之後 UI＋UX＋AI＋Agent 整合 Final Demo、展示與同儕評論 時數：[2026-11-18]張博論(2.00) |
| 第 12 週 | 混合式意圖介面 GUI＋Natural Language、Progressive Elicitation、Missing Information Hybrid Intent Interface Prototype 時數：[2026-11-25]張博論(2.00) |
| 第 13 週 | 有狀態與自適應介面 User State、Task State、Context、Memory、Personalization、Adaptive UI 設計「記得使用者狀態」的介面 時數：[2026-12-02]張博論(2.00) |
| 第 14 週 | 從 AI 到智能體 AI Agent、Multi-Agent、Orchestrator、Tool、Action；Codex 等案例 Human–Agent Workflow 設計 時數：[2026-12-09]張博論(2.00) |
| 第 15 週 | AI 信任、安全與人的控制 Hallucination、Evidence、Uncertainty、Confirmation、Override、Human-in-the-loop 高風險 AI UI 案例批判 時數：[2026-12-16]張博論(2.00) |
| 第 16 週 | 期末專題：讓 AI 消失於介面之後 UI＋UX＋AI＋Agent 整合 Final Demo、展示與同儕評論 時數：[2026-12-23]張博論(2.00) |
pinterest網站的素材將做為大家參考底點
- 地點
- 守仁樓三樓
- 時間
- 另外預約
- 聯絡方式
- line# polun5aoa