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

archonwang

［ 作者：作者:Scott W．Ambler翻译:loose_went    转贴自：系统分析之窗    ］

对大多数人来说，用户界面就是软件本身。所以，掌握用户界面设计的技巧与技术是让软件走向市场的最直观因素。原文来源于http://WWW.ambysoft.com/userInterfaceDesign.Pdf。

对于应用软件来说，一个基本现实就是：用户界面是面向用户的。用户需要的是开发者开发的应用软件满足其需求，并且易于使用。太多的开发者自以为是艺术天才，他们不去尽力遵循用户界面设计标准，或花精力使得产品好用；相反，他们错误地认为编写更灵巧的代码或是使用一套确实有趣的颜色方案才是重要的事。Constantine(1995)指出，好的用户界面使得人们不用阅读用户手册或接受培训就能使用应用软件。
界面设计的重要性有这么几个原因：首先，用户界面越直观，就越易用，越易用就越便宜。因为界面越好，培训用户就越容易，降低丁培训成本；界面越出色，用户就越少求助，降低了客户支持成本。其次，界面越出色，用户就喜欢使用，增强了开发者工作的满意度。

一、用户界面设计的技巧与技术  
本节所包含的用户界面设计技巧将有助于提高面向对象界面的设计。
l、一致，一致，还是——致。你能做的最重要的事情就是保证用户界面运作的一致性。对于列表框来说，如果双击其中的项，使得某些事件发生，那么双击任何其它列表框中的项，都应该有同样的事件发生。所有窗口按钮的位置要一致，标签和讯息的措辞要一致，颜色方案要一致。用户界面的—致性使得在用户对于界面运作建立起精确的心理模型，从而降低培训和支持成本。
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、别在代码上下功夫。在建立原型过程的开始，随着对业务了解的深入，许多工作可以丢弃。因此，花大量精力写那些很可能不会保留的代码没有意义。
　

archonwang

三、界面流程图

●界面流程图显示了应用软件的用户界面部件、屏幕及报表之间的关系对用户来说，用户界面就是系统本身。虽然用户界面原型常常会使开发者陷于界面实际如何运作的泥潭之中，它只是描述用户界面的一种手段。用户界面原型导致开发者遗漏了应用程序界面对象(通常是屏幕)之间的高层关系和相互作用。界面流程图使开发者模拟了这些高层关系。
●界面流程图帮助开发者验证用户界面设计图3是一个定单系统的界面流程图。方框表示用户界面对象(屏幕、报表或表单)，箭头表示屏幕间可能的流程。如，通过主菜单屏幕，可以进到客户查询屏幕或定单登录屏幕。一旦进入定单登录屏幕，可以进到产品查询屏幕或客户定单登录屏幕。界面流程图可以很容易显示应用软件界面的高层概貌。
由于界面流程图提供了系统界面的高层视图，开发者可很快理解系统预期的运作流程。它提供了验证应用软件的用户界面整体流程的视角。如，某个屏幕流程是否有意义?为何不能从客户编辑屏幕进入客户定单目录屏幕?哪个目录包含了一客户所作的所有定购?此外，为何不能从产品的角度获得同样的目录?有些情况下，人们对查明哪些定单包含某件产品感兴趣，尤其是期货产品或已不可得的产品。界面流程图也可用于确定用户界面的一致性，以图3为例，选择打印命令，生成客户摘要报表和打印定单，从图上看来，至少对于打印来说，用户界面是一致的。


四，普始善终
每个开发人员一一特别是系统分析员、 原型开发人员及构建用户界面的程序员，都应对人因工程学(Human Factors En—gineering—--HFE)及所基于开发平台行业标准的用户界面准则有墓本的了解。如，任何基于Win32平台的开发人员，都应当拥有和阅读微软用户界面指南(Microson 1995)。决不可忘记，用户界面对用户来说就是软件，而不是数据库，不是网络，也不是开发人员写的那些很酷的Java代码。基于以上见解，可以说，不懂用户界面设计，就没资格开发软件!
所以，开发人员要做的是：首先，阅读本文只是一个好的开端，还需要进一步接受教育。可以从用户界面设计的概论课程开始，此课程涵盖了人因工程学、符号、心理模型、屏幕设计基础、报表设计基础。如果要开发面向对象的用户界面(Object-Oriented User Interfaces)建议阅读本文作者所著的Building Object Applications That Work(Ambler，1998a)一书的第九章。其次，花两天时间学习所基于开发平台的用户界面标准。现有的用户界面标准囊括了许多常见操作系统，包括互联网开发的通用用户界面标准。再次说明，如果没有此类课程，你也得作相关的学习。
总之，每个开发人员都应了解用户界面设计的基本原则。
　
五、小结  

下面我们将设计高效的用户界面的主要技巧小结如下：
1、一般指南
●用户界面的一致很关键，
●设立界面标准并遵循之，
●采用行业标准，也使你的应用软件看起来或视感上与其它机构开发的软件更趋一致，
●向用户阐明软件运行规则。有了一致性，规则只会简练，
●支持生手也支持熟手；
●文字措辞一致、正面，要用全称，
●对其它软件不盲从’，要知道不是每个人都懂得如何设计好的用户界面；
●在桌面上显示快捷方式；
●根据业务对象及其相应的界面对象去思考，而不是从应用软件本身去思考；
●界面对象在视觉上、感觉上和行为上应与其在现实世界的表现一致。

2、屏幕设计
●界面间切换、界面布局都很重要；
●理解小部件，才能正确地加以应用；
●使用颜色要谨慎，以指示符补充；
●遵循对比原则一一在浅色背景上使用深色文字，在深色背景上使用浅色文宇；
●字体使用要适当和一致；
●项目不可用时，灰掉而不是移走，用户才有形成精确的心理模型：
●使用无害的缺省按钮；
●编辑区域左对齐，相应的标签则应右对齐，
●整数、浮点数右对齐， 字符串左对齐；
●避免屏幕拥挤；
●用方框和间隔对屏幕上有逻辑关联的项目加以组合；
●在操作焦点处打开窗口；
●弹出菜单不应是唯一的功能来源。

3、建立原型
●用户需求决定了原型的开发；
●原型评估的任务：发现原型的成功之处，失败之处及遗漏之处；
●在评估过程中只发现少量需求或不再有新的需求时，即可结束原型建立过程；
●寻找现实对象，确定用户在现实世界中的使用方式；
●与软件开发完成之后的实际用户共同工作，
●设定原型开发时间表并执行；
●使用原型开发工具：
●用户参与开发，对原型进行测试：
●了解根本业务；
●别在很可能丢弃的事情上花大时间，
●一旦界面对象稳定，就应文档化，
●为原型开发界面流程图：
●对组成原型的每个界面对象建立文档。内容包括：界面对象的用途、用法；指出与之相关的其它界面
对象，每一部件的用徐、用法。
　
作者介绍:
Scott W． Ambler：加拿大人，面向对象开发高级顾问。自1990年开始从事面对象技术工作，担任过多种角色：商业设计、系统分析、系统设计、项目管理、Smalltalk程序员、Java程序员及C++程序员。

archonwang

User Interface Design Tips and Techniques
AmbySoft Inc. White Paper

Scott W. Ambler

Senior Object-Oriented Consultant

AmbySoft Inc.

In this section we will cover a series of user interface design tips that will help you to improve the object-oriented interfaces that you create.

1. Consistency, consistency, consistency. The most important thing that you can possibly do is make sure that your user interface works consistently. If you can double-click on items in one list and have something happen then you should be able to double-click on items in any other list and have the same sort of thing happen. Put your buttons in consistent places on all of your windows, use the same wording in labels and messages, and use a consistent color scheme throughout. Consistency in your user interface allows your users to build an accurate mental model of the way that it works, and accurate mental models lead to lower training and support costs.

2. Set standards and stick to them. The only way that you’ll be able to ensure consistency within your application is to set design standards and then stick to them. The best approach is to adopt an industry standard and then fill any missing guidelines that are specific to your needs. Industry standards, such as the ones set by IBM (1993) and Microsoft (1995), will often define 95%-99% of what you need. By adopting industry standards you not only take advantage of the work of others you also increase the chance that your application will look and feel like other applications that your users purchase or have built.

3. Explain the rules. Your users need to know how to work with the application that you built for them. When an application works consistently it means you only have to explain the rules once. This is a lot easier than explaining in detail exactly how to use each and every feature in an application step by step.

4. Support both novices and experts. Although a library-catalog meta phor might be appropriate for casual users of a library system, library patrons, it probably is not all that effective for expert users, librarians. Librarians are highly trained people who are able to use complex search systems to find information in a library, therefore you should consider building a set of search screens to support their unique needs.

5. Navigation between screens is important. If it is difficult to get from one screen to another then your users will quickly become frustrated and give up. When the flow between screens matches the flow of the work that the user is trying to accomplish, then your application will make sense to your users. Because different users work in different ways, your system will need to be flexible enough to support their var ious approaches. Interface-flow diagrams can be used during the Model Stage (Ambler, 1998b) to model the flow between screens.

6. Navigation within a screen is important. In Western societies people read left to right and top to bottom. Because people are used to this should you design screens that are also organized left to right and top to bottom. You want to organize navigation between widgets on your screen in a manner that users will find familiar to them.

7. Word your messages and labels appropriately. The text that you display on your screens is a primary source of information for your users. If your text is worded poorly then your interface will be perceived poorly by your users. Using full words and sentences, as opposed to abbreviations and codes makes your text easier to understand. Your messages should be worded positively, imply that the user is in control, and provide insight into how to use the application properly. For example, which message do you find more appealing “You have input the wrong information” or “An account number should be 8 digits in length.”? Furthermore, your messages should be worded consistently and displayed in a consistent place on the screen. Although the messages “The person’s first name must be input.” and “An account number should be input.” are separately worded well, together they are inconsistent. In light of the first message, a better wording of the second message would be “The account number must be input” to make the two messages consistent.

8. Understand your widgets. You should use the right widget for the right task, helping to increase the consistency in your application and probably making it easier to build the application in the first place. The only way that you can learn how to use widgets properly is to read and understand the user-interface standards and guidelines that your organization has adopted.

9. Look at other applications with a grain of salt. Unless you know that another application follows the user-interface standards and guidelines of your organization, you must not assume that the application is doing things right. Although it is always a good idea to look at the work of others to get ideas, until you know how to distinguish between good user-interface design and bad user-interface design you have to be careful. Too many developers make the mistake of imitating the user interface of another application that was poorly designed.

10. Use color appropriately. Color should be used sparingly in your applications, and if you do use it you must also use a secondary indicator. The problem is that some of your users may be color blind – if you are using color to highlight something on a screen then you need to do something else to make it stand out if you want these people to notice it, such as display a symbol beside it. You also want to use colors in your application consistently so that you have a common look and feel throughout your application. Also, color generally does not port well between platform – what looks good on one system often looks poor on another system. We have all been to presentations where the presenter said “it looks good on my machine at home.”

archonwang

11. Follow the contrast rule. If you are going to use color in your application you need to ensure that your screens are still readable. The best way to do this is to follow the contrast rule: Use dark text on light backgrounds and light text on dark backgrounds. It is very easy to read blue text on a white background but very difficult to read blue text on a red background. The problem is that there is not enough contrast between blue and red to make it easy to read, whereas there is a lot of contrast between blue and white.

12. Use fonts appropriately – Old English fonts might look good on the covers of William Shakespeare’s plays, but they are really hard to read on a screen. Use fonts that are easy to read, such as serif fonts like Times Roman. Furthermore, use your fonts consistently and sparingly. A screen using two or three fonts effectively looks a lot better than a screen that uses five or six. Never forget that you are using a different font every time you change the size, style (bold, italics, underlining, ...), typeface, or color.

13. Gray things out, do not remove them. You often find that at certain times it is not applicable to give your users access to all the function ality of an application. You need to select an object before you can delete it, so to reinforce your mental model the application should do something with the Delete button and/or menu item. Should the button be removed or grayed out? Gray it out, never remove it. By graying things out when they shouldn’t be used people can start building an accurate mental model as to how your application works. If you simply remove a widget or menu item instead of graying it out then it is much more difficult for your users to build an accurate mental model because they only know what is currently available to them, and not what is not available. The old adage that out of sight is out of mind is directly applicable here.

14. Use non destructive default buttons. It is quite common to define a default button on every screen, the button that gets invoked if the user presses the Return/Enter key. The problem is that sometimes people will accidentally hit the Enter/Return key when they do not mean to, consequently invoking the default button. Your default button shouldn’t be something that is potentially destructive, such as delete or save (perhaps your user really did not want to save the object at that moment).

15. Alignment of fields. When a screen has more than one editing field you want to organize the fields in a way that is both visually appealing and efficient. As shown in Figure 1 I have always found that the best way to do so is to left-justify edit fields, or in other words make the left-hand side of each edit field line up in a straight line, one over the other. The corresponding labels should be right justified and placed immediately beside the field. This is a clean and efficient way to organize the fields on a screen.

16. Justify data appropriately. For columns of data it is common practice to right justify integers, decimal align floating point numbers, and left justify strings.

17. Do not create busy screens. Crowded screens are difficult to understand and hence are difficult to use. Experimental results (Mayhew, 1992) show that the overall density of the screen should not exceed 40%, whereas local density within groupings shouldn’t exceed 62%.

18. Group things on the screen effectively. Items that are logically connected should be grouped together on the screen to communicate that they are connected, whereas items that have nothing to do with each other should be separated. You can use whitespace between collections of items to group them and/or you can put boxes around them to accomplish the same thing.

19. Open windows in the center of the action. When your user double-clicks on an object to display its edit/detail screen then his or her attention is on that spot. Therefore it makes sense to open the window in that spot, not somewhere else.

20. Pop-up menus should not be the only source of  function ality. Your users cannot learn how to use your application if you hide major function ality from them. One of the most frustrating practices of developers is to misuse pop-up, also called context-sensitive, menus. Typically there is a way to use the mouse on your computer to display a hidden pop-up menu that provides access to function ality that is specific to the area of the screen that you are currently working in.

celine

等到都看完了才发现小结写的不错，精炼，提议把小结单拿出来放到一个帖子上。

现在有点思路了，谢谢

xiaof4

好文章！！

alfra

不错啊，受益匪浅

JerryCoo18

下了，好呀

willcheung

太棒了！受益匪浅！

carry

谢谢楼主！

mao28

谢谢了，辛苦了