《人机交互设计实践》教学大纲
课程类别：专业必修课程
课程代码：
课程名称：人机交互设计实践
Human Computer Interaction Practice
学时学分：48学时；2学分
预修课程：高级语言程序设计，网页设计
适用专业：计算机科学与技术
开课部门：信息学院
一、课程的地位、目标和任务
本课程主体为计算机科学与技术专业的本科学生，该课程属于专业必修课程，主要培养学生人机交互界面的设计与实现的能力，在学生具备信息系统设计能力的同时也掌握一些人机交互设计方面的知识，为设计并实现能够更好满足实际用户需要的系统奠定基础。
人机交互是一个非常宽泛的领域，本门课主要介绍人机交互的界面设计。
要求学生具有高级语言程序设计和网页设计方面的知识，对面向对象的编程思想要有所了解。
本课程的重点是人机交互界面的技术实现，而不是人机交互的认知学、心理学、美学、色彩学方面的知识。
课程主要内容包括：人机界面样式的设计、人机界面交互的实现方法、C/S与B/S统一模式的人机界面设计。
学生学习该课程后能与Web技术，数据库等知识一同应用，设计出具有良好人机交互界面的应用系统；同时也为学生的毕业设计和将来从事技术工作储备必备的专业知识。
二、与相关课程的联系与分工
本门实践课在人机交互这一个广泛的领域中，重点强调人机交互的界面设计。
要求学生具有高级语言程序设计和网页设计方面的知识，对面向对象的编程思想要有所了解。
高级语言包括:C语言，面向对象的编程Java语言，还可以是下列任何一种编程语言：VB、、C#、JavaScript。
网页设计要求掌握HTML语言、CSS。
学生完成实践后能结合后续课程一同应用，设计出具有良好人机交互界面的应用系统；同时也为学生的毕业设计和将来从事相关技术工作打好基础。
三、教学内容、要求及主要实践教学条件
项目一：儿童教育互动界面的设计与实现
【教学内容】设计并实现具有基本应用功能的交互性界面的设计，要求学生设计一个儿童教育互动界面。
通过本实践的锻炼，使学生体会标记语言的文档格式，标记语言在界
面设计时的应用，熟练完成CSS布局、在标记语言中插入脚本代码，实现客户端的动态效果。
用文本文件充当数据库，实现简单的数据检索功能。
【教学重点及难点】交互界面定位，浮动，大小控制。
图形、背景插入与定位。
通过脚本代码和JQuery框架实现客户端的动态效果。
Ajax的使用，HTML5元素的使用。
【基本要求】界面布局格式为三列布局或多列布局。
每列布局可以根据内容适当分块。
左列布局要求是导航栏，导航栏的设计要求有动态折叠效果，或弹出式菜单。
界面上方要有横向导航栏，横向导航栏与左侧导航栏可以重，也可以不同，只要能够方便导航即可。
导航栏可以做成菜单式的，这是可选项，不属于必做部分。
界面要使用CSS进行背景、字体、边框、列表、超链接样式的设计，不要使用标记进行样式设计。
界面的内容设计可以是儿童用品、书籍介绍或学习内容（如：小学数学练习），也可是针对儿童教育的网上调查等。
要考虑界面与用户的互动性，可以在界面中插入多媒体。
在界面设计时必须包含如下控件：按钮、超链接、文本框、单选按钮、复选框、下拉列表框、列表框、表格。
可以用CSS改变它们的样式。
界面必须包含动态交互内容，动态功能用Javascript和JQuery框架实现。
动态内容必须包含Ajax的实现。
Ajax简单实现包括：界面的至少一部分内容源于其他文本数据库文件，并可以根据不同情况（事件）改变其内容。
Ajax提高实现包括：界面的部分内容源于其他文本数据库文件，并可以根据不同情况（事件）改变、检索、筛选其内容，即完成简单数据库检索的功能。
界面设计要符合美学原则，色彩搭配、插图合理，并与内容相配【主要实践教学条件】每名同学配备一台装有不同浏览器（最新IE，Firefox，Chrome）的计算机。
最好能够配置上Visual Web Developer Express开发软件，以便调试Javascript
代码，JQuery软件库。
Firefox需要安装上FireBug插件。
项目二：中学数学练习交互界面的设计与实现
【教学内容】设计并实现具有基本应用功能的交互性界面的设计，要求学生设计一个中学几何练习交互界面。
通过本实践的锻炼，使学生体会标记语言的文档格式，标记语言在界面设计时的应用，熟练完成CSS布局、在标记语言中插入脚本代码，实现客户端的动态效果。
用文本文件充当数据库，实现简单的数据检索功能。
掌握HTML5元素应用的方法，了解一些常用的图形库以及其中一些常用函数调用的方法。
【教学重点及难点】交互界面定位，浮动，大小控制。
图形、背景插入与定位。
通过脚本代码和JQuery框架实现客户端的动态效果。
Ajax的使用，HTML5元素的使用。
常用的图形库以及其中一些常用函数调用的方法。
数学公式的表示方法，统计图形的表示方法。
【基本要求】界面布局格式为三列布局或多列布局。
每列布局可以根据内容适当分块。
左列布局要求是导航栏，导航栏的设计要求有动态折叠效果，或弹出式菜单。
界面上方要有横向导航栏，横向导航栏与左侧导航栏可以重，也可以不同，只要能够方便导航即可。
导航栏可以做成菜单式的，这是可选项，不属于必做部分。
界面要使用CSS进行背景、字体、边
框、列表、超链接样式的设计，不要使用标记进行样式设计。
界面的内容设计是面向中学生的几何或代数习题和计算器，也可是面向中学生的数学手册。
要考虑界面与用户的互动性，可以在界面中插入多媒体。
在界面设计时必须包含如下控件：按钮、超链接、文本框、单选按钮、复选框、下拉列表框、列表框、表格。
可以用CSS改变它们的样式。
界面必须包含动态交互内容，动态功能用JavaScript和JQuery框架实现。
动态内容必须包含Ajax的实现。
Ajax简单实现包括：界面的至少一部分内容源于其他文本数据库文件，并可以根据不同情况（事件）改变其内容。
Ajax提高实现包括：界面的部分内容源于其他文本数据库文件，并可以根据不同情况（事件）改变、检索、筛选其内容，即完成简单数据库检索的功能。
界面设计要符合美学原则，色彩搭配、插图合理，并与内容相配。
【主要实践教学条件】每名同学配备一台装有不同浏览器（最新IE，Firefox，Chrome）的计算机。
最好能够配置上Visual Web Developer Express开发软件，以便调试Javascript
代码，JQuery软件库。
Firefox需要安装上FireBug插件。
五、必备教材、实践教学指导书和参考资料
（一）必备教材
《人机交互实践指导书》，自编
（二）实践教学指导书
1．《精通CSS》，Andy Budd，Cameron Moll编著，人民邮电出版社出版社，2006年第2版；2．《HTML & Web设计技术与技巧》，Kris Jamsa, Konrad King, Andy Anderson主编，机械工业出版社出版社，2008年第1版；
3．《JavaScript高级程序设计》，Nicholas C.Zakas主编，人民邮电出版社出版社，2012年第3版；
4．《HTML5程序设计》，Peter Lubbers主编，人民邮电出版社出版社，2012年第2版；（三）参考资料
1．《精通CSS+DIV 网页样式与布局》，曾顺编著，人民邮电出版社出版社，2005年第3版；
2. 《精通JAVASCRIPT+JQUERY》，曾顺编著，人民邮电出版社出版社，2005年第3版；
3. 《AJAX实战：实例详解》，DAVE CRANE；BEAR BIBEAULT；JORD SONNEVELD编著，人民邮电出版社出版社，2008年第1版；
4. 《HTML、CSS、JavaScript网页制作从入门到精通》，刘西杰，柳林编著，人民邮电出版社出版社，2013年第1版
5. 《HTML5开发手册》，Chuck Hudson编著，人民邮电出版社出版社，2013年第1版6．《JQuery 高级编程》，Cesar Otero主编，清华大学出版社出版社，2013年第1版；
六、课外学习要求
要求同学按照课堂上教师教授的内容结合自己课内的进展进行相关资料地查阅及功能的设计与实现，同时完成相应技术文档的撰写
七、教学方法
采用多功能机房授课，边学边练，突出动手环节，通过综合性任务要求，培养学生实际技能。
八、考核及成绩评定方式
本课程的成绩评定方法建议为：总评成绩 =平时成绩+ 作品成绩 +实习报告成绩。
其中：平时作业成绩占50％，包括出勤、实习态度、任务完成情况、实习纪律等情况。
作品成绩占20％，作品成绩主要从美观，技术点的使用，操作方便程度等方面进行评估。
实习报告成绩30%。
（撰写人：王郁昕撰写日期：2013年12月审核人：刘治国，张敬尊）。