09/14・17September
2026
2026
User Interface Design · 中國科大視傳系
使用者介面設計
從需求分析到互動原型——Figma 做設計，Figma Agent 當助手。
《使用者介面設計》課程以 Figma 為主要設計工具，完整體驗使用者介面設計流程。從需求分析、線框圖到高保真介面製作，將學習設計系統與色彩應用、互動元件設計及整體風格一致性的規劃。課程強調理論與實作並重，透過案例練習與小組專題，不僅能掌握 UI 設計的核心原則，還能實際完成一份具有互動原型的數位產品介面，培養產品設計、使用性與視覺整合的專業能力。
0+課程單元與報告
0週，雙校區同步進度
0+Students
Figma主要設計工具．教育版免費
Figma Agent從研究整理到線框稿的 AI 助手
Before you start
開始之前：先把 Figma 準備好
Curriculum
使用者介面設計｜課程規劃
本課程教授使用者介面設計之方法，從產業、形式、設計、最新趨勢等內容導入實務案例演練，廣泛介紹 UI 現今的發展與應用方向，由現今趨勢之網頁設計與 APP 設計，到使用者介面設計企劃與設計流程的訓練，以全新專案或 ReDesign 提案，培養學生 UI 視覺規劃與設計實務能力。
Beginner
01
UI/UX 概論與設計趨勢
UI/UX 概論與設計趨勢
進入單元
Beginner
02
Figma 註冊與基本認識
Figma 註冊與基本認識／基本功能介紹
進入單元
Beginner
03
Figma 基本功能練習
Figma 基本功能練習
進入單元
Intermediate
04
UI 開發流程前置作業
UI 開發流程前置作業｜FUNCTIONAL MAP｜FLOW CHART｜UI FLOW｜PERSONA 人物誌
進入單元
Intermediate
05
Wireframe ＆ Prototype 線框圖與互動
Wireframe 線框圖｜將網站或 APP 的基本架構以圖形化的方式呈現，用來傳達網站策劃及設計的思想
進入單元
Intermediate
MID
期中報告
期中報告｜UI 前置調查期中簡報，可複製拾器／讀菇範例修改；加分：展示 Wireframe Prototype
查看作業說明
Intermediate
06
風格設定｜情緒板
［介面設計］風格設定｜情緒板 Moodboard，延續拾器案例練習 Figma Agent 對話下指令
進入單元
Advanced
07
設計系統＋Figma 變數
五層結構、拾器 17 頁設計系統、Token 三層與 Figma Variables 8 步驟、讀菇換一組 Token｜附 11 分鐘影片
進入單元
Advanced
08
Mockup 精稿設計
［Mockup 設計］頁面設計｜以 Figma 製作介面設計精稿
進入單元
Advanced
09
Prototype 互動原型設計
［Prototype］互動原型設計｜用 Figma 做出有質感的動態
進入單元
Advanced
10
AI 生成｜Figma Make ＆ Site
把線框稿與情緒板送進 Figma Make 生成動態介面，再用 Figma Site 一鍵發布上線
進入單元
Advanced
11
Behance 期末發表說明
［Behance］使用者介面設計｜期末發表說明
進入單元
Advanced
FIN
［期末報告］線上發表
［期末報告］產品原型操作提案報告－APP－ReDesign 線上發表
查看作業說明Homework
作業專區
使用者介面設計課程｜平時、期中與期末作業時程
11/02・05November
2026
2026
12/28・31December
2026
2026
More