課程大綱 Syllabus |
學生學習目標 Learning Objectives |
單元學習活動 Learning Activities |
學習成效評量 Evaluation |
備註 Notes |
序 No. | 單元主題 Unit topic |
內容綱要 Content summary |
1 | 課程介紹 |
1. 課程介紹
2. 教材介紹、評分標準、作業說明 |
了解本課程的授課內容與學習規範 |
|
作業
|
|
2 | Figma快速上手 |
1.UI/UX設計思維與開發流程
2.基本功能介紹 |
1. 介紹UI/UX設計思維與開發流程
2. 開啟專案工作區域與畫板
3. 了解框架與群組差異
4. 了解形狀、布林群組與鋼筆工具 |
|
作業
|
|
3 | Figma功能介紹 |
進階功能使用介紹 |
1.文字設定與操作技巧
2.置入圖片、調整與編輯屬性
3.管理顏色樣式與套用效果
4.響應式設計
5.常見操作技巧與快捷鍵
6.控管設計版本 |
|
作業
|
|
4 | Figma進階技巧 |
1.設計系統介紹
2.常見UI元件、變數 |
1.Auto Layout
2.統一設計:熟悉元件 |
|
作業
|
|
5 | 打造設計系統 |
1.自動排版、網格系統
2.建立設計系統:建立核心樣式 |
1.進階元件技巧:變體
2.掌握網格系統
3.打造設計系統:建立核心樣式 |
|
作業
|
|
6 | 常見元件及可擴展設計 |
元件設計、進階元件技巧 |
1.建構設計規範
2.了解建構原型所需要的元件 |
|
作業
|
|
7 | 基礎原型設計 |
設計常見的UI元件:按鈕、表單、回饋通知 |
設計案例分享 |
|
作業
|
|
8 | 基礎互動設計 |
設計常見UI元件:列表、彈跳視窗、導航選單 |
UI Flow分享展示 |
|
作業
|
|
9 | 期中作品發表 |
期中作品繳交 |
完成期中作品 |
|
作業
|
|
10 | 設計方法 |
臨摹現有產品,學習設計細節 |
設計案例分享與期中作業討論 |
|
作業
|
|
11 | 基礎互動設計 |
Figma實用插件與社群、原型介紹與基本設定、熟悉觸發事件與互動連結設定 |
1.Figma實用Plugins Community
2.原型介紹與基本設定
3.熟悉觸發事件與互動連結設定 |
|
作業
|
|
12 | 基礎互動設計 |
掌握常見的互動與轉場效果 |
1.掌握常見的互動與轉場效果
2.遮罩Overlay基礎與進階用法
3.替換元件與搭配Overlay用法 |
|
作業
|
|
13 | 互動設計 |
滾動式內容、置頂導航與漂浮按鈕、製作活潑的原型 |
1.滾動式內容、置頂導航與漂浮按鈕
2.加入GIF檔案讓設計更活潑
3.Smart Animation製作原型 |
|
作業
|
|
14 | 互動設計 |
原型製作上的小技巧 |
專案設計技巧、與設計工具介紹 |
|
作業
|
|
15 | 設計實戰 |
瀏覽並模擬原型 |
在裝置上進行動態模擬,瀏覽設計成果 |
|
作業
|
|
16 | 期末企劃討論 |
產品架構設計與規劃、期末作業討論 |
設計驗證,發現問題與改善設計
個別或小組討論 |
|
作業
|
|
17 | 期末作品提案 |
專案設定與系統說明、期末作業討論 |
設計驗證,發現問題與改善設計
設計提案力 |
|
作業
|
|
18 | 期末作品發表 |
期末作品繳交 |
完成期末作品 |
|
作業
|
|