交互式软件工程实验指导书

人机交互的软件工程实验指导书计算机科学系2016、3、1I前言良好的交互性能和用户体验，已经成为决定交互式软件系统成功的核心要素之一。iPod、iPhone以及iPad等产品的相继成功也使人们意识到，好的交互系统并不需要具有多么复杂的功能，相反，简单易用的产品更容易获得普通用户的喜爱。理想的交互式软件产品开发中应该包含如下三类人：交互设计师、视觉设计师和程序设计师。其中，交互设计师的作用是构筑产品核心功能的交互过程和框架，大到任务的具体执行过程，小到在何处放置按钮以及菜单如何组织等；视觉设计师的作用是让界面内容更加美观，比如设计特定的图标和按钮样式等；程序设计师的工作是通过编程让交互任务得以实现。现实生活中，程序设计师通常会兼顾交互设计的工作。因此，让程序设计人员学习一些交互知识，对于提升最终产品的用户体验具有至关重要的作用。本着理论与实践相结合的原则，实验指导书对学员学习本课程要求完成的实验任务提供了详尽而细致的指导。实践内容主要通过教师讲解，同学们自己动手实验，实验要求学生在学习交互式软件工程课的同时，要课外阅读一些有关实验的资料和参考书籍，作好预习；提倡以小组合作方式完成实验，并在实验后按要求完成实验报告。II目录实验一软件界面设计基础实验..................................................................1实验二软件界面可用性设计实验........................................................3实验三基于可视化设计的软件易用性实验........................................8实验四交互式系统设计实验................................错误!未定义书签。1实验一软件界面设计基础实验一、实验目的通过实验熟悉常用控件的设计、布局方法，并进而为软件界面设计打下必要的基础。当然，软件界面设计有多种工具，如网站设计的各种工具，图形动画的制作处理工具等都可作软件界面的设计工具。工具的选择要做到前台设计与后台编程方便统一，以此考量，可视化编程环境是最佳的软件界面设计工具。本课程以visualstudio编程环境为实验平台，首先要求熟悉和掌握visualstudio编程环境的控件操作。控件的创建方式有以下两种：一种是在对话框模板中用编辑器指定控件，即将对话框看作控件的父窗口。另一种是编程方式，在visualstudio编程环境中，调用MFC相应控件类的成员函数Create来创建，并在Create函数指定控件的父窗口指针。本次实验重点学习第一种方法。二、实验要求1、熟悉visualstudio编程环境2、掌握在对话框中设计文本框、单选按钮、复选按钮、列表框、组合框、命令按钮等常用控件的操作方法.3、分析思考软件界面设计实验中如何体现交互式软件工程的设计理念，如用户体验设计的沉浸性、交互性、易用性，以用户为中心的思想，总结你的体会感受，准备讨论交流。三、实验环境visualstudio编程环境四、实验内容设计以下“学生个人信息登记表”对话框，完成如下功能：当用户输入了该对话框中对应信息后，单击【OK】按钮，这些信息将显示到学生信息编辑框中，如图所示。图1对话框人机界面对话框是人机界面的接口，而对话框类是对话框与主程序框架交流的桥梁。2设计操作步骤如下：1、新建对话框工程。在向导对话框中单击“Dialogbased”创建一个基于对话框的应用程序，其它默认。2、打开控件工具栏，将相应的控件拖动到对话框中，并对控件按图1进行布局。3、为控件添加成员变量。其中为姓名对应的编辑框添加成员变量m_name，为学号对应的编辑框添加成员变量m_num，为性别对应的编辑框添加成员变量性别sex，为学院对应的编辑框添加成员变量m_xueyuan，为其它对应的编辑框添加成员变量其他other4、添加“OK”按钮的消息函数和事件代码，代码如下：voidCMy1Dlg::OnOK(){//TODO:AddextravalidationhereUpdateData(TRUE);m_info=姓名+m_name+\r\n+学号+m_num+\r\n+性别+sex+\r\n+学院+m_xueyuan+\r\n+其他+other+\r\n;UpdateData(FALSE);//CDialog::OnOK();}至此工程完成，编译运行如图1所示。五、实验结果讨论（写在实验报告中）1、格式塔（Gestalt）心理学：研究人是如何感知一个良好组织的模式的，而不是将其视为一系列相互独立的部分，强调界面设计原则：相近性原则（相似性原则）：设计界面时，应按照相关性对组件进行分组。连续性原则：将组件对齐，更有助于增强用户的主观感知效果。完整性原则：人们倾向于忽视轮廓的间隙而将其视作一个完整的整体。对称性原则：相互对称且能够组合为有意义单元的物体会被组合在一起。提供帮助减少出错原则：界面设计时要尽可能减小对用户的记忆需求，同时可考虑通过将信息放置于一定的上下文中，来减少信息单元的数目。结合上述交互式界面设计的原则，分析观察图1，该设计项目体现了上述哪些设计理念？说明你的理由，你受到哪些启发，有何改进建议。2、交互式设计范型如下：命令行交互、菜单驱动界面、基于表格的界面、问答界面Wizard、隐喻（Metaphor）界面、自然语言交互。分析观察图1，该设计项目属于哪些范型？有何优点和缺点？3、一般，交互设计流程或步骤如下：Establishingrequirements确定需求Developingalternativedesign开发设计理念Prototyping做原型Evaluating评估结合本次实验内容，请思考一下：该界面设计有用吗？受用户欢迎吗？有何问题或缺陷？请设计一个信息处理的软件界面，说明你的设计思路。3实验二软件界面可用性设计实验一、实验目的软件可用性目标不仅涉及人与之正在发生交互作用的系统，还包括系统对使用它的人所产生的作用。它包括五个方面的特征，即软件的易学性、易记性、使用效率高、软件运行的低出错率及用户对系统的主观满意度。为了实现上述软件可用性目标，软件界面设计师必须按照以下四个阶段开展活动：1、了解用户，对软件的任务特征把握分析；2、运用场景原型工具，掌握用户如何与系统进行交互；3、边做边说，了解用户希望进行的工作，并了解用户为何这样做；4、评估测试，找出改进与纠错的方面，为进一步设计做准备。在软件界面设计过程，应参照以下黄金规则：界面风格尽可能保证一致符合普遍可用性提供信息丰富的反馈预防并处理错误让操作容易撤销支持内部控制点减轻短时记忆负担本实验要求按照上述提示或指引开展软件界面的设计，实现软件可用性的目标。二、实验要求1、熟悉visualstudio编程环境2、比照教材相关软件可用性论述的内容，设计一个包含交互式系统元素的简单软件系统，从界面风格设计一致性、提供必要的帮助信息、减少用户记忆负担等关键评测点对设计出的系统进行分析与评估.3、分析思考软件界面设计实验中如何体现软件的可用性目标，总结讨论你设计的系统体现了哪些黄金规则，哪些方面需要改进？代入用户角色，从用户的角度总结系统可用性的缺点和优点。三、实验环境visualstudio编程环境四、实验内容设计以下朋友通讯录软件界面，对话框中包含基本的功能：数据信息的浏览、修改、添加和删除，当用户点击工具栏中的导航条按钮能够对通讯录中的记录进行向前、向后以及第一个和最后一个记录的检索。图1软件主界面4添加界面中的【添加】按钮，如下面图2、图3所示。图2记录添加前图3记录添加后添加界面中的【删除】和【修改】按钮，结果如图4和图5所示。5图4当前记录删除后图5当前记录修改后该通讯录系统设计实现了软件的基本功能：数据记录的查询、添加、修改和删除，通过交互方式实现了相应的功能，设计操作步骤如下：1、建立通讯录数据库，创建数据源并指向该数据库2、创建MFC应用程序框架。在利用MFCAppWizard创建MFC应用程序框架时选择步骤1中的数据源支持。3、打开控件工具栏，将相应的控件拖动到对话框中，并对控件按图1进行布局。4、为控件添加成员变量。其中为姓名对应的编辑框添加成员变量m_name，为职位对应的编辑框添加成员变量m_position，为手机对应的编辑框添加成员变量性别m_mobile，为地址对应的编辑框添加成员变量m_address，为电子邮箱对应的编辑框添加成员变量其他m_email65、添加消息处理函数。为添加、修改和删除按钮分别添加单击事件的消息处理函数，并输入以下事件代码：voidCMyView::OnAddnew(){//TODO:AddyourcontrolnotificationhandlercodehereUpdateData(TRUE);m_pSet-AddNew();m_pSet-m_name=m_name;m_pSet-m_position=m_position;m_pSet-m_mobile=m_mobile;m_pSet-m_address=m_address;m_pSet-m_email=m_email;m_pSet-Update();m_pSet-MoveLast();m_pSet-Requery();MessageBox(添加成功);}voidCMyView::OnDelete(){//TODO:Addyourcontrolnotificationhandlercodeherem_pSet-Delete();m_pSet-Requery();MessageBox(已删除当前记录);}voidCMyView::OnEdit(){//TODO:AddyourcontrolnotificationhandlercodehereUpdateData(TRUE);m_pSet-Edit();m_pSet-m_name=m_name;m_pSet-m_position=m_position;m_pSet-m_mobile=m_mobile;m_pSet-m_address=m_address;m_pSet-m_email=m_email;m_pSet-Update();m_pSet-Requery();MessageBox(当前记录修改成功);}至此工程完成，编译运行如图1所示。五、实验结果讨论（写在实验报告中）1、软件界面的交互性软件项目的运行界面是人机交互的吗？分析软件的运行情况，总结你的交互性体验。2、理解消息处理在软件界面交互性设计的作用消息类别7a.窗口消息（windowsmessage）这类消息主要是指由WM_开头的消息，但WM_COMMAND除外。例如，WM_CREATE（窗口对象创建时产生）、WM_DESTROY（窗口对象清除前发生）、WM_PAINT（窗口更新时产生绘制消息）等，一般由窗口类和视图类对象来处理。窗口消息往往带有参数，以标志处理消息的方法。b.控件的通知消息（controlnotifications）当控件的状态发生改变（如用户在控件中进行输入）时，控件就会向其父窗口发送WM_COMMAND通知消息。应用程序框架处理控件消息的方法和窗口消息相同，但按钮的BN_CLICKED通知消息除外，它的处理方法与命令消息相同。c.命令消息（commandmessage）命令消息主要包括由用户交互对象（菜单、工具栏的按钮、快捷键等）发送的WM_COMMAND通知消息。消息和消息处理实现了软件的交互性设计功能，请分析本实验中是如何通过消息实现交互功能的，具体的实现方法如何？3、本次实验是可用性界面设计，还有哪些可用的功能或服务可以加入？系统有何问题或缺陷？系统好用吗？8实验三基于可视化设计的软件易用性实验一、实验目的软件易用性要求是比软件可用性要求更高，只有做到了软件的可用性，才可能实现软件的易用性。事实上，软件设计有三个层次，即