人机交互的软件工程方法》实验指导书《

《人机交互的软件工程方法》实验指导书《人机交互的软件工程方法》课程是计算机专业的一门选修课程。人机交互的软件工程方法的应用领域越来越广泛，对《人机交互的软件工程方法》课程的教学提出了更高的要求。开设人机交互的软件工程方法实验，目的就是为了学生能够更好的掌握人机交互的软件工程方法的应用，使课堂教学与实践环节紧密结合。希望学生能够充分利用实验条件，认真完成实验，从实验中得到应有的锻炼和培养，为今后进一步学习和应用人机交互的软件工程方法打下坚实的基础。《人机交互软件工程方法》课程实验的目的：是为了使学生在课程学习的同时，通过实验教学验证课堂教学的理论，理解和掌握人机交互的软件工程方法中最基本、最广泛应用的概念、原理、理论和算法以及基本技术和方法，更好地掌握《人机交互的软件工程方法》课程教学大纲要求的内容。《人机交互软件工程方法》课程实验的注意事项：在《人机交互的软件工程方法》的课程实验过程中，要求学生做到：(1)预习实验指导书有关部分，认真做好实验内容的准备，就实验可能出现的情况提前作出思考和分析。(2)认真书写实验报告。实验报告包括实验目的和要求，程序设计说明，给出源程序清单。(3)遵守机房纪律，服从辅导教师指挥，爱护实验设备。(4)实验课程不迟到。如有事不能出席，所缺实验一般不补。《人机交互的软件工程方法》课程实验的验收：实验的验收将分为两个部分。第一部分是上机操作，包括检查程序运行和即时提问。第二部分是提交书面的实验报告。实验一命令行和文本菜单一、实验目的和要求掌握命令行和文本菜单界面的设计二、实验内容和原理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)，如图所示。WIMP界面用户手眼击键/指点窗口、图标菜单、文本应用例程图形用户界面是当前用户界面的主流，广泛应用于各档台式微机和图形工作站。图形用户界面的共同特点是以窗口管理系统为核心，使用键盘和鼠标器作为输入设备。窗口管理系统除了基于可重叠多窗口管理技术外，广泛采用的另一核心技术是事件驱动(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)