【數媒學程專業核心模組】 前端介面設計介紹與進度
教育目標與核心能力 課程大綱 課程介紹 課程進度
學年期: 107 學年 第1學期
課程系組: 數媒學程 2 年級 A 班
課程代碼: 1071CBNDM2AI70300
課程名稱: 【數媒學程專業核心模組】 前端介面設計
必選修別: 系必
學分數: 3.0 學分
授課老師: 楊岳
開始日期: 2018/9/17
結束日期: 2019/1/20
時間表: 建-208 (日) 6 - 8

課程簡介     Introduction
==================================================================
本課程為【數媒學程】106 學級大二上「專業必修」【數媒學程專業核心模組】課程。
==================================================================

《前言》
職業社群 LinkedIn 網站官方部落格公佈 2015 年全球最熱門的 25 個工作技能排行榜中,使用者介面設計 (User Interface Design) 從 2014 年的第 14 名爬升到第 10 名,2016 和 2017 年更晉升至第 5 名。

看過(使用過)智慧型手機和平板電腦裡應用軟體(APP)漂亮而友善的畫面嗎?那就是使用者介面設計的成果。「科技始終來自於人性」,使用者介面設計即是以人為出發點的設計,不僅視覺上要好看,操作上更需要人性化,讓使用者可以直覺地正確操作使用。

《授課內容》
故本課程透過實際個案研究,並採實戰應用的訴求,讓學員親身體驗操作,並與職場實務結合,課程內容包括:
1. 使用者分析與研究;
2. 概念原型設計;
3. 設計體驗測試;
4. 圖示設計;
5. 網頁介面設計模式;
6. 行動介面設計模式

藉以讓學生清楚瞭解使用者介面設計的概括全貌。

本課程指定的前端框架,以全球最普及的 JavsScript 框架:jQuery、使用者介面設計:jQuery UI、前端開發框架:Bootstrap 為主。

《使用軟體》
本課程所使用的軟體如下:
【主要軟體】
1. Adobe Dreamweaver CC 2018
2. Brackets
【次要軟體】
1. Sublime Text
2. Axure RP 6.5 Std 標準版
3. Adobe Photoshop CC 2018
4. Adobe Illustrator CC 2018
5. Adobe XD CC
6. Microsoft Word、PowerPoint 等文書軟體

《適合對象》
1. 本校【數媒學程】(104、105、106學級)大四、大三、大二在學學生。
2. 本校【數媒學程】(103學級)大四在學學生,仍未修習「基礎程式設計」者。
3. 非【數媒學程】的學生,但對前端工程與使用者介面設計有興趣的人。
4. 有使用過桌上型電腦、智慧型手機和平板電腦經驗的人。

《注意事項》
1. 本課程是 104、105、106 學級大二下「多媒體網頁設計」(3學分)的先修課程(擋修!!)。
2. 媒體學程 100 學年度入學學生應修【使用者介面設計】(2學分)課程,105-106 學年度替代課程:數媒學程專業核心模組【前端介面設計】3學分,多1學分,列為自由選修。
3. 媒體學程 101 學年度入學學生應修【基礎程式設計】(2學分)課程,105 學年度起,因課程停開,故以數媒學程專業核心模組【前端介面設計】(3學分)課程替代,多1學分,列為自由選修。
4. 數媒學程 102 學年度入學學生應修【基礎程式設計】(2學分)課程,105 學年度起,因課程停開,故以數媒學程專業核心模組【前端介面設計】(3學分)課程替代,多1學分,列為自由選修。
5. 數媒學程 103 學年度入學學生應修【基礎程式設計】(2學分)課程,105 學年度起,因課程停開,故以數媒學程專業核心模組【前端介面設計】(3學分)課程替代,多1學分,列為自由選修。

---
105 學級【多媒體設計模組】「網頁程式設計養成課程」學習地圖如下(按順序):
1.【大二上】前端介面設計 (User Interface Design)
2.【大二下】多媒體網頁設計 (HTML+CSS+JavaScript)
3.【大三上】網站建置與規劃 (Web Development)
4.【大三下】使用者體驗設計 (UX)

《 課程簡介 -- English 》
User Interface Design is a 18-week course that teaches you how to design user interfaces. Good user interface design is a critical part of the success of a product or Web site. If you would like to learn the process of designing an effective user interface, then this course is for you.

What makes a good user interface?
What is involved when designing interfaces?
How do you design the right navigational model for your interface?

This course examines these issues and teaches you how to create a good user interface.

In this course, you gain an understanding of the overall user interface design process and learn how to develop user scenarios, a user object model, a navigational model, and an exploratory view of the user interface using low-fidelity (paper) prototyping techniques. By the end of this course, you will have developed a set of user scenarios, a user object model, a navigational or flow diagram, and a paper prototype for a small software application.

Material   上課教材  
【前端工程】
1. 讓響應式(RWD)網頁設計變簡單:Bootstrap開發速成(附135分鐘專題影音教學),呂國泰、何昇隆、曾偉凱 著,碁峰資訊,2016年6月30日
2. 成為一流的前端工程師 : 打造專業的UX網站,彭其捷 著,博碩,2016年5月6日
3. 現在就開始用jQuery進行實務開發,李柯泉 著,佳魁資訊,2016年4月25日
4. 快速查,馬上用!CSS3+jQuery 手機網站 UI 範例實作,礒田優、久保知己、近藤直人、早川稔、宮田優希 著、林子政 譯,旗標,2016年4月18日
5. 網頁程式設計的16堂課: HTML5‧CSS3‧JavaScript ‧jQuery‧AJAX‧Bootstrap‧Google Maps,施威銘研究室,旗標,2016年4月1日
6. 前端設計師即戰力:HTML5、CSS3、jQuery互動網頁設計,陳聖博 著,佳魁資訊,2015年7月10日
7. 前端設計師即戰力:RWD自適應網頁設計,陳聖博 著,佳魁資訊,2015年6月20日
8. Responsive Web Design 響應式網頁設計學習手冊,Clarissa Peterson 著、楊仁和 譯,歐萊禮,2014年12月19日
9. 邁向 jQuery 達人的階梯,株式会社シフトブレイン 著、林子政 譯,旗標,2014年12月3日
10. 打造jQuery網頁風暴,張子秋 著,佳魁資訊,2014年6月25日
11. 徹底研究Javascript+jQuery全能權威指南(附光碟),張亞飛 著,上奇資訊,2013年4月15日
12. JavaScript網頁應用程式設計,Alex MacCaw 著,俞君翰 譯,歐萊禮 O'REILLY,2013年1月31日

【使用者介面設計】
1. 人人都該懂的UI設計:配色X網格系統X圖標X字體,四主題搞定介面,三度出版有限公司 著,拓客,2018年6月27日。
2. 設計師都該懂的UI/UX設計實務:超圖解跨裝置網頁設計實戰講座, エ・ビスコム・テック・ラボ 著,許郁文 譯,博碩,2017年3月31日
3. 打造成功UI/UX的50個關鍵:用魔鬼的細節創造極致使用者體驗,彭其捷 著,博碩,2016年9月2日
4. 打造最強網頁UI/UX設計腦:設計師都該懂的絕佳設計.溝通法則,秋葉秀樹、秋葉ちひろ 著、許郁文 譯,博碩,2016年8月1日
5. 適應式網頁設計:運用漸進增強的觀點提升使用者體驗 第二版,Aaron Gustafson 著、莊弘祥 譯,碁峰,2016年7月29日
6. 不是你太笨,是爛 UI 的錯!非設計師也該學的介面設計常識,中村聡史 著、吳嘉芳 譯,旗標,2015年10月12日
7. 網站藍圖:學會Axure RP建構高擬真網頁,呂皓月、楊長韜 著,佳魁資訊,2014年12月19日
8. 行動介面設計模式圖鑑(第二版),Theresa Neil 著,鄭巧玉 譯,歐萊禮 O'REILLY,2014年11月25日
9. 多元裝置時代的網站UI、UX設計法則:打造出讓使用者完美體驗的好用介面,原田秀司 著,許郁文 譯,博碩文化,2014年8月29日
10. 智慧手機 App UI/UX 設計鐵則:想做出好用的 App 和手機網站,就看這一本,池田拓司 著、陳亦苓 譯,旗標,2013年12月31日
11. UI 進化論:行動裝置使用者介面設計(第三版)(附光碟),周陟 著,上奇資訊,2013年4月1日
12. jQuery UI 使用者介面設計,Eric Sarrion 著,歐萊禮 O'REILLY,2012年11月23日
13. 行動介面設計模式,Steven Hoober、Eric Berkman 著、鄭巧玉 譯,歐萊禮 O'REILLY,2012年11月5日
14. jQuery風暴:打造最友善的網頁介面,張子秋 著,佳魁資訊,2012年4月30日
15. 網頁介面設計模式,Bill Scott、Theresa Neil 著、古又羽 譯,歐萊禮 O'REILLY,2011年6月30日

課程要求     Requirement
《 上課要求 》
依105年1月21日致教育部函准予備查之「中國文化大學學則」規定:
(第4章第31條第1款)「學生因故不能上課,請准事假、病假者為缺課,請准公假者,不作缺課論。」
(第4章第31條第2款)「學生未經請假或請假未經核准而未上課者,以曠課論,曠課一小時,以缺課二小時計。」
(第4章第32條第1款)「...,任課教師得依學生缺曠課之情形予以扣分。」
故本課程規定:
(1)出席成績佔總成績 10%。
(2)全勤者,除出席成績10分(滿分)以外,總成績再加5分。
(3)每曠課(無故缺課)一次,出席成績扣 2 個積點。
(4)每請假(事假、病假)一次,出席成績扣 1 個積點。
(5)請准公假,出席成績不扣積點。
(6)最後依實際缺課(請假、曠課)次數(積點),計算出席成績,可倒扣總成績。(出席成績 = 10 - 積點 X 1.67)
(7)未經請假或請假未經核准而遲到一節課(一小時)以上,即視為當天缺課(缺二節課)。

《 報告要求 》
1. 「平時作業」
(1) 皆為個人作業。
(2) 報告要求依據每次的作業說明。
2. 「期末作業」
(1) 個人作業。
(2) 需繳交書面及電子檔。
(3) 不得補交。

《 課程評分方式 》
1.出席率:10%
2.平時作業:30%
3.期中考:30%
4.期末報告:30%

《 討論要求 》
1. 課程參與度列入平時考核。
2. 請於課程中踴躍舉手發言。
3. 請多利用虛擬校園的討論區。

《 其他要求 》
依學校規定。

Office Hour   輔導時間  
同學有任何課業上的問題,可 E-mail 至老師的信箱:jamesyang0811@gmail.com。
或在 facebook 上傳訊息給老師 (帳號同上方的 E-mail)。

教學目標     Objective
一、認知目標
 1.瞭解前端介面設計的專業知識,包括:
  (1) 學習使用者分析與研究;
  (2) 學習概念原型設計;
  (3) 學習設計體驗測試;
  (4) 學習圖示設計。
 2.加強邏輯思考的專業知識。
 3.學習特定程式語言(JavaScript)的專業知識。
二、情意目標
 1.讓學生養成學習前端介面設計的習慣和態度。
三、技能目標
 1.培養學生具備特定程式語言(JavaScript)的專業技能。
 2.藉由實例練習,培養學生解決問題的能力。