为商业Web应用设计用户界面Word格式.docx
《为商业Web应用设计用户界面Word格式.docx》由会员分享，可在线阅读，更多相关《为商业Web应用设计用户界面Word格式.docx（21页珍藏版）》请在冰豆网上搜索。
开放的系统是在线应用，任何人
都可以注册账户，然后轻松的访问。
用户可以通过web网络访问这个应用，可以免费或付费
注册账号。
封闭的系统是离线应用，不能在公司外部访问和使用（虽然很多系统通过一些服
务或是专用接口，向商业伙伴展示了一些功能）。
这些应用往往是在公司内部网络中运行，
只有公司员工才可以使用。
我不知道是谁创造了weblication这个词，但我喜欢这个词，它大致说出了web应用是
什么。
但这并不是说一个web应用是一半网站和一半应用的混合体，web应用比这可要复杂
的多。
首先，理解你的用户
也许你已经不断的听到说要理解你的用户，并且理由也很充分：
一个成功的用户界面要
以用户和用户任务为中心。
然而，这就是为什么大多数开发人员无法创建良好用户体验的关
键所在。
正如SteveKrug说的：
“开发人员喜欢复杂性，他们喜欢去探索系统是如何运行
的。
”
当你去识别和确认谁是用户时，记住客户不是用户，你自己也不是用户。
虽然客户的管
理层经常会对项目感兴趣和试图影响决策，但他们不会一天中在电脑面前坐上几个小时去使
用它（除非这个应用就是针对他们的）。
如何识别用户？
你可以使用许多技术去识别用户，例如用户访谈、商业利益相关者访谈和“影子”观察
法。
通过访谈，你可以知道用户对于系统和计算机的基本理解和认知。
而通过“影子”观察，
你可以知道用户如何执行任务和犯了哪些错误的更加详细的信息。
之所以叫“影子”观察法，
是因为观察者就像一直跟随用户的影子一样，去观看和记录用户的每一个任务步骤。
如果你没有遇到真正的用户（可能是因为你没有权限，或是在设计开放的应用），你可
以使用“人物角色”来帮自己识别用户。
“人物角色”是真实用户的代表，包含了用户的习
惯、目标和动机等等。
由于有关用户的某些信息往往是通过商业分析中确定的，所以你可以
利用它来创建人物角色。
如果你对人物角色方法不太熟悉，BrandColbow的漫画将对你有帮
助（如下图）。
这个人物角色
有这些目的
人物背景：
Mike是一个家小型制造公司的现场支持工
程师，他经常会被委派外出，一天之中只
有一两次在办公室。
目标和动机
Mike想要在到达客户那里进行维修之前，
就知道发生了什么问题。
目的是为了第一
时间就能准确的修正问题。
回访或超过计
划日程，会占用他个人时间和公司最低要
求时间。
人物角色
任务分析有助于确定用户在工作中需要完成哪些任务、如何完成、需要多长时间、犯了
哪些错误。
有时用户正在使用你将要重新设计的旧版本应用。
你正好可以利用这套旧系统，
来看看用户是如何操作的。
这样你会很容易了解到用户的任务和遇到的挑战。
无论谁是你的用户，有一点可以肯定的是：
在大多数情况下，您必须同时考虑新手和专
家。
要让新手用户尽可能快的学习和上手，而专家用户要尽可能快速高效的完成任务。
这就
可能要分别为他们创建单独的用户界面。
但在很多情况下，你可以使用各种技巧（比如隐藏
高级功能，逐渐显露——progressivedisclosure），来保证不同类型的用户正常使用同一界面。
这些研究通常由市场分析来完成。
但当没人来负责这项业务时，你应该去完成它。
一旦
得到了必要的信息，就可以开始设计了。
设计流程
有许多种界面设计流程你可以采用，或者你已经使用了某一中。
然而，我建议你考虑敏
捷（Agile）方法。
为什么呢？
因为对于用户（或客户）来说，用户界面就是产品。
他们不
会关心你的概念构思、先进的后台技术或强大的服务器。
他们希望看到的只是用户界面。
那么，敏捷方法有何帮助？
主要是它的重要的原则：
迭代方法。
每一次迭代都包括了你
所定义流程的所有步骤。
这就意味着，第一次迭代结束后，你将得到一个可以进行测试的产
品：
即一个原型。
测试
草图
原型
草图（Sketching）
草图是探索思路的一种强大方法。
目的是通过起草各种不同的概念，找到最佳方案。
大
多数草图会被丢弃，但这无所谓。
正如BillBuxton在他的《SketchingUserExperience》
一书中说的：
草图快速低廉且容易处理，这正是它为何如此强大。
草图（sketches）和线框图（wireframes）一样吗？
也许区别是模糊的，但是我觉得不
同。
线框图不是捕捉粗略的想法，而是对粗略想法的延伸实现。
可以读读IxDA上的精彩讨
论：
线框图前的草图。
一旦你得到“正确”的草图，或者至少你认为正确的一个，你便可以创建更加详细的线
框图或直接去创建可交互的原型。
JasonRobb的草图
有关草图和线框图的趣味阅读：
∙
35杰出的线框图资源
起草构思用户体验的工具
20步改进线框图
原型（Prototyping）
接着就是去创建能够模拟真实应用的原型。
原型可以包含一个或多个功能（或所有功能），
但它只是模拟真实应用的行为，而不是对功能的真正实现，让用户感觉到好像真的在运行。
但原型也可以包含一些真正的功能，例如复杂的计算。
由于HTML原型是临时性的（它的目的是验证想法），所以不用花时间在代码上。
让bug
最少，但只要能够运行就行，毕竟你最终会扔掉它。
你也可以使用一些专门的原型设计工具，
如Axure，有些人甚至PowerPoint做原型。
一个电子商务网站的Axure交互式原型，e-maujean提供。
原型设计的相关阅读和工具：
5个Web设计规划和原型设计的实用工具
一个实践者的原型设计指南:
来自RosenfeldMedia的一本书
16个用于原型和线框图的设计工具
测试（Testing）
原型如果不用于进行测试，原型也就失去了其真正的意义。
测试并没有那么难，正如
JakobNielsen和SteveKrug提倡的“简易可用性测试”方法，它成本低廉、快速，并为
你的设计决策提供宝贵建议。
你也可以将测试结果作为另一次迭代（草图-原型-测试）的基
础。
至少在主要问题解决之前，你都该进行测试。
我们知道软件项目的时间和预算都很紧张，
所以为了更加高效，要尽早测试和经常测试。
SteveKrug的这本《RocketSurgeryMadeEasy》书是简易可用性测试的最好资源，
你可以找一本进行阅读。
上图是对Delicious进行可用性测试，（nz）dave提供
更多阅读：
为什么你只需要测试5个用户
可用性测试不神秘
可用性测试神话
设计原则
现在流行许多设计原则，但还没有形成最终的普遍共识。
所以我们这里去看一些非正式
的设计原则，但并不进行严格定义。
一致性
一个优秀用户界面的关键要素是“一致性”和“熟悉感”。
用户界面在整个应用的所有
部分的应该一致，从导航、颜色到术语，这叫做内部一致性。
用户界面还应该和该应用所处
的环境一致，例如和操作系统或其它配套应用达到一致，一个典型的例子就是微软Office
套装应用，这叫做外部一致性。
保证一致性的一种有效的方法，就是为每个项目或为一组项目定义用户界面指南（user
interfaceguidelines）。
每个详细的设计决定都应该遵循它。
用户界面指南不仅能保持界
面一致性，还能够作为文档帮助团队成员更好的理解你的决策。
虽然是一个简单例子，SprinklePenny在整个应用中达到了一致性和熟悉感
一致的用户界面使得学习曲线缩短，因为用户已经认识了系统的某些部分和复用以前的
使用经验。
但是“熟悉感”有时会和“一致性”相混淆。
具有“熟悉感”的用户界面能够吸
取用户的心智模型和利用合理的隐喻方法。
例如，文件夹就是对文件组织方式的著名的隐喻，
而不再是使用以往命令行操作系统的“目录”。
总之，就是要使用用户的语言。
很多企业用户有一个共同的观点是：
一个良好的用户界面应该看起来像微软的Office
产品，尤其是Outlook。
我不想去解释这是否有意义。
但是我想说的是：
要遵循“以用户为
中心”的方法
这里，我只提出不同于他们的建议：
要沿用“以用户为中心”的方法，并解释为什么为
员工、客户和合作伙伴（合作伙伴的用户）设计应用程序才是重要的。
尽管如此，大多数企业都不相同，他们的工作流程也不同。
例如，来自同一行业的两个
公司可能有完全不同的流程，将迫使你超越和创新。
设计流程中的这部分可能非常有趣，当
然你也要在创新的程度上多加把握。
为设计和选择组件
为什么一致性如此重要
高效
毫无疑问，当用户使用商业应用时应该能够达到高效，这正是客户花钱的原因，也正是
管理者对应用的期望。
用户界面应该能够让用户高效工作，并以最轻松和快速的方式完成任
务。
但事实上并非如此。
开发人员们有一种观点（至少实际行动上确实如此）：
用户界面应
该和系统后台一样复杂。
无论这听起来多么荒谬，但问题已经出现，可能还会令你很头疼。
这就是为什么必须与开发人员进行良好的沟通和协作。
当用户专注于某个特定任务时是高效的。
前面提到，任务分析可以帮助你识别任务和确
定用户如何完成该任务。
如果一个任务需要较长时间，就需要将其分解成许多较小的任务，
这样能加速用户完成任务。
你还可以通过提供键盘输入和快捷键来提高效率。
试想一下，当
用户必须在鼠标和键盘之间来回切换是多么耽误时间。
在某些情况下，你需要为习惯于命令
行界面的用户设计，他们将强烈渴望支持键盘输入。
给你一个建议：
定义快捷键时，应与常
用程序的快捷键相同。
例如，Ctrl+s永远应该是“保存”等等。
GoogleDocs中的表格就为用户提供了键盘快捷键和快捷菜单，并借鉴了用户熟悉的桌面程
序，使用户高效率完成工作。
通过个性化定制也可以提高用户使用效率。
用户自己定制界面时，不但会更快上手，更
重要的是，在使用时会更有信心。
个性化可以体现在许多方面：
选择仪表板（dashboard）
中的模块、定义快捷键选项、设置偏好、改变元素顺序等等。
也应该注意可访问性（accessibility），虽然许多人觉得Web应用中的可访问性并不重
要，但实际上你该像对待公众网站一个对待它。
Web应用程序在处理信息时也必须是高效的。
因此，局部呈现和AJAX请求产生的耗资
源的交互行为需要慎重使用。
反馈
对于系统处于何种状态，界面上应提供有效的反馈。
如果发生错误，应当通知用户并设
法恢复。
如果程序正在运行中，需要通知用户进展如何。
我们可以更进一步说：
用户界面应该防止用户犯错。
这一法则被称作容错，确认对话框、
撤消选项、智能输入（forgivingformats）等就遵循了它。
“容错”让用户更安全地探索
界面、降低了学习成本并提高了整体满意度。
由于商业Web应用程序很复杂，你还需要提供一个全面的帮助系统。
这可以通过联机帮
助、支持数据库、知识库或是向导（包含视频，图像和文字）来达到。
UI设计中的容错
Web表单验证：
最佳实践和练习
小心处理用户错误：
让用户回到正确轨道上
让用户满意
满意度是一个比较主观的词，它是指用户使用界面时的愉悦程度。
我们之前介绍的每一
条设计准则，都会影响满意度。
还有一些准则需要在这提一下：
简洁是界面设计的一条基本准则。
越是简洁的用户界面，就越容易使用。
但对商务应用
程序来说，让用户界面简洁却是一个挑战，因为这些应用往往有许多功能。
问题的关键就是
要平衡功能和简洁。
最有效的解决方法就是“约束”。
换句话说，就是找到最简单的解决方
案。
BuildWith.me有一个简单而高效的用户界面，它并没有为此牺牲美观。
美观，虽然是有些主观甚至随意的评价，但也是影响满意度的重要因素。
用户喜爱漂亮
的用户界面，甚至可以为此牺牲功能。
但你也要注意自己并不是在创造艺术品。
有关美观的
最好的文章之一是美丽无罪（InDefenseofEyeCandy）。
最终，由于用户会花很长时间去使用一个商务应用程序，无论界面多么好用、一致性和
容错性，评价界面成功与否的决定因素还是：
用户满意度。
7个界面技术简化和整洁你的界面
克制（Restraint）
美丽无罪
其它和UI设计相关的资源：
优秀用户界面设计的12个实用技术
成功用户界面的8个特征
用户界面设计原则（维基百科）
UI设计大师的10大原则
帮你掌握用户界面设计的20个网站
Web应用的必要元素
Web应用虽然各异，但它们大多包含有相同的元素。
每个应用对这些元素的使用方式并
不相同，让我们先看看最常见的三个元素。
Web表单（WebForms）
一般来说，表单对Web应用程序非常重要。
不过，正如LukeWroblewski在他的Web
表单设计的著作中说的：
没有人愿意填表单。
”这里说的表单，就包括许多商业Web应用程
序的注册表单。
尽量减少用户填写表单时的挫折感。
提供内部验证与良好反馈，并尽可能使用默认值。
不要忘记新手用户，通过向导或隐藏高级（或不常用的）功能，来帮助他们更快地完成任
主从窗格（Master-DetailViews）
这是一种在两个独立且相关的窗格显示数据的技术。
一个窗格显示项目列表，另一个显
示所选项的详细信息。
主从窗格可以在单一页面或通过多个页切换进行实现。
仪表板（Dashboards）
很多Web应用程序都有仪表板。
一个仪表板是将需要操作和决策的最重要信息展示在一
个视图上。
它一般仅在单一页面出现，而且是一个应用程序的初始页。
仪表板非常重要，因
为它让用户无需深入界面，就可以看到信息并执行任务。
“
Xero在仪表板中显示了用户的最重要的财务信息（如银行帐户和信用卡信息），以便于用户
迅速看到自己的财务数据状况。
大量使用的表格（HeavyUseofTables）
由于Web应用常常需要处理大量容易取得和归类的数据，表格也就不可避免了。
这其实
并不是坏事。
事实上，表格就是干这个用的。
不要将其与无表格页面布局相混淆。
高效表
格能够易于阅读。
因此在多数情况下，你需要一个有意义的标题、合理的表格列数、分页、
行颜色交替显示、适当的列对齐，并提供排序和过滤功能等等。
表格是可以人为调整的，这就是说你可以为它们添加更多信息，甚至去修改它们的数据
项。
PulseApp是“表格如何有效显示和处理复杂数据”的优秀案例。
报表（Reports）
大多数企业都离不开一些类型的报表。
由于打印报表是常用功能，你就要重视报表的设
计。
打印（或输出）的报表通常是在线报表的简化版本，所以需要优化以适应单色打印。
FreshBooks具有打印、PDF输出和“以电子邮件发送”功能。
它还能提供打印预览。
不要忘记UI设计模式
我们经常听到或讨论UI设计模式，但有时还是会忽视它们！
UI设计模式对设计用户界
面是很有帮助的。
要在设计流程的初期阶段就考虑模式，最好在草图阶段就开始。
因为模式
往往用于解决常见问题，正确的模式能够帮助用户熟悉界面、提高学习效率。
这张截图来自文章：
12个标准屏幕版式，这篇文章能帮你重温最常见的屏幕版式。
设计Web界面：
复杂交互的原则和模式
一本出色的书，涵盖了70多个Web设计模式
关于界面设计模式的40多个有用资源
实例学习：
网上银行应用
举一个实际的例子，以简单说明用户界面的设计流程。
这是一个较小银行的网上银行系
统，我所在的团队被雇佣以改善这个系统。
要重新设计这个系统的主要原因是（根据管理层
所说）：
“用户在抱怨，许多人已经不再使用它”。
通过几个小时和真实用户的接触，发现了主要问题：
有关账户和信用卡的信息被隐藏在
了糟糕的导航里；
用户要知道自己花了多少钱、账户和信用卡的状态非常困难。
这个系统显
然只是考虑到了银行的职员，只有这些职员熟悉应用中的术语及理解其中数字的含义。
时间紧迫，我们遵循了前面描述的流程，并取得一定的成功。
尽管时间很少，但一些主
要问题非常明显，所以我们可以很清晰知道我们的主要任务和如何去做。
我们创建了一个仪
表板（dashboard），为用户提供清晰的账户和信用卡状态的信息。
通过新的导航，能更加
方便的找到信息。
报表更容易理解，并实现了一些新功能。
虽然我们只做了很少的修改，但这些修改影响了最主要的用户任务，最终使得整体用户
体验大大提升。
最后的思考
为商业Web应用设计用户界面是很有挑战性的工作，充满了妥协。
你需要在客户和用户
需求、商业要求和用户需求、初级和高级用户、功能和简单之间做到平衡。
需要对用户和用
户任务的充分理解，以及对UI设计原则和UI模式的充分使用。
尽管充满挑战，但这份工作
很有乐趣，你可以在每个项目上都能学到新的东西，也将影响着你对网站的设计方法。
（结束）
升级会员 