教學大綱表
請遵守智慧財產權,勿使用非法影印教科書,避免觸法。
課程名稱 (中文) 互動視覺設計
(英文) 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 期末考週(公布學期總成績) 期末展 展覽規劃與執行
  • 討論
  •  

    教學要點概述:
    教材編選: ■ 自編教材 □ 教科書作者提供
    評量方法: 期末考:35%   期中考:30%   作業:35%  
    教學資源: ■ 教材電子檔 □ 課程網站
    教學相關配合事項:請假請依學校規定辦理,無特殊情況未到課,一律扣平時成績。
    扣考規定:http://eboard.ttu.edu.tw/ttuwebpost/showcontent-news.php?id=504