使用者介面設計課程講義

UI 設計 / 單元講義 / 01 UI/UX 概論與設計趨勢.fig
0%
Week 01
Unit 01 · Week 01

UI/UX 概論與
2026 設計趨勢

從「好看」走到「好用」：先用手機親自體驗好用與難用的差別，再用 8 張互動卡片玩懂設計原則，最後用 AI 當夥伴，產出你這學期專題的第一份 App Brief。

第 01 週 120 分鐘 視傳系二年級 10 個可以玩的互動・沒有考試
先玩一下：訂票挑戰 直接看本週作業
01 Wireframe
Frame 00 — 本週地圖
This week
00

這週怎麼學：先玩 → 再懂 → 再做

這份講義不用從頭背到尾。照下面四段走：先玩幾個互動，親身感覺什麼是好用、什麼是難用；再看原理；最後開始你自己的專題。每章開頭都有「30 秒看懂」，結尾有「下一章」。

30 秒看懂先體驗，再看原理，再動手做專題。
你會做照四段路線走，讀過的章節會自動打勾。
大約120 分鐘
1STEP 1

先體驗

不用背，先玩。用手機完成一次任務、再玩 8 張互動卡片。

感覺到：好用與難用的差別

0 / 3
2STEP 2

看懂原理

用剛剛玩過的東西，說明 UI／UX、設計思考與規範。

學會：說得出為什麼好用

0 / 3
3STEP 3

開始專題

用 AI 當夥伴發想，再把功能砍到只剩 MVP。

產出：第一份 App Brief

0 / 2
4STEP 4

工具與作業

認識 Figma 與職場，了解學期作業，帶走本週重點。

交出：作業 01 App Brief

0 / 5

120 分鐘怎麼分

40 分鐘

先玩再懂

訂票挑戰＋互動圖鑑，再用規範數字說明原因。

60 分鐘

AI 實作

用結構化提示詞發想專題主題、痛點與 3 個 MVP 功能。

20 分鐘

交流講評

小組分享構想，老師針對可行性與單手操作給建議。

三個目標

GOAL 01從「好看」走到「好用」知道觸控熱區、對比度、字級這些規範數字背後的人因原因。
GOAL 02看懂 2026 設計趨勢AI 原生介面、微互動、空間介面。
GOAL 03用 AI 開始專題用結構化提示詞產出 App Brief 與 MVP 規格。
Frame 01 — 先玩再說：同一個任務，兩種介面
Try it
01

先玩再說：同一個任務，兩種介面

不用先懂定義。拿起這支手機，用版本 A 和版本 B 各完成一次「訂 2 張今晚 19:30 的電影票」，看看時間、點擊與被擋下的次數差多少。

30 秒看懂兩個介面都能訂到票，但感覺差很多。這個「差」就是 UI 與 UX。
你會做完成同一個任務兩次，再打開 X-ray 看每一處設計屬於 UI 還是 UX。
大約5 分鐘

小提醒：版本 A 其實很「好看」，很多設計系同學會直覺做出這種風格——暗色、細字、低調。好看沒有錯，問題是它把使用者的任務放在美感後面。下一章的 8 張互動卡片，會一個一個帶你看清楚原因。

Frame 02 — 互動圖鑑：好介面的 8 個秘密
Playbook
02

互動圖鑑：好介面的 8 個秘密

每張卡片都能直接操作：找出壞介面的問題、按按看微互動、拉拉看間距與層級、測測自己的反應速度。沒有題目，玩完底下會留一句重點。

30 秒看懂好介面不是「好看」而已，是讓人不用想就會用。
你會做8 張卡片隨便挑著玩，玩過的會顯示「✓ 玩過了」。
大約10 分鐘

想調整「精確數字」（字級、觸控目標、色彩對比、8px 網格），到第 05 章「設計盲點與標準」的四個實驗。

Frame 03 — UI 與 UX
UI ≠ UX
03

UI/UX 使用者介面與使用者經驗

先看兩種角色各自負責什麼，再動手分一分。

30 秒看懂UI 是你「看到」的，UX 是你「感受到」的。
你會做切換看兩種角色的工作，再動手把 7 件事分給 UI 或 UX。
大約8 分鐘
UX · User Experience

根據使用者習慣，規劃整個網站或 APP 的內容

例如哪些區塊的內容要先出現、網站的互動設計、行動呼籲按鈕（Call to Action, CTA）的位置應該擺在哪裡。包括使用者的研究（User Research）和情境分析（Scenario）。

怎麼做研究？

問卷、焦點團體、背景資料調查

研究必須透過問卷調查、焦點團體調查，或是大量的研究資料背景調查，才能獲得潛在客群的使用習慣報告分析。

UI 與 UX 設計的差異示意
Differences Between UI and UX Design
UX 架構與 UI 範圍
UX 架構與 UI 範圍

動手分一分：這件事是 UI 還是 UX 的工作？

每件事選 UI 或 UX，再按「對照老師的切法」。沒有分數——重點是看理由，有些工作本來就兩邊都會碰到。

UI 的工作流程：點每一步看說明

→ → → → → →
01

User story 使用者故事

用「身為（誰）…我想要（做什麼）…以便（得到什麼）」描述使用者要完成的事，是後面所有功能的出發點。

1 / 7

UI 的學習與製作流程

UI 的學習與製作流程圖
UI 的學習與製作流程｜本研究繪製
延伸閱讀：為什麼 UI/UX 設計師這麼熱門？

這幾年 UI、UX 設計師成為視覺設計師熱門的行業首選，這是由網路發達而誕生的新興職業，適應世界趨勢的數位轉型需求增加。近幾年遠距工作盛行，也成為新工作型態的最佳選擇，也有較為優渥的薪水、人格特質展現與相較多元的職涯發展。

隨著科技業對於 App 和 RWD 網頁設計的要求日益升高，每天都有無數的 APP 誕生以及被下載，大眾也越來越注重「使用者體驗」和「現代化美感」，使得「UI/UX 設計師」的需求迅速增加，要會的技能比以往更加多樣、專業，儼然成了設計界耀眼的新興職位！

UI、UX 設計也成為近年來視覺設計師必備的專長與技能，請大家好好利用這門課的時間，讓自己擁有最厲害的設計武器，製作出屬於自己的 UI 作品履歷。

Bakery Paradise App UX/UI Case Study
Bakery Paradise App – UX/UI Case Study
參考書目（4）
Frame 04 — 設計思考
5 Steps · Loop
04

Design Thinking｜設計思考

用一個「以人為本」的方法找出問題、做出解法、再回頭修正——不是一次做完，而是一圈一圈繞。

30 秒看懂同理 → 定義 → 發想 → 原型 → 測試，然後再來一圈。
你會做點五個步驟，走一圈看每一步會產出什麼。
大約5 分鐘
延伸：設計思考是誰提出的？

本方法的創始者為美國知名設計公司 IDEO 創辦人 David Kelley。他在擔任史丹佛大學設計學院院長時，把過去從設計角度思考解決問題的經驗，萃取成一門碩士學程，建立起「設計思考」的學術地位。

五個步驟：點節點，或按「下一步」走一圈

→ → → →
01

同理 Empathize

透過觀察與訪談，站在使用者的角度理解他們真正的需求、感受與困擾。

1 / 5
設計思考的步驟
設計思考的步驟／本研究整理繪製
APP／網站設計流程
APP／網站／設計流程／本研究整理繪製
參考書目（2）
Frame 05 — 設計盲點 vs. UI/UX 標準
Interactive Lab
05

設計系盲點與 UI/UX 標準對照

「好看但不可用」是視傳系最常見的問題。先調一調四個實驗，自己感受規範數字背後的原因。

可操作
30 秒看懂好看不等於好用，每個規範數字背後都有「人」的原因。
你會做拉四個滑桿，親手把壞介面調到及格；再點 8 個維度看對照。
大約12 分鐘

字體與階層

–
今日澆水提醒

琴葉榕的土壤已經偏乾，建議今天傍晚澆水 200ml，並把盆栽移到明亮但不直曬的位置。

標準：主要內文 ≥ 16px，行高 140–150%。

觸控目標 Tap Target

–
粉紅虛線＝指腹約 44px

標準：可點擊範圍至少 44×44px（iOS）／48×48px（Android）。

色彩對比度

–
–
帳戶餘額本月已花費 NT$ 3,280，比上個月少 12%。

標準：WCAG AA 內文對比度至少 4.5:1。注意：品牌色 Tiffany 藍拿來當白底文字是不及格的！

8px 網格

–

觀念深入拆解：平面思維 vs. 數位系統規範

選一個設計維度，對照「盲點」「標準」與「為什麼」。

設計系常見盲點
  • 追求精緻視覺，喜歡使用 過小字級（<12px）。
  • 字間距與行高偏緊，缺乏行高比例。
  • 為造型選用特殊風格字體，忽略內文可讀性。
UI/UX 標準規範
深度剖析與開發痛點

平面設計通常在固定紙張尺寸觀看，但手持裝置觀看距離變動大。小字體在手機螢幕上會造成極高閱讀負擔；特殊字體在多語系或異型螢幕上容易出現渲染遺失或破版。

Frame 06 — 課堂 Live Demo
AI Workflow
06

課堂 Live Demo 示範流程

先跟著三個步驟用 AI 產出專案 Brief，再看四個實戰案例各解決了什麼痛點。

30 秒看懂用「結構化提示詞」，讓 AI 當你的產品經理夥伴。
你會做把領域換成你的主題，複製提示詞去問 AI；再看 4 個案例怎麼做。
大約15 分鐘

AI 工具應用三步驟

→ →
01

設定領域

確定發想領域（例如：智慧植栽照護與社群）。

精細化 Live Demo 實戰案例庫

目標

策略與 Brief 產出

將模糊靈感收斂為具商業價值的 MVP 功能。

工具與情境

Claude／ChatGPT

發想「PawPulse 寵物健康 App」。

解決痛點

想法過於龐雜抽象

缺乏商業機制與 UX 邊界思維。

  1. 示範錯誤簡短 Prompt 與結構化 Prompt 差異。
  2. 輸入進階 PM Prompt（包含一句話定位、2 個痛點、3 個 MVP 功能及單手操作情境）。
  3. 帶領學生砍掉 2 個過度複雜的功能，現場定義最小可行性產品（MVP）。
教師示範 Prompt
「你是一位專精於 2026 數位醫療與寵物科技的資深 UI/UX PM。請為視傳系學生發想名為『PawPulse』的 App Brief：
1. 定位與 Tagline 2. 2 個具體痛點 3. 3 個 MVP 功能（需含 1 個 2026 AI 多模態辨識功能）4. 單手抱寵物的情境限制。」
Frame 07 — MVP 功能切割
MoSCoW
07

MVP 功能切割與課堂指導實戰指南

MVP（最小可行性產品）功能切割，是把龐大複雜的 App 構想，簡化為「剛好能解決核心痛點，並形成完整操作閉環」的最少功能集合。對視傳系學生而言，這是防止「發想過度膨脹、畫面刻不完、體驗零散」的最關鍵步驟。

30 秒看懂先砍功能，只留一條「能走完」的核心流程。
你會做幫植栽 App 切 MVP、對照老師，再用 3 頁核心流檢查自己的專題。
大約10 分鐘

第一步：劃定核心體驗閉環（Core User Loop）——只保留「起點 ➔ 核心動作 ➔ 達成目標」的最短單線路徑，其餘分岔一律砍掉。
範例：植栽 App 核心閉環＝拍照辨識 ➔ 取得診斷處方 ➔ 一鍵設定提醒。

MoSCoW 矩陣：四個優先級

MUST HAVE｜非有不可

沒有此功能，App 完全無法運作或無法解決核心痛點。

✅ 納入 MVP（期末必須完成）
SHOULD HAVE｜應該要有

能顯著提升體驗，但缺了依然能完成核心任務。

⚠️ 移至 V1.1（本學期暫不畫）
COULD HAVE｜可以要有

錦上添花或娛樂性質的功能，開發成本偏高。

⚠️ 移至 V2.0（企劃書備註即可）
WON'T HAVE｜本次不做

開發成本極高，且偏離核心病蟲害診斷痛點。

⛔ 本學期剔除（嚴禁加入專案）

動手切：幫智慧植栽 App 切 MVP

每個功能選一個優先級，再按「對照老師的切法」。沒有分數，會幫你整理出自己的 MVP 清單。

小組分工演練與教師個案指導流程

小組討論與實作任務
  • 小組成員輪流用 1 分鐘說明 App 概念。
  • 組員共同對專案功能貼上 MoSCoW 標籤。
  • 實施「3 頁核心流」驗證：僅保留「首頁 ➔ 核心功能頁 ➔ 結果頁」三頁路徑。
教師 1 對 1 檢核重點
  • 防膨脹檢查：砍掉過度複雜的社群、商城與會員積點系統。
  • 焦點檢核：確認 App 是否專注於解決「一個最痛的問題」，避免「既要、又要、還要」。

互動實驗：把 CTA 放進拇指熱區

在手機畫面上點一下，把「拍照診斷」按鈕移過去，看看單手能不能按到。

拇指熱區 Thumb Zone

–
 拍照診斷
自然區伸展區難觸及

為什麼高頻按鈕要放下面？

大螢幕手機單手操作時，拇指以手機下緣為圓心畫出一個弧形範圍：下半部是自然觸及區，上方與對角是難以觸及區。

  • 把核心觸發按鈕（如：拍照診斷）收納在頁面中下段的 Sticky Bottom Bar。
  • 右上角適合放「不常用、需要謹慎」的功能，例如設定或刪除。
  • 切換左手看看：熱區會左右翻轉，置中偏下的位置對兩手都友善。

Designing For Large Screen Smartphones（Thumb Zone）

學生隨堂實作工作單（Actionable Worksheet）

直接在這裡填寫，內容會自動存在你的瀏覽器；完成後可以下載成 Markdown 或複製貼到 Figma。

1

定義 3 頁核心操作流

檢核點
2

AI 提詞驗證 MVP

MVP 切割 Prompt
「請扮演 UX 顧問，評估 [App名稱] 的 MVP 功能。請從此清單中挑出『少了它產品就無法運作』的 3 個核心功能，並將其餘功能列為 V1.1 暫緩開發。」
你的 App 名稱：
檢核點
3

Thumb Zone 人因排版

將最核心的控制按鈕（CTA）擺放於畫面：

檢核點
內容會自動儲存在這台裝置
Frame 08 — Figma 介紹
8 Products
08

Figma 介紹

Figma 是一款基於雲端的協作式 UI/UX 設計工具，廣泛用於網頁設計、App 介面設計、流程圖製作、元件系統規劃等。它支援多人即時編輯、版本控制與原型模擬，已成為設計教育與業界實務的重要平台之一。

Figma 官網
30 秒看懂Figma 是這學期的主力工具：雲端、免安裝、多人協作。
你會做點開 8 個模組，認識 Figma 能做什麼。
大約5 分鐘
Figma 模組功能介面
Figma 模組功能介面

Figma 產品功能模組：點一個看說明

前往

Figma 的核心特色

01

雲端協作

無需安裝軟體，透過瀏覽器即可進行多人即時編輯，並支援即時共編、權限管理與留言系統。設計過程中的每一次變更都會自動儲存並即時更新，方便團隊成員在不同地點、不同裝置上共同進行設計討論與修改。

介面一覽：Figma Design 與 FigJam

Figma Design 畫面
Figma Design 畫面
Food delivery app wireframe 與 hi-fi mockups
Figma Design｜Food delivery app wireframe ＆ hi-fi mockups
參考書目（2）
Frame 09 — UI 職場
Career
09

UI 職場

UI 設計師（User Interface Designer）是專門負責數位產品（如網站、APP、智慧裝置介面）視覺與互動界面設計的專業人員。主要任務是設計並優化使用者與產品介面之間的互動，讓使用者在操作時能夠直覺、流暢、美觀地完成任務；他們通常與 UX 設計師、前端工程師、產品經理密切合作，將需求轉換成具體的視覺設計。

30 秒看懂UI 設計師不只是畫畫面，還要和 UX、工程師、PM 一起做產品。
你會做勾選你已經有的技能，看看還缺什麼。
大約3 分鐘

主要工作內容

  • 介面視覺設計：設計版面配置、按鈕、ICON、字體、顏色、插畫等。
  • 建立設計系統：制定顏色、字體、間距、按鈕等規範，確保設計一致性。
  • 元件與樣式製作：在 Figma、Sketch 等工具中建立可重用的 UI 元件。
  • 與 UX 配合：將 UX 線框圖與使用流程轉換為最終視覺成品。
  • 與前端協作：提供切圖、樣式規範，確保設計能精準落地。

所需技能：勾勾看你已經具備哪些

技能雷達0 / 5
UI 設計師職場相關圖表
參考文獻（2）
Frame 10 — 學期作業說明
Semester Project
10

學期作業說明

APP or WEB 專案設計 OR ReDesign 改善方案。點三個階段，看每個階段要交什麼。

完整作業說明與檢核
30 秒看懂學期作業分三階段：資料搜集 → 期中提案 → 期末完整提案。
你會做點三個階段看要交什麼，再看學長姐的作品怎麼做。
大約10 分鐘
→ →
01

分組、資料搜集

1. 動機與目的（問題定義）＞ 2. 現況分析、數據分析 ＞ 3. User story（用戶分析）＞ 4. 競爭者分析 ＞ 5. Functional Map（功能地圖）＞ 6. Flow Chart（流程圖）＞ 7. Wireframe ＞ 8. UI Flow（UI 流程圖）＞ 9. Mockup ＞ 10. Prototype

學長姐範例與專題範例

114-2

114-2 學長姐作業

FigJam 作業板
ReDesign

Redesign PChome 24h App

Behance 線上發表 Figma 報告（含設計系統、情緒板） Figma 報告原檔 Figma 檔案原檔 Prototype 互動檔案
ReDesign · 1085445013

PxPay（全聯支付）

期中發表
期中報告檔案WF 整合流程
期末發表
Behance 線上發表期末簡報完整檔互動精稿播放

期末簡報含期中簡報、情緒板、Figma Mockup｜精稿設計及 Design System｜設計系統、Prototype｜互動原型設計。

ReDesign · 1081445083

中國信託行動銀行 Home Bank

期中發表
期中報告檔案WF 整合流程
期末發表
Behance 線上發表期末簡報完整檔互動精稿播放

直接操作：PxPay 期末互動精稿

Frame 11 — 本週足跡
Recap
11

本週足跡：你玩過了什麼？

沒有考試。這裡只記錄你這週體驗過的互動，並留一句話給自己——它很可能就是你專題的起點。

30 秒看懂三件事帶走就夠了。
你會做看看你玩過哪些、寫下你最想改善的爛介面。
大約3 分鐘

已體驗 0 / 11（點一下可以回去玩沒玩過的）

帶走這三件事

01

UI ≠ UX

UI 是你「看到」的（字級、顏色、按鈕）；UX 是你「感受到」的（流程、順不順、會不會出錯）。兩者缺一不可。

02

規範數字是「人」的限制

44px 是手指、4.5:1 是眼睛、16px 是閱讀距離。不是規定好玩，而是人真的這樣。

03

先砍功能，再做畫面

專題先守住一條能走完的核心流程（MVP），其他放到之後。

留一句話給自己

你最近用過哪個「好難用」的 App 或網站？它哪裡讓你卡住？（自動存在這台裝置，沒有人會看）

Frame 12 — 課後作業
Homework · Week 01
12

HomeWork｜課後作業

第一週要做的六件事。做完一項就勾一項，進度會記在你的瀏覽器。

30 秒看懂本週六件事，總共約 1.5～2 小時；做完一項就勾一項。
你會做勾進度、複製提示詞，開始作業 01。
大約課後 2 小時
本週進度0 / 6

【作業 01】App 核心概念 Brief 與視覺 Moodboard

合理預估工時
1.5～2 小時（符合 2 學分每週課後作業合理負擔）
作業命題三要素
  1. AI 輔助 App Brief（30%）：App 名稱與一句話 Tagline；1 個核心痛點 ➔ 1 個對應之 MVP AI 功能解法。
  2. 2 個精準競品對照（30%）：找 2 個同類 App，各列出 1 個 UI 值得學習處 與 1 個 UX 體驗瑕疵處。
  3. 視覺 Moodboard 板塊（40%）：收集 3–8 張圖片（包含：品牌主色意象、字體風格、2026 UI 風格參考）。
繳交格式與頁面
  1. 不可直接複製提示詞，作業附上 AI 分享連結。
  2. 學習 Figma 後，整理至：Figma 專案連結（僅需建立 1 個 1920×1080 的 Frame，將上述三要素整理為一張清晰的 Presentation Board）。
AI 工具範例

AI 工具建議 Prompt：先換成你的主題

作業 01 · 基本 Prompt
「我是一位 UI/UX 顧問。我想為 [主題，如：租屋族小植栽] 設計一個 App。
請提供：
1. 產品名稱建議與一句話 Tagline
2. 1 個最真實的使用者痛點
3. 1 個利用 2026 AI 技術解決此痛點的 MVP 核心功能
4. 2 個市面上可以參考的競品 App 名稱
5. 3 個視覺 Moodboard 關鍵字與建議的品牌主色色系」
你的主題：

以下僅為參考，不可直接複製當作業；請用自己的主題與 AI 對話，並在作業附上 AI 分享連結。

5 大主題 Prompt 對照表

永續環保與減碳生活　適合：綠色生活、循環減廢

Prompt 01
「我是一位資深 UI/UX 產品經理。我想為 [外食大學生] 設計一款名為『環保永續與減碳記帳』的 Mobile App。
請為我提供：
1. 產品名稱建議與一句話 Tagline
2. 1 個最真實的使用者痛點 (Pain Point)
3. 1 個結合 2026 年 AI 圖像辨識的 MVP 核心功能 (如：拍照自動辨識環保杯/餐盒並換算減碳點數)
4. 2 個市面上可參考的競品 App 名稱 (1 個功能競品、1 個視覺參考)
5. 3 個視覺 Moodboard 關鍵字與建議的品牌主色色系」
替換目標族群：

作業說明影片