作品名稱：人機交互界面設計
學校名稱：重慶工程學院
參賽隊伍：意炫
參賽老師：陶薇薇
課程是本科數字媒體技術專業的專業基礎課,主要任務是掌握人機界面方法、理論與設計實例，探索新的交互技術。課程設定構建應用型“技藝融合”本科課程。（數字媒體技術專業是一個技術與藝術相結合的綜合性交叉學科，它具有理論與實踐并重的特點。）
本課程的先修課程有《C語言程序設計》、《色彩與構成》。
后續課程有《網頁設計與制作技術》、《客戶端編程技術》、《網絡游戲開發技術》等。
通過對本課程的學習，學生加深對交互界面設計、軟件工程、程序設計語言的理論知識的理解和應用水平，了解和掌握交互界面設計的基本方法，熟悉界面設計與制作的步驟和發布流程。掌握以用戶為中心的互聯網產品設計，網頁布局技術；掌握HTML5+CSS編碼技術，能進行人機交互界面的設計。為學生學習后續課程和將來從事工作打下必備基礎。
1、總體描述
本課程將根據高職教育的特征，以計算機職業能力培養為重點，應用現代教育技術理論，將“面向過程”、“項目導向”、“工學結合”、“任務驅動”作為課程開發與設計的基本理念。課程設計將面向工作過程的項目教學、任務驅動教學、案例教學的教學思想融為一體，并不追求形式上的項目教學、任務驅動教學或案例教學，而是重點體現項目教學、任務驅動教學、案例教學的精神實質。本課程將人機交互界面設計視為一個整體項目過程，打破傳統教學的條塊界限，按照網站建設與網頁設計制作的實際項目過程作為課程教學主線，這樣網頁設計制作的實際順序即是本課程的教學順序。
本課程應用現代教育技術理論指導教學。特別是建構主義學習理論，充分體現學生主體地位和教師的主導作用，培養學生的自主學習、協作學習能力；采用任務驅動教學法，培養學生運用所學知識解決實際問題的能力；運用信息技術與課程整合，采用現代化多媒體教學手段以提高教學效率。
本課程既注重知識的科學性、系統性，又注重技能的實用性、可操作性。各部分都設有明確的教學目標任務，在內容安排上特別適合任務驅動教學法。
2、課程體系結構
任務模塊 | 學習情景 | 目標 |
人機交互藝術設計 | 網站開發前期的知識準備，網站項目啟動的基礎。 | （1） 人機界面的定義、起源及發展 （2）了解軟件開發過程
|
用戶體驗要素 | 用戶體驗概念 五個層面要素 戰略層面——產品目標和用戶需求 范圍層——功能規格和內容需求 結構層——交互設計與信息架構 框架層——界面設計、導航和信息設計 表現層——感知設計 | （1）了解產品目標和用戶需求，團隊角色和流程 （2）掌握如何確定需求優先級 （3）掌握構建交互設計與信息架構方法和原則 （4）掌握界面設計、導航和信息設計的方法 （5）掌握界面視覺設計的方法 |
網頁設計基礎 | Photoshop設計基礎知識 Photoshop圖層樣式與模式的運用 Photoshop圖像調整與蒙版運用 Photoshop濾鏡特效應用 Photoshop合成效果應用 Photoshop鼠繪特效
| （1）掌握Photoshop工具運用 （2）掌握photoshop特效合成運用 （3）Photoshop圖層樣式與模式的運用 （4）Photoshop圖像調整與蒙版運用 （5）Photoshop濾鏡特效應用
|
界面藝術設計 | 版式設計基礎 網頁色彩搭配基礎 網頁布局設計 網頁界面設計 | （1）掌握網頁界面設計布局原則 （2）掌握網頁版式設計方法 （3）掌握網頁色彩搭配 |
網頁頁面制作基礎
| Web基礎知識 HTML5基礎知識 CSS3基礎知識 盒子模型 表格、表單頁面 系統的功能分析與設計 | （1）了解web、IP和域名、HTTP、FTP （2）認識DreamweaverCC2015 （3）網頁文件的基本操作 （4）HTML5基礎標簽 （5）文本及圖片制作 （6）超鏈接、列表標簽及HTML5媒體元素 （7）CSS聲明、選擇符、注釋、屬性、定位、偽類及偽對象、動畫及過渡、應用原則 （8）盒子模型、盒子的浮動、定位、簡單網頁布局 （9）表格的插入、嵌套、拆分及合并 （10）HTML5中的表單設計與制作
|
四、課程內容設計和學時分配要求
教學內容及學時分配表
序號 | 學習情景 | 情景描述 | 參考學時 |
1 | 人機交互藝術設計 | 網站開發前期的知識準備，網站項目啟動的基礎。 | 2 |
2 | 用戶體驗要素 | 用戶體驗概念 五個層面要素 戰略層面——產品目標和用戶需求 范圍層——功能規格和內容需求 結構層——交互設計與信息架構 框架層——界面設計、導航和信息設計 表現層——感知設計 | 6 |
3 | 網頁設計基礎 | Photoshop設計基礎知識 Photoshop圖層樣式與模式的運用 Photoshop圖像調整與蒙版運用 Photoshop濾鏡特效應用 Photoshop合成效果應用 Photoshop鼠繪特效
| 20 |
4 | 界面藝術設計 | 版式設計基礎 網頁色彩搭配基礎 網頁布局設計 網頁界面設計 | 16 |
5 | 網頁頁面制作基礎
| Web基礎知識 HTML5基礎知識 CSS3基礎知識 盒子模型 表格、表單頁面 系統的功能分析與設計 | 20 |
五．課程實施條件與建議
1、實施條件
教 師 | 學 生 | 辦學條件 | |
內部環境分析 | １．對教師的要求 有豐富的網頁設計與制作的經驗與知識，老師具有一定的美學功底，熟練掌握網頁制作中各項基本技能。熟練Dreamweaver軟件操作。 ２．本院教師的現狀 擔任本門課程教學任務的有4人，教師的優勢條件是都一直從事網頁設計與制作教學的工作，并在此方面做了一定的貢獻。所有的教師都有3年以上的項目實踐經驗。 | １． 學生高考成績居于中低段． ２． 已經初步掌握了辦公軟件使用。 ３． 學習目標不明確，學習動力不足，穩定性差，缺乏創新精神和自我調控能力。 ４． 部分學生對電腦操作和上網不熟練，打字速度不快。 ５． 涉及語言方面知識感到枯燥，學習積極性不高。 ６． 思想活躍、參與熱情高、社會活動能力強。 ７． 對移動終端界面設計的感興趣。 | １． 學院已經具備計算機實驗室和多媒體教室，能滿足課程教學需要． ２． 有可整體接納學生的實習公司（基地）．重慶正大恒嶺有限公司 |
外部環境分析 | １． 社會對有關知識或技能需要的程度：掌握網頁界面設計的技能，能夠熟練用div+css進行html頁面排版設計，可獨立快速完成網站前期的設計與制作；協調和溝通能力強，工作認真負責，具有良好的職業操守，團隊合作意識強 ２． 相關技術或知識進步情況：精通photoshop、Dreamweaver設計軟件；
| ||
2、實施建議
教材選用:《人機交互界面設計》
教師教學方法與手段：
宏觀教學方法：項目教學法、專題討論
微觀教學方法：任務驅動法、探究法、“教學做”三位一體法
學生學習方法:模仿學習法、比較學習法、直接學習法、拆卸學習法
課程教學過程使用的主要教學方法、使用目的、實施過程，如表7所示。
表7主要教學方法、使用目的、實施過程
教學方法 | 使用目的 | 實施過程 |
課堂教學采用項目教學法 | 激發學習興趣，提高學生分析問題、解決問題的實際能力，達到輕松學習、自主學習的目的；充分調動了學生的學習積極性和主動性，有效提高學生的學習能力、應用能力和創新能力 | 采用項目驅動與能力和知識緊密相結合的全新教學模式，一邊分析講解、一邊操作演示、一邊動手練習，教、學、做一體 |
實踐教學采用任務驅動型教學法 | 充分調動了學生的學習積極性和主動性，有利于訓練學生職業態度，有效提高學生的知識應用能力和創新能力 | 將實踐內容劃分為相對獨立的任務，這些任務分為三種類型：創意實踐操作項目、獨立操作項目、工學結合項目 |
啟發式教學方法 | 突出培養學生的分析問題、解決問題的綜合素質，強化學生的動手操作能力，突出“以學生為中心”的原則，達到“在做中學”的目的 | 網頁欣賞－問題提出－準備素材－分析方法－展示結果－模仿操作－歸納總結 |
實際案例教學法 | 提高學生工作流程的認識，融創新思維培養、團隊學習方式、實踐案例教學于課程教學中 | 將實際案例引入教材、教學體系中，每個重要知識點均與實際應用結合起來 |
六．課程考核方案設計
本課程推行“過程考核+綜合考核+期末考核”結合的方式，采用“全方位、多角度、綜合性”的考核評價模式。
過程考核由“作業+考勤”部分組成。作業成績，按照作品的平均分來算；考勤，則采用扣分制，學生曠課一次扣5分，遲到扣2分。
綜合考核則是指課程綜合案例分數。
期末考核，則是指課程期末考試。
其中，過程考核占比10%，綜合考核占比20%，期末考核占比70%。
七．教學資源開發與利用
參考網站：
中國UI設計網 [url]http://www.chinaui.com[/url]
任務中國 [url]http://www.coodom.com/[/url]
參考書籍：
《用戶體驗要素》，機械工業出版社，作者是(美)Jesse James Garrett《HTML5+CSS3從入門到精通》，清華大學出版社出版的圖書，作者是李東博
