第8讲-人机交互设计.课件.ppt

1、人机交互设计人机交互设计教材教材P222 P222 第第8 8章章先思考几个问题？先思考几个问题？体系结构设计的过程模型？（体系结构设计的过程模型？（回顾回顾）概念设计？（概念设计？（回顾回顾）体系结构精化？（体系结构精化？（回顾回顾）2022-6-52阅读书的第八章回答下列问题？阅读书的第八章回答下列问题？以以用户为中心的设计关键目标？用户为中心的设计关键目标？用户界面设计的基本原则？用户界面设计的基本原则？用户界面设计的过程模型？用户界面设计的过程模型？1010分钟分钟2022-6-53第八章第八章 人机交互设计人机交互设计8.1 8.1 以用户为中心的设计以用户为中心的设计8.2 8.2

2、 用户界面设计的基本原则用户界面设计的基本原则8.3 8.3 用户界面设计模型的表示用户界面设计模型的表示8.4 8.4 用户界面设计的过程模型用户界面设计的过程模型8.5 8.5 用户及任务分析用户及任务分析8.6 8.6 用户界面的概念设计用户界面的概念设计8.7 8.7 用户界面流设计用户界面流设计8.8 8.8 用户界面的精化用户界面的精化2022-6-548.1 8.1 以用户为中心的设计以用户为中心的设计8.1.1 8.1.1 以用户为中心的设计理念以用户为中心的设计理念谁是用户？谁是用户？怎样做到以用户为中心？怎样做到以用户为中心？以以用户为中心的设计基本理念可归纳如下：用户为中

3、心的设计基本理念可归纳如下：对用户特征的研究和理解应该作为软件开发过程对用户特征的研究和理解应该作为软件开发过程中各种中各种决策决策的的主要依据主要依据。在软件开发的各阶段尽可能获得来自用户的反馈在软件开发的各阶段尽可能获得来自用户的反馈并利用这种反馈并利用这种反馈改进或优化设计改进或优化设计。2022-6-55以用户为中心的设计以用户为中心的设计用户对产品的满意度不仅取决于使用体用户对产品的满意度不仅取决于使用体验，而且取决于用户在与产品接触的验，而且取决于用户在与产品接触的全过全过程中获得的满意度程中获得的满意度。人机交互设计不能仅止于用户可以使用人机交互设计不能仅止于用户可以使用产品提供

4、的各项功能，而应该追求更高的产品提供的各项功能，而应该追求更高的目标：目标：让用户在与产品接触的全过程中获让用户在与产品接触的全过程中获得愉悦体验。得愉悦体验。2022-6-568.1.2 8.1.2 人类信息处理模型人类信息处理模型心理学上广为采用的人类信息处理模型将心理学上广为采用的人类信息处理模型将人类接收并处理外界信息的过程划分为感人类接收并处理外界信息的过程划分为感知（知（perceptionperception）、认知（）、认知（cognitioncognition）和）和反应（反应（responseresponse）三个阶段。）三个阶段。2022-6-578.1.3 8.1.3

5、以用户为中心的设计方法以用户为中心的设计方法“以用户为中心以用户为中心”的的UIUI设计方法就是确保设计方法就是确保设计设计符合目标用户的期望。符合目标用户的期望。在设计过程中贯彻在设计过程中贯彻“以用户为中心以用户为中心”的的UIUI设计方法，能够帮助设计师检验设计是否设计方法，能够帮助设计师检验设计是否有利于提高产品质量，最重要的设计内容有利于提高产品质量，最重要的设计内容是什么。是什么。2022-6-58以用户为中心的设计方法以用户为中心的设计方法2022-6-598.2 8.2 用户界面设计的基本原则用户界面设计的基本原则易理解性易理解性 界面上呈现的所有元素，包括文本信息、数据表示、

6、状态界面上呈现的所有元素，包括文本信息、数据表示、状态呈现、菜单、按钮、超链等，贴近用户的业务领域，并且呈现、菜单、按钮、超链等，贴近用户的业务领域，并且具有简洁、明确、自然、直观等特性；具有简洁、明确、自然、直观等特性； 界面中屏幕（界面中屏幕（screenscreen，见，见8.38.3节）之间的跳转关系简单、节）之间的跳转关系简单、自然。自然。易操作性易操作性 用户对软件系统的命令可以通过简单、直观的方式来完成；用户对软件系统的命令可以通过简单、直观的方式来完成；为提高用户的工作效率，界面应尽量减少用户的操作次数为提高用户的工作效率，界面应尽量减少用户的操作次数和输入信息量。和输入信息量

7、。2022-6-510用户界面设计的基本原则用户界面设计的基本原则灵敏性灵敏性 界面必须在合理的时间内对用户操作做出响应，界面必须在合理的时间内对用户操作做出响应，对耗时较长的内部处理过程必须提供及时的进度对耗时较长的内部处理过程必须提供及时的进度反馈，保持用户与界面间的不间断的双向沟通。反馈，保持用户与界面间的不间断的双向沟通。一致性一致性 为降低用户的记忆负担，界面应在整个软件系统为降低用户的记忆负担，界面应在整个软件系统范围内保持显示风格、操作方式的一致性并符合范围内保持显示风格、操作方式的一致性并符合业界规范业界规范 如，用如，用Ctrl+CCtrl+C快捷键来实现复制功能快捷键来实现

8、复制功能2022-6-511用户界面设计的基本原则用户界面设计的基本原则容错性容错性 界面设计应以降低用户的误操作机率为目标，但必界面设计应以降低用户的误操作机率为目标，但必须容忍用户的误操作须容忍用户的误操作 对所有可能造成损害的动作，必须在用户确认后才对所有可能造成损害的动作，必须在用户确认后才进行；进行； 允许用户对尽可能多的界面操作反悔（允许用户对尽可能多的界面操作反悔（UndoUndo）；）； 在用户误操作后系统具备适当的恢复能力。在用户误操作后系统具备适当的恢复能力。人性化人性化 在适当的时机出现用户恰好需要的帮助信息或建议；在适当的时机出现用户恰好需要的帮助信息或建议； 在任何情

9、况下用户均能简易地理解软件系统的当前在任何情况下用户均能简易地理解软件系统的当前状态和响应信息，并能清晰地了解自己的操作行为状态和响应信息，并能清晰地了解自己的操作行为的前因后果，不至因界面跳转而迷失；的前因后果，不至因界面跳转而迷失； 界面的布局和色彩应使用户感觉舒适、自然。界面的布局和色彩应使用户感觉舒适、自然。2022-6-5128.3 8.3 用户界面设计模型的表示用户界面设计模型的表示注：注：本书将界面中的窗口、对话框、网页统称为本书将界面中的窗口、对话框、网页统称为屏幕屏幕。界面设计的表示涉及两个方面：界面设计的表示涉及两个方面：u 屏幕内容的表示屏幕内容的表示u 屏幕之间跳转关系

10、的表示屏幕之间跳转关系的表示2022-6-513用户界面设计模型的表示用户界面设计模型的表示屏幕中的界面元素有四种：屏幕中的界面元素有四种：静态元素：静态元素： 与软件系统的运行状态无关、在任何情况下均没与软件系统的运行状态无关、在任何情况下均没有变化的文本、图标（有变化的文本、图标（iconicon）、图形（）、图形（graphgraph）、）、图像（图像（imageimage）等。）等。动态元素：动态元素： 因当前用户及软件系统的运行状态而异，由软件因当前用户及软件系统的运行状态而异，由软件系统根据业务逻辑自动呈现于屏幕中，且不允许系统根据业务逻辑自动呈现于屏幕中，且不允许用户修改的内容，

11、包括不可编辑的文本、表格、用户修改的内容，包括不可编辑的文本、表格、图标、图形、图像等。图标、图形、图像等。2022-6-514用户界面设计模型的表示用户界面设计模型的表示用户输入元素：用户输入元素：在屏幕上预留空位、由用户在界面操作在屏幕上预留空位、由用户在界面操作中填写或选择的界面元素，包括可编辑的文本、单选钮中填写或选择的界面元素，包括可编辑的文本、单选钮（radioradio）、多选框（）、多选框（checkboxcheckbox）、选择列表（）、选择列表（select select listlist）、可编辑的表格等。）、可编辑的表格等。只要一个界面元素在某些情况下可供用户修改或选择

12、，就应只要一个界面元素在某些情况下可供用户修改或选择，就应将其归入用户输入元素类，而非动态元素类。将其归入用户输入元素类，而非动态元素类。用户命令元素：用户命令元素：用户点击此类元素后位于界面后端的业用户点击此类元素后位于界面后端的业务逻辑处理或界面刷新动作将被触发，其典型代表是按钮、务逻辑处理或界面刷新动作将被触发，其典型代表是按钮、菜单、超链等。菜单、超链等。，见图，见图8.1(a)8.1(a) 。2022-6-515用户界面设计模型的表示用户界面设计模型的表示本书推荐采用本书推荐采用UMLUML类类来表示屏幕，与来表示屏幕，与瞬时快照瞬时快照的图的图形表示相辅相成，见形表示相辅相成，见图

13、图8.18.1 。u屏幕的屏幕的瞬时快照瞬时快照可以表示为一张图，它描述了屏幕中可以表示为一张图，它描述了屏幕中静态元素的内容、其他三类界面元素在特定时间点上静态元素的内容、其他三类界面元素在特定时间点上的视觉形式以及此时所有可见的界面元素的布局的视觉形式以及此时所有可见的界面元素的布局在屏幕的在屏幕的UMLUML类表示中，类表示中，u静态元素被省略静态元素被省略，它们在任何情况下均不会变，它们在任何情况下均不会变化；化；u动态元素体现为动态元素体现为类的属性类的属性；u命令元素对应的动作体现为命令元素对应的动作体现为类的操作类的操作。2022-6-516用户界面设计模型的表示用户界面设计模型

14、的表示输入元素的表示，有两种方法：输入元素的表示，有两种方法：u直接将它们作为屏幕类的属性，直接将它们作为屏幕类的属性，此时需要采用此时需要采用UMLUML构造构造型（见型（见5.1.45.1.4节）将其与动态元素相区分，见节）将其与动态元素相区分，见图图8.28.2 中中的构造型的构造型；u第二种方法是，第二种方法是，设立单独的设立单独的“输入表格输入表格”（input input formform）类，将输入元素作为其属性，此时需要将从属）类，将输入元素作为其属性，此时需要将从属于输入表格的命令元素对应的操作从屏幕类移至输入于输入表格的命令元素对应的操作从屏幕类移至输入表格类，并在这两个类

15、之间建立组合关系（因为一个表格类，并在这两个类之间建立组合关系（因为一个输入表格对象总是出现在一个屏幕中），见图输入表格对象总是出现在一个屏幕中），见图8.28.2 中的中的构造型构造型。2022-6-517在输入元素为数组形态时（见在输入元素为数组形态时（见例例8.18.1 图图8.28.2 中中的的“SensorConfigFormSensorConfigForm”），必须使用），必须使用第二种方法；在输入元素尽管不是数组形第二种方法；在输入元素尽管不是数组形态，但是输入的信息项较多时，本书推荐态，但是输入的信息项较多时，本书推荐第二种方法；第二种方法；否则，应采用第一种表示，以使界面的否

16、则，应采用第一种表示，以使界面的UMLUML模型更显简洁。模型更显简洁。2022-6-518用户界面设计模型的表示用户界面设计模型的表示隐藏隐藏的界面的界面动作动作u屏幕屏幕在每次出现时自行调用的初始化动作在每次出现时自行调用的初始化动作，u跳跳转发生时离开本屏幕前自行调用的动作、由本屏幕提供给转发生时离开本屏幕前自行调用的动作、由本屏幕提供给其他屏幕调用的动作其他屏幕调用的动作，u因因一个屏幕元素的状态变化而导致其他屏幕元素发生改变的一个屏幕元素的状态变化而导致其他屏幕元素发生改变的动作。动作。这些隐藏动作也应表示为屏幕类的操作，并采用这些隐藏动作也应表示为屏幕类的操作，并采用UMLUML构

17、构造型将隐藏动作与命令元素对应的动作相区分造型将隐藏动作与命令元素对应的动作相区分。见。见图图8.58.5中的动作中的动作“onInitScreenonInitScreen”。要表现屏幕之间的跳转关系，要表现屏幕之间的跳转关系，既要考虑在典型应用场景既要考虑在典型应用场景下屏幕之间的跳转及信息传递，又要考虑屏幕之间的静下屏幕之间的跳转及信息传递，又要考虑屏幕之间的静态逻辑关系态逻辑关系。前者前者采用采用UMLUML交互图（主要是顺序图）来交互图（主要是顺序图）来表示，表示，见图见图8.38.3；后者采用后者采用UMLUML类图来表现类图来表现，其中的单向，其中的单向关联关系表示可能发生的跳转，

18、关联边之上的名称应能关联关系表示可能发生的跳转，关联边之上的名称应能反映跳转的原因，见反映跳转的原因，见图图8.48.4。2022-6-519用户界面设计的过程模型用户界面设计的过程模型这项活动称之为这项活动称之为“用户界面的概念设计用户界面的概念设计”。2022-6-5国防科技大学计算机学院20用户界面设计的过程模型用户界面设计的过程模型界面流的设计在时间上可以与前述的概念界面流的设计在时间上可以与前述的概念设计重叠，即，首先确定针对某项任务的设计重叠，即，首先确定针对某项任务的主屏幕（详见主屏幕（详见8.68.6节），对主屏幕进行概念节），对主屏幕进行概念设计，然后考虑从主屏幕可能跳转到哪

19、些设计，然后考虑从主屏幕可能跳转到哪些其他屏幕，再对它们展开概念设计，依此其他屏幕，再对它们展开概念设计，依此类推，直至完整的界面流构建完毕，并且类推，直至完整的界面流构建完毕，并且界面流中每幅屏幕的概念设计也告完成。界面流中每幅屏幕的概念设计也告完成。2022-6-5218.4 8.4 用户界面设计的过程模型用户界面设计的过程模型用户用户界面设计过程的主要活动如下：界面设计过程的主要活动如下：用户分析、任务分析及建模；用户分析、任务分析及建模；概念设计概念设计；u基于任务分析和建模的成果，可以确定用户为完成每基于任务分析和建模的成果，可以确定用户为完成每项任务需要与软件系统之间进行信息交互的

20、时机，以项任务需要与软件系统之间进行信息交互的时机，以及在每个时机软件系统应该呈现的屏幕的大致内容及在每个时机软件系统应该呈现的屏幕的大致内容。u它区别于界面的详细设计，仅从逻辑上表现软件系统它区别于界面的详细设计，仅从逻辑上表现软件系统在相应时机需要向用户呈现哪些信息，可以接收用户在相应时机需要向用户呈现哪些信息，可以接收用户的哪些命令以及为执行命令所必需的应该由用户提供的哪些命令以及为执行命令所必需的应该由用户提供的信息。的信息。u概念设计不关心界面的布局和美观性，也可以暂时忽概念设计不关心界面的布局和美观性，也可以暂时忽略某些不太重要的人机交互信息。略某些不太重要的人机交互信息。2022

21、-6-522用户界面设计过程的主要活动用户界面设计过程的主要活动界面流设计；界面流设计；u对于稍复杂的任务，仅通过一次人机交互不可对于稍复杂的任务，仅通过一次人机交互不可能完成，所以需要设置若干屏幕以供用户在适能完成，所以需要设置若干屏幕以供用户在适当的时机获得适当的信息、发送适当的命令。当的时机获得适当的信息、发送适当的命令。这些屏幕之间存在跳转关系，本书称之为这些屏幕之间存在跳转关系，本书称之为“界界面流面流”。界面精化。界面精化。p这些活动之间不存在严格的时序关系。这些活动之间不存在严格的时序关系。2022-6-523在界面设计的整个过程中均必须基于用户分析的成在界面设计的整个过程中均必

22、须基于用户分析的成果进行设计决策，这是提高用户满意度的关键。果进行设计决策，这是提高用户满意度的关键。8.5 8.5 用户及任务分析用户及任务分析第一个任务第一个任务8.5.1 8.5.1 用户用户分析分析具体的建模方法（具体的建模方法（ UMLUML类图类图）是：）是：u 每类用户表示为一个每类用户表示为一个UMLUML类，其特征和典型类，其特征和典型行为分别表示为该类的属性和方法；行为分别表示为该类的属性和方法；u 各类用户之间的关系表示为各类用户之间的关系表示为UMLUML类之间的相类之间的相应关系。应关系。注意，注意，与需求工程不同，这里的用户分析与需求工程不同，这里的用户分析及结果模

23、型只关注与界面的用户评价和用及结果模型只关注与界面的用户评价和用户满意度有关的特征和行为。户满意度有关的特征和行为。2022-6-5248.5.2 8.5.2 任务分析任务分析任务分析不仅要从用户的视角确定人机协任务分析不仅要从用户的视角确定人机协同需要完成哪些工作任务，更大的挑战是，同需要完成哪些工作任务，更大的挑战是，如何根据用户特征分析甚至揣测每类用户如何根据用户特征分析甚至揣测每类用户的思维模式，据此确定人机协同完成任务的思维模式，据此确定人机协同完成任务的过程，在此过程中哪些时间点上必须进的过程，在此过程中哪些时间点上必须进行人机交互，在交互时人、机双方各需要行人机交互，在交互时人、

24、机双方各需要提供和接收哪些信息。提供和接收哪些信息。2022-6-525任务分析任务分析界面设计过程中任务分析活动的主要任务是：界面设计过程中任务分析活动的主要任务是：在用例模型、在用例模型、分析模型和用户特征模型的基础上，以提高用户满意度为分析模型和用户特征模型的基础上，以提高用户满意度为宗旨，设计尽可能吻合用户思维模式的任务完成过程及人宗旨，设计尽可能吻合用户思维模式的任务完成过程及人机交互信息。机交互信息。软件设计师不必另建新的软件设计师不必另建新的UMLUML模型图，只需适当调整用例模型图，只需适当调整用例模型和分析模型中相应的图形或文字描述即可。模型和分析模型中相应的图形或文字描述即

25、可。2022-6-5268.6 8.6 用户界面的概念设计用户界面的概念设计概念设计的主要目标：概念设计的主要目标：确定屏幕中应该包含的主要内容，确定屏幕中应该包含的主要内容，及用户基于该屏幕可施行的主要操作。及用户基于该屏幕可施行的主要操作。概念设计不关心界面的布局和美观性，也不追求界面内容概念设计不关心界面的布局和美观性，也不追求界面内容和操作的完整性，但概念设计阶段不应遗漏重要的信息项和操作的完整性，但概念设计阶段不应遗漏重要的信息项和用户操作。和用户操作。针对任务分析获得的每项任务（用例），依据其人机协同针对任务分析获得的每项任务（用例），依据其人机协同过程找出该任务的主屏幕。过程找出

26、该任务的主屏幕。主屏幕主屏幕指，用户刚开始使用软件系统启动此任务时系指，用户刚开始使用软件系统启动此任务时系统呈现出来的画面，其他屏幕均直接或间接地源自主统呈现出来的画面，其他屏幕均直接或间接地源自主屏幕，并且用户在这些屏幕进行必要的操作后一般仍屏幕，并且用户在这些屏幕进行必要的操作后一般仍会回归主屏幕会回归主屏幕2022-6-527用户界面的概念设计用户界面的概念设计通常通常一项任务对应一个主屏幕一项任务对应一个主屏幕，但一项复杂任务可能对应，但一项复杂任务可能对应多个主屏幕。多个主屏幕。软件设计师应该在逻辑层面抽象地设计主屏幕的内容，包软件设计师应该在逻辑层面抽象地设计主屏幕的内容，包括静

27、态元素、动态元素、用户输入元素和用户命令元素。括静态元素、动态元素、用户输入元素和用户命令元素。u“在逻辑层面抽象地设计在逻辑层面抽象地设计”指指，设计师不考虑界面元，设计师不考虑界面元素的形状、尺寸、颜色、位置、布局等，只需列出这素的形状、尺寸、颜色、位置、布局等，只需列出这些界面元素并说明其含义。些界面元素并说明其含义。2022-6-528用户界面的概念设计用户界面的概念设计在屏幕上设置界面元素的依据：在屏幕上设置界面元素的依据：任务分析阶段获得的人机交互信息和人机协同任务分析阶段获得的人机交互信息和人机协同过程过程借鉴需求工程阶段构造的快速原型借鉴需求工程阶段构造的快速原型参考用例模型中

28、的用例描述（见参考用例模型中的用例描述（见4.5.34.5.3节）节）参考分析模型中的用例实现方案（包括领域概参考分析模型中的用例实现方案（包括领域概念模型、分析类图，尤其是用来表示用例实现过念模型、分析类图，尤其是用来表示用例实现过程的程的UMLUML交互图中执行者与边界类之间的交互过程交互图中执行者与边界类之间的交互过程和交互信息。和交互信息。2022-6-529用户界面的概念设计用户界面的概念设计从屏幕设计从屏幕设计u在概念设计和界面流设计交叠进行的过程中，针对界在概念设计和界面流设计交叠进行的过程中，针对界面流中除主屏幕之外的稍复杂的从屏幕（相对于主屏面流中除主屏幕之外的稍复杂的从屏幕

29、（相对于主屏幕而言），同样需要先进行概念设计，再进行精化幕而言），同样需要先进行概念设计，再进行精化（或称界面详细设计）。（或称界面详细设计）。u对于简单的从屏幕，可直接进行详细设计。对于简单的从屏幕，可直接进行详细设计。2022-6-530例例8.1 8.1 用户界面的概念设计用户界面的概念设计针对家庭保安系统，加电后它将显示初始屏幕。针对家庭保安系统，加电后它将显示初始屏幕。该屏幕显示一条静态的欢迎信息（静态元素），以文本该屏幕显示一条静态的欢迎信息（静态元素），以文本（动态元素）显示当前时间和系统当前状态，以不可编辑（动态元素）显示当前时间和系统当前状态，以不可编辑的表格（动态元素）列出

30、当前系统中传感器的类别、位置的表格（动态元素）列出当前系统中传感器的类别、位置和状态，以四个命令按钮（命令元素）表示可以接收用户和状态，以四个命令按钮（命令元素）表示可以接收用户的的“启动监控启动监控”、“系统配置系统配置”、“日志查询日志查询”和和“关机关机”命令。命令。该初始屏幕的外观设计及其该初始屏幕的外观设计及其UMLUML类图表示见图类图表示见图8.18.1。家庭保安系统的主要任务包括家庭保安系统的主要任务包括“开关机及复位处理开关机及复位处理”、“传感器监测传感器监测”、“日志查询日志查询”和和“系统配置系统配置”。本例选择本例选择“系统配置系统配置”讨论其主屏幕的设计。讨论其主屏

31、幕的设计。请读者自行研究其他任务的主屏幕设计。请读者自行研究其他任务的主屏幕设计。2022-6-531例例8.1 8.1 用户界面的概念设计用户界面的概念设计图图8.1 8.1 家庭保安系统的初始屏幕的设计家庭保安系统的初始屏幕的设计 (a) 外观设计(b) 初始屏幕的 UML类表示2022-6-532例例8.1 8.1 用户界面的概念设计（续）用户界面的概念设计（续）用户从初始屏幕发出用户从初始屏幕发出“系统配置系统配置”命令后，系统应弹出命令后，系统应弹出“用户身份验证用户身份验证”对话框要求输入正确的密码。对话框要求输入正确的密码。不能认为该对话框是系统配置任务的主屏幕；不能认为该对话框

32、是系统配置任务的主屏幕；通过密码验证后进入的屏幕才是真正的主屏幕。通过密码验证后进入的屏幕才是真正的主屏幕。可供用户配置的信息包括：密码，报警电话号码、重拨延可供用户配置的信息包括：密码，报警电话号码、重拨延迟和最大重拨次数，传感器编号、安装位置、门窗传感器迟和最大重拨次数，传感器编号、安装位置、门窗传感器灵敏度和烟雾浓度阈值。灵敏度和烟雾浓度阈值。前四项配置信息在屏幕上表现为输入元素；前四项配置信息在屏幕上表现为输入元素；传感器一般有多个，本例将其设计为可编辑的表格（见图传感器一般有多个，本例将其设计为可编辑的表格（见图8.2(b) 8.2(b) 中的中的 SensorConfigFormS

33、ensorConfigForm类）。类）。AddSensorScreen AddSensorScreen 类中的属性类中的属性sensitivity sensitivity 代表门窗传感代表门窗传感器的灵敏度，烟雾传感器的浓度阈值。器的灵敏度，烟雾传感器的浓度阈值。2022-6-533图图8.2 8.2 家庭保安系统家庭保安系统中系统配置主屏中系统配置主屏幕的设计幕的设计(a) (a) 外观设计外观设计(b) (b) 系统配置主屏幕的系统配置主屏幕的UMLUML类表示类表示2022-6-5348.7 8.7 用户界面流设计用户界面流设计界面流设计的主要目标：界面流设计的主要目标：确定屏幕之间的

34、跳转关系，确定屏幕之间的跳转关系，即一即一幅屏幕在何种情况下，或者在响应何种用户操作命令后将幅屏幕在何种情况下，或者在响应何种用户操作命令后将跳转至另一屏幕。跳转至另一屏幕。界面流的出现源于：界面流的出现源于：单个屏幕的空间容量有限，不足以表现所有必要的界面元单个屏幕的空间容量有限，不足以表现所有必要的界面元素；素；用户在主屏幕上的界面操作需要导出新的屏幕，以便在新用户在主屏幕上的界面操作需要导出新的屏幕，以便在新屏幕上进行面向特定业务功能的界面交互。屏幕上进行面向特定业务功能的界面交互。u在界面流建模过程中，要对作为跳转目标的在界面流建模过程中，要对作为跳转目标的从屏幕从屏幕进进行设计，概念

35、设计的方法如行设计，概念设计的方法如8.68.6所述。所述。2022-6-535用户界面流设计用户界面流设计界面流的表示方式主要是界面流的表示方式主要是UMLUML交互图和类图交互图和类图u交互图交互图表示特定应用场景下的屏幕跳转及跳转发生时表示特定应用场景下的屏幕跳转及跳转发生时的消息传递的消息传递u类图类图借助有向关联关系表示在目标软件系统中屏幕之借助有向关联关系表示在目标软件系统中屏幕之间所有可能发生的跳转及跳转的原因间所有可能发生的跳转及跳转的原因示例分别见示例分别见图图8.38.3和和图图8.48.4实践中只在类图描绘实践中只在类图描绘主要的屏幕主要的屏幕及它们之间的跳及它们之间的跳

36、转关系。转关系。2022-6-536例例 8.2 8.2 用户界面流设计用户界面流设计家庭保安系统的用户从家庭保安系统的用户从初始屏幕（初始屏幕（MainScreenMainScreen）发出发出“启启动监控动监控”、“系统配置系统配置”和和“日志查询日志查询”命令后，系统将命令后，系统将分别跳转至分别跳转至监控主屏幕（监控主屏幕（MonitorScreenMonitorScreen）系统配置主屏幕（系统配置主屏幕（SysConfigScreenSysConfigScreen）日志查询主屏幕（日志查询主屏幕（LogScreenLogScreen）后两种跳转关系忽略了用户身份验证屏幕后两种跳转关

37、系忽略了用户身份验证屏幕当系统处在监控主屏幕时，如发现异常，则跳转至报警屏当系统处在监控主屏幕时，如发现异常，则跳转至报警屏幕（幕（AlarmScreenAlarmScreen）报警屏幕报告异常事件的发生时间、位置、异常描述，并报警屏幕报告异常事件的发生时间、位置、异常描述，并显示通过电话报警的状态显示通过电话报警的状态如，如，“正在拨号正在拨号”、“已接通已接通”、“正在播报异常事件正在播报异常事件”、“已完成已完成”等等2022-6-537例例8.2 8.2 用户界面流设计（续）用户界面流设计（续）用户从监控主屏幕、报警屏幕分别发出用户从监控主屏幕、报警屏幕分别发出“停止监控停止监控”、“

38、复位复位”命令后，经用户身份验证屏幕命令后，经用户身份验证屏幕（VerifyUserIdentityScreenVerifyUserIdentityScreen）后可返回初始屏幕。）后可返回初始屏幕。从系统配置主屏幕和日志查询主屏幕发出从系统配置主屏幕和日志查询主屏幕发出“关闭关闭”命令后命令后也可返回初始屏幕。也可返回初始屏幕。家庭保安系统中主要界面流的顺序图表示和类图表示分别家庭保安系统中主要界面流的顺序图表示和类图表示分别见图见图8.38.3和图和图8.48.4。2022-6-538图图8.38.3家庭保安系统中主要界面流的家庭保安系统中主要界面流的顺序图表示顺序图表示2022-6-53

39、9图图8.48.4家庭保安系统中主要界面流的家庭保安系统中主要界面流的类图表示类图表示2022-6-5408.8 8.8 用户界面的精化用户界面的精化界面精化的主要界面精化的主要任务：任务：基于基于概念设计和界概念设计和界面流设计，给出目标软件产品界面的完整面流设计，给出目标软件产品界面的完整的、详细的设计的、详细的设计设计师的工作步骤设计师的工作步骤是：是：对屏幕的概念设计成果进行细化、补充等，将对屏幕的概念设计成果进行细化、补充等，将界面流中每次跳转动作与具体的事件或界面动作界面流中每次跳转动作与具体的事件或界面动作关联起来；关联起来； 在软件系统的全局范围内对屏幕的设计和界面在软件系统的

40、全局范围内对屏幕的设计和界面流进行优化；流进行优化； 将每个精化后的屏幕设计成果提交给美工设计将每个精化后的屏幕设计成果提交给美工设计师，进行必要的装饰、美化工作师，进行必要的装饰、美化工作。2022-6-541屏幕的概念设计进行精化屏幕的概念设计进行精化针对针对屏幕的概念设计进行精化屏幕的概念设计进行精化时，时，u首先要补齐概念设计中遗漏或故意忽略的界面元素。首先要补齐概念设计中遗漏或故意忽略的界面元素。u在精化屏幕内容的同时，必须同步地修改、精化屏在精化屏幕内容的同时，必须同步地修改、精化屏幕的幕的UMLUML类图，尤其要注意补齐作为屏幕类的操作类图，尤其要注意补齐作为屏幕类的操作的隐藏动

41、作（详见的隐藏动作（详见8.38.3节，图节，图8.58.5中的动作中的动作“onInitScreenonInitScreen”）u选用选用最适当的界面元素组织信息的呈现或录入最适当的界面元素组织信息的呈现或录入l以以树形结构组织递归型信息树形结构组织递归型信息l以表格结构组织数组型信息以表格结构组织数组型信息l以以check boxcheck box表示布尔型信息，等表示布尔型信息，等2022-6-542屏幕的概念设计进行精化屏幕的概念设计进行精化设计界面元素的布局，包括将哪些界面元素集结设计界面元素的布局，包括将哪些界面元素集结于一个子区域，哪些界面元素应该相互对齐，等。于一个子区域，哪些

42、界面元素应该相互对齐，等。将用户的界面动作（例如鼠标点击命令按钮、修将用户的界面动作（例如鼠标点击命令按钮、修改改check boxcheck box或或radio boxradio box的选项，在界面域中填的选项，在界面域中填写或修改数据导致其他界面域的改变，等）与屏写或修改数据导致其他界面域的改变，等）与屏幕类中的操作对应起来。幕类中的操作对应起来。2022-6-543界面流的精化界面流的精化界面流的精化包括：界面流的精化包括：补齐补齐8.78.7节所述的界面流设计中遗漏或故意节所述的界面流设计中遗漏或故意忽略的屏幕，必要时修改或细化界面流的忽略的屏幕，必要时修改或细化界面流的顺序图和类

43、图；顺序图和类图；具体说明在哪些时机或情形下、由哪些事具体说明在哪些时机或情形下、由哪些事件或界面动作会引发什么样的屏幕跳转；件或界面动作会引发什么样的屏幕跳转；针对每个屏幕的跳转关系，说明跳转时将针对每个屏幕的跳转关系，说明跳转时将会执行屏幕类中的哪些操作会执行屏幕类中的哪些操作。2022-6-544设计和界面流进行优化设计和界面流进行优化必须在整个软件系统范围内协调多项任务必须在整个软件系统范围内协调多项任务的屏幕和屏幕流，这些任务可能顺序执行，的屏幕和屏幕流，这些任务可能顺序执行，也可能并行或交叉执行。也可能并行或交叉执行。必须在全局范围内对屏幕和屏幕流进行优必须在全局范围内对屏幕和屏幕

44、流进行优化，如，探讨屏幕合并的可能性；化，如，探讨屏幕合并的可能性；对已设计的屏幕进行调整，确保界面风格对已设计的屏幕进行调整，确保界面风格一致化、用户操作方法一致化等。一致化、用户操作方法一致化等。2022-6-545例例8.3 8.3 用户界面的精化用户界面的精化针对图针对图8.2(a)8.2(a)所示的家庭保安系统中系统配置主屏幕，考所示的家庭保安系统中系统配置主屏幕，考虑到显示屏的面积较小，基于界面设计原则，应该将配置虑到显示屏的面积较小，基于界面设计原则，应该将配置信息分为报警电话（含电话号码、重拨延迟和最大重拨次信息分为报警电话（含电话号码、重拨延迟和最大重拨次数三个配置项）、传感

45、器（含编号、安装位置、门窗传感数三个配置项）、传感器（含编号、安装位置、门窗传感器灵敏度和烟雾浓度阈值四个配置项）和密码共三大类，器灵敏度和烟雾浓度阈值四个配置项）和密码共三大类，每类配置信息组织为一个标签页（每类配置信息组织为一个标签页（tab pagetab page），从而将图），从而将图8.2(a)8.2(a)精化为精化为图图8.5(a8.5(a) )。本例将图本例将图8.5(a)8.5(a)中的三个标签页分别命名为中的三个标签页分别命名为 AlarmTelConfigTab AlarmTelConfigTab SensorConfigTab SensorConfigTab PswCo

46、nfigTab PswConfigTab。2022-6-546用户界面的精化用户界面的精化在初次进入每个标签页时，系统分别调用在初次进入每个标签页时，系统分别调用onInitAlarmTelConfigonInitAlarmTelConfig onInitSensorConfigonInitSensorConfig onInitPswConfigonInitPswConfig 读入相应的配置信息。读入相应的配置信息。在用户修改密码时，如果仅要求键入一次新密码，用在用户修改密码时，如果仅要求键入一次新密码，用户事后容易忘记。户事后容易忘记。按照界面设计原则，必须要求用户再次键入，并且系按照界面设

47、计原则，必须要求用户再次键入，并且系统应该检查用户两次录入的密码是否完全一致。统应该检查用户两次录入的密码是否完全一致。精化后系统配置主屏幕的精化后系统配置主屏幕的UMLUML类如图类如图8.5(b)8.5(b)所示，该所示，该屏幕处于密码修改标签页时的瞬时快照如图屏幕处于密码修改标签页时的瞬时快照如图8.5(a)8.5(a)所所示。示。2022-6-547图图8.5 8.5 家庭保安系统中精化后的家庭保安系统中精化后的系统配置主屏幕的设计系统配置主屏幕的设计(a) (a) 精化后的系统配置屏幕精化后的系统配置屏幕的外观设计的外观设计(b) (b) 精化后的系统配置屏幕精化后的系统配置屏幕的的

48、UMLUML类表示类表示2022-6-548小小 结结任何产品，包括软件产品在内，成败最终取决于任何产品，包括软件产品在内，成败最终取决于用户的满意程度。用户的满意程度。软件设计，尤其是用户界面设计的过程中，遵循软件设计，尤其是用户界面设计的过程中，遵循以用户为中心的设计理念至关重要。以用户为中心的设计理念至关重要。这些理念包括：对用户特征的研究和理解应该作这些理念包括：对用户特征的研究和理解应该作为软件设计决策的主要依据，在软件开发的各阶为软件设计决策的主要依据，在软件开发的各阶段尽可能获得用户的反馈并利用用户反馈改进或段尽可能获得用户的反馈并利用用户反馈改进或优化设计。优化设计。基于以用户

49、为中心的设计理念，软件产品的用户基于以用户为中心的设计理念，软件产品的用户界面设计必须遵循易理解性、易操作性、灵敏性、界面设计必须遵循易理解性、易操作性、灵敏性、一致性、容错性、人性化等原则。一致性、容错性、人性化等原则。2022-6-549小小 结结用户界面的设计过程主要包括用户及任务分析、用户界面的设计过程主要包括用户及任务分析、概念设计、界面流设计和界面精化。概念设计、界面流设计和界面精化。在界面设计过程中必须基于用户分析的成果进行在界面设计过程中必须基于用户分析的成果进行设计决策，这是提高用户满意度的关键之一。设计决策，这是提高用户满意度的关键之一。在完成了软件体系结构设计和用户界面设

50、计之后，在完成了软件体系结构设计和用户界面设计之后，第九章将探讨软件详细设计的过程和方法。第九章将探讨软件详细设计的过程和方法。2022-6-550作作 业业8.1 8.1 描述你曾用过的最好的软件界面，根据本章描述你曾用过的最好的软件界面，根据本章所学习的相关概念指出其不足之处。所学习的相关概念指出其不足之处。8.2 8.2 描述你曾用过的最差的软件界面，根据本章描述你曾用过的最差的软件界面，根据本章所学习的相关概念对其进行评析。所学习的相关概念对其进行评析。2022-6-551习习 题题8.58.5考虑一种方法能自动地将错误信息和用户求助考虑一种方法能自动地将错误信息和用户求助机制结合起来