构建二十一世纪的用户界面(1)

Web 应用程序编程人员都是以自我为中心的，虽然这种思想是在无意识中产生的。我们（是的，我是说 “我们”）认为每个人要么像我们一样，要么希望变成我们这样。10 年前，为了解决千年虫问题，我们构建了 “证明未来” 的应用程序……忠实地将年份转换为 4 位数。而当时的普通用户正苦苦地学习和掌握 Internet 和我们构建的应用程序。
10 年后的今天，曾经担心千年虫问题的大众成熟了，他们以非常真实的方式使用着 Internet。您能够阅读邻居的博客，在您岳母的社交网站上发帖，以及查看很久没有音信的堂兄弟的家庭合影，所有这些使用的都是 10 年前的技术痴迷者们构建的 Web 应用程序。但是这里存在一个很大的问题：使用所有这些应用程序的用户并不是 Web 编程人员。这些用户拥有不同的优先级、不同的社会身份以及打开 Internet Explorer 时完全不同的期望（是的，他们大部分都是 IE 用户。Firefox？从未听说过）。
但是，为什么这一切变得如此重要？因为这些消费者已占据了主导地位，他们变得更加机智 — 不仅对 Web 是如此，对他们所喜欢的东西和所憎恨的东西也是如此。现在，一个出色的 Web 应用程序的用户界面至少应像它的功能一样重要。用户认为通过社交网站向某人发送圣诞礼物的能力，和找回遗忘密码的能力一样重要。这种能力比避免使用 blink 标记以满足用户需求的能力还要重要。他们对我们的技术知识毫无兴趣，他们想要直观、适用的应用程序，而我们不得不向受众交付这样的应用程序，我们并不总是很好地了解这些受众。
那么，您如何为这些与您不同的受众服务呢？无需尝试构建某种包含姓名和职业的配置文件，您只需要理解这些用户会有怎样的输入。哪些因素传达了他们的爱好和厌恶。最重要的是，是什么导致他们喜爱（或憎恨）特定的 Web 应用程序和用户界面？
首先，如今的 Internet 用户 — 您的 Web 应用程序的消费者 — 都是自学成才。他们几乎完全是靠直觉使用 Web 应用程序，所基于的只是他们已经知道的所在领域的相关知识。因此，他们并不具备计算机知识来告诉他们自己的社交网站上的好友列表是存储为静态数组、链表，还是存储为对 Friend 对象的一系列引用。
相反，用户只会根据 Internet 以外的世界，点击对他们有意义的内容。他们没有想到会有确认按钮和对可用键的限制。您应该能够输入一条消息，添加一个微笑标识和其他小的签名文本，单击一个按钮，就可以完成所需的任务。对购买图书感兴趣吗？您应该能够 “阅读” 图书的封底内容，查看图书的前言，查看封面图片，以及轻松地（且愉快地）将书放入您的购物车并购买。装运费用、税金、相关标题等都是一些无关紧要的信息，它们与用户的期望没多大关系。用户只是想快速购买，就像他们在真实世界中的体验一样。
那么，什么是真实世界？什么会使用户对您的应用程序感到满意，或者是什么使他们向您的客户服务团队发送电子邮件，抱怨应用程序有多糟糕？当然，没有任何计算机书籍会向他们传授相关知识，用户也从未听说过 Tim Berners-Lee 或 Jakob Nielsen 等网络专家。他们所擅长的就是使用新的媒体。
如果询问典型的 Facebook 用户，他们每天晚上会做些什么，您几乎总是会听到 “电视”、“TiVo”、“YouTube” 等字眼，少数人会冒出 “XBox” 和 “PlayStation” 等字眼。“写作” 和 “写博客” 等字眼，以及与朋友一起游玩和熬夜工作，这些都显现出网络对如今的 Internet 用户看待世界和您的 Web 应用程序的方式的巨大影响。
但是真实世界到底是什么含义？首先，如果想要构建适用的 Web 应用程序，您的房间里最好有一个 DVD 播放器，并且能够收看电视节目。听起来很疯狂？查看一下 TiVo 上的菜单结构，或者在 Blu-Ray DVD 上看看您喜爱的电视剧的最新一季。如果这些产品的界面不能与您的 Web 站点的导航和组织结构共享，那么您可能会遇到一些实际问题。消费者已经 购买了 TiVo、DVD 剧集和 Metal Gear Solid 4 PlayStation 3 套件等服务了。这意味着您的 用户在这些产品中发现了价值。
您的应用程序有一个优势：它是免费的，至少在初次访问时是免费的。因此，如果您想让用户将金钱或时间花在您的应用程序上，为何不模仿一下用户已经觉得有价值的东西呢？换句话说，作为 Web 设计人员，我们应该汲取用户已经觉得不错、有价值并且直观的知识体系，将这些知识应用到我们的应用程序中。因此，自学成才的用户觉得您的应用程序非常有用。
如今的 Web 设计人员不得不面对一个严峻的事实：他们不能为自己，或者甚至与他们自己很相似的人群进行设计。相反，应用程序必须针对消费者进行构建，消费者都具有很高的期望和预期。但是设计理念不是构建在其他 Internet 应用程序之上的。实际上，作为 Web 开发人员，您构建的应用程序的竞争对手不再是其他 URL 上的其他应用程序，而是您的用户愿意花费时间去使用的任何东西。
下面列出了一些您的应用程序的真正竞争对手：
PlayStation 3、XBox360和任天堂 Wii 游戏 Lost、Battlestar Galactica、Survivor、CSI: Miami 以及 Scrubs 等剧集 Facebook、YouTube 和 Twitter（是的，技术痴迷者仍然大量存在） AppleTV、NetFlix、Blockbuster 以及其他各种物理和数字电影服务 iPhone、Blackberry 以及 Treo 文本消息传递
除了 Facebook 和 YouTube，所有这些竞争对手都不是在线服务！甚至具有强大的在线组件的 Twitter 在许多情形下都是通过手机来访问的。所以，无论用户界面有多漂亮，您都需要了解并非特定于 Web 的用户期望。这些作为竞争对手的服务和产品使他们产生了怎样的期望？




回页首
外观和功能哪个更有价值？人们一直对此争论不已。美观的设计是否降低了功能的重要性？功能强大的应用程序是否比美观但不太实用的应用程序更受欢迎？这个问题的实质是应用程序的适用性，因为它涉及到两个层次的设计：功能和美学。
但是，在进行理论探讨之前，有必要考虑一下您的应用程序的竞争对手。Twitter、YouTube、Prince of Persia 和 Lost 是否也存在这样的情形？
分析一下主导着人们的视线（和口袋里的金钱）的媒体应用程序和源代码，结论很明显：功能是关键要素。看一下 Twitter，它非常类似您以前构建的 Web 应用程序：Twitter 实际上提供了强大的功能。您输入自己的状态，该状态将会被所有人看见。即使是全世界最漂亮的 Twitter 用户界面也无法使它的基本功能（信息传播）变得无用或无法工作。
看一下那些一夜成名的电视和电影，您也会发现一个共同的元素：故事。无论是 Big Brother（其中 90% 的内容都给人一种身临其境的感觉）、Lost（以及许多类似的电视剧），还是 CSI:，人们都喜爱观看。在大众读物流行的时代也存在相同的现象：故事是小说的重要组成部分，人们最终对故事的兴趣比对带来巨大商机的特效或惹人注目的图形效果的兴趣更高。
我们的用户急切地渴望完成某些操作。这里的 “某些操作” 可能是购买一件皮夹克、查看可用的新轮胎型号或者设置对一个签名 Fender Stratocastor 吉他的最高出价；不管怎样，用户必须能够轻松地完成该操作，无需费劲地摸索。您的站点的功能必须很突出，比其他所有站点元素都要重要。那么，您的站点的功能如何呢？您可以清楚简洁地描述出您的应用程序的核心功能吗？您最好能做到这一点，在应用程序的这个组成部分上花费的时间最好比您设计和开发的其他任何部分都要多。
当然，完全不考虑应用程序的外观也是一个巨大的错误。人们将钱花在 PlayStation 3 上是有其原因的，近年来，OS X 用户界面已变得非常流行。美观 — 尤其是一种简洁、令人愉悦的外观 — 会给用户带来不同的体验。然而，您提出的任何设计都必须支持您的功能，必须在本质上与功能联系起来。回到 Twitter 例子，让我们看一下图 1。Twitter Web 界面非常单调简单，很难称之为美观的艺术设计。

Twitter 页面上的每个元素都支持其核心功能，它提供了跟贴者、最新更新、我的消息等相关信息，以及基本的 Twitter 信息。看上去似乎设计人员在所有设计中都已将站点的核心功能考虑在内。
回到电影和电视的理念上来。乍看起来，外观或美观似乎比功能更有价值。但其实不然，为什么一些制作成本较低的节目仍然保留了下来，而其他投入了数亿美元预算的电视剧的收视率却一路猛跌？如果您赞同上面的观点，那么答案显而易见：我们喜欢好的故事情节。我们喜欢可识别的（在技术上称为 “适用” ）角色和美好的结局（也就是 “我们想要的结局”）。
在这些故事情节中，可能有漂亮的装束和昂贵的道具，或者几十年前的黑白电影的效果。但是，无论是哪种情形，设计都必须支持功能。在许多电视节目中，数百万美元都被用来确保情节的叙述可信。再一次，功能（故事）优于一切。
让我们仔细看一下您的应用程序。如果去掉设计元素，或某些颜色或图形，您的应用程序还能正常运行吗？注意，这里的问题不是 “应用程序是否美观”。而是关于有效性的问题。拥有富有吸引力的应用程序固然不错，但设计元素应该突出关键功能。在线商店的购物车通常都是彩色的或形成对比的色彩块，这样做的原因在于：使人们注意到最重要的功能元素！另一方面，您的购物车图像有多逼真无关紧要。




回页首
假设您确实将出色的功能放在了最重要的地位。那么您如何实际做到这一点呢？您可以始终遵循一些重要原则，以帮助确保您把握住正确的方向，使您的设计支持您的功能。
实际上就像听起来那么简单，要将您的应用程序从 “出色的 Web 应用程序” 转变为用户生活中的重要部分，第一步就是定义核心功能。换句话说，您需要简洁地描述应用程序完成的工作。无需使用两三句话，只用一句非常简短、非常直观的话。什么是 YouTube 的核心功能？让用户分享和观看视频。就这么简单。Amazon.com 更加简单：提供一个综合在线市场。
当然，这些网站上并没有明确说明这些功能，但这些功能在这些 Web 应用程序中显而易见。什么是您的 站点的核心功能？你必须省去华而不实的话语、修饰语，以及关于您的站点应该能够完成的功能的愿景。剪掉所有这些枝节之后，剩下的应该是一个非常紧凑、定义明确的功能陈述。
将这句陈述记在一个便签上，然后贴在您的显示器上，执行必需的工作（图 2 应该会为您提供一种好的主意）。

这句话必须涵盖您所做的所有工作。回想一下您的竞争对手：电视剧、视频游戏、电影等。是什么让它们获得成功的呢？答案就是一个定义良好的功能陈述所提供的内容：焦点。我们看一下不再流行的电视剧。您将会经常听到这些电视剧（以及电影）被指责 “情节突变（jumping the shark）”。这个陌生的术语是对 20 世纪 70 年代的情景喜剧 Happy Days（如果想了解更多信息，可以访问 Wikipedia）的真实写照。但是，它实际上指的是一个电视剧在某一处开始使用没什么价值的噱头或愚蠢的情节设计，偏离了该电视剧的核心目标。在在线领域中，“情节突变” 指的是使用屏幕效果和设计技巧掩盖核心功能的不足。
如何避免应用程序中的 “情节突变” 呢？如何跟上与媒体市场中与您竞争的严格定义（和制作精良）的电影、电视剧和视频游戏？定义您的核心功能。然后，确保您的站点上和应用程序中的所有东西都以该核心功能为中心。
知道您的应用程序要实现的目标之后，需要使用户了解这个目标。但是，这并没有想象中那么简单，Amazon 当然不会在其主页上贴上醒目的 “在这里购买您需要的所有东西” 的标语（但是，我想一些销售人员可能会这么做）。想像一下，如果一个电视剧的开始部分在黑色屏幕上显示一行白色大字：“我们承诺会延续第一季中使我们取得成功的故事情节！”这种方式实在太愚蠢了。
您的用户想要体验您的核心功能，而不是被告知（或推销）这些功能。您需要一种可以突出这些核心功能的方式，在站点中引导他们，始终让这种方式引领着用户。仔细看一下图 3，您能从中得出什么结论？

Amazon.com 在突出其核心功能方面做了突出的工作。下面是一些主要特点：
两个粗体的橙色按钮都用于购买。一个按钮用于升级到两天送达（其中包含了购买过程），另一个用于向用户的购物车添加商品。 另一个突出的标签 “Shop All Departments” 与 “getting everything you need from Amazon.com” 保持一致 产品以用户体验为中心，以较大的版面、粗体和彩色的方式显示。 其他所有内容都显示得比较低调。
Amazon.com 的功能没有在任何地方特别指出，但却在整个用户界面凸显出来。从产品选择到购买，用户都会在特意的引导下进行。
商品的更改也被突出显示，但是关注的重点并没有变。例如，图 4 也是 Amazon.com，这次显示的是购买屏幕。

所有选择被归结为一个较大的橙色按钮：“Place Your Order”。在这一阶段，Amazon 没有提供在站点的其余部分或产品类别中进行搜索的选项卡，但是您可以转到所有这些区域。这是因为 Amazon.com 知道在这一阶段，用户需要完成他们的订单。一定要谨慎选择产品页面上最重要的按钮。哪怕是产品的一个较小的图标图像都会引起问题；它会转移这个页面的用途，即确定订单。
找到您用来编写应用程序的核心功能的便签。您的站点传达出了便签上的消息了吗？您是否根据核心功能，在您的站点上明确的引导用户？如果没有，那么您将在与具有清晰且突出的功能的电视剧、电影、游戏和 Web 应用程序的竞争中失败。
平衡一个 Web 应用程序的所有因素并不总是那么容易。您知道，功能比纯粹的设计美学更加重要。但设计也是每个 Web 应用程序中不可或缺的一部分。（如果您不相信，可以尝试发布没有层叠样式表（CSS）或内联样式的 Web 应用程序，看一下会有什么样的效果！）这正是您的应用程序与所有媒体形式的竞争对手真正相似的地方：很容易在细节中迷失方向。
无论是为一个电视剧编写一个角色，设计视频游戏角色的对话，还是为一个 Web 应用程序开发调色板，您如何真正确保功能始终处于最重要的位置？一种最简单的方式就是应用 “模糊” 测试。这种方法实际上会询问这样的问题：“您的[在此处插入产品]的哪些部分能够在 10,000 英尺远的低分辨率下引起注意？”这里的术语 “分辨率” 不是指像素，它的含义为：当从远处观看您的应用程序或产品时，哪些部分最突出？它是一个很酷的徽标、一个漂亮的 CD，还是某个特定角色的红色头发？它是否能够引起轰动并具有多变的情节？或者它是您的核心功能（如果忘记了什么是核心功能，请参见图 1）、您的电影的基本情节，还是您的 XBOX360设备中最吸引人的游戏？
幸运的是，很容易在 Web 应用程序中检测这一点，您可以应用一种模糊测试。获取 Web 应用程序的屏幕快照，在图形应用程序中打开屏幕快照。将整个图像执行几次模糊化，直到无法阅读页面上的文本。获取图 3 中的 Amazon.com 快照并将其模糊化（我们实际上执行了 5 次 “Blur More” 操作），得到的结果将与图 5 类似。

所有的细节很快就消失了。那么还留下了哪些吸引眼球的内容？毫无疑问，是产品图像和浅橙色的按钮。甚至在所有细节都存在的情况下，它们仍然非常显眼。不要完全依靠自己的判断，当您模糊化快照之后，将它们传递给朋友。如果可以，发给完全不了解您的应用程序的人。他们会注意到什么？他们会对哪些内容感兴趣？您的目标是让他们注意到您想要用户使用的元素，也是与您站点的核心功能相关的元素。
这里的一个好处是，“模糊” 测试不仅仅告诉您是否偏离了正确方向，它会使您了解自己的设计、了解您使用的颜色、页面的布局，站点上几乎所有可视元素都可以使用这种测试进行简化。您是否花了 3 小时的时间来调整标题的字体？通过一两次模糊测试，就可以节约出这 3 小时。但是如果将相同的 3 小时用于调整您的 “购买” 按钮的颜色，使其变得醒目，那么您将受益匪浅。




回页首
如果您意识到您（和您的应用程序）的竞争对手不仅仅是大量其他 Web 应用程序，您的任务将会更加艰巨。引人注目的故事情节是一个非常重要的问题。它能够争取到用户的时间，这意味着它在与您的应用程序竞争。
那么，除了优化和改进您的核心功能，您还能做什么？还有许多事情可以做，我将在后续文章中探讨这些问题和内容。与此同时，还有许多问题需要考虑。现在，您可以做一些具体的事情来改进应用程序，在等待本系列的下一篇文章时，您可以进行更深入的思考。
是的，这个建议听起来很奇怪，但这是一个好建议。如果一位好莱坞高管从不观看竞争对手的电影，他还能在竞争中坚持多久？如果您从未实际拥有过 XBox360，您会想到尝试编写下一个出色的 XBox360视频游戏吗？答案是否的的。所以请放松一下，了解一下您的竞争对手。了解哪些电视剧很流行（并且流行了很长时间，我不希望您像联邦调查人员那样进行大量的调查）。使用 iTunes 或 TiVo 观看一些视频片段。在当地电影院观看最新的大片。当然，还要不断上网。在 Google 上搜索您希望应用程序所具有的关键词。访问您知道的竞争对手的站点。探索 Web 中的每个角落，并留意有哪些流行站点。
在做所有这些事情的同时，还可以不断做些记录。您喜欢什么？您憎恨什么？哪些内容看起来很酷且很有趣？如果可以，让朋友检查一下您的选择，尤其是选择的 Web 站点。让他们上网，与站点交互，并观察他们的行为。他们会做什么？他们会跟随一些特定的样式、按钮或者路径吗？他们会告诉您什么？思考一下您的用户想要什么！
使您脱离以 Web 为中心的思考方式的另一种真正有帮助的战术是，思考您在应用程序中模拟的行为。例如，您有任何类型的购物车或购物袋吗？如果是这样，那么您就模拟了一个清单。用户列出清单，然后 “使用” 该清单（购买它，或者将它添加到希望购买物品列表中等）。非 Web 媒介如何提供这一过程？显然，在电影院中没有真正的清单，除非您把在看电影途中用的爆米花和饮料都考虑在内。那么视频游戏又如何呢？清单管理是许多视频游戏都有的一个部分。您如何检查您的清单？您如何利用清单？考虑一下这些游戏的操作方法，以及如何以一种新颖且富有吸引力的方式将它转换到 Web 应用程序中来。
注意：本系列的下一篇文章将专门讲述清单管理，因此请真正花一些时间思考一下这个主题。这将对阅读下一篇文章有帮助。
另一个要考虑的有趣模型是通信。您的用户如何与您和您的应用程序通信？他们是否会单击一个 “联系人” 链接，然后发送电子邮件？他们能否使用电话？这与其他媒介中的通信模型相比较有何异同？同样，多年以来，视频游戏通过独特的方式处理社区、社会网络和通信。您从中学到了什么？您可以将哪些优势应用到您的应用程序中？




回页首
的确，要将所有的新媒介都当作竞争对手，还有很多事要做。但是，所有的 Ajax 技术和灵巧的设计（我们将在后续文章中探讨这些主题）都不能弥补重点的丢失。您的站点的用途是什么？该用途对您的用户来说有多明确？如果去掉所有的先入之见和偏见，您的站点会给人什么样的观感？哪些元素会脱颖而出？
如果您能够使用核心功能来回答这些问题，那么您已经走在构建富有竞争力、用户友好且适用的应用程序的正确方向上。但是不要欺骗您自己，这需要做大量工作。在接下来的几个月，我将深入探讨充分挖掘您的应用程序的具体技术。但是首先，也是最重要的，要确定应用程序的核心功能。哪些元素真正有用？您的应用程序能够做的最重要的事情是什么？花一些时间回答这些问题，您将会有充分的准备来面对接下来的所有问题。
学习
关于 Web 适用性的任何讨论都可以参考Jakob Nielsen 的网站，该网站包含大量文章和出色的资源。
可访问性与适用性紧密相关。有用的站点几乎总是高度可访问的。可以在Web 可访问性计划 在线站点上找到关于可访问性的更多信息。
阅读Head First HTML with CSS & XHTML：您将获得对 XHTML 和 CSS 的出色介绍以及包含丰富概念的说明。
Web 为视频游戏提供了大量信息，反之亦然。了解 PlayStation 3 游戏 “Little Big Planet” 如何利用Web 2.0 计划并将其构建到游戏中。
阅读Head First Web Design：通过这本书，您能够了解到 Web 设计的适用性、颜色、布局、导航，甚至知识产权。


Brett McLaughlin Brett McLaughlin 的著作上过畅销榜并获得过非小说类图书奖。他著述丰富，包括计算机编程、家庭影院、分析和设计，总印数超过 100,000。他编写、编辑和出版技术书籍快十年了，除了使用字符处理器外，他还喜欢弹奏吉他、和两个儿子在屋子里追逐嬉闹、和妻子观看重新开播的 Arrested Development。他的新著Head First Object Oriented Analysis and Design 荣获 2007 Jolt Technical Book 大奖。经典著作Java and XML 仍然是关于在 Java 语言中使用 XML 技术的权威书籍。
_xyz