《用户界面设计的技巧与技术》

用户界面设计的技巧与技术作者 Scott WAmbler翻译 loose_went作者介绍:Scott W. Ambler：加拿大人，面向对象开发高级顾问。自1990年开始从事面对象技 术工作，担任过多种角色：商业设计、系统分析、系统设计、项目管理、Smalltalk程序员、 Java程序员及C+程序员。对大多数人来说，用户界面就是软件本身。所以，掌握用户界面设计的技巧与技术是让 软件走向市场的最直观因素。对于应用软件来说，一个基本现实就是：用户界面是面向用户的。用户需要的是开发者 开发的应用软件满足其需求，并且易于使用。太多的开发者自以为是艺术天才，他们不去尽 力遵循用户界面设计标准，或花精力使得产品好用；相反，他们错误地认为编写更灵巧的代 码或是使用一套确实有趣的颜色方案才是重要的事。Constantine(1995)指出，好的用户界面 使得人们不用阅读用户手册或接受培训就能使用应用软件。界面设计的重要性有这么几个原因：首先，用户界面越直观，就越易用，越易用就越便 宜。因为界面越好，培训用户就越容易，降低丁培训成本；界面越出色，用户就越少求助， 降低了客户支持成本。其次，界面越出色，用户就喜欢使用，增强了开发者工作的满意度。一、用户界面设计的技巧与技术本节所包含的用户界面设计技巧将有助于提高面向对象界面的设计。1、一致，一致，还是一一致。你能做的最重要的事情就是保证用户界面运作的一致性。 对于列表框来说，如果双击其中的项，使得某些事件发生，那么双击任何其它列表框中的项， 都应该有同样的事件发生。所有窗口按钮的位置要一致，标签和讯息的措辞要一致，颜色方 案要一致。用户界面的一致性使得在用户对于界面运作建立起精确的心理模型，从而降低培 训和支持成本。2、建立标准并遵循之。在应用软件中保持一致的唯一途径就是建立设计标准并加以遵 循。最好的办法是采取一套行业标准，对自身特殊的需要加以补充。已有的行业标准，如 IBM标准(1993)与Microsoft标准(1995)，通常可满足95%到99%的需要。采用行业标准， 只需利用已有的成果，也使你的应用软件看起来或感觉上更象用户已购买或建立的其它应用 软件。应当在定义基础构造阶段就建立用户界面设计标准(Atablet, 1998)。3、阐明规则。用户要知道怎么使用你为他们开发的软件。软件运作的一致性表明，规 则你只需解释一遍。这比一步步详细讲解如何使用应用软件每个特性要容易得多。4、同时支持生手和熟手。图书馆目录符号对图书馆系统的一般用户来说，也许就够用 了，但对熟手用户，如图书管理员，很可能就没有那么有效了。图书管理员是受过专门训练， 能够使用复杂的查询系统找到信息，因此，应当考虑建立一套查询界面以满足他们的独特需 要。5、界面间切换很重要。如果从一个屏幕转换到另一屏幕很困难，用户会很快灰心并放 弃。当屏幕流程与用户想完成的工作流程相符，此软件对用户才有意义。由于不同用户工作 方式不同，应用软件需要有足够的灵活以支持他们不同的方式。在建模阶段，界面流程图可 用来模拟屏幕之间的流程。6、界面上的布局很重要。在西方，人们是自左而右，从上而下阅读，基于人们的习惯， 屏幕的组织也应当是自左而右，从上而下。屏幕小部件的布局也应以用户熟悉的方式进行。7、讯息和标签措辞要适当。屏幕上显示的文本是用户主要的信息源。如果文本措辞很 糟，用户的理解就会很糟。要使用完整的措辞和句子，而不要用缩写和代码，使文本易于理 解。讯息措辞要积极，显示用户处于控制之中，并提示如何正确使用软件。如，下面哪一条 讯息更吸引人：“你输入了错误信息”还是“帐号应为8 位数”?此外，讯息措辞要一致，在 屏幕上显示的位置要一致。尽管这样的讯息“须输入名字”和 “应输入帐号”分别来说措 辞上没问题，放在一起就不一致了。根据第一条讯息的措辞，第二条讯息更好的措辞应当是 “须输入帐号”，这就使得两条讯息措辞一致了。8、了解小部件。为恰当的任务使用恰当的小部件，首先可以帮助增强应用软件的一致 性，可能使得应用软件很容易构造。学会如何正确使用小部件的唯一途径是阅读和理解你们 所采用的用户界面标准及准则。9、对其它软件不盲从。除非你知道一个应用软件是遵循了你们的用户界面标准和和准 则，否则你绝不能认定它做的都是对的。尽管看看人家怎么做，从中获得些主意是不错的想 法，但在懂得怎样区分用户界面设计的好坏之前，你得留神。太多的开发者错误地模仿其它 应用软件的用户界面，而那些界面却设计得很糟。10、颜色使用要适当。使用颜色要谨慎。如果使用了，也要使用指示符。问题就在于有 些用户可能是色盲一一如果在屏幕上使用了颜色来突出显示某些东西，假若想让色盲的用户 注意到，那么需要做些另外的工作来突出它，如在其旁边显示一个符号。颜色的使用也得一 致，以使整个应用软件有同样的观感。此外，在不同平台上，色彩的表现不尽人意一一在一 个系统上看上去很好，在另一个系统上常常看上去很糟。展示会上我们经常听到展示者这样 说： “在我家中的机器上看上去可是很好的呀。”11、遵循对比原则。打算在应用软件中使用颜色，要确保屏幕的可读性。最好的方法是 遵循对比原则：在浅色背景上使用深色文字，在深色背景上使用浅色文字。蓝色文字以白色 为背景很容易读，但以红色为背景很难辨认。问题出在蓝色与红色之间没有足够反差，而蓝 色与白色之间则反差很大。12、字体使用要适当。老式英语字体可能在莎士比亚的剧本封面看上去很合适，但在屏 幕上却很难认。要用那些可读性好的字体，如serif或Times Roman。此外，字体的使用要 一致。节俭、有效地使用两、三种字体的屏幕看上去远胜于使用五、六种字体的屏幕。要记 住每次改变了字体的大小、风格（粗体、斜体、下划线，）、样式或颜色，都是在使用不 同的字体。13、灰掉而不是移走。在某些时刻，用户经常只能访问应用软件的某些功能。在删除一 个对 象之前，要先选中它，由此加深用户的心理模型，软件应当用删除按钮及（或）菜单项 去做一些事。按钮应当移去还是灰掉?灰掉它，决不能移走!当用户不该使用时就灰掉它，可 使用户对如何使用应用软件建立精确的心理模型。如果仅仅移走一个小部件或菜单项，而不 是灰掉它，用户很难建立精确的心理模型，因为用户只知道当前可用的，而不知道什么是不 可用的。14、使用非破坏性的缺省按钮。通常每个屏幕定义一个缺省按钮，如果用户按了回车键 调用此按钮。问题是有时用户会意外敲击回车键，结果激活了缺省按钮。缺省按钮决不能有 潜在的破坏性，如删除或保存（也许用户根本不想保存）。15、区域排列。当屏幕有多个编辑区域，要以视觉效果和效率来组织这些区域。如图1 所示，编辑区域左对齐是最好的方法。换句话说，要使编辑区域左边界在一条直线上且上下 排列。与之相应的标签则应右对齐，置于编辑区域旁。这是屏幕上组织区域的一个整洁有效 的方式。16、数据对齐要适当。对一列列的数据，通常的作法是整浮点数右对齐，字符串左对齐。17、屏幕不能拥挤。拥挤的屏幕让人难以理解，因而难以使用。实验结果（Mayhew, 1992 年）显示屏幕总体盖度不应超过 40，而分组中屏幕盖度不应超过62。18、有效组合。逻辑上关联的项目在屏幕上应当加以组合，以显示其关联性。反之，任 何相互之间毫不相关的项目应当分隔开。在项目集合间用间隔对其进行分组或用方框也同 样可做到这一点。19、在操作焦点处打开窗口。当用户双击一个对象显示其编辑详情屏幕，用户的注意 力亦集中于此。因而在此处而不是其它地方打开窗口才有意义。20、弹出菜单不应是唯一的功能来源。如果主要功能被隐藏起来，用户就不能学会怎 样使用软件。开发人员最让人灰心的作法是滥用弹出菜单，也称作上下文相关菜单。一种使 用鼠标的典型方法，是用来显示一个隐藏的弹出菜单，提供针对当前工作的屏幕区域特定功 能的访问。二、原型建立及技巧（一）建立原型建立原型是一种迭代分析技术，在此过程中用户参与建立屏幕及报表的实体模型。原型 的目的是展示应用软件用户界面的可能设计。图2所示为原型建立的步骤。确定用户需求。原型的开发取决于用户需求，需求决定了系统必须支持的业务对象。 可以通过面谈及在建模阶段（如 CRC 类职责协作图）、用例和类图建模阶段收集需求。建立原型。用原型工具或高级语言开发用户所需的屏幕及报表。此阶段最有益的忠告 是不要花大量时间去写“好”代码，因为在对原型作了评估之后，你很可能丢弃这些代码。评估原型。一个版本的原型建立后需要进行评估。主要目的是核实原型是否满足用户 需求。评估时要确定三个基本结果：原型成功之处、失败之处及遗漏之处。对原型作了评估 后会发现，有的部分要丢弃，有的部分要修改，甚至要添加全新的部分。确定是否完成。当评估过程中不再有新的需求，或只有少量无关紧要的需求时，原型 建立过程就可结束。（二）原型建立的技巧与技术1、寻找现实对象。好的用户界面令用户使用时如同身临其境。因此，应当以此为出发 点，确定用户在现实世界中的使用方式。2、实际用户共同工作。参与建立原型的最佳人选，是那些在应用软件开发完成之后的 实际使用者。这些人是系统成功实现的最大获益者，也正是他们，最清楚自己的需求。3、设定时间表并执行。设定时间表，确定何时与用户一起对原型进行评估。这样做， 既给用户设定了期望，也迫使自己做好这项工作，是一个双赢局面。4、使用原型工具。花钱买那种可以让你快速整合屏幕的原型工具。因为很快写出的代 码鲜有值得保留的，即便原型工具生成的代码，与你打算进一步开发的代码类型不同，也不 必太在意。5、用户参与。就如同买车之前要试车，用户在应用软件开发之前也应一试。此外，通 过亲自试用原型，用户可以很快确定系统是否满足要求。一个好方法是让用户将原型当作实 际系统，通过一些用例来使用。6、了解根本业务。开发支持业务的原型前，需要了解根本业务。要与主要用户面谈， 阅读业务流程的内部文档，阅读一些竞争对手如何实现的文档。对业务越了解，就越有可能 建立支持其业务的原型。7、原型的不同层次。可以依次开发系统的三种不同类型的原型。手绘原型，用来显示 基本大概功能；电脑原型，用来显示屏幕，但不包含要显示的数据：最终是包含显示的数 据屏幕。由简单开始，避免在那些很可能被丢弃的东西上花大量时间。随着原型逐步接近最 终方案，依次增加其复杂性，倘若对原型不断加以改进，用户对应用软件实际中将如何运作 就会有越来越清晰的认识。8、别在代码上下功夫。在建立原型过程的开始，随着对业务了解的深入，许多工作可 以丢弃。因此，花大量精力写那些很可能不会保留的代码没有意义。三、界面流程图界面流程图显示了应用软件的用户界面部件、屏幕及报表之间的关系对用户来说，用 户界面就是系统本身。虽然用户界面原型常常会使开发者陷于界面实际如何运作的泥潭之 中，它只是描述用户界面的一种手段。用户界面原型导致开发者遗漏了应用程序界面对象(通 常是屏幕)之间的高层关系和相互作用。界面流程图使开发者模拟了这些高层关系。界面流程图帮助开发者验证用户界面设计图 3 是一个定单系统的界面流程图。方框 表示用户界面对象(屏幕、报表或表单)，箭头表示屏幕间可能的流程。如，通过主菜单屏幕， 可以进到客户查询屏幕或定单登录屏幕。一旦进入定单登录屏幕，可以进到产品查询屏幕或 客户定单登录屏幕。界面流程图可以很容易显示应用软件界面的高层概貌。由于界面流程图提供了系统界面的高层视图，开发者可很快理解系统预期的运作流程。 它提供了验证应用软件的用户界面整体流程的视角。如，某个屏幕流程是否有意义?为何不 能从客户编辑屏幕进入客户定单目录屏幕?哪个目录包含了一客户所作的所有定购?此外，为 何不能从产品的角度获得同样的目录?有些情况下，人们对查明哪些定单包含某件产品感兴 趣，尤其是期货产品或已不可得的产品。界面流程图也可用于确定用户界面的一致性，以图 3 为例，选择打印命令，生成客户摘要报表和打印定单，从图上看来，至少对于打印来说， 用户界面是一致的。四、普始善终每个开发人员一一特别是系统分析员、 原型开发人员及构建用户界面的程序员，都应 对人因工程学(Human Factors EngineeringHFE)及所基于开发平台行业标准的用户界面准则有墓本的了解。如，任何基于 Win32 平台的开发人员，都应当拥有和阅读微软用户 界面指南(Microson 1995)。决不可忘记，用户界面对用户来说就是软件，而不是数据库，不 是网络，也不是开发人员写的那些很酷的 Java 代码。基于以上见解，可以说，不懂用户界 面设计，就没资格开发软件!所以，开发人员要做的是：首先，阅读本文只是一个好的开端，还需要进一步接受教育。 可以从用户界面设计的概论课程开始，此课程涵盖了人因工程学、符号、心理模型、屏幕设 计基础、报表设计基础。如果要开发面向对象的用户界面(Object-Oriented User Interfaces)建 议阅读本文作者所著的 Building Object Applications That Work(Ambler 1998a) 一书的第九章。 其次，花两天时间学习所基于开发平台的用户界面标准。现有的用户界面标准囊括了许多常 见操作系统，包括互联网开发的通用用户界面标准。再次说明，如果没有此类课程，你也得 作相关的学习。总之，每个开发人员都应了解用户界面设计的基本原则。五、小结下面我们将设计高效的用户界面的主要技巧小结如下：1、一般指南用户界面的一致很关键； 设立界面标准并遵循之；采用行业标准，也使你的应用软件看起来或视感上与其它机构开发的软件更趋 一致；向用户阐明软件运行规则。有了一致性，规则只会简练；支持生手也支持熟手；文字措辞一致、正面，要用全称；对其它软件不盲从，要知道不是每个人都懂得如何设计好的用户界面；在桌面上显示快捷方式；根据业务对象及其相应的界面对象去思考，而不是从应用软件本身去思考；界面对象在视觉上、感觉上和行为上应与其在现实世界的表现一致。2、屏幕设计界面间切换、界面布局都很重要；理解小部件，才能正确地加以应用；使用颜色要谨慎，以指示符补充；遵循对比原则一一在浅色背景上使用深色文字，在深色背景上使用浅色文字；字体使用要适当和一致；项目不可用时，灰掉而不是移走，用户才有形成精确的心理模型；使用无害的缺省按钮；编辑区域左对齐，相应的标签则应右对齐；整数、浮点数右对齐， 字符串左对齐；避免屏幕拥挤；用方框和间隔对屏幕上有逻辑关联的项目加以组合； 在操作焦点处打开窗口；弹出菜单不应是唯一的功能来源。3、建立原型用户需求决定了原型的开发；原型评估的任务：发现原型的成功之处，失败之处及遗漏之处；在评估过程中只发现少量需求或不再有新的需求时，即可结束原型建立过程；-寻找现实对象，确定用户在现实世界中的使用方式；与软件开发完成之后的实际用户共同工作；设定原型开发时间表并执行；使用原型开发工具；用户参与开发，对原型进行测试；了解根本业务；别在很可能丢弃的事情上花大时间；一旦界面对象稳定，就应文档化；为原型开发界面流程图；对组成原型的每个界面对象建立文档。内容包括：界面对象的用途、用法；指 出与之相关的其它界面对象，每一部件的用徐、用法。