商务web应用程序的界面设计

四.设计准则
　　现在流行着许多设计准则，但这些准则似乎并没有达成共识。我们将抛开那些严格的定义，带着大家简单地将它们过一遍。

4.1 没人喜欢被惊吓
　　优秀用户界面的关键，可以说就是“一致”与“友好”。用户界面在程序内部，比如导航和配色等，都应该保持一致。这就是内部一致。除此以外，套装程序和系统在用户界面上也应互相保持一致。典型的案例就是微软的Office套装。这就是外部一致。

　　一种保证“一致”的有效方法，就是为每个或每组项目的用户界面都制定“用户界面设计准则”。每个细节的设计都应该遵行它。设计准则不仅能使界面保持一致，作为说明文档，它还能帮助团队成员更好地理解你的决策。

一个简单的例子，SprinklePenny在全站都保持着“一致”和“友好”。

　　一致的用户界面容易上手，因为用户可以根据以前版本的使用经验，识别程序各部分。“友好”某种意义上容易与“一致”相混淆。“友好”的用户界面从用户过去的经历中提取信息，形成合理的隐喻。比如说文件夹，就是一个有关文件组熟知的隐喻，它已取代了以前命令行界面中使用的“目录”。总之，就是使用用户自己的语言。

　　很多企业领导都有一个共同的认识：出色的用户界面要看起来像微软Office系列，特别是outlook。我不想说这多么没意义。这里，我只提出不同于他们的建议：要沿用“以用户为中心”的方法，并解释为什么为员工、客户和合作伙伴（也就是他们的用户）所设计的应用程序才是重要的。

　　尽管如此，由于工作流程不同，大多数企业的情况也是各异的。例如来自同一行业的两个企业，很可能就有不同的工作流程。这会迫使你超越自己，开始创新。这部分的设计流程是相当吸引人的，当然你也要在创新的程度上多加把握。

其他阅读资料：
• 为用户界面设计和选择组件
• 为什么说一致很重要

4.2 用户应当是高效的
　　毫无疑问，用户应该能高效地使用商务应用程序。这是他们付费的原因，也是管理者所期望的。用户界面应该让用户高效工作，以最简单、最快捷的方式完成任务。但事实上，并非总是如此。开发人员在思想和行动上有一种想法。他们认为：用户界面的后台应尽可能的复杂。无论听起来多么荒谬，但问题已经出现了，可能还会令你很头痛。这就是为什么说与开发人员的良好沟通和合作是很必要的。

　　用户完成特定任务时应该是高效的。正如前文所说，任务分析可以帮助你确定任务，以及用户如何完成。如果任务很花时间，就需要将其分解成一些较小的任务，这样用户就不会感觉费时了。你还可以通过提供键盘输入和快捷键来提高效率。试想一下，当用户必须在鼠标和键盘之间来回切换是多么耽误时间。在某些情况下，你需要为习惯于命令行界面的用户设计，他们强烈希望支持键盘输入。给你一个建议：定义快捷键时，应与常用程序的快捷键相同。例如，Ctrl + s永远应该是“保存”等等。

Google Docs中的表格就为用户提供了键盘快捷键和快捷菜单，并借鉴了用户熟悉的桌面程序，使用户高效率完成工作。

　　通过个性化定制可以提高用户使用效率。用户自己定制界面时，不但会更快上手，更重要的是，在使用时会更有信心。个性化可以体现在许多方面：选择仪表板中的模块，定义快捷键选项和收藏，改变组件顺序等等。

注意一下可访问性。虽然许多人认为在Web应用程序中“可访问性”并不重要。但事实并不这样。要像对待公共网站的可访问性那样去对待它。

　　Web应用程序在处理信息时也必须是高效的。因此，局部呈现和AJAX请求产生的耗资源的交互行为需要慎重使用。

4.3 救命！
　　对于系统处于何种状态，界面上应提供有效的反馈。如果发生错误，应当通知用户并设法恢复。如果程序正在运行中，需要通知用户进展如何。

　　我们可以更进一步说：用户界面应该防止用户犯错。这一法则被称作容错，确认对话框、撤消选项、智能输入（forgiving formats）等就遵循了它。“容错”让用户更安全地使用程序，降低了学习成本，并提高了整体满意度。

由于Web应用程序很复杂，你还需要提供一个综合帮助系统。这项工作可以由内部帮助、支持的数据库、知识库或是向导（包含视频，图像和文字）来完成。

其他阅读资料：
• 用户界面设计中的容错
• Web表单确认：最佳实例和教程
• 悉心处理用户错误：使用户重回正轨

4.4 让用户满意
　　满意度是一个比较主观的词，它是指用户使用界面时的愉悦程度。我们之前介绍的每一条设计准则，都会影响满意度。还有一些准则需要在这提一下。

　　简洁是界面设计的一条基本准则。越是简洁的用户界面，就越容易操作。但对商务应用程序来说，让用户界面简洁却是一个挑战，因为这些程序往往有许多功能。问题的关键就是要平衡功能和简洁。最有效的解决方法就是“约束”。换句话说，就是找到最简单的解决方案。

BuildWith.me有一个简单而有效的用户界面，它并没有为此牺牲美观。

　　美观，虽然是有些主观甚至随意的评价，但也是影响满意度的重要因素。用户喜爱漂亮的用户界面，甚至可以为此牺牲功能。但你也要注意自己并不是在创造艺术品。有关美观的最好的文章之一是美丽无罪（In Defense of Eye Candy）。

由于用户会使用一个商务应用程序很久，无论一款程序多么好用，多么具有一致性和容错性，评价它成功与否的决定因素还是：用户满意度。

其他阅读资料：
• 简化界面设计的7种方法
• 约束
• 美丽无罪
用户界面设计的其他相关资料：
• 优秀用户界面设计的12条准则
• 成功用户界面的8个特征
• 用户界面设计准则（维基百科）
• 成为界面设计大师的10条准则
• 20个网站帮你精通用户界面设计

五. Web应用程序的重要元素
　　Web应用程序虽然是各异的，但它们大多有很多相同的程式。每个应用程序对其程式的使用方式并不相同，让我们先看看它们中最常见的三个吧。

5.1 Web表单
　　一般来说，表单对Web应用程序非常重要。不过，Luke Wroblewski在他的Web表单设计的著作中却说“没有人愿意填表单。”这里说的表单，就包括许多商务Web应用程序的注册表单。

尽量减少用户填写表单时的挫折感。提供内部验证与良好的反馈系统，并尽可能使用默认值。不要忘记新手用户，通过向导或隐藏高级（或不常用的）功能，来帮助他们更快地完成任务。

5.2 主从窗格（Master-Detail Views）
　　它指的是一种在两个独立且相关的窗格看数据的程式。一个窗格显示项目列表，另一个显示所选项的详细信息。这种程式在单一页面或多页切换时都可实现。

5.3 仪表板（Dashboards）
　　很多Web应用程序都有仪表板。仪表板将需要操作和决定的重要信息展示在一起。它一般仅在单一页面出现，而且是一个应用程序的初始页。仪表板非常重要，因为它让用户在不进入深层界面的情况下，就可以看到信息并执行任务。

Xero在仪表板中显示了用户的最重要的财务信息（如银行帐户和信用卡信息），以便于用户迅速看到自己的财务状况。

5.4 大量使用表格
　　由于Web应用程序需要处理大量易归类的数据，表格也就不可避免了。这其实并不是一坏事。事实上，表格就是干这个用的。不要将其与没表格的页面布局相混淆。只有有效的表格才容易阅读。因此在多数情况下，你需要选择一个有意义的标题，控制好表格各列和分页的数量，将行颜色交替显示，适当对齐表格各列，并提供排序和过滤功能等等。

表格是可以人为调整的，这就是说你可以为它们添加更多信息，甚至去修改它们的数据项。

PulseApp是表现“表格有效处理当前复杂数据”的优秀案例。

5.5 报告
　　大多数企业都离不开报告。由于打印报告是常用功能，你就要重视报告的设计。打印（或输出）的报告通常是线上报告的简化版本，需要优化它来适应单色打印。

FreshBooks具有打印，PDF输出和“发送电子邮件”功能。它还能提供打印预览。

六.不要忘记用户界面设计版式
　　我们对界面设计版式的讨论已经很习惯了，但有时却还会忽视它们！用户界面设计版式对设计用户界面是很有帮助的。版式往往能解决常见问题，合理的版式可以方便用户熟悉界面，尽快上手。因此，你要在设计流程的初期阶段就考虑版式，最好在草图阶段就开始。

这张截图来自12个标准屏幕版式 ，这篇文章能帮你重温最常见的屏幕版式。

其他阅读资料：
• Web界面设计：富交互的原则和版式
这是一本出色的著作，涵盖了70多个网页设计版式。
• 40多个有关用户界面设计版式的素材

七.案例教学：网上银行
　　接下来我举一个真实的案例，用来简单介绍设计“小型银行网银系统的用户界面”的流程。我所在团队参与了改善该系统的工作。这次改版的主要原因，用他们管理人员的话说就是：“用户经常抱怨，其中有许多人已经不再使用了。”

与实际用户共处了几个小时后，我们便发现了主要问题。账户与信用卡信息被深埋在了次级导航中。用户很难看到消费信息，以及账户和信用卡状态。显然，该应用程序已经变成为银行员工设计的了，只有他们才熟悉专业术语，很好地解读程序中的数字。

　　在紧迫的时间内，我们遵循了文中所描述的设计流程，并取得了一定成功。由于问题明显，在时间很短的情况下，我们依旧清楚地了解自己的主要任务和行动方式。我们创建了一个“仪表板”，提供了所有帐户及信用卡状态的明确信息。新的导航让用户更方便地查询信息。同时报告也方便用户理解了，还加入了一些新的功能。

我们只进行了部分调整，但由于改善了用户完成关键任务的流程，也就极大地提高了整体的用户体验。

八.最后的思考
　　商务Web应用程序的界面设计是一项艰巨的工作，它充斥着各项妥协。你必须在客户和用户需求之间，商务需求和用户之间，新手和专家用户之间，功能和简洁之间妥协。它需要你充分理解用户和他们的任务，以及界面设计准则和版式。尽管困难，但这项工作却很有趣，你可以从每个项目中学到很多新的东西，并将它用到网站设计中去。