《人机交互设计实践》教学大纲

《人机交互设计实践》教学大纲

课程类别：专业必修课程

课程代码：

课程名称：人机交互设计实践

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插件。

五、必备教材、实践教学指导书和参考资料

（一）必备教材

《人机交互实践指导书》，自编

（二）实践教学指导书