| 課程名稱 |
(中文) 互動視覺設計 (英文) Visual Design Of Interaction |
開課單位 | 媒體設計學系 | ||
| 課程代碼 | V1320 | ||||
| 授課教師 | 周品妤 | ||||
| 學分數 | 2.0 | 必/選修 | 選修 | 開課年級 | 大二 |
| 先修科目或先備能力：設計基礎/ 平面設計 | |||||
| 課程概述與目標：建立行動裝置APP之介面設計基礎，結合品牌識別概念，獨立完成介面原型設計。 | |||||
| 教科書 | 自編教材 | ||||
| 參考教材 | 1. Alan Cooper等 (2015)。 About Face 4交互設計精髓(倪衛國等譯)。電子工業出版社。 2. Kathryn McElroy(2020)。原型設計(王薌君譯)。碁峰資訊。 3. Dan Saffer(2014) 。微互動(鄭巧玉譯)。碁峰資訊。 3. Jesse James Garrett(2012)。用戶體驗要素(范曉燕譯)。機械工業出版社。 4. 余振華著(2016)。術與道:移動應用UI設計必修課。 人民郵電出版社。 |
||||
| 課程大綱 | 學生學習目標 | 單元學習活動 | 學習成效評量 | 備註 | ||
| 週 | 單元主題 | 內容綱要 | ||||
| 1 | 9/16 課程介紹 | 課程介紹、成績制度、作業介紹與分配 | 瞭解這學期的課程與期望 |
|
||
| 2 | 9/23 介面設計定義及設計原則介紹 | 1. 從使用者介面定義到設計原則介紹 2. Adobe XD基本功能介紹 |
了解介面設計定義與設計原則，使用Adobe XD軟體進行基本的頁面繪製 |
|
|
|
| 3 | 9/30 行動裝置的螢幕：像素與尺寸 | 1.上週作業分享 2. 介紹螢幕尺寸、像素、解析度與像素密度的觀念 3. Adobe XD連接至手機即時預覽功能介紹。 |
了解螢幕尺寸、像素、解析度與像素密度的關係和實際應用。 了解自己使用的手機尺寸、解析度及像素密度。 |
|
|
|
| 4 | 10/7 介面導航與佈局(1) | 1. 行動裝置APP的常見佈局與元件 2. 公佈期中題目及內容 |
建立介面佈局基礎 |
|
|
|
| 5 | 10/14 介面導航與佈局(2) | 1. 介面元件介紹 2. Adobe XD線框圖設計 |
發展APP線框圖 |
|
|
|
| 6 | 10/21 品牌識別 | 1. 介紹品牌識別與GUI實例 2. 排版＆介面字型使用原則 3. 在Adobe XD中建立視覺系統 |
了解視覺系統如何設計與應用 |
|
|
|
| 7 | 10/28 Prototype Development Workshop | 1. 介紹Adobe XD prototype功能 2. 發展其中作業UI & GUI prototype |
獨立發展原型設計，利用現有品牌識別延伸GUI設計 |
|
|
|
| 8 | 11/4 Prototype Development Workshop | 1.上週作業發表 2.發展UI & GUI prototype |
獨立發展原型設計，利用現有品牌識別延伸GUI設計 |
|
|
|
| 9 | 11/11 期中作業研討 | 期中作業繳交 | 完成期中作業 |
|
|
|
| 10 | 11/18 為不同裝置設計介面(1) | 1. 期中作業檢討 2. 手機、平板與電腦裝置的使用行為和特性 3. 公佈期末題目 |
了解不同裝置的使用行為和特性，與如何發展不同裝置版本的APP |
|
|
|
| 11 | 11/25 為不同裝置設計介面(2) | 1. 發展手機、平板與電腦裝置版本的APP 2. 手機、平板與電腦裝置的APP介面線框圖設計 |
針對不同裝置的使用方式和特性，設計介面線框圖 |
|
|
|
| 12 | 12/2 建立識別系統 | 1. 產品精神、風格定義 2. 顏色與字體的使用 3. 建立情緒版 |
熟悉APP圖示設計的流程與方法 |
|
|
|
| 13 | 12/9 APP圖示設計 | APP圖示設計的流程與方法 | 熟悉APP圖示設計的流程與方法 |
|
|
|
| 14 | 12/16 介面動態邏輯 | 介紹頁面轉換與手勢操作的動態邏輯 | 建立介面動態邏輯概念 |
|
|
|
| 15 | 12/23 微互動 | 1.微互動介紹與應用 2. Loading icon動態設計 |
了解如何利用微互動，創造更好的數位體驗 |
|
|
|
| 16 | 12/30 Prototype Development Workshop | 期末作業 工作坊： 介面流程、動態視覺輔導 |
呈現更好的期末成果 |
|
||
| 17 | 1/6 期末發表 | 期末作業發表 | 設計專題成果整合與口語表達能力培養 |
|
|
|
| 18 | 1/13 期末考週(公布學期總成績) | 期末展 | 展覽規劃與執行 |
|
||
|
教學要點概述： |
| 核心能力 | 期末考 | 期中考 | 作業 | ||
| 核心能力一 | 了解主客觀因素，規劃出解決方案，讓結果與眾不同 | 1/10 | 1 | 1 | 1 |
| 核心能力三 | 創作與想像解決方案 | 3/10 | 3 | 3 | 3 |
| 核心能力四 | 從解決方案裡定義與辨識最佳設計案 | 1/10 | 1 | 1 | 1 |
| 核心能力五 | 利用視覺與原型的方式呈現預期的解決方案 | 5/10 | 5 | 5 | 5 |