昨天发了一个下午和晚上一些时间,翻译了Scott W. Ambler的《User Interface Design:Tips and Techniques》一文,作为进入UI领域的开始吧。
用户界面设计:提示与技巧 by Scott W. AmblerTranslated by 今宵月明(Robert)
目录
1、用户界面设计的技巧与技术2、模型 2.1 模型的技巧与技术3、界面设计流程与图表4、从这里到哪里?5、概要 5.1 普遍方针 5.2 屏幕设计 5.3 模型6、引用及必读参考7、关于作者
A fundamental reality of application development is that the user interface is the system to the users. What users want is for developers to build applications that meet their needs and that are easy to use. Too many developers think that they are artistic geniuses – they do not bother to follow user interface design standards or invest the effort to make their applications usable, instead they mistakenly believe that the important thing is to make the code clever or to use a really interesting color scheme. Constantine (1995) points out that the reality is that a good user interface allows people who understand the problem domain to work with the application without having to read the manuals or receive training.
我们逐渐意识到应用程序开发就是为用户创建的用户界面系统。用户需要开发人员创建满足他们需要并且易于使用的程序。太多的开发人员认为自己是天上的艺术家——他们不愿意去遵循让人烦恼的界面设计标准或者投入精力提高他们的程序可用性,相反的,他们错误地认为重要的是使得代码看上去更漂亮或者使用更吸引人的色彩外观。Constantine (1995)指出事实商,一个优秀的界面设计会使用户操作软件时明白问题所在,而无需查阅手册或者接受培训。
Interface design is important for several reasons. First of all the more intuitive the user interface the easier itis to use, and the easier it is to use the cheaper it is. The better the user interface the easier it is to trainpeople to use it, reducing your training costs. The better your user interface the less help people will needto use it, reducing your support cots. The better your user interface the more your users will like to use it,increasing their satisfaction with the work that you have done.
界面设计之所以重要有如下几个原因。首先,用户界面直观,(程序)就容易使用,就可以降低操作成本。优秀的用户界面会使得培训人员更容易,降低了培训费用。优秀的用户界面会使操作人员较少地需要技术支持,降低技术支持的成本。当然用户界面越好,你的用户就越喜欢使用,这样就使得用户对你的工作的满意度提高。
The point to be made is that the user interface of an application will often make or break it. Although the functionality that an application provides to users is important, the way in which it provides that functionality is just as important. An application that is difficult to use won’t be used. Period. It won’t matter how technically superior your software is or what functionality it provides, if your users don’t like it they simply won’t use it. Don’t underestimate the value of user interface design.
需要说明的是,程序的用户界面需要经常的制作和打破。尽管程序提供给用户的功能十分重要,但是如何把功能提供给用户同样重要。我们不会使用一个很难操作的软件。不管你的软件技术如何先进,功能如何完备,如果用户不喜欢它,他们通常都不会使用。别低估用户界面设计的用处。
1. User Interface Design Tips and TechniquesIn 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. 用户界面设计技巧与技术在这个章节,我们会概览一系列的用户界面技巧,这些技巧会提高你创建的界面的适应性。
1. Consistency, consistency, consistency. The most important thing that you can possibly do is makesure that your user interface works consistently. If you can double-click on items in one list and havesomething happen then you should be able to double-click on items in any other list and have the samesort of thing happen. Put your buttons in consistent places on all of your windows, use the samewording in labels and messages, and use a consistent color scheme throughout. Consistency in youruser 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.
1.一致,一致,一致。你能做的最重要的事就是确定你的用户界面工作具有一致性。如果你在某个列表中的项目双击然后产生效果,那么你应该使得在其他的列表项目双击产生同样类型的效果。把你的按钮放在窗口的相同位置,在标签上使用相同的措词和信息,并且由始至终使用一致的配色方案。用户界面的一致性原则使得你的用户建立一种正确的思维模式来操作,而正确的思维模式会降低培训和技术支持成本。
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 anindustry standard and then fill any missing guidelines that are specific to your needs. Industrystandards, 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 userspurchase or have built. User interface design standards should be set during the Define InfrastructureStage (Ambler, 1998b).
2.设置标准并且坚持。能确定程序中的一致性的唯一方法是设置设计标准并且坚持该标准。最好的方法是采用工业标准,然后填写针对你需要的指导方针。像IBM(1993)和微软(1995)制定的工业标准,基本上涵盖了你所需要的95-99%。采用标准不仅使你的工作更有优势,也使得你的软件与客户正在使用的或者创建的程序看起来和使用起来更相似。用户界面设计标准应该在底层结构定义期间制定。
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.
3.解释规则。你的用户需要知道如何操作你为他们编写的软件。一个软件运行具有一致性就意味着你只需要解释规则一次。这和一步步地解释如何使用每一个功能的细节相比要简单多了。
4. Support both novices and experts. Although a library-catalog metaphor 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.
4.同时支持新用户和高级用户。尽管一个图书目录指南对于图书系统的偶然的用户如赞助人而言使合适的,但对于高级用户如图书馆工作人员却未必有效。图书馆工作人员都经过高等培训以使用复杂的搜索来找到所需的信息,所以你应该考虑建立一个搜索的屏幕以满足他们不同的需要。
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 various approaches. Interface-flow diagrams can be used during the Model Stage (Ambler, 1998b) to model the flow between screens.
5. 不同版面之间的导航十分重要。如果从一个版面切换到另一个版面十分困难,那么你的用户很快就变得灰心然后放弃。如果页面之间的流程与用户想要完成的工作流程一致,你的软件对于用户才有意义。因为不同的用户工作的方式也不同,所以你的系统应该尽可能的灵活以支持不同的工作方式。界面流程图可以应用在从创建模型到页面的跳转流程模型阶段。
6. Navigation within a screen is important. In Western societies people read left to right and top tobottom. Because people are used to this should you design screens that are also organized left to rightand top to bottom. You want to organize navigation between widgets on your screen in a manner thatusers will find familiar to them.
6. 版面内部导航十分重要。在西方社会,人们习惯从左到右从上到下的阅读模式。因为人们习惯了如此,所以你的版面设计也应该从左到右从上到下的组织。你需要在屏幕上不同的窗口间组织一个人们容易习惯觉得熟悉的导航系统。
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 aconsistent 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. Inlight of the first message, a better wording of the second message would be “The account number mustbe input” to make the two messages consistent.
7. 信息和标签上的文字应该合理。在版面上显示的文字是提供给用户的基本信息。如果书写在你的界面上的文字很贫乏,用户对你的软件的感觉也会一样贫乏。使用完整的单词和句子,避免使用所写和代码,使用户更容易理解。你的信息内容应该书写正确,注意你的用户在控制之下,所以应该为用户如何使用软件提供正确的理解。例如,你觉得从哪一个信息你能发现更多的讯息?——“你输入了错误的信息”或“帐号应该8位阿拉伯数字”。更进一步讲,你的信息窗口应该书写具有一致性,并且显示在版面的固定位置。尽管“该人的姓必须填写”和“帐号必须填写”单独看起来都很合适,但显示在一起就不一致了。对照第一个信息,第二个信息较好的表达方式应该是“该帐号必须填写”,这样使得两条信息具有一致性。
8. Understand your widgets. You should use the right widget for the right task, helping to increase theconsistency 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.
8. 理解你的窗口。首先应该为正确的任务使用正确的窗体,以增强软件的一致性,并且使得编写软件更容易。学习如何正确使用窗体的唯一方法是阅读理解用户界面标准以及你公司采用的帮助手册。
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.
9. 鸡蛋里挑骨头的眼光看待其他软件。除非你知道你公司的某个软件采用了用户界面标准和方针,否则你不能相信该软件的(界面设计)是正确的。尽管从别人的作品中获得灵感是一个好办法,但除非你知道如何去区分好的界面设计和坏的界面设计,否则你需要非常小心。太多的开发者犯这样的错误——他们仿照其他设计的很糟糕的软件的用户界面。
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 – ifyou are using color to highlight something on a screen then you need to do something else to make itstand out if you want these people to notice it, such as display a symbol beside it. You also want touse colors in your application consistently so that you have a common look and feel throughout yourapplication. Also, color generally does not port well between platform – what looks good on onesystem often looks poor on another system. We have all been to presentations where the presentersaid “it looks good on my machine at home.”
10. 使用适当的颜色。软件中用色应该节制,如果你确实需要使用,你必须使用一个次要的指示。问题在于某些你的用户可能是色盲——如果你要在版面上用色彩突出显示某些内容,你需要做一些其他的工作来使得这些内容突出显示,以便这些人能注意到,比如在旁边做一个记号。你也要在软件中用色一致,使得你的软件具有统一的色觉和感觉。同样地,色彩在不同的平台上转换也不是很好——在某个系统上看起来很好的色彩,在其他的系统上经常很糟糕。我们听到过太多次“它在我的机器上看起来很好”了。
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 whitebackground but very difficult to read blue text on a red background. The problem is that there is notenough contrast between blue and red to make it easy to read, whereas there is a lot of contrastbetween blue and white.
11. 采用色彩的对比度规则。如果你要在你的软件中使用颜色,你要确定你的版面仍然具有可读性。这样做的最好办法是采用对比度规则:在浅色的背景上用深色的文字,以及在深色的背景上用浅色的文字。在白色背景上看蓝色文字很轻松,但在红色背景上看蓝色文字却很费神。问题在于蓝色和红色之间的对比度不够以便于阅读,相反地,蓝色和白色之间对比却很鲜明。
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.
12. 合理使用字体。古英文字体在莎士比亚的剧本封面上看起来很不错,但在屏幕上却很难阅读。应该使用一些容易阅读的字体,比如serif字体,像Times Roman之类。进一步而论,使用字体应该一致和有节制。使用2-3种字体的版面看起来要比使用5-6种字体的版面好的多。别忘了你每次改变字号、字型(粗体、斜体、下划线)、字样,或者颜色,都是在使用一种新的字体。
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 functionality 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. Bygraying things out when they shouldn’t be used people can start building an accurate mental model asto how your application works. If you simply remove a widget or menu item instead of graying it outthen it is much more difficult for your users to build an accurate mental model because they only knowwhat is currently available to them, and not what is not available. The old adage that out of sight is outof mind is directly applicable here.
13. 使控件变灰,不要移除他们。你经常会发现在某些时候,你不能允许用户使用所有功能。你要在删除之前必须选定它们,以此来增强你的思维模式——软件在使用删除按钮和(或)菜单项目的时候应该做什么。按钮要被移除还是变灰呢?使它变灰,不要移除!使控件变灰,用户无法使用,那么用户就会开始建立软件如何工作的正确的思维模式。如果你简单地移除一个窗体或菜单项目,而不是使它变灰,那么用户很难建立起正确的工作模式,他们只知道某些东西当前可用,某些东西不可用。古语有云看不到,想不到,用在这里十分恰当。
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 sometimespeople will accidentally hit the Enter/Return key when they do not mean to, consequently invoking thedefault button. Your default button shouldn’t be something that is potentially destructive, such asdelete or save (perhaps your user really did not want to save the object at that moment).
14. 使用无破坏性的默认按钮。我们会经常定义一个在每个页面都出现的按钮,如果用户按了enter或者回车键该按钮就会被激活。问题在于,有时人们会偶然的触动enter或者回车键,但是他们并不想这么做,但经常因此激活默认的按钮。你的默认按钮应该避免具有破坏性,比如删除或者保存(或许你的用户那时并不愿意保存这个项目)。
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 andplaced immediately beside the field. This is a clean and efficient way to organize the fields on a screen.
15.区域的排列。当一个版面有超过一个的编辑区域的时候,你就要用某种方式来组织这些区域,使得版面同时具有吸引力和效率。如图1所示,我经常发现最好的办法是左对齐可编辑区域,换句话说使得左手边的每个编辑区域对齐于一条直线,一个接一个。相应的标签应该右对齐并且位于编辑区域的旁边。这是一个简洁有效的方法来安排版面上的编辑区域。
此图片仅显示局部,请点击查看完整图片
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.
16. 合理对齐数据。对于纵列的数据而言,很实用的方式是右对齐整数部分,小数和小数点部分左对齐。
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%.
17. 不要制作拥挤的版面。拥挤的版面让人难以理解也因此难以使用。实验结果(Mayhew,1992)表明空白的版面比例不能超过40%,相反的,内容占据的比例不应超过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 white space between collections of items to group them and/or you can put boxes around them to accomplish the same thing.
18. 有效分组版面上的内容。逻辑上相关的项目应该在版面上被组合在一起,来表明他们的相关性,相反地没有任何相关的项目应该分离开来。你可以在两个组合之间使用空白来以及(或者)在组合周围加框的方式来完成同样的工作。
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.
19. 在动作的中心开启新窗口。当你的用户在一个控件上双击来显示它的编辑/细节,他/她的注意力就集中在这个点上,所以在应该这一点上打开新窗口而不是其他地方。
20. Pop-up menus should not be the only source of functionality. Your users cannot learn how to use your application if you hide major functionality from them. One of the most frustrating practices ofdevelopers is to misuse pop-up, also called context-sensitive, menus. Typically there is a way to usethe mouse on your computer to display a hidden pop-up menu that provides access to functionalitythat is specific to the area of the screen that you are currently working in.
20. 弹出式菜单不能作为实现功能的唯一操作来源。如果你把主要的功能隐藏起来,你的用户不会知道怎么用你的软件。其中一个最让人丧气的体验就是开发者滥用弹出式菜单,也叫上下关联式菜单。一种有代表性的就是鼠标停在某个位置就显示出一个隐藏的弹出式菜单来允许用户使用某个功能,而(该菜单)刚好位于你正在工作的区域。
2. PrototypingPrototyping (Ambler, 2001; Ambler, 1998a) is an iterative analysis technique in which users are actively involved in the mocking-up of screens and reports. The purpose of a prototype is to show people the possible design(s) for the user interface of an application. As we see in Figure 2 there are four steps to the prototyping process:
2. 模型模型(Ambler, 2001; Ambler, 1998a)是一种关于用户与屏幕和结构如何mocking-up的交互分析技术。模型的目的在于演示软件可能性的用户界面设计。图2中我们看到模型工作的四个步骤。
1. Determine the needs of your users. The requirements of your users drive the development of yourprototype as they define the business objects that your system must support. You can gather theserequirements in interviews, in CRC (class responsibility collaborator) modeling sessions, in use-casemodeling sessions, and in class diagramming sessions (Ambler 2001; Ambler, 1998a; Ambler, 1998b).
1. 确定你的用户的需求。客户的需求,也即你们系统必须满足的客户的商业目标,决定着你的模型的研发。你可以从会见客户,卡建模,客户体验模型,以及图表(Ambler 2001; Ambler, 1998a; Ambler, 1998b)中获得这些要求。
2. Build the prototype. Using a prototyping tool or high-level language you develop the screens andreports needed by your users. The best advice during this stage of the process is to not invest a lot oftime in making the code “good” because chances are high that you may just scrap your coding effortsanyway after evaluating the prototype.
2. 建立模型。使用建模工具或高级语言建立你的客户需要的屏幕和结果。在这个阶段可以给你的最佳建议是不要花费大量时间使你的代码“漂亮”,因为在模型改进之后有很大的可能性是要放弃你付出大量努力写的代码
3. Evaluate the prototype. After a version of the prototype is built it needs to be evaluated. The main goal is that you need to verify that the prototype meets the needs of your users. I’ve always found that you need to address three basic issues during evaluation: What’s good about the prototype, what’s badabout the prototype, and what’s missing from the prototype. After evaluating the prototype you’ll findthat you’ll need to scrap parts, modify parts, and even add brand-new parts.
3. 改进模型。一个版本的模型建立之后,就需要改进了。其主要的目标就是你要检验该模型是否能满足你的客户的需要。我发现在模型改进过程中经常要定位三个要点:模型的优点在哪里,模型的缺点在哪里,模型缺失了什么?在模型改进之后,你会发现你需要丢弃,修改甚至添加全新的部分。
4. Determine if you’re finished yet. You want to stop the prototyping process when you find theevaluation process is no longer generating any new requirements, or is generating a small number ofnot-so-important requirements.
4. 决定是否完成模型。当你发现进程改进中已经不在产生新的要求或者仅仅是出现一些小的无关重要的要求的时候,你要停止模型的进程。
此图片仅显示局部,请点击查看完整图片
2.1 Prototyping Tips and TechniquesI have covered the fundamentals of the prototyping process, so now I want to share with you several tips and techniques that you can use to create truly world-class prototypes.
2.1 建模的技巧和技术我完成过基本的模型建立过程,所以现在我想与你们分享一些其中的技巧和技术,这样你们就可以用力建立真正的世界水平的模型。
1. Look for real-world objects. Good UIs allow users to work with the real-world objects they are used to. Therefore you should start by looking for these kinds of objects and identify how people interact with them.
1.寻找真实世界的产品。好的UI让用户在他们生活中经常使用。所以你可以以寻找这些好用的产品以及什么人使用他们作为建模的开始。
2. Work with the real users. The best people to get involved in prototyping are the ones who willactually use the application when it’s done. These are the people who have the most to gain from asuccessful implementation, and these are the ones who know their own needs best.
2. 与真正的用户一起工作。参与模型建立的最佳人群正是该软件完成后交付使用的人们。他们是成功的执行所带来最多利益的,也是最懂得他们自己所需要的人群。
3. Set a schedule and stick to it. By putting a schedule in place for when you will get together with your users to evaluate the prototype, you set their expectations and you force yourself to actually get the work done. A win-win situation.
3. 制定进度表并且执行。为你与用户何时进行模型的改进制定一个合适的进度表,记录他们的期望,让自己立即执行,以便工作能顺利完成。双赢的局面。
4. Use a prototyping tool. Invest the money in a prototyping tool that allows you to put screens together quickly. Because you probably won’t want to keep the prototype code that you write, code that’s written quickly is rarely worth keeping, you shouldn’t be too concerned if your prototyping toolgenerates a different type of code than what you intend to develop in.
4. 使用建模工具。在建模工具上投入金钱可以使你快速的将屏幕整合。因为你可能不想保留你编写的模型代码,这些快速编写的代码不太值得保留,所以如果你的建模工具生产你并不想要的代码,你无需太在意它。
5. Get the users to work with the prototype. Just like you want to take a car for a test drive before you buy it your users should be able to take an application for a test drive before it is developed.Furthermore, by working with the prototype hands-on they will quickly be able to determine whether or not the system will meet their needs. A good approach is to ask them to work through some use-casescenarios using the prototype as if it is the real system.
5. 让用户使用模型。正如你买车之前都要进行试开一样,你的用户也应该可以在软件开发前进行测试。更进一步,他们亲自使用该模型后会很快决定这套系统是否能满足他们的需要。一个好的途径是让他们如同使用正常软件一样使用这个模型的用户体验部分。
6. Understand the underlying business. You need to understand the underlying business before you can develop a prototype that will support it. Perform interviews with key users, read internal documentation of how the business runs, and read documentation about how some of your competitors operate. The more you know about the business the more likely it is that you’ll be able to build a prototype that supports it.
6. 理解作为基础的商业运作。在你开发一个模型支持某商业运作之前,你需要理解该商业运作的情况。与关键用户洽谈,阅读该商业运作的内部资料以及一些你的竞争者的操作方式。你理解的越多,你就越可能制作一个能支持它的模型。
7. There are different levels of prototype. I like to successively develop three different types ofprototypes of a system: A hand-drawn prototype that shows its basic/rough functionality, an electronicprototype that shows the screens but not the data that will be displayed on them, and then finally thescreens with data. By starting out simple in the beginning I avoid investing a lot of time in work thatwill most likely be thrown away. By successively increasing the complexity of the prototype as it getscloser to the final solution, my users get a better and better idea of how the application will actuallywork, providing the opportunity to provide greater and greater insight into improving it.
7. 有不同层次的模型。我喜欢开发三个不同层次的系统模型:一个能演示基本/粗略功能的手绘模型,一个显示屏幕但没有数据运行的电脑演示模型,以及一个拥有数据的最终模型。简单的开始可以避免在将被丢弃的模型上浪费太多时间。当我逐渐增强模型的复杂性并逐步解决最终方案,我的用户也会提出一个又一个更好的主意,这样就给我机会使软件有机会逐步地改进。
8. Don’t spend a lot of time making the code good. At the beginning of the prototyping process you will throw away a lot of your work as you learn more about the business. Therefore it doesn’t make sense to invest a lot of effort in code that you probably aren’t going to keep anyway.
8.不要花太多时间来使你编写的代码“漂亮”。在建模的开始阶段,当你理解更多该商务的时候,你会抛弃很多你做的工作。所以为你可能不回保留的代码花太多努力毫无意义。
3. Interface-Flow DiagramsTo your users the user interface is the system. It is as simple as that. Does it not make sense that you should have some sort of mechanism to help you design a user interface? User interface prototypes are one means of describing your user interface, although with prototypes you can often get bogged down in the details of how the interface will actually work. As a result you often miss high level relationships and interactions between the interface objects (usually screens) of your application. Interface-flow diagrams (Page-Jones, 1995; Ambler, 1998a; Ambler, 1998b; Ambler, 2001) allow you to model these high-level relationships.
3.界面设计流程图简单来说,对你的客户而言,界面就是系统。如果你有一些机制来帮助你设计用户界面难道不是很有意义吗?尽管有时你会因为模型中某些界面如何工作的细节陷入困境,用户界面模型仍然是描述你的用户界面(的重要依据)。因此你经常会漏掉软件中交互控件(经常是屏幕)间的高级交互关系。界面设计流程图(Page-Jones, 1995; Ambler, 1998a; Ambler, 1998b; Ambler, 2001)让这些高级交互关系模式化。
In Figure 3 we see an example of an interface-flow diagram for an order-entry system. The boxes represent user interface objects (screens, reports, or forms) and the arrows represent the possible flow between screens. For example, when you are on the main menu screen you can go to either the customer search screen or to the order-entry screen. Once you are on the order-entry screen you can go to the product search screen or to the customer order list. Interface-flow diagrams allow you to easily gain a high-level overview of the interface for your application.
图三中我们可以看到一个订单入门系统的界面设计流程图的例子。那些框表示用户界面中的控件(屏幕,报表或者表单),箭头表示界面中的可能流程。例如,当你在主菜单屏幕,你可以转向客户搜索屏幕或者订单入门屏幕。当你在订单入门屏幕,你可以转向产品搜索屏幕或者客户订单列表。界面设计流程图很容易让你对于你的软件界面得出一个大体的思路。
此图片仅显示局部,请点击查看完整图片
Because interface-flow diagrams offer a high-level view of the interface of a system you can quickly gain an understanding of how the system is expected to work. It puts you into a position where you can validate the overall flow of your application’s user interface. For example, does the screen flow make sense? I’m not so sure. Why can I not get from the customer edit screen to the customer order list,which is a list of all the orders that a customer has ever made.
因为界面设计流程图为系统开发提供了一个大体的思路,所以你可以很快理解该系统被设想如何工作的。它使你能全面检验你的软件用户界面的流程。例如,屏幕流程有意义吗?我不那么确定。为什么我不能从客户编辑屏幕转到用户曾经下过的所有的订单列表呢?
Furthermore, why cannot I get the same sort of list from the point of view of a product? In some cases it might be interesting to find out which orders include a certain product, especially when the product is backordered or no longer available. Also, interface-flow diagrams can be used to determine if the user interface has been design consistently, for example in Figure 3 you see that to create the customer summary report and a printed order that you select the print command. It appears from the diagram that the user interface is consistent, at least with respect to printing.
更进一步讲,为什么我不能从一个产品转到该种类的产品列表呢?在某些情况下,这对于发现自己要下的订单中包括一种延迟交货或者不在售卖的产品,是十分有用的。同时,界面设计流程图不能确定是否用户界面的设计是否进行了一致性,例如图三中你可以看到创建客户介绍报表和一个你选择的打印订单。从流程图中看起来用户界面是一致的,至少都能被打印。
4. Where to Go From HereI am a firm believer that every developer – particularly analysts, prototypers, and programmers building the user interface – should have a fundamental understanding of human factors engineering (HFE) and the industry-standard user interface guidelines for the platforms to which they are building. For example, Anybody developing to the Win32 platform should own and have read the Microsoft UI guidelines (Microsoft, 1995). Never forget that the user interface is the software to your users, not thedatabase, not the network, not the cool Java code that you’re writing. In that light, I would go so far as to say that if you don’t understand user interface design then you have no business developing software.
4. 从这里到哪里?我坚信每个开发人员——特别是分析员、建模人员、以及程序员在设计用户界面时——应该基本理解人因学(HFE)以及工作标准界面设计的指导方针。例如,任何人为win32平台开发程序应该拥有并阅读the Microsoft UI guidelines (Microsoft, 1995)。别忘了用户界面就是你的用户的软件,不是数据,不是网络,也不是你编写的很酷的java代码。从这个角度讲,我尽可能地说如果你不懂用户界面设计,那么开发软件与你无关。
So what do you need to do? First, although reading this white paper is a good start it isn’t enough, you still need further education. I would start by taking a one or two-day overview course in user interface design, one that covers issues such as human factors engineering, metaphors, mental models, screen design basics, and report design basics. If you are developing object-oriented user interfaces (OOUIs), then I highly suggest Chapter 9 of my second book, Building Object Applications That Work (Ambler, 1998a). Second, I would take a two-day course in the user interface standards for the platform that you are developing too. Standards currently exist for many of the common operating systems as well as general UI standards for Internet development. Once again, if you can’t find a course then you’ll have to do some reading.
那么你需要怎么做?首先,尽管阅读这本白皮书是一个好的开始,但那还不够,你还需要更多的学习。我会以一两天大致的界面设计课程开始,包括一些诸如人因学、类比、思维模式、屏幕设计基础、报表设计基础之类的报刊杂志。如果你正在开发面向对象的用户界面,那么我强烈建议你阅读我第二本书《Building Object Applications That Work (Ambler, 1998a)》的第九章。其次,我会接受两天的关于不同平台的用户界面的标准课程,即当前常见操作系统的标准以及因特网开发的通用用户界面标准。重申一下,如果你无法找到相关的课程,那么你要需要阅读一些资料。
5. SummaryIn this paper I presented several tips and techniques for designing effective user interfaces. The lists below summarize the key tips for UI design.
5. 摘要在这篇文章我阐述了一些有关设计有效的用户界面的技巧和技术。下面列出的是界面设计的关键技巧。
5.1 General Guidelines· Be consistent in a user interface, it’s critical.· Set user interface standards and stick to them.· Choose industry standards so as to increase the chance that your applications will look and feel likeother applications developed externally to your organization.· Explain the rules of how your application works to your users. If it’s consistent, then the rules shouldbe simple and few in number.· Support both novices and experts.· Word text consistently, positively, and in full English.· Look at other applications with a grain of salt because not everyone understands good user interfacedesign.· Display the objects that your users need to do their jobs on the desktop.· Think in terms of clusters of business objects and their corresponding interface objects, not in terms of applications.· Interface objects should look, feel, and behave exactly like the real-world objects that they represent.
5.1 通用指南·界面设计保持一致性,这很重要·制定用户界面标准并且坚持·选择工业标准使得软件的外观和感觉与其他软件相似·向用户解释软件如何工作。如果你的软件遵循了一致性运作,那么解释的规则将会简单并且数量较少·同时支持初级用户和高级用户·文字保持一致性,恰当,使用全称·用鸡蛋里挑骨头的眼光看待其他的软件,因为并非每个人都知道什么是好的界面设计·把用户需要用来工作的的控件放置在桌面上·用客户商务流程和相应的操作来考虑,不要从软件本事的角度来考虑·交互控件要与所表示的真是物件看起来,感觉上,以及表现上相同
5.2 Screen Design· Navigation between screens and on screens are both important.· Understand your widgets so that you know how to apply them properly.· Use color sparingly and always have a secondary indicator.· Follow the contrast rule – put dark text on light backgrounds and light text on dark backgrounds.· Use fonts sparingly and consistently.· When items are unavailable gray them out, don’t remove them if you want your users to form accurate mental models.· Use non-destructive default buttons.· Left justify edit fields and right justify their labels.· Right justify integers, decimal-align floating point numbers, and left justify strings.· Don’t create busy/crowded screens.· Use group boxes and white space to group logically related items on the screen.· Open windows in the center of the action.· Pop-up menus shouldn’t be the only source of functionality.
5.2 屏幕设计·屏幕间与屏幕内部的导航都很重要·了解你的窗体以便于知道如何正确地使用它们·使用色彩应该节制,并且经常采用次要的指示·遵循对比度原则——在浅色的背景上放深色的文字,在深色的背景上放浅色的文字·使用字体应该节制并且一致·当项目不可用,就使它们变灰,如果你想你的用户能形成正确的思维模式就不要移除他们·使用不具有破坏性的默认按钮·左对齐可编辑区域,右对齐它们的标签·右对齐整数部分,左对齐小数点及小数部分·不要创建拥挤的屏幕·用框和白色使屏幕上逻辑紧密的项目群组·在动作中心打开新窗口·弹出式菜单不能作为实现功能的唯一操作来源
5.3 Prototyping· The requirements of your users drive the development of your prototype.· During evaluation ask: What’s good about the prototype, what’s bad about the prototype, and what’smissing from the prototype.· Stop the prototyping process when you find the evaluation process is generating few or no newrequirements.· Look for real-world objects and identify how users work with them.· Work with the people who will use the application when it’s done.· Set a prototyping schedule and stick to it.· Use a prototyping tool.· Get the users to work with the prototype, to take it for a test drive.· Understand the underlying business.· Don’t invest a lot of time in something that you’ll probably throw away.· Document interface objects once they have stabilized.· Develop an interface-flow diagram for your protoype· For each interface object that makes up a prototype, document· It’s purpose and usage· An indication of the other interface objects it interacts with· The purpose and usage of each of its components
5.3 建模 ·用户的需求决定模型的开发·模型改进中要问:模型的优点是什么,模型的缺点是什么,模型缺失了什么?·当你发现很少或没有新的改进需要时,停止模型改进进程·寻找真实世界中的产品,并且识别用户如何使用它们·与这些最终要使用软件的人一起工作·制定一个模型进度表,并且坚持·使用建模工具·让用户使用模型,进行试用·理解商业运作·不要在会抛弃的工作上花费太多时间·一旦界面控件基本确定,把它们文档化·为模型创建界面流程图·为组成模型的每个界面控件文档化·它的目的与用法·为互动的界面控件做指示·每个组成部分的目的和用处