人机界面设计实验指导书.docx
《人机界面设计实验指导书.docx》由会员分享，可在线阅读，更多相关《人机界面设计实验指导书.docx（41页珍藏版）》请在冰豆网上搜索。
人机界面设计实验指导书
《人机界面设计》实验指导书
实验一命令行和文本菜单
一、实验目的和要求
掌握命令行和文本菜单界面的设计
二、实验内容和原理
a）设计一个命令行界面的游戏，登入游戏界面后，应该有游戏规则说明，按键说明。
b）进入游戏前应该有难度选择：
1表示简单、2表示中等、3表示困难。
c）在游戏主界面中有可以循环输入数独值、可以连续玩好几局直到退出、检查结果、查看答案、新开一局的功能。
d）信息提示功能：
输入错误时应有提示、游戏失败或获取胜利时应有庆祝界面等。
三、实验演示
3.1登入游戏界面
你会看到有四个选项：
a、b、c、e；
图3.1
（1）对于图3.1，如果你按“b”,则会出现如图3.2；
图3.2
（2）对于图3.1，如果你按“c”,则会出现如图3.3；
图3.3
（3）对于图3.1，如果你按“e”,则退出游戏；
（4）对于图3.1，如果你按“a”,则出现游戏难度选择界面，如图3.4。
3.2游戏难度选择
图3.4
（1）对于图，如果你按“0”,则返回上一级目录，出现图3.1；
（2）如果你按1~3，则进入游戏主界面，如图3.5。
按“1”时，数独有20个空格，按“2”时，数独有40个空格，按“3”时，数独有60个空格。
3.3进入游戏主界面
图3.5
（1）对于图3.5，如果按“a”，这开始输入要填数字的横纵坐标和其值，如果输入错误即所输入的横纵坐标不在1~9范围中，这会有“输入错误，请重新输入”的提示，如图3.6；如果输入的位置原题中就有数字则会有“对不起，原题中该位置已经指定为%%，你不能修改这个值”的提示，如图3.7；
图3.6
图3.7
（2）对于图3.5，如果按“b”，则检查结果，如果获胜则出现图3.8，如果结果不正确，则出现图3.9；
图3.8图3.9
（3）对于图3.5，如果按“c”，则输出数独答案，如果只有一个解会出现图
3.10，如果有多个解则出现图3.3.；
图3.10
（4）对于图3.5，如果按“d”，则新开一局，返回到图3.5，循环游戏；
（5）对于图3.5，如果按“e”，则返回上一级菜单，即图3.4
三、实验演示
在这数独游戏设计中，让我学会怎样把所想所思用代码来实现，它不仅锻炼了我的思维，增加了我逻辑紧密性，提高了我自学的能力。
使我在巩固C++基础上，深刻了解了面向对象思想，而且也使我知道了光靠书本上的知识是远远不够的。
因为“山外有山，人外有人”呀！
大学，大部分就是要靠自学呀！
还有很多知识，等着青春勃发的我们去汲取呢！
还有一点就是人机交互的用户界面应该具备可用性、灵活性、复杂性、可靠性，设计用户界面应该尽量置用户于控制之下、减少用户的记忆负担、保持界面一致。
实验二图形用户界面的设计
一实验目的和要求
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．提供简单的错误处理、联机帮助
实验三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界面设计要素，设计出网页
四实验结果
1.数据库中信息
news_user表
news表
2.打开浏览器，在浏览器中输入
出现
3.单击滚动区域内的信息，跳出
过了4秒出现
4.如果在欢迎界面直接单击“登录”，则直接出现登录页面
单击“登录”
出现
5.单击“注册”
出现
输入信息，但是不输入用户名
结果：
输入用户名，但是不输入密码
结果：
输入用户名，但是两次密码输入不一样
结果：
输入已经注册过的用户名，并且两次输入的密码一样
结果：
输入合理的用户名，并且两次输入的密码都一样
结果：
过了3秒钟出现
6.用同样的方法注册一个普通用户，数据库中添加的用户记录如下
7.登录页面
输入不存在的用户名
结果
过了4秒后，有出现登录界面
输入存在的用户名和错误的密码
结果
过了4秒出现登录界面
输入正确的用户名和密码
结果
8.系统主界面
使用普通用户登录
使用管理员身份登录
9.以管理员身份登录，新闻添加页面
此时数据库中新闻表中内容，如下
单击“添加新闻”
出现：
若没有输入摘要
若没有输入具体内容
若没有输入标题
输入已经存在的新闻标题，进行插入
单击“提交”出现
重新输入标题
出现
5秒过后，出现
此时查看，新闻表
10.单击“新闻查询”
在标题上输入“地”，新闻摘要不输入内容，单击“查询”
结果：
在新闻摘要上输入“日本”，标题上不输入内容
结果
在标题上输入“地”，并且在新闻摘要上输入“日本”
结果:
什么都不输入，直接单击“查询”
结果：
显示了所有新闻
11.选一条新闻，单击“查看具体详情”
结果:
单击“返回”
12.选择一条新闻，单击“删除新闻”
结果：
删除前，数据表中信息
删除后
13.选一条新闻，单击“更新新闻”
出现
如果新闻摘要为空
如果具体内容更为空
输入合理的摘要和内容
出现
5秒后出现
单击“查看具体详情”
五总结
实验四多通道用户界面设计
一实验目的和要求
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篇））
（注：
可编辑下载，若有不当之处，请指正，谢谢!
）
升级会员 