第8讲人机交互设计课件

人机交互设计教材P222第8章人机交互设计教材P222第8章先思考几个问题？体系结构设计的过程模型？（回顾）概念设计？（回顾）体系结构精化？（回顾）2023/9/132先思考几个问题？体系结构设计的过程模型？（回顾）2023/8阅读书的第八章回答下列问题？以用户为中心的设计关键目标？用户界面设计的基本原则？用户界面设计的过程模型？10分钟2023/9/133阅读书的第八章回答下列问题？以用户为中心的设计关键目标？20第八章人机交互设计8.1以用户为中心的设计

8.2用户界面设计的基本原则

8.3用户界面设计模型的表示

8.4用户界面设计的过程模型

8.5用户及任务分析

8.6用户界面的概念设计

8.7用户界面流设计

8.8用户界面的精化

2023/9/134第八章人机交互设计8.1以用户为中心的设计 2023/88.1以用户为中心的设计8.1.1以用户为中心的设计理念谁是用户？怎样做到以用户为中心？以用户为中心的设计基本理念可归纳如下：⑴对用户特征的研究和理解应该作为软件开发过程中各种决策的主要依据。⑵在软件开发的各阶段尽可能获得来自用户的反馈并利用这种反馈改进或优化设计。2023/9/1358.1以用户为中心的设计8.1.1以用户为中心的设计理念以用户为中心的设计⑶用户对产品的满意度不仅取决于使用体验，而且取决于用户在与产品接触的全过程中获得的满意度。⑷人机交互设计不能仅止于用户可以使用产品提供的各项功能，而应该追求更高的目标：让用户在与产品接触的全过程中获得愉悦体验。2023/9/136以用户为中心的设计⑶用户对产品的满意度不仅取决于使用体验，而8.1.2人类信息处理模型心理学上广为采用的人类信息处理模型将人类接收并处理外界信息的过程划分为感知（perception）、认知（cognition）和反应（response）三个阶段。2023/9/1378.1.2人类信息处理模型心理学上广为采用的人类信息处理模8.1.3以用户为中心的设计方法“以用户为中心”的UI设计方法就是确保设计符合目标用户的期望。在设计过程中贯彻“以用户为中心”的UI设计方法，能够帮助设计师检验设计是否有利于提高产品质量，最重要的设计内容是什么。2023/9/1388.1.3以用户为中心的设计方法“以用户为中心”的UI设计以用户为中心的设计方法2023/9/139以用户为中心的设计方法2023/8/398.2用户界面设计的基本原则⑴易理解性界面上呈现的所有元素，包括文本信息、数据表示、状态呈现、菜单、按钮、超链等，贴近用户的业务领域，并且具有简洁、明确、自然、直观等特性；

界面中屏幕（screen，见8.3节）之间的跳转关系简单、自然。⑵易操作性用户对软件系统的命令可以通过简单、直观的方式来完成；为提高用户的工作效率，界面应尽量减少用户的操作次数和输入信息量。2023/9/13108.2用户界面设计的基本原则⑴易理解性2023/8/310用户界面设计的基本原则⑶灵敏性界面必须在合理的时间内对用户操作做出响应，对耗时较长的内部处理过程必须提供及时的进度反馈，保持用户与界面间的不间断的双向沟通。⑷一致性为降低用户的记忆负担，界面应在整个软件系统范围内保持显示风格、操作方式的一致性并符合业界规范如，用Ctrl+C快捷键来实现复制功能2023/9/1311用户界面设计的基本原则⑶灵敏性2023/8/311用户界面设计的基本原则⑸容错性界面设计应以降低用户的误操作机率为目标，但必须容忍用户的误操作对所有可能造成损害的动作，必须在用户确认后才进行；

允许用户对尽可能多的界面操作反悔（Undo）；

在用户误操作后系统具备适当的恢复能力。⑹人性化在适当的时机出现用户恰好需要的帮助信息或建议；

在任何情况下用户均能简易地理解软件系统的当前状态和响应信息，并能清晰地了解自己的操作行为的前因后果，不至因界面跳转而迷失；

界面的布局和色彩应使用户感觉舒适、自然。2023/9/1312用户界面设计的基本原则⑸容错性2023/8/3128.3用户界面设计模型的表示注：本书将界面中的窗口、对话框、网页统称为屏幕。界面设计的表示涉及两个方面：

屏幕内容的表示

屏幕之间跳转关系的表示2023/9/13138.3用户界面设计模型的表示注：本书将界面中的窗口、对话框用户界面设计模型的表示屏幕中的界面元素有四种：⑴静态元素：与软件系统的运行状态无关、在任何情况下均没有变化的文本、图标（icon）、图形（graph）、图像（image）等。⑵动态元素：

因当前用户及软件系统的运行状态而异，由软件系统根据业务逻辑自动呈现于屏幕中，且不允许用户修改的内容，包括不可编辑的文本、表格、图标、图形、图像等。2023/9/1314用户界面设计模型的表示屏幕中的界面元素有四种：2023/8/用户界面设计模型的表示⑶用户输入元素：在屏幕上预留空位、由用户在界面操作中填写或选择的界面元素，包括可编辑的文本、单选钮（radio）、多选框（checkbox）、选择列表（selectlist）、可编辑的表格等。只要一个界面元素在某些情况下可供用户修改或选择，就应将其归入用户输入元素类，而非动态元素类。⑷用户命令元素：用户点击此类元素后位于界面后端的业务逻辑处理或界面刷新动作将被触发，其典型代表是按钮、菜单、超链等。，见图8.1(a)

。2023/9/1315用户界面设计模型的表示⑶用户输入元素：在屏幕上预留空位、由用用户界面设计模型的表示本书推荐采用UML类来表示屏幕，与瞬时快照的图形表示相辅相成，见图8.1

。屏幕的瞬时快照可以表示为一张图，它描述了屏幕中静态元素的内容、其他三类界面元素在特定时间点上的视觉形式以及此时所有可见的界面元素的布局在屏幕的UML类表示中，静态元素被省略，它们在任何情况下均不会变化；动态元素体现为类的属性；命令元素对应的动作体现为类的操作。2023/9/1316用户界面设计模型的表示本书推荐采用UML类来表示屏幕，与瞬时用户界面设计模型的表示输入元素的表示，有两种方法：直接将它们作为屏幕类的属性，此时需要采用UML构造型（见5.1.4节）将其与动态元素相区分，见图8.2

中的构造型<<input>>；第二种方法是，设立单独的“输入表格”（inputform）类，将输入元素作为其属性，此时需要将从属于输入表格的命令元素对应的操作从屏幕类移至输入表格类，并在这两个类之间建立组合关系（因为一个输入表格对象总是出现在一个屏幕中），见图8.2

中的构造型<<inputform>>。2023/9/1317用户界面设计模型的表示输入元素的表示，有两种方法：2023/在输入元素为数组形态时（见例8.1

图8.2

中的“SensorConfigForm”），必须使用第二种方法；在输入元素尽管不是数组形态，但是输入的信息项较多时，本书推荐第二种方法；否则，应采用第一种表示，以使界面的UML模型更显简洁。2023/9/1318在输入元素为数组形态时（见例8.1

图8.2

中的“Sens用户界面设计模型的表示隐藏的界面动作屏幕在每次出现时自行调用的初始化动作，跳转发生时离开本屏幕前自行调用的动作、由本屏幕提供给其他屏幕调用的动作，因一个屏幕元素的状态变化而导致其他屏幕元素发生改变的动作。这些隐藏动作也应表示为屏幕类的操作，并采用UML构造型将隐藏动作与命令元素对应的动作相区分。见图8.5中的动作“onInitScreen”。要表现屏幕之间的跳转关系，既要考虑在典型应用场景下屏幕之间的跳转及信息传递，又要考虑屏幕之间的静态逻辑关系。前者采用UML交互图（主要是顺序图）来表示，见图8.3；后者采用UML类图来表现，其中的单向关联关系表示可能发生的跳转，关联边之上的名称应能反映跳转的原因，见图8.4。2023/9/1319用户界面设计模型的表示隐藏的界面动作2023/8/319用户界面设计的过程模型这项活动称之为“用户界面的概念设计”。2023/9/13国防科技大学计算机学院20用户界面设计的过程模型这项活动称之为“用户界面的概念设计”。用户界面设计的过程模型界面流的设计在时间上可以与前述的概念设计重叠，即，首先确定针对某项任务的主屏幕（详见8.6节），对主屏幕进行概念设计，然后考虑从主屏幕可能跳转到哪些其他屏幕，再对它们展开概念设计，依此类推，直至完整的界面流构建完毕，并且界面流中每幅屏幕的概念设计也告完成。2023/9/1321用户界面设计的过程模型界面流的设计在时间上可以与前述的概念设8.4用户界面设计的过程模型用户界面设计过程的主要活动如下：⑴用户分析、任务分析及建模；⑵概念设计；基于任务分析和建模的成果，可以确定用户为完成每项任务需要与软件系统之间进行信息交互的时机，以及在每个时机软件系统应该呈现的屏幕的大致内容。它区别于界面的详细设计，仅从逻辑上表现软件系统在相应时机需要向用户呈现哪些信息，可以接收用户的哪些命令以及为执行命令所必需的应该由用户提供的信息。概念设计不关心界面的布局和美观性，也可以暂时忽略某些不太重要的人机交互信息。2023/9/13228.4用户界面设计的过程模型用户界面设计过程的主要活动如下用户界面设计过程的主要活动⑶界面流设计；对于稍复杂的任务，仅通过一次人机交互不可能完成，所以需要设置若干屏幕以供用户在适当的时机获得适当的信息、发送适当的命令。这些屏幕之间存在跳转关系，本书称之为“界面流”。⑷界面精化。这些活动之间不存在严格的时序关系。2023/9/1323在界面设计的整个过程中均必须基于用户分析的成果进行设计决策，这是提高用户满意度的关键。用户界面设计过程的主要活动⑶界面流设计；2023/8/3238.5用户及任务分析第一个任务8.5.1用户分析具体的建模方法（

UML类图）是：

每类用户表示为一个UML类，其特征和典型行为分别表示为该类的属性和方法；

各类用户之间的关系表示为UML类之间的相应关系。注意，与需求工程不同，这里的用户分析及结果模型只关注与界面的用户评价和用户满意度有关的特征和行为。2023/9/13248.5用户及任务分析第一个任务2023/8/3248.5.2任务分析任务分析不仅要从用户的视角确定人机协同需要完成哪些工作任务，更大的挑战是，如何根据用户特征分析甚至揣测每类用户的思维模式，据此确定人机协同完成任务的过程，在此过程中哪些时间点上必须进行人机交互，在交互时人、机双方各需要提供和接收哪些信息。2023/9/13258.5.2任务分析任务分析不仅要从用户的视角确定人机协同需任务分析界面设计过程中任务分析活动的主要任务是：在用例模型、分析模型和用户特征模型的基础上，以提高用户满意度为宗旨，设计尽可能吻合用户思维模式的任务完成过程及人机交互信息。软件设计师不必另建新的UML模型图，只需适当调整用例模型和分析模型中相应的图形或文字描述即可。2023/9/1326任务分析界面设计过程中任务分析活动的主要任务是：在用例模型、8.6用户界面的概念设计概念设计的主要目标：确定屏幕中应该包含的主要内容，及用户基于该屏幕可施行的主要操作。概念设计不关心界面的布局和美观性，也不追求界面内容和操作的完整性，但概念设计阶段不应遗漏重要的信息项和用户操作。针对任务分析获得的每项任务（用例），依据其人机协同过程找出该任务的主屏幕。主屏幕指，用户刚开始使用软件系统启动此任务时系统呈现出来的画面，其他屏幕均直接或间接地源自主屏幕，并且用户在这些屏幕进行必要的操作后一般仍会回归主屏幕2023/9/13278.6用户界面的概念设计概念设计的主要目标：确定屏幕中应该用户界面的概念设计通常一项任务对应一个主屏幕，但一项复杂任务可能对应多个主屏幕。软件设计师应该在逻辑层面抽象地设计主屏幕的内容，包括静态元素、动态元素、用户输入元素和用户命令元素。“在逻辑层面抽象地设计”指，设计师不考虑界面元素的形状、尺寸、颜色、位置、布局等，只需列出这些界面元素并说明其含义。2023/9/1328用户界面的概念设计通常一项任务对应一个主屏幕，但一项复杂任务用户界面的概念设计在屏幕上设置界面元素的依据：⑴任务分析阶段获得的人机交互信息和人机协同过程⑵借鉴需求工程阶段构造的快速原型⑶参考用例模型中的用例描述（见4.5.3节）⑷参考分析模型中的用例实现方案（包括领域概念模型、分析类图，尤其是用来表示用例实现过程的UML交互图中执行者与边界类之间的交互过程和交互信息。2023/9/1329用户界面的概念设计在屏幕上设置界面元素的依据：2023/8/用户界面的概念设计从屏幕设计在概念设计和界面流设计交叠进行的过程中，针对界面流中除主屏幕之外的稍复杂的从屏幕（相对于主屏幕而言），同样需要先进行概念设计，再进行精化（或称界面详细设计）。对于简单的从屏幕，可直接进行详细设计。2023/9/1330用户界面的概念设计从屏幕设计2023/8/330例8.1用户界面的概念设计针对家庭保安系统，加电后它将显示初始屏幕。该屏幕显示一条静态的欢迎信息（静态元素），以文本（动态元素）显示当前时间和系统当前状态，以不可编辑的表格（动态元素）列出当前系统中传感器的类别、位置和状态，以四个命令按钮（命令元素）表示可以接收用户的“启动监控”、“系统配置”、“日志查询”和“关机”命令。该初始屏幕的外观设计及其UML类图表示见图8.1。家庭保安系统的主要任务包括“开关机及复位处理”、“传感器监测”、“日志查询”和“系统配置”。本例选择“系统配置”讨论其主屏幕的设计。请读者自行研究其他任务的主屏幕设计。2023/9/1331例8.1用户界面的概念设计针对家庭保安系统，加电后它将显示例8.1用户界面的概念设计

图8.1家庭保安系统的初始屏幕的设计

(a)外观设计(b)初始屏幕的UML类表示2023/9/1332例8.1用户界面的概念设计

图8.1家庭保安系统的初始屏例8.1用户界面的概念设计（续）用户从初始屏幕发出“系统配置”命令后，系统应弹出“用户身份验证”对话框要求输入正确的密码。不能认为该对话框是系统配置任务的主屏幕；通过密码验证后进入的屏幕才是真正的主屏幕。可供用户配置的信息包括：密码，报警电话号码、重拨延迟和最大重拨次数，传感器编号、安装位置、门窗传感器灵敏度和烟雾浓度阈值。前四项配置信息在屏幕上表现为输入元素；传感器一般有多个，本例将其设计为可编辑的表格（见图8.2(b)中的SensorConfigForm类）。AddSensorScreen类中的属性sensitivity代表门窗传感器的灵敏度，烟雾传感器的浓度阈值。2023/9/1333例8.1用户界面的概念设计（续）用户从初始屏幕发出“系统配图8.2家庭保安系统中系统配置主屏幕的设计(a)外观设计(b)系统配置主屏幕的UML类表示2023/9/1334图8.2家庭保安系统中系统配置主屏幕的设计2023/8/38.7用户界面流设计界面流设计的主要目标：确定屏幕之间的跳转关系，即一幅屏幕在何种情况下，或者在响应何种用户操作命令后将跳转至另一屏幕。界面流的出现源于：⑴单个屏幕的空间容量有限，不足以表现所有必要的界面元素；⑵用户在主屏幕上的界面操作需要导出新的屏幕，以便在新屏幕上进行面向特定业务功能的界面交互。在界面流建模过程中，要对作为跳转目标的从屏幕进行设计，概念设计的方法如8.6所述。2023/9/13358.7用户界面流设计界面流设计的主要目标：确定屏幕之间的跳用户界面流设计界面流的表示方式主要是UML交互图和类图交互图表示特定应用场景下的屏幕跳转及跳转发生时的消息传递类图借助有向关联关系表示在目标软件系统中屏幕之间所有可能发生的跳转及跳转的原因示例分别见图8.3和图8.4实践中只在类图描绘主要的屏幕及它们之间的跳转关系。2023/9/1336用户界面流设计界面流的表示方式主要是UML交互图和类图202例8.2用户界面流设计家庭保安系统的用户从初始屏幕（MainScreen）发出“启动监控”、“系统配置”和“日志查询”命令后，系统将分别跳转至监控主屏幕（MonitorScreen）系统配置主屏幕（SysConfigScreen）日志查询主屏幕（LogScreen）后两种跳转关系忽略了用户身份验证屏幕当系统处在监控主屏幕时，如发现异常，则跳转至报警屏幕（AlarmScreen）报警屏幕报告异常事件的发生时间、位置、异常描述，并显示通过电话报警的状态如，“正在拨号”、“已接通”、“正在播报异常事件”、“已完成”等2023/9/1337例8.2用户界面流设计家庭保安系统的用户从初始屏幕（Ma例8.2用户界面流设计（续）用户从监控主屏幕、报警屏幕分别发出“停止监控”、“复位”命令后，经用户身份验证屏幕（VerifyUserIdentityScreen）后可返回初始屏幕。从系统配置主屏幕和日志查询主屏幕发出“关闭”命令后也可返回初始屏幕。家庭保安系统中主要界面流的顺序图表示和类图表示分别见图8.3和图8.4。2023/9/1338例8.2用户界面流设计（续）用户从监控主屏幕、报警屏幕分别图8.3家庭保安系统中主要界面流的

顺序图表示2023/9/1339图8.3家庭保安系统中主要界面流的

顺序图表示2023/8/图8.4家庭保安系统中主要界面流的

类图表示2023/9/1340图8.4家庭保安系统中主要界面流的

类图表示2023/8/38.8用户界面的精化界面精化的主要任务：基于概念设计和界面流设计，给出目标软件产品界面的完整的、详细的设计设计师的工作步骤是：①对屏幕的概念设计成果进行细化、补充等，将界面流中每次跳转动作与具体的事件或界面动作关联起来；②在软件系统的全局范围内对屏幕的设计和界面流进行优化；③将每个精化后的屏幕设计成果提交给美工设计师，进行必要的装饰、美化工作。2023/9/13418.8用户界面的精化界面精化的主要任务：基于概念设计和界面屏幕的概念设计进行精化针对屏幕的概念设计进行精化时，首先要补齐概念设计中遗漏或故意忽略的界面元素。在精化屏幕内容的同时，必须同步地修改、精化屏幕的UML类图，尤其要注意补齐作为屏幕类的操作的隐藏动作（详见8.3节，图8.5中的动作“onInitScreen”）选用最适当的界面元素组织信息的呈现或录入以树形结构组织递归型信息以表格结构组织数组型信息以checkbox表示布尔型信息，等2023/9/1342屏幕的概念设计进行精化针对屏幕的概念设计进行精化时，2023屏幕的概念设计进行精化设计界面元素的布局，包括将哪些界面元素集结于一个子区域，哪些界面元素应该相互对齐，等。将用户的界面动作（例如鼠标点击命令按钮、修改checkbox或radiobox的选项，在界面域中填写或修改数据导致其他界面域的改变，等）与屏幕类中的操作对应起来。2023/9/1343屏幕的概念设计进行精化设计界面元素的布局，包括将哪些界面元素界面流的精化界面流的精化包括：补齐8.7节所述的界面流设计中遗漏或故意忽略的屏幕，必要时修改或细化界面流的顺序图和类图；具体说明在哪些时机或情形下、由哪些事件或界面动作会引发什么样的屏幕跳转；针对每个屏幕的跳转关系，说明跳转时将会执行屏幕类中的哪些操作。2023/9/1344界面流的精化界面流的精化包括：2023/8/344设计和界面流进行优化必须在整个软件系统范围内协调多项任务的屏幕和屏幕流，这些任务可能顺序执行，也可能并行或交叉执行。必须在全局范围内对屏幕和屏幕流进行优化，如，探讨屏幕合并的可能性；对已设计的屏幕进行调整，确保界面风格一致化、用户操作方法一致化等。2023/9/1345设计和界面流进行优化必须在整个软件系统范围内协调多项任务的屏例8.3用户界面的精化针对图8.2(a)所示的家庭保安系统中系统配置主屏幕，考虑到显示屏的面积较小，基于界面设计原则，应该将配置信息分为报警电话（含电话号码、重拨延迟和最大重拨次数三个配置项）、传感器（含编号、安装位置、门窗传感器灵敏度和烟雾浓度阈值四个配置项）和密码共三大类，每类配置信息组织为一个标签页（tabpage），从而将图8.2(a)精化为图8.5(a)。本例将图8.5(a)中的三个标签页分别命名为AlarmTelConfigTabSensorConfigTabPswConfigTab。2023/9/1346例8.3用户界面的精化针对图8.2(a)所示的家庭保安系统用户界面的精化在初次进入每个标签页时，系统分别调用onInitAlarmTelConfigonInitSensorConfigonInitPswConfig

读入相应的配置信息。在用户修改密码时，如果仅要求键入一次新密码，用户事后容易忘记。按照界面设计原则，必须要求用户再次键入，并且系统应该检查用户两次录入的密码是否完全一致。精化后系统配置主屏幕的UML类如图8.5(b)所示，该屏幕处于密码修改标签页时的瞬时快照如图8.5(a)所示。2023/9/1347用户界面的精化在初次进入每个标签页时，系统分别调用onIni图8.5家庭保安系统中精化后的

系统配置主屏幕的设计(a)精化后的系统配置屏幕的外观设计(b)精化后的系统配置屏幕的UML类表示2023/9/1348图8.5家庭保安系统中精化后的

系统配置主屏幕的设计(a)小结任何产品，包括软件产品在内，成败最终取决于用户的满意程度。软件设计，尤其是用户界面设计的过程中，遵