第8讲 人机交互设计.

人机交互设计教材P222第8章先思考几个问题？体系结构设计的过程模型？（回顾）概念设计？（回顾）体系结构精化？（回顾）2020/2/122阅读书的第八章回答下列问题？以用户为中心的设计关键目标？用户界面设计的基本原则？用户界面设计的过程模型？10分钟2020/2/123第八章人机交互设计8.1以用户为中心的设计8.2用户界面设计的基本原则8.3用户界面设计模型的表示8.4用户界面设计的过程模型8.5用户及任务分析8.6用户界面的概念设计8.7用户界面流设计8.8用户界面的精化2020/2/1248.1以用户为中心的设计8.1.1以用户为中心的设计理念谁是用户？怎样做到以用户为中心？以用户为中心的设计基本理念可归纳如下：⑴对用户特征的研究和理解应该作为软件开发过程中各种决策的主要依据。⑵在软件开发的各阶段尽可能获得来自用户的反馈并利用这种反馈改进或优化设计。2020/2/125以用户为中心的设计⑶用户对产品的满意度不仅取决于使用体验，而且取决于用户在与产品接触的全过程中获得的满意度。⑷人机交互设计不能仅止于用户可以使用产品提供的各项功能，而应该追求更高的目标：让用户在与产品接触的全过程中获得愉悦体验。2020/2/1268.1.2人类信息处理模型心理学上广为采用的人类信息处理模型将人类接收并处理外界信息的过程划分为感知（perception）、认知（cognition）和反应（response）三个阶段。2020/2/1278.1.3以用户为中心的设计方法“以用户为中心”的UI设计方法就是确保设计符合目标用户的期望。在设计过程中贯彻“以用户为中心”的UI设计方法，能够帮助设计师检验设计是否有利于提高产品质量，最重要的设计内容是什么。2020/2/128以用户为中心的设计方法2020/2/1298.2用户界面设计的基本原则⑴易理解性界面上呈现的所有元素，包括文本信息、数据表示、状态呈现、菜单、按钮、超链等，贴近用户的业务领域，并且具有简洁、明确、自然、直观等特性；界面中屏幕（screen，见8.3节）之间的跳转关系简单、自然。⑵易操作性用户对软件系统的命令可以通过简单、直观的方式来完成；为提高用户的工作效率，界面应尽量减少用户的操作次数和输入信息量。2020/2/1210用户界面设计的基本原则⑶灵敏性界面必须在合理的时间内对用户操作做出响应，对耗时较长的内部处理过程必须提供及时的进度反馈，保持用户与界面间的不间断的双向沟通。⑷一致性为降低用户的记忆负担，界面应在整个软件系统范围内保持显示风格、操作方式的一致性并符合业界规范如，用Ctrl+C快捷键来实现复制功能2020/2/1211用户界面设计的基本原则⑸容错性界面设计应以降低用户的误操作机率为目标，但必须容忍用户的误操作对所有可能造成损害的动作，必须在用户确认后才进行；允许用户对尽可能多的界面操作反悔（Undo）；在用户误操作后系统具备适当的恢复能力。⑹人性化在适当的时机出现用户恰好需要的帮助信息或建议；在任何情况下用户均能简易地理解软件系统的当前状态和响应信息，并能清晰地了解自己的操作行为的前因后果，不至因界面跳转而迷失；界面的布局和色彩应使用户感觉舒适、自然。2020/2/12128.3用户界面设计模型的表示注：本书将界面中的窗口、对话框、网页统称为屏幕。界面设计的表示涉及两个方面：屏幕内容的表示屏幕之间跳转关系的表示2020/2/1213用户界面设计模型的表示屏幕中的界面元素有四种：⑴静态元素：与软件系统的运行状态无关、在任何情况下均没有变化的文本、图标（icon）、图形（graph）、图像（image）等。⑵动态元素：因当前用户及软件系统的运行状态而异，由软件系统根据业务逻辑自动呈现于屏幕中，且不允许用户修改的内容，包括不可编辑的文本、表格、图标、图形、图像等。2020/2/1214用户界面设计模型的表示⑶用户输入元素：在屏幕上预留空位、由用户在界面操作中填写或选择的界面元素，包括可编辑的文本、单选钮（radio）、多选框（checkbox）、选择列表（selectlist）、可编辑的表格等。只要一个界面元素在某些情况下可供用户修改或选择，就应将其归入用户输入元素类，而非动态元素类。⑷用户命令元素：用户点击此类元素后位于界面后端的业务逻辑处理或界面刷新动作将被触发，其典型代表是按钮、菜单、超链等。，见图8.1(a)。2020/2/1215用户界面设计模型的表示本书推荐采用UML类来表示屏幕，与瞬时快照的图形表示相辅相成，见图8.1。屏幕的瞬时快照可以表示为一张图，它描述了屏幕中静态元素的内容、其他三类界面元素在特定时间点上的视觉形式以及此时所有可见的界面元素的布局在屏幕的UML类表示中，静态元素被省略，它们在任何情况下均不会变化；动态元素体现为类的属性；命令元素对应的动作体现为类的操作。2020/2/1216用户界面设计模型的表示输入元素的表示，有两种方法：直接将它们作为屏幕类的属性，此时需要采用UML构造型（见5.1.4节）将其与动态元素相区分，见图8.2中的构造型input；第二种方法是，设立单独的“输入表格”（inputform）类，将输入元素作为其属性，此时需要将从属于输入表格的命令元素对应的操作从屏幕类移至输入表格类，并在这两个类之间建立组合关系（因为一个输入表格对象总是出现在一个屏幕中），见图8.2中的构造型inputform。2020/2/1217在输入元素为数组形态时（见例8.1图8.2中的“SensorConfigForm”），必须使用第二种方法；在输入元素尽管不是数组形态，但是输入的信息项较多时，本书推荐第二种方法；否则，应采用第一种表示，以使界面的UML模型更显简洁。2020/2/1218用户界面设计模型的表示隐藏的界面动作屏幕在每次出现时自行调用的初始化动作，跳转发生时离开本屏幕前自行调用的动作、由本屏幕提供给其他屏幕调用的动作，因一个屏幕元素的状态变化而导致其他屏幕元素发生改变的动作。这些隐藏动作也应表示为屏幕类的操作，并采用UML构造型将隐藏动作与命令元素对应的动作相区分。见图8.5中的动作“onInitScreen”。要表现屏幕之间的跳转关系，既要考虑在典型应用场景下屏幕之间的跳转及信息传递，又要考虑屏幕之间的静态逻辑关系。前者采用UML交互图（主要是顺序图）来表示，见图8.3；后者采用UML类图来表现，其中的单向关联关系表示可能发生的跳转，关联边之上的名称应能反映跳转的原因，见图8.4。2020/2/1219用户界面设计的过程模型这项活动称之为“用户界面的概念设计”。2020/2/12国防科技大学计算机学院20用户界面设计的过程模型界面流的设计在时间上可以与前述的概念设计重叠，即，首先确定针对某项任务的主屏幕（详见8.6节），对主屏幕进行概念设计，然后考虑从主屏幕可能跳转到哪些其他屏幕，再对它们展开概念设计，依此类推，直至完整的界面流构建完毕，并且界面流中每幅屏幕的概念设计也告完成。2020/2/12218.4用户界面设计的过程模型用户界面设计过程的主要活动如下：⑴用户分析、任务分析及建模；⑵概念设计；基于任务分析和建模的成果，可以确定用户为完成每项任务需要与软件系统之间进行信息交互的时机，以及在每个时机软件系统应该呈现的屏幕的大致内容。它区别于界面的详细设计，仅从逻辑上表现软件系统在相应时机需要向用户呈现哪些信息，可以接收用户的哪些命令以及为执行命令所必需的应该由用户提供的信息。概念设计不关心界面的布局和美观性，也可以暂时忽略某些不太重要的人机交互信息。2020/2/1222用户界面设计过程的主要活动⑶界面流设计；对于稍复杂的任务，仅通过一次人机交互不可能完成，所以需要设置若干屏幕以供用户在适当的时机获得适当的信息、发送适当的命令。这些屏幕之间存在跳转关系，本书称之为“界面流”。⑷界面精化。这些活动之间不存在严格的时序关系。2020/2/1223在界面设计的整个过程中均必须基于用户分析的成果进行设计决策，这是提高用户满意度的关键。8.5用户及任务分析第一个任务8.5.1用户分析具体的建模方法（UML类图）是：每类用户表示为一个UML类，其特征和典型行为分别表示为该类的属性和方法；各类用户之间的关系表示为UML类之间的相应关系。注意，与需求工程不同，这里的用户分析及结果模型只关注与界面的用户评价和用户满意度有关的特征和行为。2020/2/12248.5.2任务分析任务分析不仅要从用户的视角确定人机协同需要完成哪些工作任务，更大的挑战是，如何根据用户特征分析甚至揣测每类用户的思维模式，据此确定人机协同完成任务的过程，在此过程中哪些时间点上必须进行人机交互，在交互时人、机双方各需要提供和接收哪些信息。2020/2/1225任务分析界面设计过程中任务分析活动的主要任务是：在用例模型、分析模型和用户特征模型的基础上，以提高用户满意度为宗旨，设计尽可能吻合用户思维模式的任务完成过程及人机交互信息。软件设计师不必另建新的UML模型图，只需适当调整用例模型和分析模型中相应的图形或文字描述即可。2020/2/12268.6用户界面的概念设计概念设计的主要目标：确定屏幕中应该包含的主要内容，及用户基于该屏幕可施行的主要操作。概念设计不关心界面的布局和美观性，也不追求界面内容和操作的完整性，但概念设计阶段不应遗漏重要的信息项和用户操作。针对任务分析获得的每项任务（用例），依据其人机协同过程找出该任务的主屏幕。主屏幕指，用户刚开始使用软件系统启动此任务时系统呈现出来的画面，其他屏幕均直接或间接地源自主屏幕，并且用户在这些屏幕进行必要的操作后一般仍会回归主屏幕2020/2/1227用户界面的概念设计通常一项任务对应一个主屏幕，但一项复杂任务可能对应多个主屏幕。软件设计师应该在逻辑层面抽象地设计主屏幕的内容，包括静态元素、动态元素、用户输入元素和用户命令元素。“在逻辑层面抽象地设计”指，设计师不考虑界面元素的形状、尺寸、颜色、位置、布局等，只需列出这些界面元素并说明其含义。2020/2/1228用户界面的概念设计在屏幕上设置界面元素的依据：⑴任务分析阶段获得的人机交互信息和人机协同过程⑵借鉴需求工程阶段构造的快速原型⑶参考用例模型中的用例描述（见4.5.3节）⑷参考分析模型中的用例实现方案（包括领域概念模型、分析类图，尤其是用来表示用例实现过程的UML交互图中执行者与边界类之间的交互过程和交互信息。2020/2/1229用户界面的概念设计从屏幕设计在概念设计和界面流设计交叠进行的过程中，针对界面流中除主屏幕之外的稍复杂的从屏幕（相对于主屏幕而言），同样需要先进行概念设计，再进行精化（或称界面详细设计）。对于简单的从屏幕，可直接进行详细设计。2020/2/1230例8.1用户界面的概念设计针对家庭保安系统，加电后它将显示初始屏幕。该屏幕显示一条静态的欢迎信息（静态元素），以文本（动态元素）显示当前时间和系统当前状态，以不可编辑的表格（动态元素）列出当前系统中传感器的类别、位置和状态，以四个命令按钮（命令元素）表示可以接收用户的“启动监控”、“系统配置”、“日志查询”和“关机”命令。该初始屏幕的外观设计及其UML类图表示见图8.1。家庭保安系统的主要任务包括“开关机及复位处理”、“传感器监测”、“日志查询”和“系统配置”。本例选择“系统配置”讨论其主屏幕的设计。请读者自行研究其他任务的主屏幕设计。2020/2/1231例8.1用户界面的概念设计图8.1家庭保安系统的初始屏幕的设计(a)外观设计(b)初始屏幕的UML类表示2020/2/1232家庭保安系统家庭保安系统欢迎使用家庭保安系统日志查询传感器列表类别位置当前状态启动监控系统配置当前时间：系统状态：关机+startMonitor()+config()+queryLog()+shutDown()-updateCurT