本章主要谈及的是在网站项目设计过程中，创建用于促进沟通，捕获决策，以及激发创意的文档。 

    虽然文档有许多用途，但在考虑所有情况之后，有三个原因来创建它们：

• 观点一致性：工作在小团队且成员之间相当默契的网页设计师将拥有一个令人羡慕的工作环境。可是在一个大的团队当中，期望成员之间有良好的互动是不切实际的，在这种环境中，团队成员可能经常在不同项目之间转换。随着网站项目的不断发展，不同的人将以不同的身份参与进来。对于大的团队和项目来说，风险在于每一个人对项目概念的理解都有些许不同。文档则可以确保所有人都在处在同一轨道上，都能对项目作出有价值的贡献，因为文档让所有人都清楚项目所处的阶段以及它将往哪个方向发展。
• 可说明性：无论你是向企业提供咨询的网页设计师还是供职于企业内部，你都需要一种方式来确保所有人都理解了已决定的决策及其含义。
• 可跟踪性：文档是一种书面记录，即使你永远不会把它打印成单一的交付物。做好项目进程中所做决策记录，那么你会有整个项目的相关记录以及能很容易回头查看团队是在哪里做了关键的决策。到项目收尾阶段，你可能意识到你不记得当初为什么做那样的决策，例如，按钮放在那个位置的原因是什么？文档的历史记录则可以反映这些决定背后的理由。

    即使你不是在一个大的团队工作，你也可能发现以上这些原因和你所处的环境是有关系的。小的网页开发工作坊在签合同的时候也需要提供一些合法的具有说明性的文档。开发团队可能发现他们的客户很容易因其内部的政策意见而偏离原来的方向，这时文档就起到维持项目开发方向的作用。一种新的方法总是伴随着大量的（或是任何！）令人厌烦的文档，或是有些人会因为用文档来取悦客户时感到困难而沮丧。这些讨论是有意义的，因为它们有助于提炼和聚焦我们对文档目的的理解。像任何其他的工具一样，文档也能被滥用。文档最大的滥用是为创建文档而创建，不是为了对项目，团队，或是终端产品作出贡献和创造价值。

    每隔一段时间，一些用户体验团体都会突然反对设计文档。其原因可能是

十种交付物文档
    这本书各章节组织结构是严谨的。每一章分别专注于阐述一种交付文档。每一章又分为三小节，分别是创建文档，演示文档，以及处于上下文中的文档。因为这本书以此结构来组织，所以每一章都能以相似的方式向你提供建议。这本书描述了三种类型的文档：

• 用户需求文档：网站设计过程中关键要素是理解正在或即将使用它的用户。用户需求文档用于归纳呈现这个过程。这个过程的一部分是记录你对用户了解了什么，人物角色通常作为研究结果的呈现形式。另一部分是关于实施测试的，可用性测试计划和可用性测试报告这两种文档是从这一过程当中产生的。
• 策略文档：一些想法在做任何设计工作以前必须考虑清楚和落实到位。概念模型捕获关键的概念结构，内容清单罗列网站的内容范围，另外，竞争分析报告则是用基准问题来比较相互竞争的网站。
• 设计文档：最后，你需要具体细化用户体验本身。这些设计文档像不同的放大镜，照射出用户体验的方方面面。线框图展示页面的结构，流程图细化用户和系统之间的交互流程，网站地图揭示整个网站的结构，而视觉设计则传达网页的外观和感觉。

      大部分涉及网页设计的讨论似乎集中在创意过程，然而把概念变成现实要求一系列优秀的可交付文档（概念模型，网站地图，可用性报告等等），这些文档作为设计师与客户之间主要的交流工具。本书是恰好专注于该主题的指南。通过快速提示与深入探讨相结合的表达方式，以及降低风险的技术来提升可交付物的质量。作者丹.布朗向你展示了一种可能，即如何使您需要提供的文档成为最有效率的沟通工具。他以可交付物的简要介绍以及它们在整个流程中的位置为开场白，接着深入探究了可交付物的不同类型。从可用性报告到项目计划，内容地图，流程图，线框图，网站地图等等，每一章包含了内容清单，表现策略，维护策略，开发过程的描述，以及可交付物对项目的影响等等。

序言

      简言之，这本书是关于文档的。是不是听起来有点乏味？从许多方面来说，网页设计的软肋是其项目设计过程中对文档收集的准备。毕竟，文档通常是以纸的形式呈现，最终却是无人问津的放在书架上。那是多么的凄凉啊？

      但是任何从事网站设计的人都清楚文档的好坏将决定项目的成败，它不但可以通过提炼设计概念来推动项目往前发展，而且可以帮助项目成员之间进行更好地沟通。网页设计文档或是有时被叫做“可交付物”可以起到跟踪项目进度的作用，从而让原本看起来处于冗长过程的项目取得进展。它们也是历史资料，让后面进入项目组的人能快速地理解由早先进入项目组的成员所做的决定。

      总之，一个文档捕获一个想法。也许为了获得网页设计的生意，文档有些存在的必要性，但这里的核心问题在于，如果我们不能有效地交流一个想法，那么我们怎能希望基于该想法来构建一个相应的网站？

      虽然优秀文档的价值是无须置疑的，但是在网页设计经典和标准里，关于文档的讨论却是寥寥无几。这并不是说，可交付物文档从未被阐述说明。也许你偶尔会在某一设计师或是信息架构师的博客里面碰到一些相关内容，甚至你一定看过至少一篇令人印象深刻的关于线框图的文章，或是一系列用于流程图的形状。可是在更大范围上，却从未认真阅读过使设计文档变得更有效的书籍。

      在表面上，这本书将会帮助你提升文档材料的水平，它将提供如何计划你的可交付物的建议以及如何在项目会议和项目上有效地使用。在这样做地过程中，本书也同样试图阐述什么可以使文档变好，以及帮助你认识到劣质文档和劣质想法的区别。

     界面的说法以往常见的是在人机工程学中。“人机界面”是指人机间相互施加影响的区域，凡参与人机信息交流的一切领域都属于人机界面。“而设计艺术是研究人一物关系的学科，对象物所代表的不是简单的机器与设备，而是有广度与深度的物;这里的人也不是“生物人”，不能单纯地以人的生理特征进行分析。“人的尺度，既应有作为自然人的尺度，还应有作为社会人的尺度;既研究生理、心理、环境等对人的影响和效能，也研究人的文化、审美、价值观念等方面的要求和变化”。

设计的界面存在于人一物信息交流，甚至可以说，存在人物信息交流的一切领域都属于设计界面，它的内涵要素是极为广泛的。可将设计界面定义为设计中所面对、所分析的一切信息交互的总和，它反映着人一物之间的关系。

二、设计界面的存在

     美国学者赫伯特.A.西蒙提出:设计是人工物的内部环境(人工物自身的物质和组织)和外部环境(人工物的工作或使用环境)的接合。所以设计是把握人工物内部环境与外部环境接合的学科，这种接合是围绕人来进行的。“人”是设计界面的一个方面，是认识的主体和设计服务的对象，而作为对象的“物”则是设计界面的另一个方面。它是包含着对象实体、环境及信息的综合体，就如我们看见一件产品、一栋建筑，它带给人的不仅有使用的功能、材料的质地，也包含着对传统思考、文化理喻、科学观念等的认知。“任何一件作品的内容，都必须超出作品中所包含的那些个别物体的表象。”分析“物”也就分析了设计界面存在的多样性。

     为了便于认识和分析设计界面，可将设计界面分类为:

1)功能性设计界面接受物的功能信息，操纵与控制物，同时也包括与生产的接口，即材料运用、科学技术的应用等等。这一界面反映着设计与人造物的协调作用。

2)情感性设计界面即物要传递感受给人，取得与人的感情共鸣。这种感受的信息传达存在着确定性与不确定性的统一。情感把握在于深入目标对象的使用者的感情，而不是个人的情感抒发。设计师“投入热情，不投入感情”，避免个人的任何主观臆断与个性的自由发挥。这—界面反映着设计与人的关系。

3)环境性设计界面外部环境因素对人的信息传递。任何一件或一个产品或平面视觉传达作品或室内外环境作品都不能脱离环境而存在，环境的物理条件与精神氛围是不可忽缺的界面因素。

应该说，设计界面是以功能性界面为基础，以环境性界面为前提，以情感性界面为重心而构成的，它们之间形成有机和系统的联系。

三、设计界面存在的方法论意义

     当机械大工业发展起来的时候，如何有效操纵和控制产品或机械的问题导致了人机工程学。二战后，随着体力的简单劳动转向脑力的复杂劳动，人体工学也进一步地扩大到人的思维能力的设计方面，“使设计能够支持、解放、扩展人的脑力劳动”。在目前的知识经济时代，在满足了物质需求的情况下，人们追求自身个性的发展和情感诉求，设计必须要着重对人的情感需求进行考虑。设计因素复杂化导致设计评价标准困难化。一个个性化的设计作品能否被消费者所认同?新产品开发能不能被市场所接受?在目前，我国大部分企业实力还并不强大，设计开发失利承受力还不很强的情况下，如何系统地、有根据地认识、评价设计，使其符合市场，就需要对设计因素再认识。利用界面分析法，正是使设计因素条理化，避免将人作为“生物人”的片面和走出笼统地说“设计=科学十艺术”的简单误区。

     现代的人机工程学和消费心理学为设计提供了科学的依据，它们的成功就在于实验、调查和数理表述，是较为可系的。同样对设计艺术而言，进行设计界面的分析，也要有生理学、心理学、文化学、生物学、技术学学科基础。从理论上来说，它要直接建立在信息论和控制论的基础之上。相对于机械、电子设计和人机设计，以往人机界面设计把握了技术科学的认识和手段，忽视了人文科学观念与思想。它的界面设计只能存在于局部的思考范围内，只成为一个设计的阶段。

     有人以功能论来评判设计。“功能决定形态”曾是20世纪上半叶的设计格言，它的提法是片面的。这是因为:第一，功能不是单一的，它包括使用功能、审美功能、社会功能、环境功能等。“过分追求单一的功能会导致将许多重要内容(装饰性、民族性、中间性)被排斥掉”。而且“有些内容并不是‘功能’的概念所能包括了的，更何况物质和精神的内容也并不是时时处处等质等量的融洽在一个统一体中，随产品的不同、时期的不同，它们各自的主次地位也随之变化”。在现今信息技术高度发展的时代，情感因素越来越成为设计的主要方面。物质意义上的功能在保持其基础地位的情况下，却日益不能代表情感诉求的表述;第二，按“形态服从功能”而设计的产品，对于不熟悉它的使用者来说是难以理解的，产品要为人们所理解，必须要借助公认的信码，即符号系统;第三，满足同一功能的产品形态本来就不是唯一的，象汽车等成熟的产品，年度换型计划等措施成为商品经济中日益不可避免的现象。社会经济发展到一定程度，才能出现设计的专业需求，而这时人们的基本物质需求已能满足，简单地以物质性功能来决定设计是不恰当的。

     相反，设计界面体现了人一物交流信息的本质，也是设计艺术的内涵，它包括了设计的方方面面，明确了设计的目标与程序。

四、设计界面的分析

     按照设计界面的三类划分，有助于考察设计界面的多种因素。当然，应该说设计界面的划分是不可能完全绝对的，三类界面之间有涵义上也可能交互与重叠，如宗教文化是一种环境性因素，但它带给信仰者的往往更多的却是宗教的情感因素。在这里环境性和情感性是不好区分的，但这并不妨碍不同分类之间所存在的实质性的差异。

五、设计界面的运用原则

     1)合理性原则，即保证在系统设计基础上的合理与明确。

任何的设计都既要有定性也要有定量的分析，是理性与感性思维相结合。努力减少非理性因素，而以定量优化、提高为基础。设计不应人云亦云，一定要在正确、系统的事实和数据的基础上，进行严密地理论分析，能以理服人、以情感人。

     2)动态性原则，即要有四维空间或五维空间的运作观念。一件作品不仅是二维的平面或三绝的立体，也要有时间与空间的变换，情感与思维认识的演变等多维因素。

     3)多样化原则，即设计因素多样化考虑。当前越来越多的专业调查人员与公司出现，为设计带来丰富的资料和依据。但是，如何获取有效信息，如何分析设计信息实际上是一个要有创造性思维与方法的过程体系。

     4)交互性原则，即界面设计强调交互过程。一方面是物的信息传达，另一方面是人的接受与反馈，对任何物的信息都能动地认识与把握。

     5)共通性原则，即把握三类界面的协调统一，功能、情感、环境不能孤立而存在。

六、设计界面的应用方法

     设计界面所包含的因素是极为广泛的，但在运用中却只能有侧重、有强调的把握。设计因素虽多，但它仍是一个不可分割的整体。它的结果是物化的形，但这个形却是代表了时代、民族等方面的意识，并最终反映出人的“美”的心理活动。

     设计界面的运用，核心是设计分析。在一些国际性的大公司，如索尼、松下、柯尼卡等，都有许多的成功案例可为借鉴。如柯尼卡公司设计其相机时，首先不是去绘制“美”的形和考虑技术的进步，而是进行对象人的日常行为分析，作出故事版(STORY)。它先假定对象人的年龄为35岁，名:Xxxx，从而分析他的家庭、喜好与憎恶，分析他的日常行为，进而考察其人在什么场合需要僚机，从而为设计提供概念(CONCEPT)与目标(TARGET)，进行设计。

     另一方面，设计师自身对社会环境也要进行深入的认识与考察，对设计的作品取向有明晰的认识:是否符合人们的消费预期?是否能感受到人们的审美知觉?日本设计师佐野邦雄先生曾作一图——生活的变迁与设计师的课题，将日本及世界上某些非常有影响性的事件，如技术的进步、企业的发展等等都进行了归纳，进而对设计有了深入的认识与感悟。

     所以，要运用好设计的界面，理性的认识是首要的，其次就是创造性的，而且是有实效性的分析、处理信息。设计不是一成不变的，分析方法也不是一成不变的，设计的界面同样是在人一物的信息交流中变化发展的。

功能性界面
     对功能性界面来说，它实现的是使用性内容，任何‘件产品或内外环境或平面视觉传达作品，其存在的价值首要的是在于使用性，由使用性牵涉到多种功能因素的分析及实现功能的技术方法与材料运用。在这一方面，分析思维作为一种理性思维而存在。如果作为一种处理方式来设计产品，则这种产品会使多种特征性(如民族性、纯粹性)因素中性化，如果去除产品商标，就很难认出是哪国的或哪个公司的产品。当然，这方面也说明了产品中存在着共同性因素，它使全人类能做出同样的反应。人的感觉和判断能力有着国际性的、客观性的特征。

     功能性界面设计要建立在符号学的基础上。国际符号学会对符号学所下定义是:符号是关于信号标志系统(即通过某种渠道传递信息的系统)的理论，它研究自然符号系统和人造符号系统的特征。广义的说，能够代表其他事物的东西都是符号，如字母、数字、仪式、意识、动作等，最复杂的一种符号系统可能就是语言。设计功能界面，不可避免地要让使用者明白功能操作。每一操作对人来说应是符合思维逻辑的，是人性的，而对机械、电子来说则应是准确的、确定无疑的，这双方的信息传递是功能界面的核心内涵。

情感性界面
     一个家庭装饰要赋予人家居的温馨，一副平面作品要以情动人，一件宗教器具要体现信仰者的虔诚。其实任何一件产品或作品只有与人的情感产生共鸣才能为人所接受，“敝帚自珍”正体现着人的感情寄托，也体现着设计作品的魅力所在。

现代符号学的发展也日益这一领域开拓，以努力使这种不确定性得到压缩，部分加强理性化成分。符号学逐渐应用于民俗学、神话学、宗教学、广告学等领域，如日本符号学界把符号学用于认识论研究，考察认识知觉、认识过程的符号学问题。同时，符号学还用于分析利用人体感官进行的交际，并将音乐、舞蹈、服装、装饰等都作为符号系统加以分析研究，这都为设计艺术提供了宝贵与有借鉴价值的情感界面设计方法与技术手段。

环境性界面
     任何的设计都要与环境因素相联系，它包括社会、政治和文化等综合领域。处于外界环境之中，“是以社会群体而不是以个体为基础的”，所以环境性因素一般处于非受控与难以预见的变化状态。

     联系到设计的历史，我们可以利用艺术社会学的观点去认识各时期的设计潮流。18世纪起，西方一批美学家已注意到艺术创造与审美趣味深受地理、气候、民族、历史条件等环境因素的影响。法国实证主义哲学家孔德指出:“文学艺术是人的创造物，原则上是由创造它的人所处的环境条件决定。”法国文艺理论家丹纳认为“物质文明与精神文明的性质面貌都取决于种族、环境、时代三大因素”。无论是工艺美术运动、包豪斯现代主义或20世纪80年代的反设计，现代的多元化，“游牧主义”(Nemadism)都反映着环境因素的影响。

     环境性界面设计所涵盖的因素是极为广泛的，它包括有政治、历史、经济、文化、科技、民族等，这方面的界面设计正体现了设计艺术的社会性。

     以上说明了设计艺术界面存在的特征因素，说明在理性与非理性上都存在明确、合理、有规则、有根据的认识方法与手段。

     成功的作品都是完善地处理了这三个界面的结晶。如贝聿铭设计的卢浮宫扩建工程，功能性处理得很好，没有屈从于形式而损害功能;但同时又通过新材料及形式反映新的时代性特征及美学倾向，这是环境性界面处理的典范;人们观看卢浮宫，不是回到古代，而是以新的价值观去重新审视、欣赏，它的三角形外观符合了人们的心理期望，这是情感性界面处理的极致。

1. 漂亮并不意味着有效：统计数据是你的朋友！

设计师喜欢炫耀设计作品集。它看起来是极好的，但是商业人士喜欢看数字。在那个选择上面的折合率是多少？用户在网站上的离开率和平均时间是多少？在首页上面最常点击的链接是什么？
对于一个商业人士来讲，”美丽“或是”视觉酷炫“只是第一步。他们真正关心地只是是否”美丽“或是”视觉酷炫“能转化成更多地的销售业绩。这里更为糟糕的事情是典型的”全flash“网站，它看起来是很华丽的，但是完全不能使用或是更新。每件事情都有一个成本和收益的权衡，当然这也包括设计。
比较一下这两个网站。第一个是来自 2Advanced Studios 以及包括一些非常新奇的动画效果。
第二个是来自 Perry Marshall，其用Google 关键广告词进行售书。

尽管有点丑的，但是我们对Perry的网站在获得新客户方面所产生的意义表示认同。其网站在其他方面可能不是很好，但是这取决于网站的目标。至于哪一…

2.每个设计应该有一个预测的目标

谈及的目标如果是”构建XYZ的品牌“或是”创建一个虚拟商店“，那么这对于一个关注商业的人士来说基本上是毫无意义地。目标应该是具体化的，可预测的。
可预测目标的具体体现是什么？引领市场，增加销售，来电数目，增加注册人数，捐款人数，广告链接收入，网页排名等等。良好的方法应该是向客户展现一份真实的数据，例如该设计方案在过去一段时间内有效地增加了35%的用户注册人数，而不是试图以”视觉设计上具有吸引力的注册表单会吸引更多的访问者“来说服对方。

试着告诉商业人士：”我们分开测试了这个网站，A方案的成功注册率为21%，而B方案为38%，这个数据的自信区间是非常窄”。现在你正在理解他们的商业语言！

3.你的网站应该有一个清晰的路径

正如一个客户访问你的网站，你想掌控他们看到的第一样东西，接着是第二，第三，直到完成你为他们设定的目标路线。换句话说，他们已经进入你“漏斗”或是“斜插”网站。

在一个页面上给用户很多不同选择的典型方式得到了验证其效果是不好的。用户不想费力地考虑如何使用你的网站。satisfice的用户—考虑了呈现给客户内容的最佳方式。你应该掌控访问路径上每一步的东西，另外，当你是以一系列“过程”来构建你的网站而不是像迷宫一样的毫无步骤时，美妙的事情就会发生。
请看一下this site的第一页（下面展示了其截屏）。说真的，前往试一下，然后回来。我等着。

好了，你感觉怎么样？让我猜一下你浏览页面的准确路线。首先你看到了左上角的网站标题和标志，接着在你撇一下电话号码之后，你看到了大字标题“Successful blogging starts with…”。最后，你大概看一下作品集以及阅读两个次级标题“Get Started Now”和“Learn to market your blog”。我接近了你的浏览路线了吗？
打开你自己的网站然后从你的显示器前面后退十步。看一下在屏幕上哪些东西还是突出的？这些能够凸显出来的元素和周围的空间是有对比的，能够帮助你掌控用户的视线焦点。甚至用眼球追踪仪能够做更好的视线焦点分布研究。你所要记住地关键点是在你设计这些信息地时候，最重要是要引导你的用户体验你的网站，避免让用户成为“快乐使用后退按钮的达人”。

4.记住瑞士军刀

我曾经听过关于设计的最好比喻之一是来自Google的Marissa Mayer的。她说Google像设计瑞士军刀那样去认真考虑公司产品的设计。瑞士军刀的很多功能都是整洁地摆放在刀体内，但是你却不能一下子全部看到。用户第一次来到网站地时候，可能只是看到主刀打开了。很快你就明白这样做地好处和目的是什么：它是一把刀。但是对高级用户来说，仍然是可以看到其他功能的缩略图，以便在他们需要使用这个功能地时候能打开它。
许多用户的网站同样像瑞士军刀那样功能齐全，不同地是他们把这些功能全部展现在访问者的面前。首次访问的用户可能会想，“这个网站主要是做什么的？”。如果那样的话，你的网站也就完了。访问者会在Google上面选择其他的网站。

用一个清晰的路线和目的来保持网站的简洁。由于页面上多余的材料所引发的混乱和分心会对整个网站产生不良的影响。一定要坚定地去除设计当中不需要的元素。

5.提供业绩指标

最后，如果你真的想给商业人士留下深刻的印象，讲一些如何执行设计的报告。这个没有必要很精美的–可能就是一些电子表格（这些商业人士对电子表格情有独钟），你能像Google 的分析报告那样来完成一些基础指标的分析，例如访问人数，在线时间，最佳的浏览路径，以及甚至转化率的目标。

只要在这方面花点精力就能立即让你与那些永远不考虑这些事情的其他设计师与众不同。不管你的客户是谁，都将更喜欢和他的同事说，“你知道他们为什么能得到项目，因为他们不仅设计它而且他们理解设计背后的目的，我真是很喜欢他们。”随着发展，你会获得成长到下一个级别的机会。

总结

这篇文章可能有点冒犯一些设计师。你也许认为这是偏离主题的，不是你所关心的，或是对好的设计起到反作用的。那就这样好了——继续做你的所谓工作吧。
讲客户能够理解的语言在任何商业里都是保持良好沟通的关键。特别当你深入某一个领域以及变为专家时，很容易忽略这样一个事实，那就是世界的其他领域并不是像你想象那样简单。
拿医生做个例子吧。他们上了如此多学和学习了如此多的科学知识，以至于当你看到他们一群人在聊和医学相关的话题时，你会毫不夸张地认为他们在用另外一种语言的。但是当和病人沟通时，解释他们的病情时，他们就会转换语言的，以病人能理解的语言。
作为一个伟大的设计师，你能做同样的事情以及在给你客户带来价值方面变得更加有效。

        Vadim提到，他在一个有数百个评论的热门帖子中发现一个有趣的现象。那个帖子页面有如上所示的评论表单。他发现一些人回复帖子时将网站地址一项填为“none”或“n/a”。

        网站地址不是必填项，不过这明显是被曲解了。上边的两项：姓名和邮件地址为标为必填，而其它项目并没有。一点让人困惑的是，评论内容也是必填的，而表单的设计则暗示你应该足够聪明能理解这一点。

优秀的评论表单设计

        理想的表单设计是什么样的？

        UX Matters发表过一篇名为《表单中的标签位置》的优秀文章。其发表的发现基于眼球追踪研究，所以文中建议非常真实权威。

        总结一下的话……结论是文字标签应该放在文本框上方，可以使文字与文本框之间的视线距离最短。如果将文字放在文本框 左侧，至少也要右对齐，同样，为了减少视线移动距离。而粗体字表现不佳，尽管此现象的原因尚存疑惑。（译注：《表》文中提到粗体字会让用户识别文字标签的 时间延长60%。）

        所以理想的评论表单是文字标签与文本框的距离很近，最好是在其上方。那表单项的顺序呢？大多数是由昵称开始，然后是邮件地址、网站地址，最后是评论内容。很多Blog和网站都是这样设计的。我想质疑这是否是最好的顺序。

        我的一个朋友如下布局他的评论表单：

        这一挑战惯例的表单以评论内容开始，随后才是评论者信息。这样你可以先说出你的评论，最后对你的评论签名。人们写信时是这个顺序。你首先写出信件内容，然后签上你的名字。我觉得评论表单这样设计更有意义。

        当然，这个表单并不完美，因为访客需要观察右侧填入名字和邮箱地址，再返回左侧寻找提交按钮。下面是我觉而更好的设计。应用在了Particletree Blog：

        非常棒。我们以评论内容开头，接着下边是评论者信息。文字标签和文本框很近，并且在其上方，就像UX Matters推荐的那样。提交按钮在整个流程的最下方，并在所有文本框的下方中央。必填项由红色星号标出。

        我也会在Usability Post上试试。

        你怎么认为？普遍使用的评论表单就工作的不错？还是更喜欢我的改变表单顺序设计？我想知道你们的想法。

用户界面应该进行教导

      用户界面需要教导你的用户如何在不求助帮助系统的情况下去使用你的程序。许多开发人员想当然地认为用于教导用户如何操作程序的全部功能的帮助系统足够了，然而这不是实际情况的。
     大部分基于网络或是其他媒介的程序的帮助系统，最终都是由那些试着探索程序的每个角落和漏洞的高级用户来使用的。帮助用户理解你的程序是如何运行的合适方法是以易于理解的形式给他们带来帮助系统。
     内嵌小贴士和界面描述对界面本身和它是如何运行地起到了重要的作用。比起切断式的FAQ功能或是帮助系统来说，在界面一旁提供帮助简介对用户来说更容易将相关说明和如何应用你的网络程序功能联系在一起。 
     Nourish是一个可以对任何RSS种子生成自动化的时事通讯电子邮件。整个界面以内嵌的方式记录了描述性的帮助模块，一旦用户决定他们不需要帮助了，该模块可以很容易地关闭。为了防止用户忘记如何操作一些功能，其网站帐户的个人信息部分里提供了再次启用所有帮助模块的功能。
     37signals通过采用像Basecamp的交流管理程序的简单方式来完成对他们用户的帮助。该模块在其模块页面部分并没有展示任何的内容和数据。这个页面只是提供了一个如何创造模块内容的介绍视频的链接。这是很好用的。
     Last.fm

     Persona发展背景

     这一部分主要从两个方面来阐述，第一方面，什么是Persona？简单说来就是，用大量收集来的并经过处理的真实有效的数来具体描述并构建一个虚拟人物的。它不但是很强大的，能用来快速创建产品且成本效益很高的设计工具，而且拥有正确的功能和优良的品质。他是对由真实人物所提供地便于理解且准确的数据所构建出地虚构人物的详细描述。但是，需要记住地是，它不代表每个可能的用户，不是所存在设计流程的替代品。它就像雨后彩虹的七彩色，用来描述成千上万的用户。

     Persona 并不是真正的人，但是在整个设计过程中，却始终代表着人。虽然Persona 是虚构的，但是他们是通过十分严格及严谨的方式进行定义的。由名字和个人细节所组成的Persona是它们看起来更加地真实。值得注意的是，Persona 是通过他们的目标进行定义的，用户界面的设计用于满足他们的需求和目标。Persona 的构建是一个独立的过程，他并不是调查过程的副产品，可以为界面设计项目提供决策依据。

     另一个方面是，构建Persona的目的是什么？Persona让开发团队感受和了解用户的内心世界，同时过滤掉用户群中对设计形成干扰的怪癖，让开发团队能集中精力关注用户群中的典型动机和行为习惯，同时涉及到个体用户。Persona对开发团队来讲有以下几点好处：

    1.直通和感受用户的内心世界

    2.集中精力关注用户群中的典型动机和行为习惯，同时能涉及到个体用户

    3.利用Persona的知识可以在战略层次上，为使产品的卖点和目的更好的匹配用户的需求和目标而作出更好的决策。

    4.利用Persona的知识可以在策略层次上，为产品应该有多少功能，内容，以及感觉元素被组织和呈现而作出更好的决策。

    5.利用Persona作为一个在任何产品开发

     Persona的方法论和设计流程

     为什么要使用Persona呢？首先，单纯的数据是很复杂的，难于记住，内化，以及回忆。其实，Persona是富有生命力的，可进行自我修复，Persona所使用到的移情方法，个人经历，以及关系网贯穿于叙事情节和故事版，它比单纯的scenarios更加强大，易用。最后，Persona让设计团队关注目标用户的重要方面，简化复杂的外部世界，抓住用户的重要特质。

     一个典型的设计流程是，数据资源的收集和分析处理——对数据进行仿真阐述——转变成具有亲和力的图表、标签化、高度组织化——提炼出Persona的骨架——Persona。

     Persona案例

    近年来，越来越多的桌面应用程序移植到互联网上面的。没有了平台限制和安装要求且作为一种服务模式的软件看起来很吸引人的。网络应用程序界面设计的核心是网页设计；但是，它的焦点主要集中在功能上面。为了和桌面程序竞争，网络应用程序必须提供简单，直观的以及响应快速的用户界面，这样才能减少用户完成事情的时间和精力。   

    过去我们没有用应有的方法来关注网络应用程序，现在该是仔细地研究一些有用的技术和设计方案，以便使网络应用程序更加友好和漂亮的。这篇文章阐述了第一部分我们在现代网络应用程序上面关于设计模式和有用的设计方案的广泛研究。下面你将看到我们收集到的10个有用的界面设计技术以及成功地将其应用到许多网络应用程序上。

    请随时在评论中发表你的意见，方法以及代码解决方案。我们研究的第二部分将随即奉上：敬请期待。

1.需要的界面元素

    在用户界面设计中简洁是重要的。任何时候你在界面上所展示的控件越多，那么你的用户将要花更多的时间去了解怎么用你的界面。当有更少的选择时，可用的功能将变地更加明显和更易获取。然而简化一个界面是不容易，特别是如果你不想限制应用程序的功能。

   当你在Kontain’s搜索输入框中点击搜索链接时，一个类似的下拉框出现了。因此，如果你需要控制搜索控件所占的界面空间，你可以使用下拉菜单来选择你所要寻找的内容类别。收起这些选择就可以简化搜索框。

    使设计更加简化的方法之一是隐藏高级的功能控件。把最常使用的功能放置在你的界面上，其余的便可隐藏起来。你可以采取在桌面软件上非常常见的弹出框菜单和控件来达到这种效果。例如，你的搜索输入框有高级的过滤控件，那么可以在输入框尾部以特殊的下拉菜单方式将其隐藏。如果用户需要这些过滤控件，那么只需要一些点击便可使用。虽然决定哪些保留哪些隐藏可不是件简单的任务，但是可以根据每个控件的重要性和使用频率来进行判断。

当你在CollabFinder上点击搜索链接时，页面不会切换到新的页面。相反地，搜索框控件在当前页面下拉展开，直接开始你的搜索。

2.特殊化的控件

     对于在不同的情况下，选择正确的界面控件是非常重要的。不同的情况应该采取不同的方法进行处理，在设计界面任务时，采取特定的控件会显得更好。  

Backpack为选择提醒日期提供了一个简洁的日历控件。
      例如，你能通过使用下拉列表来选择某一天的具体的年月日日期。但是，和上图所示的特殊日历控件（Calendar pickers）相比，下拉框显得不是非常有效的，你不能直接点击所想要日期。相比于简单的下拉列表控件，Calendar pickers 也能帮助你更容易地看到天，周，月（特别是工作日和周末）以及允许你更加快速地做出一个通知决定。

 MyBankTracker’s的滑动控件APY具有计算器功能，它能快速核算出不同项目的收益情况。

    这方面另外一个好的案例是滑动控件。是的，你可以一直手动输入一些数字，但是对于一些特殊情况，滑动控件可以做的更好。你不但很容易的使用，只需点击和拖动，而且你可以了解到你的选择在最小值和最大值的有效范围内是否合适。

3.不可点击的按钮

    网络应用程序在由表单所引发的问题之一是提交流程。对于非常简单的表单，如果你非常快速的点击“提交”按钮两次或是更多次，表单将同样被提交两次或是多次。这显然是有问题的，因为这将产生许多重复的提交副本。阻止副本的提交并不是很难的，对于大部分的网络应用程序来说，这是理所应当的。
   对于这个安全措施应从两个端口来进行验证设置：客户端和服务器端的。我们在这里将不会利用服务端器的安全措施，因为这个是基于你所使用的程序语言以及后台架构。你真正应该做地是在客户端进行一次验证，这保证了在表单提交阶段，任何正在提交的内容都不是副本，如果出现是副本的情况，将会阻止它。

在Yammer里，当你的新信息正在提交地时候，“上传”按钮将不可用。
    客户端的设置将更加简化。你所需要做地事情是在“提交”按钮被点击的瞬间使该按钮不可用。最容易的方法是对“提交”按钮控件所属的代码行增加一段JavaScrip，其代码如下：

<input type=”submit” value=”Submit” onclick=”this.disabled=true” />

    当然，我们也会建议你在服务器端进行验证，以确保副本不会被提交。

4.阴影边角的模态对话框窗口

    弹出框菜单和窗口周围的微量阴影并非华而不实的。它们通过加强周边尺寸来使菜单和窗口从背景当中凸显出来。它们利用阴影来暗化窗口周围的区域以达到降低窗口下面内容所引起的噪音。
    在传统的桌面应用程序中，这一技术覆盖了底部的内容以帮助用户能集中注意力于出现的窗口。由于大部分的模态窗口不容易从主内容界面凸显出来，因此，阴影使它们离读者更为接近，因为窗口看起来像是三维的放置在主界面之上。

Digg’s的登录窗口的四边有比较宽厚的阴影区域来降低页面底部的信息噪音。
    为了达到这种效果，设计师经常设计出一个拥有透明度的PNG图像并作为背景的容器，在这容器里面放置内容-容器四边拥有等距离的内边距。另一个选择是使用一个带有透明边框的背景图像以及把内容放置在运用了绝对定位的盒子模型里面。这就是Digg所做的-这是他们所使用的图像（dialog.png）。这是他们所使用的标记语言和CSS样式：
（X）HTML:

<div id=”container”>
<div style=”display: block; top: 236px; opacity: 1;”>
<div>
        <div>
        …
        </div>
        </div>
        </div>
      </div>

CSS:

.dialog {
    position: absolute;
    left: 50%;
    margin-left: -315px;
    width: 630px;
    z-index: 100001;

}
.dialog .body {
    background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */
    padding: 40px 13px 10px 40px;
}

      另外，你也能用基于JavaScript的轻盒子或是使用CSS3-属性的微量阴影我们早前已经介绍过的，但是你需要注意的是IE浏览器不支持这些的。

Basecamp’s 的项目切换窗口四周的弱阴影使菜单区域凸显出来。

5.提示语告诉你该做什么

      当你在设计一个网络应用程序的时候，不仅用样本数据进行测试是重要的，而且确保在没有数据地时候看起来也是好的和有用的显得同样重要。你应该设计提示语。
      当一个页面没有信息时或是有疑问时，在界面上空的地方放置一句有帮助的信息提示来告诉用户怎么开始将是有益的。例如，一个项目管理应用程序的首页可能会列出用户的项目，但是如果没有项目呢!你应该提供一个创建项目页面的链接，额外的帮助是有益的。

当你开始构建一个邮件活动地时候，Campaign Monitor为你指引了正确的方向。
      这项技术鼓励用户实际地使用所提供的服务以及在注册后直接着手使用服务。通过应用程序的简单步骤来引导用户可以帮助他或是她理解应用程序所提供的优点是什么以及是否有用的。只为用户提供最重要的选择也是很重要的，提供众多的选择是不明智的。记住用户通常想获得为他们所提供的或多或少的具体想法，但是他们不想涉及太多的细节–他们对此即没有时间也不感兴趣的。
      使用提示语来刺激用户和鼓励用户采取行动，对于减少用户中途退出网站的数量是非常有意义的，同时，帮助潜在的客户更好地理解系统是如何工作的。

 如果没有表单存在的话，那么Wufoo’s的表单页面会有一个较大的，友好的信息提示邀请你创建一个新表单。
 

6.已按按钮提示

      许多网络应用程序有自定义风格的按钮。这些锚或是输入按钮用自定义的图像作为背景的。默认的输入按钮可能在一些情况下是不合适地，文本链接有时候不明显地。挑战就在于，当链接看起来像按钮时，它们的行为就应该像按钮-当然这包括用户点击按钮后的“已按”状态，让用户清楚地知道按钮处于已点击状态。
      这并不是纯粹地视觉设计。给予用户快速地信息反馈将会使应用程序得到更好地响应以及为用户带来的体验更加接近桌面应用程序。
      你可以添加一个通过定义链接的激活伪类的CSS样式的按钮状态 比方说，如果你的锚点已经定义了一个名字为add_task_button的类名，那你就可以添加add_task_button:active来定义它的激活状态

当你点击时，Highrise中的按钮就变成了已按状态，给用户提供了令人满意的响应反馈。

 7.从登录页面链接到注册页面

      还未注册你的网络应用程序的用户将可在登录页面直接完成相应的注册。他们可能想试用你的应用程序但是一时找不到注册页面的。可能他们试着获得一个只有注册用户才有的功能。

仍然没有一个Delicious的帐户吗？没有问题的；在Delocious登录页面提供了一个注册链接。

Goplan在登录页面有一个彩色的按钮指向注册页面的。
      对这些用户来说，在登录页面放置一个注册链接将使事情更加简单。如果你仍然没有一个帐户，你也没有必要寻找一个注册页面。我们的研究表明：18%有登录表单或是登录表单的链接的旁边放置了注册链接（例如, YouTube, Reddit, Digg, Lulu, Metacafe）。

8.上下文相关的导航

      考量用户在所给的上下文环境中期望看到的东西和所需要的东西是重要的。你不需要在每个地方展示相同的导航控件，因为用户确实不需要在每个上下文环境中看到它。
      最好的上下文相关的控件案例之一是微软在Office 2007界面上的最新变化，默认的工具条设置变成了缎带状的控件。在其上的每个标签里都有不同的但是行为类似的控件，有编辑图像，校对，写作。网络应用程序同样能从上下文相关的控件中获益，因为这些控件可以通过只显示用户所需要来使界面简洁干净，而不是显示所有可用的。

Lighthouse有个相似的标签导航菜单；但是，系列标签下面有二级菜单。这个级别只是展示了和网页相关的动作行为。

9.更多的强调关键功能
    

      并不是所有的控件都一样重要的。例如，在页面上创建一个新的项目，可能会有两个按钮：“创建”和“取消”。由于“创建”功能是用户在大部分时间都要用到的，因此“创建”显得更为重要的。只有很少的情况下，用户会取消页面。因此，如果这些控件被放在一起，你可能不想给它们相同的强调。

上图是Lighthouse的“创建标签”按钮。你可以看到“取消”链接以纯文本方式放在它的旁边。这不仅给了创建按钮更多地可点击区域，而且帮助用户在搜寻该按钮的过程中获得更好地视线焦点。

10.嵌入视频

      虽然图片和文字是一个传达和教你的应用程序功能给用户的好方法，但是如果你有资源制作成视频，那么视频资料将是一个更好的选择。最近几年，视频在网上已经广受欢迎。视频一般应用在市场性的网站上，是用于炫耀产品的视频秀。但是这不是使用视频的唯一方法。

GoodBarry在首页上放置了一个视频用于炫耀它的产品功能。在视频秀里面告诉了用户怎么样开始使用该产品。

MailChimp在管理面板里面包含了视频教程用于帮助新用户。

      一些网络应用程序在程序内使用视频本身来教导用户如何使用特定的功能。视频是一个快速告诉用户如何使用你的产品的极好方法，因为它让浏览者完全地了解到如何使用产品，所以它比起整页的纯文本更易消化，更清晰。