使用者介面設計課程講義

UI/UX Design Figma

UI/UX 概論與設計趨勢

Author

JinJin Wang

UI/UX Design Lead
September 10, 2026

課程基本資訊與學習目標

課程基本資訊與學習目標

本週單元 第 01 週 / 單元 01：UI/UX 概論與 2026 設計趨勢
授課對象 視覺傳達設計系二年級（18 週課程 / 每週 2 小時）
核心目標
  1. 打破平面思維迷思：深入比較平面視覺美學與數位 UI/UX 人因工程（觸控熱區、WCAG 對比度）之差異。
  2. 掌握 2026 前沿趨勢：涵蓋 AI 原生介面、微互動 (Micro-interactions) 與 Spatial UI 空間介面。
  3. AI 策略夥伴實作：學習使用 Claude / ChatGPT 結構化 Prompt，高效產出期末 App Brief 與 MVP 規格。

時間分配與流程

時間配比 流程階段 授課內容與實作重點
40 分鐘 觀念解析與趨勢拆解
  • UI/UX 商業邏輯與人因工程拆解（44px 熱區、8px Grid、4.5:1 對比度）。
  • 視傳系「好看但不可用」典型盲點診斷與優化。
  • 2026 趨勢：AI 動態生成介面、空間運算 UI 與狀態思維。
60 分鐘 AI 腦力激盪實作演練
  • 使用 Claude / ChatGPT 進行 Prompt 結構化提詞演練。
  • 學生現場實作：發想專案主題、痛點分析與 3 大 MVP 核心功能。
    • 【課堂 Prompt 範本】 「你是一位資深 UI/UX 產品經理。請為視傳系學生發想一個 2026 年創新 App 提案。領域為『智慧植栽照護與社群』。 請提供：1. 產品名稱與 Tagline 2. 使用者 2 大痛點 3. 3 個 MVP 功能（含 1 個 2026 多模態 AI 功能）4. 視覺風格建議。」
20 分鐘 小組交流與講評
  • 小組分享專案構想並進行 MVP 功能切割。
  • 教師針對商業可行性、單手操作 (Thumb Zone) 情境進行個案指導。

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

  1. UX（User Experience）使用者體驗
    2. 則是根據使用者的習慣，安排整個網站或APP頁面的內容規劃，像是哪些區塊的內容要先在網站上出現，網站的互動設計、行動呼籲按鈕（Call to Action, CTA）的位置應該擺在哪裡。包括使用者的研究（User Research）和情境分析（Scenario）。研究必須透過問卷調查、焦點團體調查，或是大量的研究資料背景調查，才能獲得潛在客群的使用習慣報告分析。
  2. UI（User Interface）使用者介面
    3. 主要專業是設計頁面上的功能、顧及使用的便利性與整個設計的美學，網站的美觀性和他息息相關；UI可以是將UX理念實踐的美學工程師，包括整個網站的顏色、字型、字體大小、配置安排，讓網站或APP除了有好的使用者體驗，更有舒適美觀的視覺設計。
    Skeuomorphic Design Example
    Differences Between UI and UX Design
    Skeuomorphic Design Example
    UX架構與UI範圍
  3. UI的工作流程大概如下

    4. 1.User story > 2.Functional Map > 3.Flow Chart > 4.UI Flow > 5.Wireframe > 6.Mockup > 7.Prototype

  4. UI的學習與製作流程
    5. Skeuomorphic Design Example
    UI的學習與製作流程｜本研究繪製
  5. UI/UX的興盛

    6. 這幾年UI、UX 設計師成為視覺設計師熱門的行業首選，這是由網路發達而誕生的新興職業，適應世界趨勢的數位轉型需求增加。近幾年遠距工作盛行，也成為新工作型態的最佳選擇，也有較為優渥的薪水，人格特質展現與相較多元的職涯發展，最近幾年隨著科技業對於 App 和 RWD 網頁設計的要求日益升高，每天都有無數的APP誕生以及被下載，大眾也越來越注重所謂的「使用者體驗」和「現代化美感」，使得「 UI/UX 設計師」的需求迅速增加，要會的技能比以往更加多樣、專業，儼然成了設計界耀眼的新興職位！

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

    Skeuomorphic Design Example
    Bakery Paradise App – UX/UI Case Study

    參考書目

Design Thinking｜設計思考

設計思考（Design Thinking）是一個以人為本的解決問題方法論，透過從人的需求出發，為各種議題尋求創新解決方案，並創造更多的可能性。而設計思考早已廣泛地被應用在商業領域去發展具市場價值的產品與服務

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

「設計思考」總共有5個步驟，分別是 同理(Emphathize)→定義(Define)→發想(Ideate)→原型(Prototype)→測試(Test)，透過這5個步驟的設計流程，不斷的反覆測試與回頭修改後，我們將可以更有效率的設計出更貼近使用者需求的產品。

Skeuomorphic Design Example
設計思考的步驟/本研究整理繪製
Skeuomorphic Design Example
APP/網站/設計流程/本研究整理繪製

參考書目

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

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

評估項目 設計常見盲點 (好看不可用) UI/UX 標準規範 (兼具美感與易用)
字體與階層 字級過小 (<12px) 以追求精緻感，行高過密，閱讀對比度不足。 遵循 Mobile 規範：主要內文 ≥ 16px，行高 140-150%，視覺階層清晰。
觸控目標 (Tap Target) 按鈕與點擊目標極小 (<20px)，導致使用者容易誤觸。 嚴格遵守 iOS / Android 觸控安全區域規範（點擊範圍至少 44x44px）。
色彩對比度 偏好淺灰字配白底或同色系組合，無視無障礙設計。 通過 WCAG AA 標準（對比度至少 4.5:1），確保各種情境皆可辨識。
設計思維 僅關注單張靜態視覺海報風格。 考量畫面狀態切換、使用者操作流程 (User Flow) 與動態反饋。

觀念深入拆解：設計系平面思維 vs. UI/UX 數位系統規範

面向 / 設計維度 設計系常見盲點
(平面、繪圖與藝術美學導向)		 UI/UX 標準規範
(系統化、人因工程與 2026 數位標準)		 深度剖析與開發痛點
字體與排版階層
(Typography)		 • 追求精緻視覺，喜歡使用 過小字級 (<12px)。
• 字間距與行高偏緊，缺乏行高比例。
• 為造型選用特殊風格字體，忽略內文可讀性。 		• 移動端主內文級數 ≥ 16px，次要資訊 ≥ 13pt。
• 遵循 Apple HIG 排版規範 與固定倍數 Material Design 字階表。
• 行高維持 140%-150%，預設採用原生系統字型 (San Francisco / Roboto)。 		平面設計通常在固定紙張尺寸觀看，但手持裝置觀看距離變動大。小字體在手機螢幕上會造成極高閱讀負擔；特殊字體在多語系或異型螢幕上容易出現渲染遺失或破版。
人因工程與觸控
(Ergonomics & Touch)		 • 把按鈕與 Icon 當成「裝飾圖畫」，尺寸隨視覺造型自由縮放。
• 點擊目標過小（例如：15x15px 精細圖示）。
• 忽略熱區間距，按鈕緊貼頁面邊界或相互擠壓。
• 未考量單手操作與手勢觸及率。 		• 遵循 iOS / Android 規範：最小可點擊區域 ≥ 44x44px (iOS) / 48x48px (Android)。
• 運用 Hit Slop 機制延伸熱區，並符合 菲茨定律 (Fitts's Law)。
• 依據 單手操作拇指熱區 (Thumb Zone) 佈局，將高頻 CTA 置於畫面中下段。
• 組件之間保持至少 8-12px 防誤觸間隔。 		人類手指指腹平均接觸面積約為 8-10mm（折算約 44-48px）。若熱區低於此標準，會引發高度誤觸率 (Fat Finger Effect) 與無效點擊的焦慮感。

在前端開發上，若設計師未定義實質熱區，工程師常需硬寫 Margin/Padding 鋪墊，容易導致手勢滑動衝突或破壞排版結構。
色彩邏輯與無障礙
(Color & Accessibility)		 • 偏好莫蘭迪色、淺灰配白底等低對比配色以求質感。
• 純粹依視覺美感調色，色彩不具功能語意。
• 忽略不同螢幕色溫與無障礙族群的需求。 		• 符合 W3C WCAG 2.1 規範，通過 WebAIM 對比度檢測（對比度 ≥ 4.5:1）。
• 建立語意化色彩系統 (Semantic Colors)：Primary, Error, Warning, Success。
• 支援 Light / Dark Mode 變數切換。 		低對比度在室外強光下會讓介面完全消失。此外，色彩在 UI 中代表「系統狀態」，若純粹為好看而隨意配色，使用者將無法直覺判斷系統的危險或成功狀態。
版面與網格系統
(Grid & Layout)		 • 採用自由排版或目測對齊，組件邊界不規則。
• 隨意使用奇數像素尺寸（如 13px, 21px, 37px）。
• 靜態頁面思維，未考慮不同手機尺寸拉伸。 		• 嚴格遵循 8px Grid 網格倍數律 (8, 16, 24, 32px)。
• 全面套用 Figma Auto Layout 彈性容器 (Hug, Fill, Fixed)。
• 劃分系統 Margins、Gutters 與 Safe Area。 		前端工程師是以模組化程式碼 (CSS Flexbox / Grid) 來實現介面。隨意定義的奇數像素會導致算式無法整除，造成跨裝置呈現時出現模糊邊緣 (Sub-pixel rendering issues)。
動態與狀態思維
(States & Dynamics)		 • 僅設計「一張完美的靜態畫面」。
• 忽略按鈕被按下、載入中或發生錯誤時的狀態。
• 欠缺微互動 (Micro-interactions) 體驗規劃。 		• 完整定義組件 5 大狀態：Default, Hover, Pressed, Disabled, Error。
• 規劃空狀態 (Empty State)、加載 (Loading) 與 Skeleton 骨架屏。
• 整合 Lottie / Rive 輕量動效 與 Smart Animate 物理動畫 提供即時回饋。 		使用者與 App 的互動是動態對話。如果沒有按下時的反饋、加載狀態或失敗提示，使用者會產生系統當機的焦慮感，導致重複點擊或直接卸載 App。
心智模型與過程
(Mental Model)		 • 設計師中心思考：「我覺得這樣擺很有藝術感/很酷」。
• 追求視覺衝擊，強迫使用者學習新的導覽邏輯。
• 缺乏數據與使用者驗證概念。 		• 使用者中心設計 (UCD)：遵循 雅各布定律 (Jakob's Law)，順應既有操作習慣。
• 視覺順應資訊優先級 (Visual Hierarchy)。
• 以可用性測試 (Usability Testing) 與注意力熱力圖數據驅動調整。 		App 是用來解決問題的工具，而非展覽館畫作。突破傳統慣例的創新導覽介面往往會提高使用者的認知負荷 (Cognitive Load)，造成極高的操作流失率。
文案與內容架構
(UX Writing)		 • 充斥大量 Lorem Ipsum 假文字，或填寫美觀但空洞的英文短句。
• 標題與內文未做字數極限控制。
• 忽略文案的引導性與語氣 Consistency。 		• 遵循 NN/g UX Writing 指南（清晰、簡潔、具動作導向）。
• 考量多國語言字數溢出 (Overflow) 彈性排版。
• 結合 2026 AI 動態替換在地化真實圖文資料。 		假文字會掩蓋實際使用上的版面破綻（例如日文或中文長標題）。UX 文案是引導使用者完成操作的靈魂，過度追求視覺擺設而忽略文案邏輯，會使介面失去引導功能。
2026 數位與 AI 工具整合
(AI Workflow)		 • 手動從零繪製每一個向量小元件，效率低下。
• 圖層命名混亂（例如 Group 142, Frame 888）。
• 設計無法銜接開發交付 (Hand-off)。 		• 活用 Figma AI (Make Designs & Auto Layout) 產出結構底稿。
• 使用 AI Auto-Rename 一鍵語意化整理圖層結構。
• 建立包含 Figma Variables 的可維護元件庫 (Design System)。 		2026 年的 UI/UX 設計師核心價值在於「架構邏輯、體驗策略與動態視覺」，而非刻圖細節。缺乏系統化圖層整理與變數結構，設計稿將完全無法轉化為前端程式碼 (Code Ready)。

課堂 Live Demo 示範流程

AI 工具應用

步驟 操作說明與 AI 提詞 (Prompt) 範例
步驟 1：設定領域 確定發想領域（例如：智慧植栽照護與社群）。
步驟 2：AI 提詞演練 開啟 ChatGPT 或 Claude，輸入以下結構化 Prompt 產生專案 Brief： 
「你是一位資深的 UI/UX 產品經理。請為視覺傳達設計系學生發想一個 2026 年的創新 App 提案。
領域為『智慧植栽照護與社群』。

請提供以下內容：
1. 產品名稱與一句話標語 (Tagline)
2. 2 個目標使用者的核心痛點 (Pain Points)
3. 3 個核心功能 (Core Features)，需包含 1 個 2026 年 AI 輔助功能
4. 預期視覺風格建議 (Moodboard Directions)」
步驟 3：調整與收斂 根據 AI 產出內容，針對學生能力範疇進行優化，評估核心功能的執行可行性。

課堂精細化 Live Demo 實戰示範案例庫

Demo 案例與目標 使用工具與情境 課堂現場操作步驟示範 解決視傳系學生何種痛點
案例一：策略與 Brief 產出
將模糊靈感收斂為具商業價值的 MVP 功能。 		Claude / ChatGPT
情境：發想「PawPulse 寵物健康 App」 		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. 單手抱寵物的情境限制。」
 想法過於龐雜抽象、缺乏商業機制與 UX 邊界思維。
案例二：人因工程現場改造
將「好看但不可用」的畫面改造為國際 UI 規格。 		Figma + Stark 外掛
情境：改造音樂播放器頁面 		1. 熱區改造：將 18x18px 按鈕用 44x44px 透明 Frame 包覆，設定 Hit Slop。
2. 對比度修正：用 Stark 檢測淺灰字 (#A1A1A1, 1.8:1 Failure)，現場調整為 #334155 (5.2:1 Pass)。
3. 字階優化：將歌詞內文由 11pt 升至 16px，行高手動設為 150% (24px)。 		字體過小、顏色對比不足、觸控按鈕過小無法點擊。
案例三：AI 風格與 Tokens 萃取
高效率產出 3D/向量風格素材並建立色票變數。 		Midjourney v6 + Recraft.ai + Figma AI
情境：減碳 App 3D 素材 		1. Style Reference 控色：Midjourney 使用 --sref [Palette_URL] 生成一致風格 3D 勳章。
2. 向量化去背：拖入 Recraft.ai 轉為可換色 SVG 檔。
3. Tokens 生成：使用 Figma AI 自動擷取主色並建立 Primitive/Green/500 色彩變數。 		自繪圖案耗時過長、素材風格割裂無法統一。
案例四：拇指熱區與微互動
單手操作 (Thumb Zone) 佈局與狀態切換動效。 		Figma Smart Animate + Protopie
情境：外送 App 結帳按鈕 		1. 熱區重構：將右上角結帳鍵移至頁面底部，套用 Sticky Bottom Bar 符合拇指自然弧線區。
2. 空間 UI 對比：示範 Apple Vision Pro 空間介面的 Hover Depth 與 Eye-Gaze 反饋。
3. 無縫狀態動效：用 Smart Animate 實作「預設 ➔ 載入中 (Spinner) ➔ 成功 (Checkmark)」按鈕狀態。 		靜態畫面思維、缺乏按鈕點擊與系統載入的狀態反饋。

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

MVP（最小可行性產品）功能切割，是指將龐大複雜的 App 構想，簡化為「剛好能解決核心痛點，並形成完整操作閉環」的最少功能集合。對視傳系學生而言，切割 MVP 是防止「發想過度膨脹、畫面刻不完、體驗零散」的最關鍵步驟。 一、 MVP 切割 3 大步驟與 MoSCoW 矩陣 1. 劃定核心體驗閉環 (Core User Loop) 只保留「起點 ➔ 核心動作 ➔ 達成目標」的最短單線路徑，其餘分岔一律砍掉。 範例： 植栽 App 核心閉環 = 拍照辨識 ➔ 取得診斷處方 ➔ 一鍵設定提醒。

MVP 功能切割架構 (MoSCoW 矩陣)

優先級類別 切割篩選標準 學生專案實例 (以智慧植栽 App 為例) MVP 決策動作
Must Have
(非有不可)		 沒有此功能，App 完全無法運作或無法解決核心痛點。 • AI 拍照病蟲害診斷卡片
• 澆水提醒通知設定
• 我的植栽狀態列表		 ✅ 納入 MVP
(期末必須完成)
Should Have
(應該要有)		 能顯著提升體驗，但缺了依然能完成核心任務。 • 植栽成長歷程相簿
• 歷史澆水數據統計圖表		 ⚠️ 移至 V1.1
(本學期暫不畫)
Could Have
(可以要有)		 錦上添花或娛樂性質的功能，開發成本偏高。 • AR 空間模擬植栽擺放效果
• 養花社群成就徽章系統		 ⚠️ 移至 V2.0
(企劃書備註即可)
Won't Have
(本次不做)		 開發成本極高，且偏離核心病蟲害診斷痛點。 • 植栽線上商城與購物車金流
• 1 對 1 付費植物專家諮詢系統		 ⛔ 本學期剔除
(嚴禁加入專案)

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

指導面向 小組討論與實作任務 教師 1 對 1 個案指導與檢核重點
1. 小組專案分享與 MVP 切割 • 小組成員輪流用 1 分鐘說明 App 概念。
• 組員共同對專案功能貼上 MoSCoW 標籤。
• 實施「3 頁核心流」驗證：僅保留「首頁 ➔ 核心功能頁 ➔ 結果頁」三頁路徑。 		• 防膨脹檢查：砍掉過度複雜的社群、商城與會員積點系統。
• 焦點檢核：確認 App 是否專注於解決「一個最痛的問題」，避免「既要、又要、還要」。
2. 商業可行性評估 (Viability) • 評估 MVP 功能是否具備真實使用場景。
• 討論使用者為什麼願意下載此 App（成本 vs 回報）。
• 檢視功能是否需要不可能實現的超高成本支援。 		• 情境合理性：挑戰學生「使用者真的會在這種當下開啟 App 嗎？」。
• 2026 AI 減法取代：指導學生用「1 個 AI 多模態輸入」取代傳統需點選 4-5 層選單的繁瑣表單。
3. 單手操作 (Thumb Zone) 人因檢視 • 在 Figma 佈局中標示 單手拇指熱區。
• 檢查主動作按鈕 (CTA) 是否落在自然觸及區 (Natural Reach Zone)。
• 調整高頻按鈕位置，遠離頂部難以觸及區 (Hard to Reach)。 		• 底部固態列 (Sticky Bottom Bar)：指導學生將核心觸發按鈕（如：拍照診斷）收納於頁面中下段。
• 44px 熱區驗證：確保所有可點擊元件均具備足夠的避錯間隔。

學生隨堂實作工作單 (Actionable Worksheet)

步驟 實作單元 學生填寫 / 實作內容 教師簽核檢核點 (可勾選)
1 定義 3 頁核心操作流 請列出貴組 App 最核心的 3 個頁面名稱：
1. 進入頁：___________________________
2. 操作頁：___________________________
3. 結果頁：___________________________
2 AI 提詞驗證 MVP 輸入 Prompt 協助切割功能：
「請扮演 UX 顧問，評估 [App名稱] 的 MVP 功能。請從此清單中挑出『少了它產品就無法運作』的 3 個核心功能，並將其餘功能列為 V1.1 暫緩開發。」
3 Thumb Zone 人因排版 將最核心的控制按鈕（CTA）擺放於畫面：

Figma介紹

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

FIGMA官網

Skeuomorphic Design Example
Figma模組功能介面

Figma 產品功能模組介紹

Figma 現在包含下列模組，提供設計、協作、簡報與開發整合的一站式工作平台：

Figma Design

核心介面設計工具

用於 UI/UX 設計、排版、圖形創作與原型連結。

FigJam

白板與協作思考

協作式白板工具，適用於頭腦風暴、流程圖、設計思考工作坊。

Figma Slides

簡報製作

互動簡報工具，可結合設計與元件直接製作提案簡報。

Figma Make

互動設計開發中平台

開發中功能，為無程式碼設計互動原型與工作流程設計平台。

Figma Site

網站展示

一鍵將設計轉換為公開網站頁面，適用於展示作品或設計規範。

Figma Buzz

輕鬆製作資產

發布品牌模板，讓您的團隊快速建立社群媒體資產、展示廣告、單頁宣傳資料等。

Figma Draw

插圖工具

使用插圖工具、改進的向量編輯和更多效果創建更具表現力的設計。使用向量畫筆、進階描邊設定、填充等功能創作插畫。無需切換工具，一切盡在 Figma。

Dev Mode

開發者模式

開發者模式專為開發者打造，讓您輕鬆檢查設計並將其轉換為程式碼，無需更改設計文件。所有付費方案的完整版和開發者版用戶均可使用開發者模式。

Figma 的核心特色
01

雲端協作

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

02

向量繪圖工具

Figma 採用向量為基礎的設計模式，可精確建立 UI 元件、圖示、排版、網格與圖形。支援布林運算、圖層遮罩與組件複用等設計技巧，讓畫面清晰且易於調整，適合 UI/UX 設計與圖像元件系統建立。

03

原型設計

使用者可在 Figma 中直接將設計稿連結成互動流程，模擬使用者點擊行為與畫面轉場效果，並支援 Smart Animate、Hover、After Delay 等動畫設定。原型可即時預覽與分享，適合用於簡報、測試與迭代。

04

元件系統與設計規範

Figma 可建立可重用的元件（Component）、變數（Variable）、樣式（Style）與圖層命名規則，並整合成 Design System。設計師與工程師可共享相同資源，提升設計一致性與跨團隊溝通效率。

05

社群資源豐富

Figma 社群（Figma Community）提供數以千計的免費設計模板、圖示、元件庫與實用插件（Plugin），學生與設計師可直接套用與改編，也可發表自己的作品與團隊共用。

Skeuomorphic Design Example
Figma Design畫面
Skeuomorphic Design Example
Figma Design｜UX UI App Design : Food delivery app wireframe & hi-fi mockups and interactive prototypes
Skeuomorphic Design Example
FigJam畫面
Skeuomorphic Design Example
FigJam｜用戶體驗研究計劃｜UX research plan template

參考書目

UI職場

UI 設計師（User Interface Designer，使用者介面設計師）是專門負責數位產品（如網站、APP、智慧裝置介面）視覺與互動界面設計的專業人員。

UI 設計師的主要任務是設計並優化使用者與產品介面之間的互動，讓使用者在操作時能夠直覺、流暢、美觀地完成任務。 他們通常與 UX 設計師、前端工程師、產品經理密切合作，將需求轉換成具體的視覺設計。

主要工作內容

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

所需技能

  • 設計工具能力：Figma、Sketch、Adobe XD、Illustrator、Photoshop 等。
  • 視覺設計基礎：色彩理論、字體排印、構圖、對齊與留白原則。
  • UI/UX 理論；人機互動（HCI）、使用者心理、可用性原則。
  • 設計系統與 ICON 設計：熟悉圖示字體（如 Font Awesome、Material Icons）。
  • 跨部門溝通能力：與產品、工程、行銷人員有效溝通設計意圖。
a

參考文獻

學期作業說明

APP or WEB 專案設計 OR ReDesign改善方案

01

分組、資料搜集

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

02

期中報告

期中報告

APP or WEB提案規劃，包含所有前置流程（動機與目的(問題定義) > 現況分析、數據分析 > User story(用戶分析) 、PERSONA 人物誌、使用者旅程圖 > 競爭者分析 > Flow Chart (流程圖)...）、Wireframe、Wireframe＋Prototype

03

期末報告

APP or WEB完整提案，含前置規劃、Design System、Mockup、Prototype、Behance線上發表

學長姐範例

  1. 114-2學長姐作業
  2. Redesign PChome 24h App
  3. Gifts of Taiwan Land – Application
  4. ReDesign主題｜PxPay (全聯支付)｜1085445013
  5. ReDesign主題：中國信託行動銀行 Home Bank｜1081445083
  6. Behance 期末作品展示

專題範例

  1. 2022紅點設計獎｜Mobile User Interface 介面設計類｜特輯土產 Gifts of Taiwan Land – Application
  2. 2022全國技專校院實務專題競賽｜出版與語文類第一名｜特輯土產 Gifts of Taiwan Land – Application
  3. 法國蕭蒙國際海報節國際競賽學生展入選（教育部視覺傳達設計類 第一等）｜全國技專校院實務專題競賽｜語文與出版群｜佳作｜最熟悉的陌生星球-失智症者之陪伴探索計畫
  4. 最熟悉的陌生星球｜Figma 互動模型展示
  5. 2023金點新秀設計獎｜互動設計類｜廠商贊助獎｜KEEP 溝ING
  6. KEEP 溝ING｜Figma 互動模型展示
  7. EMO星情舒壓禮盒｜Figma 互動模型展示
  8. 2021紅點設計獎｜手機APP Mobility App, Service App｜台灣好機車 Oh My Scooter! Taiwan Only｜ Behance
  9. 2022金點新秀設計獎｜數位互動設計類｜臺鐵APP長者計畫
  10. 2021金點新秀設計獎｜數位互動設計類｜殭姿
  11. 2019金點新秀設計獎｜數位多媒體設計類｜來點熱炒
  12. 2017金點新秀設計獎｜數位多媒體設計類｜MONSLAND
  13. 2015金點新秀設計獎｜數位多媒體設計類｜快樂日記

HomeWork｜課後作業

第一週作業：

01

認識使用者介面設計

閱讀本章內容，初步認識使用者介面設計。

02

認識Figma

進入 FIGMA的世界

03

填寫前置性評量

填寫 課前認知，讓自己與老師了解目前的學習與認知狀態。

04

廣泛閱讀

閱讀推薦連結的文章，與廣泛閱讀相關知識，開始進入UI的世界｜ 推薦連結

05

認識APP與WEB

開始好好的逛APP與WEB｜並分析其優缺點

06

作業準備

開始找合作的組員｜UI/UX需要團隊合作，期中報告前的腦力激盪與合作，開始找欲修改的主題｜或想要創作什麼有趣創新的APP？｜認真思考使用是否便利？路徑是否卡關？是否符合需求？介面設計是否美觀舒適？色彩、字體、編排是否有整體規劃設計？什麼樣的流程與介面設計更符合消費者的需求？.....

課後作業題目與繳交規範

課後作業繳交規範

作業名稱 【作業 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風格參考）。
AI 工具建議 Prompt 學生可直接複製以下 Prompt 進行 5 分鐘快速發想，再手動微調：
「我是一位 UI/UX 顧問。我想為 [主題，如：租屋族小植栽] 設計一個 App。 請提供： 1. 產品名稱建議與一句話 Tagline 2. 1 個最真實的使用者痛點 3. 1 個利用 2026 AI 技術解決此痛點的 MVP 核心功能 4. 2 個市面上可以參考的競品 App 名稱」 5. 3 個視覺 Moodboard 關鍵字與建議的品牌主色色系
繳交格式與頁面
  1. 不可直接複製提示詞，作業附上AI分享連結
  2. 學習Figma後，整理至：Figma 專案連結（僅需建立 1 個 1920x1080 的 Frame，將上述三要素整理為一張清晰的 Presentation Board）。
AI 工具範例
1.ChatGPT
2.Gemini
3.Claude

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

【作業 01】5 大主題 Prompt 可直接複製對照表

以下僅為參考，不可直接複製，作業附上AI分享連結

領域類別與適用主題 可直接複製之 AI 提詞 (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 關鍵字與建議的品牌主色色系」
02. 新手寵物健康照護
適合：寵物醫療、飼主工具 		💡 提示：複製下方方塊文字，並可將 [新手貓咪飼主] 替換為你的目標族群。
「我是一位專精於寵物科技的 UI/UX 顧問。我想設計一款協助 [新手貓咪飼主] 的健康紀錄 App。 請為我提供： 1. 產品名稱建議與一句話 Tagline 2. 1 個飼主在日常照護最焦慮的痛點 (如：無法判斷貓咪異常行為或便便健康度) 3. 1 個結合 2026 多模態 AI 的 MVP 功能 (如：AI 拍照分析便便健康等級並給予照護建議) 4. 2 個可對標的競品 App (包含 UI 值得學習處說明) 5. 3 個溫馨療癒風格的 Moodboard 視覺關鍵字」
03. 情緒覺察與心理減壓
適合：心理健康、日誌習慣 		💡 提示：複製下方方塊文字，並可將 [容易焦慮的大學生成年人] 替換為你的目標族群。
「我是一位數位健康領域的 UX 設計策略師。我想針對 [容易焦慮的大學生成年人] 設計一款情緒舒壓 App。 請為我提供： 1. 產品名稱與一句話 Tagline 2. 1 個使用者不想寫繁瑣文字日誌的痛點 3. 1 個結合 AI 語音分析的 MVP 功能 (如：30秒隨意傾訴，AI 自動轉化為情緒能量圖譜與客製化安撫音樂) 4. 2 個國際常見的心理健康類 App 競品參考 5. 建議的 Dark Mode 或柔和色彩意象與 Moodboard 關鍵字」
04. 大學生團體報告進度管理
適合：專案管理、校園工具 		💡 提示：複製下方方塊文字，並可將 [大專院校學生分責搭便車/進度延宕] 替換為你的目標族群與痛點。
「我是一位產品設計導師。我想設計一款解決 [大專院校學生分責搭便車/進度延宕] 痛點的工具型 App。 請為我提供： 1. 產品名稱與一句話 Tagline 2. 1 個分組報告中最常發生的衝突痛點 3. 1 個結合 AI 大語言模型的 MVP 功能 (如：貼上作業要求，AI 自動拆解子任務並公正分配時程) 4. 2 個知名專案管理 App 競品名稱 (如 Notion, Trello) 之 UI/UX 優缺點簡評 5. 簡約高效率風格的 Moodboard 視覺意象建議」
05. 小眾獨立音樂與展演票務
適合：次文化、音樂社群 		💡 提示：複製下方方塊文字，並可將 [獨立音樂與 Livehouse 愛好者] 替換為你的目標族群。
「你是一位熟悉潮流文化的 UI/UX 設計師。我想為 [獨立音樂與 Livehouse 愛好者] 設計一款音樂展演 App。 請為我提供： 1. 產品名稱與一句話 Tagline 2. 1 個樂迷經常錯過小眾樂團表演或買不到票的痛點 3. 1 個結合 AI 音樂喜好分析的 MVP 功能 (如：分析 Spotify 聽歌偏好，AI 自動預測並推播喜愛的地下樂團行程) 4. 2 個音樂類 App 競品對照 5. 具備街頭/復古/潮流質感的 Moodboard 視覺關鍵字與配色建議」