1、第16章 用户界面设计,目标,介绍用户界面设计的一般设计原则；介绍多种交互模式以及它们的应用；解释什么时候应该使用图形显示和文本显示方式来显示信息；讲解在用户界面设计过程中应包括的主要活动；介绍可用性属性以及界面评价的不同方法。,内容,设计问题用户界面设计过程用户分析用户界面原型构造界面评估,用户界面,用户界面的设计应与将来的用户所具有的技能、经验和他们的期待相一致。系统用户经常通过用户界面，而不是它的功能来评价一个系统。一个不好的界面设计可能导致用户无法使用系统的某些特性。界面设计不好就是为什么如此多的软件系统还从未使用过的原因。,界面设计中人的因素,有限的短时记忆人们可以瞬间想起七条信息。
2、如果你在同一时间内提供给用户太多的信息，他们就不能够全部接受。人们会犯错误 当我们犯错误的时候，系统运行就会不正常，并发出问题警告消息和报警，这些消息可能会对用户施加更大的精神压力，从而也增加了他们操作失误的可能性。 人是不同的我们有很强的身体行为能力。设计者在设计时不能按照他们个人的能力来进行。人们会有不同的交互偏好有些人喜欢看图片，而有的人喜欢阅读文字。,用户界面设计原则,用户界面设计必须要考虑到系统用户的需要、经验和用户的能力。设计者应该意识到使用软件的人的身体和精神上的局限性（例如有限的短时记忆） ，还要认识到人们是会犯错误的。用户界面设计原则是界面设计的基础，尽管不是所有的原则都会应
3、用到全部的设计中。,设计原则,用户熟悉界面所使用的属于和概念应该来自于用户的经验，而不是计算机的概念。例如，一个办公系统应该要使用诸如信件，文件，文件夹之类的概念，而不是目录，文件标识符等的概念。一致性界面设计应该是一致的，即尽可能地让相似的操作有相同的触发方式。意外最小化如果一个命令式按某种已知的方法进行操作的，那么用户就应该可以预测相似的命令的操作方式。,设计原则,可恢复性界面应该有一种机制来允许用户从错误中恢复，这可能包括撤销，对破坏性行为的确认，软删除等。用户指南用户界面应该提供一些比如帮助系统，在线手册等用户指南。用户差异性界面设计应该为不同类型用户提供合适的交互功能。例如，某些用户
4、可能有视觉困难，所以就用该给他们提供大量的文字信息。,界面设计中的设计问题,在交互式设计中，两个关键问题：用户应该如何与计算机系统进行交互？来自计算机系统的信息应该如何传达给用户？用户交互和信息表达应该通过比如用户界面隐喻这样连贯的框架集成起来。,用户交互类型,直接操作菜单选择表格填写命令语言自然语言,交互类型,多用户界面,LIBSYS系统的交互,文档搜索用户使用搜索工具找他们所需要的文档文档请求用户请求将文档传递到他们的本地机或者是服务器上以供打印,基于web的用户界面,许多基于web的系统都有基于web表格的界面。表格域可以是菜单，自由文字输入，单选框等。在 LIBSYS系统中， 用户从可
5、访问的集合菜单中选择某个集合，在自由文本输入字段中输入要检索的短语。,LIBSYS 系统的搜索表格,信息表示,信息表达是将系统的信息表达给系统用户。信息可以是直接表达的（比如文字处理器中的文本），或是将信息转换成另一种形式（比如表格）来表达。MVC （Model-View-Controller）方法首先广泛应用于Smalltalk语言中，它是支持数据的多重表达的有效方式。,信息表示,用户交互的MVC模型,MVC(Model-View-Controller),把一个应用的输入、输出、处理流程按照Model、View、Controller的方式进行分离，应用被分成三个层模型层、视图层、控制层。模型
6、(Model)：就是业务流程/状态的处理以及业务规则的制定。即是MVC的主要核心。视图(View)：代表用户交互界面，也就是Web的HTML界面。控制(Controller)：可以理解为从用户接收请求, 将模型与视图匹配在一起，共同完成用户的请求。,MVC模型,在基于窗口的GUI应用程序中，控制器(Controller)一般就是控件的事件处理函数。控制器(Controller)有两个基本功能:一是把用户从界面上的操作(点击按钮)映射成模型(Model)对应的功能(如删除数据)，二是把模型(Model)的变化更新到视图(View)上。,留言板分析例子,留言板可以切成三部份:模型(M)：包含 数据
7、库链接、生成数据集、数据库更新操作。视图(V)：包含 获取模型的数据集，将数据集内填充到各种显示界面内，如（留言板列表，管理控制页面，添加修改删除界面等一切用户看得到的页面。）控制(C)：包含 数据库更新的数据校验，将更新完毕后的结果转交给视图进行呈现。,留言板分析_细分,模型(M)数据链接：数据链接参数、链接失败处理。数据操作：生成固定格式的数据集、运行单行SQL、解析固定格式的数据集更新数据库（内容包括有：留言记录，管理员帐号，系统设定）。文件操作：将文件内部格式封成数据集，并附带读取写入文件操作。（内容包括有：留言板样式设定、版权设定、搜索引擎关键字设定、留言板标题设定） 返回,留言板分
8、析_细分,视图(V) 数据显示：根据要求授权给控制器C向模型M请求数据集，然后根据数据集显示出界面。 操作结果显示：根据控制返回的数据资料决定显示的提示资料 具体资料包括有： 留言添加页：判断留言者是否管理员、判断本次留言是回复还是新建留言。 留言管理页：批量删除留言、查询留言、管理员帐号管理、系统设定等。 留言显示页：判断留言是否为管理员专用、判断本留言是否为管理员发布、是否允许回复、是否显示留言者的敏感资料、留言是否需要审核后再显示。,返回,留言板分析_细分,控制(C)数据/文件操作：接收操作资料，校验数据是否符合条件，引用模型的生成数据集类生成指定数据集，然后交给相应的模型操作方法操作，
9、并获取操作结果以预定好的格式转交给视图处理,返回,封装成Class,模型(M)：数据库链接和数据操作可以封成一个Class。数据库数据集的结构，可以引用Dictionary控件与数组完成。文件操作部份封装成一个Class文件结构定义可以封成一个Class,封装成Class,视图(V)：视图部可均是以文件模式出现，也可以将部份代码封装后引用。控制(C)：数据校验：SQL注入防御处理、日文字符替换处理、特定常用校验正则式，数据/文件更新操作：以文件模式出现，每个文件处理模型(M)中的某个类。并完成控制(C)的工作。,封装成Class,视图V模型C链接器：接收视图V要求数据集的请求，将请求转换成模型
10、M合适的SQL句，交给模型M数据集成生器生成数据集，返回给视图V,信息表示,静态信息在一段时间开始时进行初始化，并且在这段时间内不会变化的信息。可以是数字或文本形式动态信息在某一时间段内会改变，而且这种改变必须要与系统用户进行交流的信息。可以是数字或文本的形式,信息表示要考虑的因素,用户对精确信息或不同数据值之间的关系感兴趣吗？信息值变更的速度如何？数值的变更需要马上显示给用户吗？用户必须根据信息的变更执行某种动作吗？用户需要经由直接操作界面与显示的信息进行交互吗？要显示的信息是文本形式的还是数字形式的？数值项的相对值重要吗？,两种信息表示法,模拟和数字表示法,数字表示紧凑 占用的屏幕空间小；
11、精确的数字可以进行交流。模拟表示很容易获得一个相对值的直观印象；能够显示相对值；易于观察异常数据值。,动态变化的数字信息表达方法,表示相对值的图形信息表达,数据可视化,数据可视化是显示大量信息的技术。可视化可以表现数据中实体和趋势之间的关系。数据可视化的实例有：从多个地点收集起来的气象信息；电话网状态显示为相互连接的一组节点；化工厂状态可视化为相互连接的一组反应罐和管道，显示出它们当中的压力和温度信息；在三维空间中显示和操纵分子模型；一组网页显示为一个扩展树。,颜色显示,颜色能够改善用户界面，帮助用户了解并处理系统的复杂结构。颜色可以应用来突出显示异常事件。在界面设计中，颜色的应用常出现的错误
12、有：使用颜色来传达意思；在显示中过度使用颜色。,颜色使用的指导,限制使用颜色的数量，并在如何使用颜色的问题上尽量保守一些；利用颜色的变化说明系统状态的变化；使用彩色编码支持用户想要完成的任务；使用彩色编码要慎重，并且前后一致；注意色彩搭配。,错误消息,错误消息设计是非常重要的。错误消息设计不好，可能就意味着用户拒绝而不是接受一个系统。错误消息应该是有礼貌的、简洁的、一致的和有建设性的。在错误消息设计中，用户的背景和经验应该是一个决定性的因素。,在消息措词上的设计因素,用户错误,假设护士误拼了一个病人的名字，这个病人的记录就是护士极力想恢复的。,好的和不好的错误消息设计,用户界面设计过程,用户界
13、面设计（UI design ）是一个反复的过程，用户要与设计者和界面原型交互，以确定系统用户界面的特性、构成、外表和感受。界面设计过程的三个核心活动：用户分析 理解用户所做的任务。系统原型开发 开发一系列实验系统原型。界面评估 收集有关用户对界面的真实体验信息。,用户界面设计过程,用户分析,如果你不理解用户想与计算机做什么的话，那你就不会对设计有效用户界面有可行的想法。用户分析一定要描述为其他的用户和设计者能够理解的术语。脚本描述典型的应用，它是描述用户分析的一种方法。,用户交互脚本,珍妮的专业是宗教研究，她正在写一篇有关印度建筑及其受宗教活动影响方面的论文。为了了解这些方面的东西，她需要翻阅
14、反映一些著名建筑细节的图片，但是她无法在本地图书馆找到这些材料。 于是她找到负责此方面的图书管理员讨论她的需求，该图书管理员给她一些搜索术语以供使用。同时他也告诉了她位于新德里和伦敦的哪些图书馆有可能收藏此材料，他和珍妮可以登录到图书馆目录上用上述搜索术语进行检索。他们发现了一些原始资料，对部分有建筑细节内容的图片发出了拷贝请求，这些图片会直接邮寄给珍妮。,来自脚本的需求,用户可能不知道恰当是搜索短语，他们会需要提供帮助他们选择搜索短语的入口。用户要能够选择要搜索的集合。用户要能执行搜索并请求相关资料的副本。,分析技术,任务分析把所要完成的任务分为多个步骤。采访和问卷询问用户他们所做的工作。深
15、入实际关注用户的工作。,层次化任务分析（HTA）,采访,基于开放式问题设计半结构化的采访。用户可以提供他们认为必需的信息，而不仅仅是你所想到的信息。小组讨论或者是小组采访允许用户彼此之间讨论他们所做的事。,深入实际,贴近地观察人们是如何工作的、如何与其他人进行交互的以及如何使用工作场合中的特征来支持他们的工作。深入实际是很有价值的，因为许多用户任务都是很直观的，这些任务很难描述和解释。深入实际也可以帮我们理解社会和组织在工作方面的影响所扮演的角色。,深入实际的观察报告,空中交通管制包括多个控制“套件”，这些控制相邻空域扇区的套件是自然地一个挨一个摆放的。在一个扇区中的飞机用一个条形纸表示，按照
16、能反映它们在扇区中的位置的顺序放进一个木头架子中。如果架子上没有足够的槽（例如，当空域非常繁忙的时候），管制员就将条形纸摆在木架前的桌面上。 在我们观察管制员的时候，我们注意到管制员经常性地扫描在相邻扇区中的纸架。我们与他们就这一点交谈并问及为什么要这样做。他们的回答是，当相邻的管制员有纸条摆在桌面上时，就意味着有很多飞机将要进入他们的扇区。于是他们就努力提高飞机在扇区中的速度来“清空”扇区，以便能让更多的飞机进来。,从观察中所学到的事情,管制员要能看到扇区内的所有飞机，因此，我们应该避免使用滚动显示，这种显示方式会使得飞机消失在显示屏的上面或下面。界面应该有某种方法来告知管制员有多少飞机在相
17、邻的扇区中，以便管制员来计划他们的工作负荷。,用户界面原型构造,原型构造的目的是让用户获得对界面的直接体验。如果没有这样直接的经验，我们是不可能评价一个界面的可用性的。原型构造过程分为以下两步：在过程的最早阶段，我们应该在纸面上规划出原型；然后我们要对设计进行提炼并逐步地开发复杂的自动化的原型，接着再开发。,纸面上的原型构造,运用界面草图来完成脚本。使用情节串联图板来显示一系列描述交互序列的草图。纸面上的原型构造是获得用户对某个设计方案的反应的一个有效方法。,原型构造技术,脚本驱动方法使用诸如Macromedia Director这样的工具创建一系列脚本和屏幕。 当用户与这些屏幕交互时，脚本得
18、到执行，下一个屏幕出现。可视化编程语言使用一种快速开发的语言（比如Visual Basic ）。对可视化开发系统的详细介绍见17章。基于因特网的原型构造使用web浏览器和相关的脚本。,用户界面评估,界面评估就是评定一个界面的可用性并检查它是否符合用户需求的过程。对大多数系统来说，用户界面设计的系统评估是非常昂贵的，并且是不实用的。理想情况下，对用户界面的评估应该有一个可用性详细说明书。然而，这样的可用性说明书是很少制作出来的。,可用性属性,简单的评估方法,可以获得用户反馈的问卷调查；观察在系统使用过程中用户的表现，并听取用户对如何使用系统完成某项任务的“思想交流”；典型系统使用的“快照”；在软
19、件中嵌入一段统计代码，以收集最常用的功能和最容易犯的错误的信息。,要点,用户界面设计原则对用户界面设计具有指导作用。与一个软件系统交互的方式包括直接操作、菜单系统、表格填写、命令语言和自然语言。当要表示变化趋势和近似值的时候，应该使用图形信息表示法。数字显示仅用于需要精确表示的时候。在用户界面中使用颜色时应该保守一点，并保持一致。,要点,用户界面设计过程包括用户分析、界面原型构造以及界面评估。用户分析的目的是要让设计者敏锐地观察用户实际的工作方式。用户界面原型开发应该是一个渐进的过程，早期的原型在纸面上完成，在得到初始的评估和反馈意见后，再基于此原型实现自动化的原型。用户界面评估的目的是获得UI设计如何得以改善的反馈意见，以及了解界面是否能满足可用性的需求。,
