《人机交互技术》实验指导书.docx

1、人机交互技术实验指导书人机交互技术 实验指导书人机交互技术课程是计算机专业的一门选修课程。人机交互技术的应用领域越来越广泛，对人机交互技术课程的教学提出了更高的要求。开设人机交互技术实验，目的就是为了学生能够更好的掌握人机交互技术的应用，使课堂教学与实践环节紧密结合。希望学生能够充分利用实验条件，认真完成实验，从实验中得到应有的锻炼和培养，为今后进一步学习和应用人机交互技术打下坚实的基础。人机交互技术课程实验的目的：是为了使学生在课程学习的同时，通过实验教学验证课堂教学的理论，理解和掌握人机交互技术中最基本、最广泛应用的概念、原理、理论和算法以及基本技术和方法，更好地掌握人机交互技术课程教学大

2、纲要求的内容。人机交互技术课程实验的注意事项：在人机交互技术的课程实验过程中，要求学生做到：(1) 预习实验指导书有关部分，认真做好实验内容的准备，就实验可能出现的情况提前作出思考和分析。(2) 认真书写实验报告。实验报告包括实验目的和要求，程序设计说明，给出源程序清单。(3) 遵守机房纪律，服从辅导教师指挥，爱护实验设备。(4) 实验课程不迟到。如有事不能出席，所缺实验一般不补。人机交互技术课程实验的验收：实验的验收将分为两个部分。第一部分是上机操作，包括检查程序运行和即时提问。第二部分是提交书面的实验报告。实验一 图形用户界面的设计一 实验目的和要求1) 熟悉图形用户界面的设计原则2)利用

3、一种设计工具完成图形化的用户界面设计二 预备知识图形用户界面又称为WIMP界面，由窗口(windows)、图标(icons)、菜单(menu)、指点设备(pointing device)四位一体，形成桌面(desktop) ，如图所示。图形用户界面是当前用户界面的主流，广泛应用于各档台式微机和图形工作站。图形用户界面的共同特点是以窗口管理系统为核心，使用键盘和鼠标器作为输入设备。窗口管理系统除了基于可重叠多窗口管理技术外，广泛采用的另一核心技术是事件驱动(event-driven)技术。 WIMP界面可看作是第二代人机界面，是基于图形方式的人机界面。在WIMP界面中，人被称为用户，人机通过对话

4、进行工作。用户只能使用手这一种交互通道输入信息，通过视觉通道获取信息。在WIMP界面中，界面的输出可以为静态或动态的二维图形或图像等信息。这种方式能同时输出不同种类的信息，用户也可以在几个工作环境中切换而不丢失几个工作之间的联系，通过菜单可以执行控制型和对话型任务。由于引入了图标、按钮和滚动条技术，大大减少键盘输入，提高了交互效率。基于鼠标和图形用户界面的交互技术极大地推动了计算机技术的普及。 (1)图形用户界面的三个重要思想1） 桌面隐喻(desktop metaphor)指在用户界面中用人们熟悉的桌面上的图例清楚地表示计算机可以处理的能力。 隐喻的表现方法:静态图标、动画、视频 2） 所见

5、即所得(What You See Is What You Get，WYSIWYG) 显示的用户交互行为与应用程序最终产生的结果是一致的。 3） 直接操纵(direct manipulation) 直接操纵是指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。直接操纵的对象是命令、数据或是对数据的某种操作。 (2)设计图形用户界面的原则 1) 一般性原则：界面要具有一致性、常用操作要有快捷方式、提供简单的错误处理、对操作人员的重要操作要有信息反馈、操作可逆、设计良好的联机帮助、合理划分并高效地使用显示屏、保证信息显示方式与

6、数据输入方式的协调一致2) 颜色的使用：颜色是一种有效的强化手段，同时具有美学价值。使用颜色时应注意如下几点：限制同时显示的颜色数；画面中活动对象的颜色应鲜明，而非活动对象应暗淡；尽量避免不相容的颜色放在一起，如黄与蓝，红与绿等，除非作对比时用；若用颜色表示某种信息或对象属性，要使用户理解这种表示，并尽量采用通用的表示规则。3)图标的设计：图标是可视地表示实体信息的简洁、抽象的符号。图标设计是方寸艺术，需要在很小的范围内表现出图标的内涵。设计图标时应该着重考虑视觉冲击力，要使用简单的颜色，利用眼睛对色彩和网点的空间混合效果，做出精彩图标 。4） 按钮的设计：设计按钮应该具有交互性，应该有3到6

7、种状态效果(点击时的状态、鼠标放在上面但未点击的状态、点击前鼠标未放在上面时的状态、点击后鼠标未放在上面时的状态、不能点击时的状态、独立自动变化的状态)，按钮应具备简洁的图示效果，应能够让使用者产生功能上的关联反应。属于一个群组的按钮应该风格统一，功能差异大的按钮应该有所区别。 5） 屏幕布局的设计：设计屏幕布局(Layout)时应该使各功能区重点突出 ,应遵循如下几条原则：平衡原则、预期原则、经济原则、顺序原则、规则化6） 菜单界面的设计：菜单在图形界面的应用程序中使用得非常普遍，是软件界面设计的一个重要组成方面，描述了一个软件的大致功能和风格。 菜单中的选项在功能上与按钮相当，一般具有下列

8、一种或几种类型的选项：命令项、菜单项和窗口项。 菜单的结构一般有单一菜单、线状序列菜单、树状结构菜单、网状结构菜单等，其中树状结构菜单是最常见的结构。 设计菜单界面时应注意的一般性原则：功能组织菜单，合理分类，并力求简短，前后一致；合理组织菜单界面的结构与层次；按一定的规则对菜单项进行排序；菜单选项的标题要力求文字简短、含义明确，并且最好以关键词开始；常用选项要设置快捷键；充分利用菜单选项的使能与禁止、可见与隐藏属性；使用弹出式菜单 。 7） 填表输入界面的设计：在处理大量相关数据的场合下，需要输入一系列的数据，这时填表输入界面是最理想的数据输入界面。在设计填表输入界面时应遵循的原则：一致性；

9、有含义的表格标题；使用易于理解的指导性说明文字；栏目按逻辑分组排序；表格的组织结构和用户任务相一致；光标移动方便；出错提示；提供帮助；表格显示应美观、清楚，避免过分拥挤。三 实验内容与步骤(一) 实验内容：利用常用的设计工具(VC/VB/Delphi/PB等)完成一个通用图形用户界面设计，要遵循界面设计的一般原则(一致性、快捷方式、提供错误处理)，注意颜色的使用，学会使用图标、按钮、屏幕布局、菜单和对话框的设计(二)实验步骤1设计多个对话框，完成填表输入界面的设计，合理使用图标、按钮、颜色；2设计不同形式的菜单，完成对不同对话框的调用；3提供简单的错误处理、联机帮助实验二 多通道用户界面设计技

10、术综述一 实验目的和要求1) 了解常见的多通道用户界面2) 查找资料，熟悉一种多通道用户界面并写出综述二 预备知识为适应目前和未来的计算机系统要求，人机界面应能支持时变媒体，实现三维、非精确及隐含的人机交互，而多通道人机界面是达到这一目的的重要途径。80年代后期以来，多通道用户界面成为人机交互技术研究的崭新领域，在国内外受到高度重视。 综合采用视线、语音、手势等新的交互通道、设备和交互技术，使用户利用多个通道以自然、并行、协作的方式进行人机对话，通过整合来自多个通道的、精确的和不精确的输入来捕捉用户的交互意图，提高人机交互的自然性和高效性。多通道用户界面主要关注人机界面中用户向计算机输入信息以

11、及计算机对用户意图的理解，所要达到的目标可归纳为如下方面：1)交互的自然性使用户尽可能多地利用已有的日常技能与计算机交互，降低认识负荷。2)交互的高效性使人机通讯信息交换吞吐量更大、形式更丰富，发挥人机彼此不同的认知潜力。3)与传统的用户界面特别是广泛流行的WIMP/GUI兼容。(1) 多通道用户界面的基本特点 1) 使用多个感觉和效应通道 2) 允许非精确的交互 3) 三维和直接操纵 4) 交互的双向性 5) 交互的隐含性 (2)涉及的主要技术1)多媒体使用多种表示媒体，如文本、图形、图像和声音，使人机交互技术最终要向着更接近于人的自然方式发展，使计算机具有听觉和视觉，以更自然的方式与人交互

12、。多媒体技术引入了动画、音频、视频等动态媒体，大大丰富了计算机表现信息的形式，拓宽了计算机输出的带宽，提高了用户接受信息的效率，使人们可以得到更直观的信息，从而简化了用户的操作，扩展了应用范围。2)虚拟现实又称虚拟环境，虚拟现实系统向用户提供沉浸和多感觉通道体验。在虚拟现实中，人是主动参与者，复杂系统中可能有许多参与者共同在以计算机网络系统为基础的虚拟环境中协同工作。 虚拟现实系统具有三个重要特点：沉浸感、交互性、构想性。3)眼动跟踪与视觉有关的人机交互自始至终都离不开视线的控制。如果能通过用户的视线盯着感兴趣的目标，计算机便“自动”将光标置于其上，人机交互将更为直接，也省去了上述交互过程中的

13、大部分步骤。4)手势识别一个简单的手势蕴涵着丰富的信息，人与人可以通过手势传达大量的信息，实现高速的通信。将手势运用于计算机能够很好地改善人机交互的效率。在多数情况下我们笼统地认为手势是人的上肢(包括手臂、手和手指)的运动状态。 5)三维输入 许多应用(如虚拟现实系统)需要三维空间定位技术，三维空间控制器的共同特点是具有六个自由度，分别描述三维对象的宽度、深度、高度、俯仰角、转动角、偏转角。通过控制这六个参数，用户可以在屏幕上平移三维对象或光标，也可沿三个坐标轴转动三维对象。在三维用户交互中必须便于用户在三维空间中观察、比较、操作、改变三维空间的状态。6)语音识别语音识别是计算机通过识别和理解

14、过程把语音信号转变为相应的文本文件或命令的技术。 语音识别又是一门交叉学科，它与声学、语音学、语言学、数字信号处理理论、信息论、计算机科学等众多学科紧密相连。 7)表情识别 面部表情是人体语言的一部分。人的面部表情不是孤立的，它与情绪之间存在着千丝万缕的联系。人的各种情绪变化以及对冷热的感觉都是非常复杂的高级神经活动，如何感知、记录、识别这些变化过程是表情识别的关键。8)手写识别发展手写识别技术并嵌入到各种设备中，将是手写识别技术未来发展的重要方向之一。联机手写识别技术的优点是不需专门学习与训练、不必记忆编码规则、安装后即可手写输入汉字，是最简单方便的输入方式。同时符合人的书写习惯，可以一面思

15、考、一面书写，不会打断思维的连续性，是最自然的输入方式。 9)数字墨水数字墨水是一种新的人机界面技术，它借鉴手写识别技术的同时，克服了它的许多局限性。 数字墨水在数学上是通过三阶贝塞尔曲线来描述笔输入的笔迹，它的记录格式与图像和文本格式都不同。这种存储方式使得数字墨水文件的大小很小，从而可以更有效地进行存储。 三 实验内容与步骤(一) 实验内容:要求上网查找资料，熟悉一种多通道用户界面并写出综述，可以是眼动跟踪、手势识别、三维输入、语音识别、表情识别、手写识别等。(二)实验步骤： 1)借助图书馆的中英文参考文献资料以及网络，确定出一种多通道用户界面； 2)完成对该多通道用户界面的综述(包括定义

16、、发展历史、当前的应用、主要的研究方法分类、以及发展前景以及中英文参考文献（至少各5篇）)实验三 带有语音提示功能的界面设计与开发 （一）实验目的1 通过开发一个简单的具有语音提示功能的人机交互系统，使同学了解多通道交互系统的优点和交互模型的构建方法。2理解语音合成技术的基本原理。3了解和掌握Microsoft speech sdk的使用方法。（二）实验器材1配有语音卡、耳麦、扬声器等多媒体设备的PC机2. Windows操作系统3. MS Speech SDK （三）实验说明1MS Speech SDK简介：为解决语音引擎之间不兼容的问题，微软推出了一套语音应用程序开发的软件开发资源包Spe

17、ech SDK，方便开发人员使用资源包开发语音识别和语音合成的应用程序，隔离了应用软件与语音引擎之间的联系，使得语音引擎的更换不会影响到应用程序的设计。2Speech SDK基本工作原理 作为应用程序开发者，只需调用speech sdk中的函数，即可实现语音合成与语音识别功能。3下载安装从Microsoft官方下载站点搜索Speech SDK 5.1并下载安装，中文语言包可选择安装。安装好Speech SDK后，语音控制程序将被添加到 “控制面板”-“语音”选项中。利用下图对话框可以设置语音识别和文字-语音转换的各项属性，包括语言、语调、语速和输入设备等。（四）实验内容和步骤在visual c

18、+或.net环境下，用微软的Speech SDK实现一个具有语音提示功能的界面，要求设计交互模型，并根据实际应用情况来确定是否要用语音。调用Speech sdk的方法简述如下：首先在visual c+主窗口的菜单栏中选择“工程”“设置”。在弹出对话框中选择“c/c+”选项卡，在分类中选择“preprocessor”,在附加包含路径中，输入speech sdk安装路径下的include目录，如：C:Program FilesMicrosoft Speech SDK 5.1Include然后选择“link”选项卡，在分类中选择“Input”,在附加库路径中，输入speech sdk安装路径下的li

19、b目录，如：C:Program FilesMicrosoft Speech SDK 5.1Libi386程序中的关键代码如下：#include #include /引入头文件，以调用SDK中的API UpdateData(); ISpVoice * pVoice = NULL; if (FAILED(CoInitialize(NULL) AfxMessageBox(Error to intiliaze COM); return; /初始化COMHRESULT hr = CoCreateInstance(CLSID_SpVoice, NULL, CLSCTX_ALL, IID_ISpVoice,

20、 (void *)&pVoice);if( SUCCEEDED( hr ) )hr = pVoice-SetVolume(80);/音量控制0100hr = pVoice-SetRate(0);/语速控制-55hr = pVoice-Speak(L“hello world”, SPF_DEFAULT, NULL);/语音的内容ISpObjectToken * spToken = NULL;if (SUCCEEDED(SpFindBestToken(SPCAT_VOICES, Llanguage=804, NULL, &SpToken)pVoice-SetVoice(SpToken);/切换至中

21、文语音模式，language=804代表中文，409代表英文pVoice-Speak(L世界你好, SPF_DEFAULT, NULL);SpToken-Release();if (SUCCEEDED(SpFindBestToken(SPCAT_VOICES, Llanguage=409, LName=Microsoft Mike, &SpToken)/说话人控制pVoice-SetVoice(SpToken); pVoice-Speak(LThis is Mike speaking, SPF_DEFAULT, NULL);SpToken-Release();pVoice-Speak(L你好

22、, SPF_IS_XML, NULL);/也可直接写成xml标签的格式 pVoice-Speak(LThis sounds normal but the pitch drops half way through, SPF_IS_XML, NULL ); /声调控制，-代表低音，+代表高音 pVoice-Release();pVoice = NULL;CoUninitialize();Speech sdk还有很多功能，详见安装目录下的帮助文档。实验步骤：1熟悉Text-To-Speech（TTS）基本函数的调用方法，编程实现最简单的语音合成原型系统。2体会交互过程和实现方法。3设计一个完整的人机

23、交互界面，在适当的环节嵌入语音合成模块，实现语音提示功能。（五）实验报告要求1.整理实验结果，填入相应表格中，并写出逻辑表达式。 2.小结实验心得体会。3.回答思考题。实验四 Web界面设计一 实验目的和要求1) 熟悉Web站点的信息交互模型和结构 2)熟悉Web界面设计的基本思想和原则 3)掌握Web界面设计的工具和技术 二 预备知识Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。Web界面设计与站点外观直接相关，站点的界面外观是否友好直接关系到是否能吸引人的关注。人性化的设计是Web界面设计的核心，如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web

24、界面设计的重点。 (1) Web信息交互模型 用来解释Web的人机界面性质的一个模型，它提出网页是用户和知识之间的界面。对于信息提供者来说包括信息的表达，对于使用者来说则是信息的获取。信息的表达与获取分别受到两者认知结构的制约。模型涉及到信息的三种类型1)数据：当一条信息被反复、简单的提供时称为数据，比如机票价格。2)复杂信息：而用来叙述事件时称为复杂信息，如多媒体信息。3)过程性信息：在信息有明确目标，并相互作用时称为过程性信息，如在线练习、在线测试等。 模型涉及到信息的两种特性：1)动态性：信息在不断的变化，具有动态性；2)一致性：信息元素的组织方式具有一致性 (2)Web信息设计模型 是

25、解释Web人机界面性质的另一个模型，是一种研究网页的信息设计模型。设计模型中要考虑到信息的两个方面：1)第一是应该呈现或略去什么信息。 2)第二个方面指的是信息该如何被表现。(3)Web界面设计基本原则 1) 了解浏览者的心理状态 2) 内容与形式的统一 3) 减少浏览层次 4) 特点明确 5) 统一整体的形象 6) Web界面设计的3C原则 (4)Web界面概要设计 1)Web界面框架设计：Web网站规划 、建立原型系统、详细设计、正式实施2)Web界面的内容与风格的设计:网站内容设计的原则、Web界面的风格3)Web界面设计的语言与文化：网站应设置多语言选择，在网站设计和建设中进行跨文化研

26、究(5)Web界面设计要素 Web界面布局 Web界面的色彩 Web界面的字体 Web界面的动画与多媒体 Web界面的导航 (6)Web界面设计技术与工具 要设计好的Web界面，需要有良好的设计工具，随着Internet网络的发展，国际组织和许多互联网软件开发商制订了若干标准，开发了不同的Web界面设计工具。主要的技术包括超文本标记语言HTML、客户端脚本语言JavaScript、JavaApplet、服务器端脚本语言。 页面编辑器主要包括：1)MicroSoft公司 的Frontpage；2)Macromedia公司 的Dreamweaver，Dreamweaver对于动态网页的支持特别好，

27、可以轻而易举地做出很多眩目的互动页面特效，Dreamweaver与Flash、Firework并称为Macromedia的网页制作三剑客。辅助工具主要包括：1)AceHTML Pro 6.0全功能的 HTML & JavaScript 编辑器；2)Antenna Web Design Studio强大的可视化网页设计软件；3)Easy HTML简单的所见即所得的HTML 编辑器，有固定、类似浏览器的界面；4)Easy Web Editor是一个 Web 发布工具，允许不了解HTML而在所见即所得环境中编辑Web网页。 三 实验内容与步骤(一) 实验内容:要求根据Web界面设计的原则(简洁、一致

28、性、对比度)，进行Web界面规划、概要设计和设计要素的选择，利用一种界面设计工具(Dreamweaver / Frontpage)完成网页设计。(二)实验步骤：1)选择一种界面设计工具，并熟悉它；2）针对一个具体的网站（学校、个人、公司）设计应用，进行Web界面规划和概要设计；3）选择WEB界面设计要素，设计出网页实验五 人机交互系统的评估 （一）实验目的1 了解人机交互系统的评估方法2 掌握人机交互系统评估的步骤(二)实验硬件软件环境普通PC机 Windows XP操作系统IE 浏览器 (三)实验说明利用教材上介绍的可用性分析方法选择一个感兴趣的网站、教学系统的可用性分析。请同学担当用户进行

29、测试，并设计一个用户调查问卷进行分析。 (四)实验内容和步骤1选择一个自己感兴趣的网站，进行人机交互方面的分析和评估2设计用户调查问卷3通过用户调查问卷采集用户数据4对所采集的数据进行统计5根据所得统计的数据对此网站系统进行综合分析和评估（1）网站简介，描述一下网站的行业，分类，客户群分析等（2）网站基本架构和设计思路 （3）.网站的栏目设计分析 （4）网站的布局设计分析 （5）网站的色彩运用分析 （6）网站的字体运用分析 （7）网站的图片和动画运用分析 （8）网站的总体特色 （9）网站的导航设计 （10）.附录 网站可用性调查表（如果有的话）6给出对此网站系统的改进意见(五)实验报告要求参考教材第5章 可用性分析与评估的一些指标表达自己的观点。篇幅在50006000文字，页码在1020P左右。1.整理实验结果。 2.小结实验心得体会。