《人机交互技术》实验指导书.docx
《《人机交互技术》实验指导书.docx》由会员分享，可在线阅读，更多相关《《人机交互技术》实验指导书.docx（8页珍藏版）》请在冰豆网上搜索。
《人机交互技术》实验指导书
《人机交互技术》实验指导书
《人机交互技术》课程是计算机专业的一门选修课程。
人机交互技术的应用领域越来越广泛，对《人机交互技术》课程的教学提出了更高的要求。
开设人机交互技术实验，目的就是为了学生能够更好的掌握人机交互技术的应用，使课堂教学与实践环节紧密结合。
希望学生能够充分利用实验条件，认真完成实验，从实验中得到应有的锻炼和培养，为今后进一步学习和应用人机交互技术打下坚实的基础。
《人机交互技术》课程实验的目的：
是为了使学生在课程学习的同时，通过实验教学验证课堂教学的理论，理解和掌握人机交互技术中最基本、最广泛应用的概念、原理、理论和算法以及基本技术和方法，更好地掌握《人机交互技术》课程教学大纲要求的内容。
《人机交互技术》课程实验的注意事项：
在《人机交互技术》的课程实验过程中，要求学生做到：
（1）预习实验指导书有关部分，认真做好实验内容的准备，就实验可能出现的情况提前作出思考和分析。
（2）认真书写实验报告。
实验报告包括实验目的和要求，程序设计说明，给出源程序清单。
（3）遵守机房纪律，服从辅导教师指挥，爱护实验设备。
（4）实验课程不迟到。
如有事不能出席，所缺实验一般不补。
《人机交互技术》课程实验的验收：
实验的验收将分为两个部分。
第一部分是上机操作，包括检查程序运行和即时提问。
第二部分是提交书面的实验报告。
实验一图形用户界面的设计
一实验目的和要求
1）熟悉图形用户界面的设计原则
2）利用一种设计工具完成图形化的用户界面设计
二预备知识
图形用户界面又称为WIMP界面，由窗口（windows）、图标（icons）、菜单（menu）、指点设备（pointingdevice）四位一体，形成桌面（desktop），如图所示。
图形用户界面是当前用户界面的主流，广泛应用于各档台式微机和图形工作站。
图形用户界面的共同特点是以窗口管理系统为核心，使用键盘和鼠标器作为输入设备。
窗口管理系统除了基于可重叠多窗口管理技术外，广泛采用的另一核心技术是事件驱动（event-driven）技术。
WIMP界面可看作是第二代人机界面，是基于图形方式的人机界面。
在WIMP界面中，人被称为用户，人机通过对话进行工作。
用户只能使用手这一种交互通道输入信息，通过视觉通道获取信息。
在WIMP界面中，界面的输出可以为静态或动态的二维图形或图像等信息。
这种方式能同时输出不同种类的信息，用户也可以在几个工作环境中切换而不丢失几个工作之间的联系，通过菜单可以执行控制型和对话型任务。
由于引入了图标、按钮和滚动条技术，大大减少键盘输入，提高了交互效率。
基于鼠标和图形用户界面的交互技术极大地推动了计算机技术的普及。
（1）图形用户界面的三个重要思想
1）桌面隐喻（desktopmetaphor）
指在用户界面中用人们熟悉的桌面上的图例清楚地表示计算机可以处理的能力。
隐喻的表现方法:
静态图标、动画、视频
2）所见即所得（WhatYouSeeIsWhatYouGet，WYSIWYG）
显示的用户交互行为与应用程序最终产生的结果是一致的。
3）直接操纵（directmanipulation）
直接操纵是指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。
直接操纵的对象是命令、数据或是对数据的某种操作。
（2）设计图形用户界面的原则
1）一般性原则：
界面要具有一致性、常用操作要有快捷方式、提供简单的错误处理、对操作人员的重要操作要有信息反馈、操作可逆、设计良好的联机帮助、合理划分并高效地使用显示屏、保证信息显示方式与数据输入方式的协调一致
2）颜色的使用：
颜色是一种有效的强化手段，同时具有美学价值。
使用颜色时应注意如下几点：
限制同时显示的颜色数；画面中活动对象的颜色应鲜明，而非活动对象应暗淡；尽量避免不相容的颜色放在一起，如黄与蓝，红与绿等，除非作对比时用； 若用颜色表示某种信息或对象属性，要使用户理解这种表示，并尽量采用通用的表示规则。
3）图标的设计：
图标是可视地表示实体信息的简洁、抽象的符号。
图标设计是方寸艺术，需要在很小的范围内表现出图标的内涵。
设计图标时应该着重考虑视觉冲击力，要使用简单的颜色，利用眼睛对色彩和网点的空间混合效果，做出精彩图标。
4）按钮的设计：
设计按钮应该具有交互性，应该有3到6种状态效果（点击时的状态、鼠标放在上面但未点击的状态、点击前鼠标未放在上面时的状态、点击后鼠标未放在上面时的状态、不能点击时的状态、独立自动变化的状态），按钮应具备简洁的图示效果，应能够让使用者产生功能上的关联反应。
属于一个群组的按钮应该风格统一，功能差异大的按钮应该有所区别。
5）屏幕布局的设计：
设计屏幕布局（Layout）时应该使各功能区重点突出,应遵循如下几条原则：
平衡原则、预期原则、经济原则、顺序原则、规则化
6）菜单界面的设计：
菜单在图形界面的应用程序中使用得非常普遍，是软件界面设计的一个重要组成方面，描述了一个软件的大致功能和风格。
菜单中的选项在功能上与按钮相当，一般具有下列一种或几种类型的选项：
命令项、菜单项和窗口项。
菜单的结构一般有单一菜单、线状序列菜单、树状结构菜单、网状结构菜单等，其中树状结构菜单是最常见的结构。
设计菜单界面时应注意的一般性原则：
功能组织菜单，合理分类，并力求简短，前后一致；合理组织菜单界面的结构与层次；按一定的规则对菜单项进行排序；菜单选项的标题要力求文字简短、含义明确，并且最好以关键词开始；常用选项要设置快捷键；充分利用菜单选项的使能与禁止、可见与隐藏属性；使用弹出式菜单。
7）填表输入界面的设计：
在处理大量相关数据的场合下，需要输入一系列的数据，这时填表输入界面是最理想的数据输入界面。
在设计填表输入界面时应遵循的原则：
一致性；有含义的表格标题；使用易于理解的指导性说明文字；栏目按逻辑分组排序；表格的组织结构和用户任务相一致；光标移动方便；出错提示；提供帮助；表格显示应美观、清楚，避免过分拥挤。
三实验内容与步骤
（一）实验内容：
利用常用的设计工具（VC/VB/Delphi/PB等）完成一个通用图形用户界面设计，要遵循界面设计的一般原则（一致性、快捷方式、提供错误处理），注意颜色的使用，学会使用图标、按钮、屏幕布局、菜单和对话框的设计
（二）实验步骤
1．设计多个对话框，完成填表输入界面的设计，合理使用图标、按钮、颜色；
2．设计不同形式的菜单，完成对不同对话框的调用；
3．提供简单的错误处理、联机帮助
实验二多通道用户界面
一实验目的和要求
1）了解常见的多通道用户界面
2）查找资料，熟悉一种多通道用户界面并写出综述
二预备知识
为适应目前和未来的计算机系统要求，人机界面应能支持时变媒体，实现三维、非精确及隐含的人机交互，而多通道人机界面是达到这一目的的重要途径。
80年代后期以来，多通道用户界面成为人机交互技术研究的崭新领域，在国内外受到高度重视。
综合采用视线、语音、手势等新的交互通道、设备和交互技术，使用户利用多个通道以自然、并行、协作的方式进行人机对话，通过整合来自多个通道的、精确的和不精确的输入来捕捉用户的交互意图，提高人机交互的自然性和高效性。
多通道用户界面主要关注人机界面中用户向计算机输入信息以及计算机对用户意图的理解，所要达到的目标可归纳为如下方面：
1）交互的自然性
使用户尽可能多地利用已有的日常技能与计算机交互，降低认识负荷。
2）交互的高效性
使人机通讯信息交换吞吐量更大、形式更丰富，发挥人机彼此不同的认知潜力。
3）与传统的用户界面特别是广泛流行的WIMP/GUI兼容。
（1）多通道用户界面的基本特点
1）使用多个感觉和效应通道
2）允许非精确的交互
3）三维和直接操纵
4）交互的双向性
5）交互的隐含性
（2）涉及的主要技术
1）多媒体
使用多种表示媒体，如文本、图形、图像和声音，使人机交互技术最终要向着更接近于人的自然方式发展，使计算机具有听觉和视觉，以更自然的方式与人交互。
多媒体技术引入了动画、音频、视频等动态媒体，大大丰富了计算机表现信息的形式，拓宽了计算机输出的带宽，提高了用户接受信息的效率，使人们可以得到更直观的信息，从而简化了用户的操作，扩展了应用范围。
2）虚拟现实
又称虚拟环境，虚拟现实系统向用户提供沉浸和多感觉通道体验。
在虚拟现实中，人是主动参与者，复杂系统中可能有许多参与者共同在以计算机网络系统为基础的虚拟环境中协同工作。
虚拟现实系统具有三个重要特点：
沉浸感、交互性、构想性。
3）眼动跟踪
与视觉有关的人机交互自始至终都离不开视线的控制。
如果能通过用户的视线盯着感兴趣的目标，计算机便“自动”将光标置于其上，人机交互将更为直接，也省去了上述交互过程中的大部分步骤。
4）手势识别
一个简单的手势蕴涵着丰富的信息，人与人可以通过手势传达大量的信息，实现高速的通信。
将手势运用于计算机能够很好地改善人机交互的效率。
在多数情况下我们笼统地认为手势是人的上肢（包括手臂、手和手指）的运动状态。
5）三维输入
许多应用（如虚拟现实系统）需要三维空间定位技术，三维空间控制器的共同特点是具有六个自由度，分别描述三维对象的宽度、深度、高度、俯仰角、转动角、偏转角。
通过控制这六个参数，用户可以在屏幕上平移三维对象或光标，也可沿三个坐标轴转动三维对象。
在三维用户交互中必须便于用户在三维空间中观察、比较、操作、改变三维空间的状态。
6）语音识别
语音识别是计算机通过识别和理解过程把语音信号转变为相应的文本文件或命令的技术。
语音识别又是一门交叉学科，它与声学、语音学、语言学、数字信号处理理论、信息论、计算机科学等众多学科紧密相连。
7）表情识别
面部表情是人体语言的一部分。
人的面部表情不是孤立的，它与情绪之间存在着千丝万缕的联系。
人的各种情绪变化以及对冷热的感觉都是非常复杂的高级神经活动，如何感知、记录、识别这些变化过程是表情识别的关键。
8）手写识别
发展手写识别技术并嵌入到各种设备中，将是手写识别技术未来发展的重要方向之一。
联机手写识别技术的优点是不需专门学习与训练、不必记忆编码规则、安装后即可手写输入汉字，是最简单方便的输入方式。
同时符合人的书写习惯，可以一面思考、一面书写，不会打断思维的连续性，是最自然的输入方式。
9）数字墨水
数字墨水是一种新的人机界面技术，它借鉴手写识别技术的同时，克服了它的许多局限性。
数字墨水在数学上是通过三阶贝塞尔曲线来描述笔输入的笔迹，它的记录格式与图像和文本格式都不同。
这种存储方式使得数字墨水文件的大小很小，从而可以更有效地进行存储。
三实验内容与步骤
（一）实验内容:
要求上网查找资料，熟悉一种多通道用户界面并写出综述，可以是眼动跟踪、手势识别、三维输入、语音识别、表情识别、手写识别等。
（二）实验步骤：
1）借助图书馆的中英文参考文献资料以及网络，确定出一种多通道用户界面；
2）完成对该多通道用户界面的综述（包括定义、发展历史、当前的应用、主要的研究方法分类、以及发展前景以及中英文参考文献（至少各5篇））
实验三Web界面设计
一实验目的和要求
1）熟悉Web站点的信息交互模型和结构
2）熟悉Web界面设计的基本思想和原则
3）掌握Web界面设计的工具和技术
二预备知识
Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。
Web界面设计与站点外观直接相关，站点的界面外观是否友好直接关系到是否能吸引人的关注。
人性化的设计是Web界面设计的核心，如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。
（1）Web信息交互模型
用来解释Web的人机界面性质的一个模型，它提出网页是用户和知识之间的界面。
对于信息提供者来说包括信息的表达，对于使用者来说则是信息的获取。
信息的表达与获取分别受到两者认知结构的制约。
模型涉及到信息的三种类型
1）数据：
当一条信息被反复、简单的提供时称为数据，比如机票价格。
2）复杂信息：
而用来叙述事件时称为复杂信息，如多媒体信息。
3）过程性信息：
在信息有明确目标，并相互作用时称为过程性信息，如在线练习、在线测试等。
模型涉及到信息的两种特性：
1）动态性：
信息在不断的变化，具有动态性；2）一致性：
信息元素的组织方式具有一致性
（2）Web信息设计模型
是解释Web人机界面性质的另一个模型，是一种研究网页的信息设计模型。
设计模型中要考虑到信息的两个方面：
1）第一是应该呈现或略去什么信息。
2）第二个方面指的是信息该如何被表现。
（3）Web界面设计基本原则
1）了解浏览者的心理状态
2）内容与形式的统一
3）减少浏览层次
4）特点明确
5）统一整体的形象
6）Web界面设计的3C原则
（4）Web界面概要设计
1）Web界面框架设计：
Web网站规划、建立原型系统、详细设计、正式实施
2）Web界面的内容与风格的设计:
网站内容设计的原则、Web界面的风格
3）Web界面设计的语言与文化：
网站应设置多语言选择，在网站设计和建设中进行跨文化研究
（5）Web界面设计要素
⏹Web界面布局
⏹Web界面的色彩
⏹Web界面的字体
⏹Web界面的动画与多媒体
⏹Web界面的导航
（6）Web界面设计技术与工具
要设计好的Web界面，需要有良好的设计工具，随着Internet网络的发展，国际组织和许多互联网软件开发商制订了若干标准，开发了不同的Web界面设计工具。
主要的技术包括超文本标记语言HTML、客户端脚本语言JavaScript、JavaApplet、服务器端脚本语言。
页面编辑器主要包括：
1）MicroSoft公司的Frontpage；2）Macromedia公司的Dreamweaver，Dreamweaver对于动态网页的支持特别好，可以轻而易举地做出很多眩目的互动页面特效，Dreamweaver与Flash、Firework并称为Macromedia的网页制作三剑客。
辅助工具主要包括：
1）AceHTMLPro6.0—全功能的HTML&JavaScript编辑器；2）AntennaWebDesignStudio—强大的可视化网页设计软件；3）EasyHTML—简单的所见即所得的HTML编辑器，有固定、类似浏览器的界面；4）EasyWebEditor—是一个Web发布工具，允许不了解HTML而在所见即所得环境中编辑Web网页。
三实验内容与步骤
（一）实验内容:
要求根据Web界面设计的原则（简洁、一致性、对比度），进行Web界面规划、概要设计和设计要素的选择，利用一种界面设计工具（Dreamweaver/Frontpage）完成网页设计。
（二）实验步骤：
1）选择一种界面设计工具，并熟悉它；
2）针对一个具体的网站（学校、个人、公司）设计应用，进行Web界面规划和概要设计；
3）选择WEB界面设计要素，设计出网页
升级会员 