1、第 一 章现代网络应用程序中的用户界面设计Dmitry Fadeyev众妙之门 网站 UI 设计之道什么是用户界面（UI）设计?什么是有效的用户界面设计?你打算如何把用户界面设计得更好?这一章，我们就来了解一下现代互联网应用程序中可视用户界面设计的理论演化和技术更新。什么是用户界面?“在你使用工具完成任务的过程中，你所做的操作以及工具的响应，这些结合起来构成了界面。”Jef Raskin用户界面设计并不仅仅是考虑如何摆放按钮和菜单，更为重要的是考虑应用程序或设备如何与用户互动；更多时候，还要考虑产品与多个用户之间的互动。这就意味着，用户界面设计不仅要做出好看的产品外观，还要做出好用的产品。这不
2、仅仅是调整一下按钮的位置、给他们选选颜色，而是要为完成一项任务而选择正确的工具。一个特殊的界面，是否需要使用按钮?如果确实需要，那么这些按钮将完成什么样的工作?这个按钮需要如何设计，才能让用户了解这个应用程序的工作方式，并且轻松达到用户的目的。在产品的开发周期中，尽早开始用户界面设计至关重要，正如 Jef Raskin 所说：“对消费者而言，界面就是产品1”。用户一直看到和使用的都是用户界面，而不是深藏在应用程序背后的技术体系结构。把界面做好，这将极大地提高用户使用产品的愉悦感，用户也能很容易就掌握产品的使用。所以先从界面设计开始，然后再开始应用程序后台引擎的编码，要好于先开始编码，再给他包裹
3、一层界面。什么因素能成就一个伟大的用户界面？1Raskin,J. 2000 The Humane Interface Addison Wesley。用户在第一次使用一个界面时，仍然能发现某些元素是他们所熟知的。第一章 现代网络应用程序中的用户界面设计在我们开始着手设计用户界面之前，首先应该理解什么样的用户界面才是出色的用户界面，我们的设计要具备哪些品质才够得上是出色的界面设计。所有伟大的用户界面大都具有下面这八个品质或特点。1.清晰。通过使用文字、流程图、层级图、图标等元素，避免用户对界面的模糊认识。清晰的界面不需要手册，同时还能确保用户在使用的过程中减少犯错。2.简洁。为了让界面清晰，可以通
4、过在所有元素上添加浮动框的说明或者标签这种简单的方法来实现，但这样做会导致界面膨胀臃肿。如果电脑屏幕上同时充斥了太多的东西。找到你想要的东西是非常困难的，用户使用起来就觉得困难乏味。如何让界面同时保持简洁和清晰，这正是设计伟大界面的挑战所在。3.熟悉。人们总是对之前见过的东西有一种熟悉的感觉，有的界面即使是第一次使用，其中的有些元素我们还是会感觉很熟悉。在设计过程中，使用一些现实生活中公认的意象能够更好地帮助用户理解。例如，文件夹样式的选项卡通常在网站和应用程序中起导航作用，人们很快就能认识到它的导航作用，因为现实生活中，我们也是通过文件夹来分类资料的。4.响应性。这意味着两件事情。首先，响应
5、必须迅速，一个良好的界面不应该让人感觉反映迟缓。其次，界面应该提醒用户发生了什么事，用户的输入是否被成功地处理，让用户了解这些信息反馈。并且明确告诉用户，您的请求已经被成功受理。5.一致性。在整个应用程序中保持界面一致是非常重要的，这能够让用户识别出使用的模式。一旦用户学会了界面中某个部分的操作，他很快就能知道如何在其他地方或其他特性上进行操作，就好像他们早就知道似的。6.美学性。尽管你不需要把一个界面做的非常有吸引力，众妙之门 网站 UI 设计之道但是有一个好看的界面会让用户工作起来更开心。况且，让用户开心绝对是一件好事。7.高效性。时间就是金钱，一个伟大的界面应当通过快捷菜单或者良好的设计
6、来帮助用户提高工作效率。毕竟这是科技带给我们的一个最大好处，它允许我们用更少的时间和努力来做完成更多的工作。8.容错性。每个人都会犯错，你的应用程序会如何处理用户所犯的错误是对它的总体质量一个最好测试。它是否容易撤消操作?是否容易恢复删除的文件?一个好的用户界面不应当因为用户的错误而惩罚他们，而应该总是为他们提供犯错之后补救的方法。想要设计一个包含所有特性的用户界面非常困难，因为各个特性之间总是相互影响。你在界面中增加的元素越多，用户在使用上所花的努力就越大。当然，反过来亦是如此。没有足够的帮助和支持，用户会茫然不知所措。如何设计既简洁、优雅，又清晰、一致的用户界面，是摆在用户界面设计师之前的
7、最大难题。可视界面设计的工具箱可视界面设计就是设计让用户能够在他们的电子设备的屏幕上看到你的界面的物理表现的过程。可视界面设计的主要目的是通过精心制作合适的可视界面，让用户理解应用程序的用途以及如何操作应用程序。可视界面设计中由一系列过程组成。选择合适的类型、对齐每个元素、将不同元素以一种有意义的方式组合起来，用户界面中不同的功能和特性借此传递给了用户。下面就是可视界面设计中的一些主要元素布局和定位布局规定了界面中所有可视元素的结构。通过元素之间的第一章 现代网络应用程序中的用户界面设计距离，还确定了元素之间的层级和相互关系。元素距离比较近表明它们之间存在相互关联，例如图标下面的标签。定位也能
8、改变整个界面的流畅性。例如将标签放在文本输入框的上面，而不是左边，这样我们就可以方便地从上往下扫描所有元素，而不需要看看左边，然后再找右边哪个输入框与它对应。形状和尺寸形状通常用来区分元素，例如，通过改变图标的外形，能够让它们更快、更容得被辨认出来。尺寸经常用来表示重要性，越大的元素就越重要。尺寸也可以改变可点击控件的可用性。Fitts 规则告诉我们，一个可点击区域越大，用户将鼠标移动到该区域就更快。把经常使用的按钮做大，不仅用户点击的时候变得更容易，同时提升了界面的效率。颜色颜色被应用于很多地方。一种颜色在与它反差强烈的背景色下能够吸引人的注意（比如，在白色背景中的一个亮黄色警示箱）。不同的
9、颜色可以表示不同的意义。例如，红色经常被用来表示危险或停止（交通灯里的红灯），所以最好用红色来表示错误信息。而绿色一般用来表示成功或者继续进行的信号，所以应当用在表示这类信息的内容上。颜色也可以用来突出显示一些关系，例如在编辑的时候，将相关的按钮用不同颜色高亮显示，来帮助用户识别。在使用颜色的时候要记住两件事。首先，不同文化中颜色代表的含义有所不同，所以确保你的目标用户能够识解你所选颜色的含义。其次，不要忘记色盲用户，在区分不同元素时，多花一些心思，使用一些颜色以外的技巧，例如一个图表中的创造一个产品的外观和感觉并不是可视界面设计的主要目的，而仅仅是一个部分。最主要的目的还是沟通：通过沟通的行
10、为帮助用户理解应用程序。众妙之门 网站 UI 设计之道长条。如果用户是色盲，他们就不能区分特定的颜色，多数色盲患者都是红绿色盲，所以你需要使用其他的方法，例如形状、材质等。对比一个元素周围的黑暗或者明亮将会对元素在界面上的可用性产生影响。这其实就是对比度在起作用。白色背景中的黑色文本具有高对比度，比起白色背景中的灰色文字，更容易辨认和阅读。调低一些元素的对比度，将它们融入到背景当中，用户就能够区分出重要元素和次要元素。材质在交互设计中有一个概念叫做Affordance。Affordance 是一种能够让用户明白如何使用一种东西的特质。以把手为例。做一个单向门的最好办法就是在拉的这一面安装一个把
11、手，在推的那一面装一个平坦的手柄导板。看到门，人们自然就知道什么时候拉、什么时候推，因为门把手已经告诉了人们如何去使用。也就是说，提供了最好的互动方式，来让用户集中精力与正确的一个上面。我们可以把这个主意应用到用户界面设计中，在屏幕上使用材质。例如，在可视界面中一些元素是可以拖拽的，就像在一个窗口的四角，我们可以对这个窗口进行缩放。为了让用户知道可以点击、拖拽它，通常会使用一些粗糙介质的突起。现实生活中，那些可以用手拉的物品通常会具有比较粗糙的材质。这个主意被转移到了屏幕上，不同的是我们不再用手指，而是用鼠标来进行拖拽。制作有效用户界面的实用技术我们已经讨论过了什么是用户界面，用户界面应该具备
12、什第一章 现代网络应用程序中的用户界面设计么样的特点，以及我们可以使用的构建用户界面的工具，现在让我们看一些可以应用在你的网络应用或网站上的实用技术。使用空白来构建联系空白指在各种内容元素之间的空白区域，比如标题、正文和按钮。当在不同元素见建立联系时，空白是一个非常重要的工具。通过收紧元素之间的空白，能够把一些相关的项目组成一组。增加这些分组之间的空白能够更加强调这些分组与其他内容之间的联系。使用空白，我们可以分组相关的控件，也可以构建页面中的元素之间的层级关系。Gmail 的工具栏通过空白的分割突出了三个分组。每个分组中的按钮都对应着不同的功能。使用圆角来定义边界圆角通常用来改善图片元素的观
13、感。它们看起来非常舒服，并且能够为你的界面带来额外的平滑感，但这并不是圆角的全部功能。圆角通常定义一个对象的边界。当看到圆角时，你就知道已经到了容器的边界了。如果是一个直角，后面再跟另一个直角的容器，它们之间的界限会不太明显。而圆角，或其他任何类似的视觉上的处理，都能够让分界线变得更为明显。注意在 Ballpark 的客户列表中，圆角是如何来突出每条记录的界限的。在每个记录的中间也有两个直角，但是它们是用作相关数据之间的分割线，而不是一个条目的边缘。众妙之门 网站 UI 设计之道用颜色来表达含义颜色是一个重要的沟通工具，例如，定义不同的元素。你可以在应用程序中使用不同的颜色来区分不同功能的按钮
14、。红色常被用在一些表示破坏性的按钮上，诸如删除或移动；蓝色一般用在标准按钮上，绿色则用在保存和更新操作按钮上。使用代码着色，我们可以分辨出屏幕中用户创建的各种各样的数据，让它们变得更容易阅读。引导用户的注意力使用动画来提醒用户关注。有时候，单独使用颜色和对比度还不足以吸引用户的注意。如果一件很重要的事情发生了，你也确实需要确保用户能够注意到，那么就使用动画。人类的眼睛非常适合捕捉移动的事物，特别是在固定背景中运动的时候。如果用户在他的辅助工作的应用程序中添加一条待办事项，或者向购物车中加入一件商品，这个时候使用动画来突出正在发生的事情。例如，当在屏幕中创建一个项目的时候，可以使用高亮的效果。对
15、于那种使用很多Ajax技术的应用来说，这一点特别有用。在这些情况下，页面中的操作并不会导致页面的刷新，高亮的部分弹出来告诉用户发生了什么事情。Goplan 通过在面板左侧放置不同颜色的标签，来帮助用户快速区分不同的项目，比如任务、笔记或者博客文章。当你在 Yammer 上发布一条信息的时候，信息就会滑出并且高亮显示。第一章 现代网络应用程序中的用户界面设计使用阴影或深背景聚焦另外一个将用户注意力集中到某一区域的方法是使用阴影和加深背景。阴影通常被设置在弹出菜单或者模式窗口四周，像一张毯子一样遮住了窗口四周的干扰元素。阴影降低了窗口下方其他元素的对比度，反过来就增强了用户使用区域的对比度。模态窗
16、口同样可以在其底部使用一个黑色（或亮一点）的半透明层，减少它所覆盖内容部分的视觉干扰，从而让用户的注意力集中在窗口上。强调核心的动作应用程序大多有自己特别的主要和次要界面。例如，当你在一个项目管理应用程序中创建项目时，主表单通常包含项目名称、项目截止日期、优先级，等等。在表单底部，你会看到一个“创建”按钮。经常，你还会看到一个“取消”按钮或者文本的链接。因为用户不经常使用，所以“取消”按钮并不是很重要，因此，你就可以减少这个按钮的视觉“分量”。例如，可以把“创建”做成一个按钮，而“取消”只做一个没有任何视觉效果的超链接。这样中心就放在了主要的操作上，用户完成表单的时候就能很快地定位到操作按钮。
17、MobileMe在模态窗口底部使用了黑色的遮罩层，同时在窗口四周使用了阴影。借此消除窗口以外元素的干扰，把用户注意力转移到窗口中来。10众妙之门 网站 UI 设计之道使用块状链接提高效率使用带填充的块状链接可以用来方便地将鼠标定位到链接。网络应用程序构建在HTML元素的基础上，也就意味会使用很多的锚（通常称为链接）标签。锚标签默认是“内联(inline)”元素，意味着它的宽度和高度只是在文本的内部。反过来就是说，可以点击的区域和文本的范围一样，在很多情况下显得太小，用户不能够很精准、舒服地进行点击。而你可以对锚链接使用内边距来使它变大。对于列表中的链接，就像侧边栏，将锚链接转化为“块元素”是个
18、更好的办法。通过使用CSS的“display”属性，我们可以转换一个元素的类型，所以给锚链接增加一个“block”属性,就能将其转化为一个块元素，块元素的宽度和高度就不在局限于文本的尺寸，而默认会扩展到包含它的容器的宽度。这种方法非常适合侧边栏中的链接。用动词作标签用户在使用应用程序的时候，总是准备去做一些事情，他们总是在想动词。“我想保存这个文件”或者“我想更新这篇文章”。这是 Ballpart 客户创建的一个表单，注意看“Create Client”按钮与“Cancel”的区别是多么显著。MobileMe 侧边的导航面板，使用了带内边距的块状链接增大了可点击区域，用户能够快速地移动鼠标到这
19、些区域，提升了可用性。第一章 现代网络应用程序中的用户界面设计11在创建对话框或者其他需要用户处理的应用时，使用动词而不要使用像“是的”、“不是”、“好的”这样的表述。当用户看到像“好的”或者“取消”这样的选项时，他们需要去阅读额外的信息来搞明白他们要做什么。如果你使用动词，例如“保存”、“不保存”和“取消”，用户就不需要再看其他的消息，他们马上就知道这个对话框或选项是做什么的。Backpack 在按钮或链接中很好地运用了动词，确保每个选择对用户都是明白无误的。输入时自动/重新聚焦在网页文件加载完成后自动激活主表单中的输入框会给基于表单的应用带来很大的好处。例如，搜索引擎Google的页面自动
20、将焦点定位在页面的输入框中，因为几乎所有到达Google首页的人都想在输入框中键入需要查找的内容。在其他的应用环境中自动激活输入框也非常有用，例如，在那种需要连续输入的应用，就像创建购物清单。在输入第一个物品之后，用户想接着输入下一个，所以可以重新激活输入框，让用户快速、持续地进行输入。Tadalist 允许你快速、不断地输入待办事项。当输入一个任务并且单击回车后，程序会增加一个新条目，然后把焦点重新设置在输入框中，等待用户的下一次输入。1众妙之门 网站 UI 设计之道使用浮动控件进行简化和解构很多应用程序都有一套与内容紧密相关的控件，例如一个列表中的删除按钮和记录的编辑按钮。为了方便定位，通
21、常这些控件放在了每条记录的后面，但是这种情况下就造成了大量的重复。多数的时间里，用户并不需要这些控件，需要时，也仅仅需要其中一个特定条目的空间。使用浮动空间，在用户移动到一个特定区域后才显示的方式，可以简化界面。例如，当鼠标停在你想编辑的记录上时，一个编辑按钮就会显现出来，但是其他记录的编辑按钮仍然保持隐藏。悬浮控件是一个很棒的解构和简化界面的方法，但是在使用这个方法之前，你还需要考虑两件事情。首先考虑控件是否能被找到。用户在使用之前，往往需要先找到这个界面中的元素。你的控件是否做得足够显著以吸引用户注意？用户经常很自然地移动鼠标，停留在他们正在浏览的项目上，所以这也许并不是一个大问题，但是仍
22、然值得去思考。其次，移动设备上的网页浏览器也许不能模拟鼠标的动作，那么这些控件将无法使用。Basecamp 运行用户上传多个文件，但是每次只显示一个文件上传按钮。Twitter 只有在鼠标停留在一个条目上的时候才显示“回复”和“收藏”按钮。第一章 现代网络应用程序中的用户界面设计1动态扩展表单如果表单中的一个输入框中需要输入多个数据记录，例如，在一段文本之后附加多个文件，或者向数据库中的公司记录里添加多个人员信息。这种情况下，可以使用动态扩展表单，以一种优雅的方式来实现需求。因为用户每次只能在一个输入框中进行操作，所以每次也只需要显示一个输入框。当用户填完并且增加了一条记录后，程序会在新记录后
23、再创建一个额外的输入框，允许用户键入更多的信息。这种方法替代了同时显示多个空输入框的形式，每次你只需要显示一个空的输入框，但是允许用户输入需要的内容。输入框中的标签界面的简化需要不断地思考总结。你想要砍掉一些不必要的元素，并且为剩余的元素更好地利用空间。将标签放到输入框内部是一个巧妙的办法。这不仅节省了空间，也清楚地表明了与输入框对应的标签。MobileMe 将标签放到输入内部，使它的登录界面紧凑有致。上下文敏感的界面元素有时，你希望为高级用户整合一些额外的功能，但是又不想让页面臃肿。可以通过提供按需增加的上下文元素来实现。1众妙之门 网站 UI 设计之道例如，你的应用程序中有一个带高级搜索的
24、搜索条，在没有使用的时候只显示搜索条，当用户单击时再显示一些额外的控件。这样，界面仍然保持了简洁，实现高级的功能也只需要一次点击。用户将鼠标移动到搜索条上时，Vimeo 显示一个扩展的搜索条件，为高级用户提供一些额外的功能。图标使用图标能够简化界面、让界面看起来更有吸引力，但是在使用之前也有一些因素需要好好考虑。语言几乎总是比图标表达得更清楚。写一个标签非常容易，只要表明这个按钮的作用就行。然而在设计图标的时候，则需要用有效的意象来描述操作。如果图标是一些很本土化的东西，你选择的意象在不同的国家可能会有不同的理解（甚至连垃圾桶的形状在世界各地都是不同的）。屏幕中同时没有太多的图标，每个图标都能
25、够同其他图标明显地区分开，这种情况下图标才能发挥出最好的作用。这意味着形状和颜色是创建一套成功图标的重要因素。使用正确的图标，能够让界面表的容易使用。因为一旦用户熟悉了这些图标的含义，通过形状和颜色的区别，用户就能很快找到他们想要的图标。使用加载指示器没有人喜欢等待。等待意味着本来可以做一些价值的事情的时间里，你却什么都没有做。但是很不幸，每个程序都有需要花费一些时间才能完成的特性，比如导出一个大文档或者通过查询返回结果，用户不得不等待。但是，可以通过使用加载指示器来让用户觉得等待的时间变短了 1。在加载过程中，增加一个指示器，1 http:/ 现代网络应用程序中的用户界面设计1比如旋转的动画
26、或者进度条。研究表明，在指示器存在的情况下，用户感觉时间变短了 。加载指示器对短时的等待非常适用，但是如果一个操作需要一分钟甚至更多来完成的情况呢？如果你在加载的这段时间里什么都不能做（假设你已经为减少加载时间做了最大的努力），你还是可以做一些事情来改善用户的等待体验。利用这段时间提供娱乐或者信息。例如，很多应用程序在长时间的等待过程中会显示一些有趣的提示或技巧。如果用户确实做不了任何工作，起码他们可以学到一些新东西。当用户通过 Web 界面上传文件时，Dropbox 显示一个进度条。对于类似的等待时间不定的事件，进度条是必不可少的，这样用户就不必猜测他们究竟还要等多长时间。使用按钮状态提高响
27、应性应用程序的响应性并不仅仅依赖于后台代码结构的优化。用户界面同样也扮演了非常重要的角色。在可视界面中被使用得最多一个元素就是按钮。在桌面应用程序中，按钮具有多种状态，最常见的是按钮默认状态和鼠标单击后的状态。OtherInbox 在主导航中有一系列图标，图标底部都有相应的文字进行说明。1众妙之门 网站 UI 设计之道WordPress 中按钮的默认状态和按下的状态。Campaign Monitor 在初次登录的时候提供了详细的帮助信息，同时有一个很大的按钮将你带到活动的创建页面。按钮按下的状态看起来就像真的被按下去那样。这个状态提示用户，他们的单击已经成功地执行了。像在桌面应用程序一样，按钮
28、的按下状态同样可以使用在网络应用程序中，为用户提供一些额外的反馈和响应。帮助性的空白状态当用户第一次加载应用程序的时候，屏幕上不会显示过多的内容；用户也还没有输入数据，也没有什么好显示的。在这个空白状态中添加简短的帮助信息，来引导用户如何开始。为了让事情更加简单，你甚至可以在信息中加入一个链接，将用户带到推荐的操作。例如，一个管理电子邮件广告的程序，用户创建了一个新账户后登录，应该提供给用户一段帮助信息，其中包含一个链接到新广告的创建界面。宣传应用程序的特点用户对你的应用并不是十分了解，所以一些情况下在应用程序中合理使用广告是一个很好的办法。同时，由于互联网产品经常会进行一些细微的更新或者时不
29、时推出一些新功能，所第一章 现代网络应用程序中的用户界面设计1以通过广告的方式让你的用户知道这些变更就变得更有意义。一般情况下，可以通过在屏幕中的显著位置放置一个小块通知的方式来实现。通知区域应当吸引眼球但又不至于让用户分心，影响用户的正常工作。用户读了这个通知以后，应该可以关掉它。Gmail 中每次删除一封邮件的时候，都会出现撤消操作的按钮，允许我们马上撤销删除操作。取消操作桌面应用程序最常用的特性之一是，值得信赖的取消快捷键。不小心改变了正在编辑的文档图表格式？没问题，按Ctrl/Cmd+Z组合键，应用程序会采取撤消操作，把你的文档恢复到最后一个动作之前的状态。取消操作是容错界面的一个重要
30、工具，它也可以应用在页面应用程序中。例如，你可以在网页应用程序中加入这些熟悉的快捷键或者显示一些带有撤消链接的临时通知信息。在 follow 特性的主要输入区下面，Yammer 提供了一个非常有帮助的提示。用户读完以后，可以选择点击右边的关闭框关闭。1众妙之门 网站 UI 设计之道Writeboard 允许用户恢复两个月内被删除的文档。还原操作人们在删除一些东西之后，通常会改变他们的想法，所以在你的应用程序里增加额外的保护措施来处理一些比较重要的数据是一个明智的做法。例如，项目管理中的项目文件。用户删除一个项目时，将其进行存档而不是立即删除。如果用户改变主意，希望把他们需要的项目文件取回时，程
31、序可以轻松地将它们还原。当用户发现所有的东西并没有丢失而感到非常高兴时，消耗一点用户的磁盘空间是值得的。确认对话框当应用程序中进行诸如删除记录这样的破坏性操作时，提供一个确认对话框，提醒用户是否确实要进行接下来的操作是非常必要的。特别是当删除按钮的位置和其他控件非常近的时候。如果用户不小心点击了删除，在生效之前用户可以取消操作。但是，不要过度使用这个特性，因为不必要对话框拉长了操作过程并让人生厌。Freckle 使用确认对话框来确保用户的误操作不会造成更大的损失。第一章 现代网络应用程序中的用户界面设计1结论日本哲学家 kaizen 强调，通过微小、逐渐的过程来获得持续的改进和提高。用户界面设
32、计，特别是现代网络应用程序的用户界面设计，并不需要一个完成的状态，因为我们总是不断地进行改善和升级。记住，像Kaizen 一样思考。传统的CD的分发模式有一个很大的缺点，一旦产品烧录完成并寄送出去后，你就无法改变它或者，不是那么容易改变 。你可以发布一个补丁，但是用户必须下载安装它才能生效，你无法确保每个人都会进行更新。另外，为每一个细微的改变发布补丁是不可行的，所以你必须在第一次发布的时候尽量做到完美，而这就需要在发布之前进行大量的测试。SAAS（软件即服务）的模式改变了一切。通过网络运行你的网络应用程序的好处是，你可以随时部署微小的更改，而用户马上就能够访问它们。这就意味着，现在不必在第一次发布之前将界面做到100%正确。如果一些东西不合适，你可以修改它。通过观察用户与界面之间的互动，你就能找到让界面工作有更好的感觉，也能发现使用时的冲突。不管是哪一部分的用户界面需要改进，你可以很容易地为所有用户进行更新。这就是 Kaizen 的界面设计方法：微小的、逐渐的、常规的改进。你不再需要担心必须在第一次就将界面做到完美。取而代之，通过不断地改进，你将很快获得从实际使用中进化而来的伟大界面。
