Web表单设计

按有用程度 按页码先后 最新笔记

• 

  第80页

  酸奶-ing (ued书虫群106333963)

  这是我对这本书的最后一部分小记了，这部分主要是关于Web表单交互方面的。总体来说，这部分内容很基础，我们在使用表单过程中可能都会有这些总结。毕竟Web表单也只是网站设计中的一个功能控件而已，作者用一本书的容量来承载它，着实有点过于详细，也有其啰嗦细致之处。下面只是一些重要又容易忘记的设计点，对具体的表单设计应该会有很多的帮助： （一）即时验证 确认：对输入的账户或密码，即时显示错误，以免表单填完才发... (更多)

  这是我对这本书的最后一部分小记了，这部分主要是关于Web表单交互方面的。总体来说，这部分内容很基础，我们在使用表单过程中可能都会有这些总结。毕竟Web表单也只是网站设计中的一个功能控件而已，作者用一本书的容量来承载它，着实有点过于详细，也有其啰嗦细致之处。下面只是一些重要又容易忘记的设计点，对具体的表单设计应该会有很多的帮助：

  （一）即时验证

  确认：对输入的账户或密码，即时显示错误，以免表单填完才发现有错误，增加不必要的操作。如：有效账户名、密码格式和密码安全条显示等。

  建议：当用户输入错误或没有明确的意图时，给用户以适当的建议。如：有效的相似用户名和相近的地址。

  限制：如有输入限制，应实时、动态更新的方式传递输入限制。

  （二）减少用户操作

  去除多余的问题，这在第一部分已经讨论过

  智能默认，掌握用户的操作习惯和选择意向，对一些有把握的选项（了解大多数用户会选择的选项）设置成默认选项，避免用户多余的操作。如：买家下订单的寄货地址可以采用默认上次地址。但是，如果没有把握，就不要随便设置默认，这样会给用户带来不必要的困惑。

  （三）基于选择的输入

  根据对初始问题的回答要求人们继续回答，我的理解是，就像是调查问卷中的选择型问题，如果你早期回答是你使用过人人网，那么你后来的问卷就是针对人人网设置的一系列问题。几种展示方式：

  3.1 水平选项卡：点击每个水平选项卡，选择性输入会显示后续问题。

  问题1：很多人自上而下填写表单，会忽略水平选项卡

  问题2：水平选项卡之间不能表现明显的互斥关系

  问题3：眼部热点图显示，人们眼睛阅读选项卡时需要经常从屏幕左侧移动到右侧。违背了“清晰的浏览线”原则。

  3.2 垂直选项卡：选择性输入后，后续问题会显示在初始选择的右侧。

  优点1：单选项表明了选项之间的互斥关系

  优点2：隐藏了无关的非选择后续问题，提高了用户完成速度

  优点3：清晰的浏览线

  3.3 下拉列表：允许人们在潜在初始选项的长列表中选择后续问题，不占用大量屏幕区域

  3.4 下方显示后续问题：将后续问题显示在初始问题下方的一致位置

  (收起)

  2011-03-29 14:36:58   4人收藏   回应

  收藏

  推荐
• 

  第55页

  酸奶-ing (ued书虫群106333963)

  原文地址：http://blog.sina.com.cn/s/blog_633a026d0100pp9e.html （因无法传图，可参考原文） PS:对于一个电子商务网站，一个社区网站，或者一个生产力网站来说，Web表单设计是如此重要，关系着网站的生死存亡。我看完这本书，发现介绍的设计原则和研究理论其实很简单也很容易理解，但却不容易被我们发现和总结，这是一个值得我们深思的问题。在可用性研究、认知心理学、交互设计理论和视觉思维研究的共同基础上，Luke Wroblew... (更多)

  原文地址：http://blog.sina.com.cn/s/blog_633a026d0100pp9e.html （因无法传图，可参考原文）

  PS:对于一个电子商务网站，一个社区网站，或者一个生产力网站来说，Web表单设计是如此重要，关系着网站的生死存亡。我看完这本书，发现介绍的设计原则和研究理论其实很简单也很容易理解，但却不容易被我们发现和总结，这是一个值得我们深思的问题。在可用性研究、认知心理学、交互设计理论和视觉思维研究的共同基础上，Luke Wroblewski归纳出了这些易用和好用的web表单设计理论。我试图怀着一颗感恩的心去读完这本书。

  对于一个网站来说，用户体验的五个要素是：战略层（网站目标和用户需求）、范围层（功能规格和内容需求）、结构层（交互设计和信息架构）、框架层（界面设计、导航设计和信息设计）和表现层（视觉设计）。对于一个Web表单来说，用户体验的三个主要因素是：表单结构（框架层）、表单元素（范围层）和表单交互（结构层）。这本书正是从这三个方面来分析Web表单存在的一些可用性问题，并阐述如何更好地设计Web表单。

  表单设计的重新设计

  用户体验和设计团队通常通过搜集可用性数据、客户支持记录、网站日志和网络惯例，来提出重新设计表单的建议。这些数据的分析如下（个人很期待使用方法2和3，挖掘定量的数据，分析定性的结论，说服力很强）：

  1. 可用性测试——得到定性和定量信息

  •错误或问题的数量和位置

  •错误或问题的严重程度

  •完成率

  •完成整个表单或部分表单的时间

  •满意度评分

  •任务主观评论

  2. 网站跟踪——量化用户的操作数量

  •完成率

  •人们访问表单的方式，从哪进入表单的

  •如未完成表单，在哪个位置放弃

  •已使用表单哪些元素

  •已输入哪些数据

  •人们浏览器和操作系统的信息

  3. 眼动跟踪——记录人们如何理解表单的表现形式

  •人们在表单上看到了什么

  •眼球固定次数越多，说明解析表单越困难

  •眼球固定在一个元素的时间越长，说明人们看这个元素花费时间越长

  4. 客户支持——了解用户问题

  •最多的问题

  •解决这些问题的常见办法

  •报告人的统计信息

  •报告人使用的浏览器设置及操作系统

  5. Web惯例调查——比较相似网站的设计方案，找出网上通用的模式或独特的设计解决方案

  6. 实地测试——从人种学角度出发

  •表单填写环境：吵闹的办公室或...

  •任何说明表单完成或错误率的额外情境

  第一部分的小记先从表单结构方面开始吧...

  （一）表单组织对于表单设计至关重要，一个好的表单组织要做到以下三个方面：

  1.尽可能选取少且合适的问题。设置问题前要问自己两个问题，这个问题一定要问用户吗？这个问题是否符合情境，是否与用户填完表单能获得的东西符合。“保留”必需的问题，“删除”不必立即得到答案或不符情境的问题，“延迟”那些营销性的问题，比如你对我们网站印象如何等，“解释”那些有点过分的问题，比如填写用户的身份证号码。

  2.合理设计标签和输入框，构建自然的对话。其一，输入框作为提问的一部分，限定了回答的范围，使用户更容易填写，如*月*日等；其二，标签可使用询问的语气或模仿自然对话的方式；其三，标签应避免非用户用语。

  3.清晰合理的内容组织。将问题分成有意义的组，分到单个或多个页面。同时，可选性营销问题放在表单填完之后，回答率会增加，因为人们觉得这样侵略性较弱。分割内容组的方式尽可能简单：细线条、粗体字或浅背景+粗体字等。（少点视觉信息有助于保持焦点在表单内容，而不是表现形式，避免不必要的视觉噪音。同时，无助于布局的视觉元素都会损害布局的。）

  （二）表单结构方面的细节设计也同样重要：

  1.表单的命名，应使用户明确填完表单能获得什么。（因为获得毕竟是用户最关注的）

  2.起始页对表单的说明。如果填写时间较长或填写信息比较特殊而可能会影响到用户完成表单，那么设计者就应该在起始页对这些进行说明：填写完成时间、哪些信息、账号类型等。

  3.浏览线要清晰。从尼尔森的一篇研究报告中，我曾了解到人们浏览信息和仔细阅读信息的方式是不一样的。尼尔森研究结果显示，人们在浏览信息或菜单时，倾向于垂直式浏览，然而，人们在仔细阅读大篇幅的信息时，则更倾向于从左到右浏览。根据这个研究结果，我们可以推断出人们浏览表单应该和菜单一样，习惯于垂直式浏览，因此为人们提供垂直式的浏览线将能提高用户的填表效率。本书的结论也刚好与这个推断相吻合，我想Luke Wroblewski也应该是建立在这种视觉思维规律的基础上进行总结的吧。

  4.剔除无关的界面元素，减少注意力分散，消除因此放弃路径的可能。以前，我曾看到过一个“网站二级链接导致用户流失”的案例，这个案例充分显示了此设计原则的强大魅力。这个网站的原版图如图1，改版后如图2，经过改版，该网站的用户流失比例大大降低。很显然，图1中标示的一系列链接分散了用户的注意力，当用户尝试点击它时，却不小心退出了原来的提交流程，造成用户的流失。

  5.如有多个有序的网页时，表单应有进程指示。如支付流程的下订单——支付——确认收货等进程指示。

  (收起)

  2011-03-17 21:42:27   1人收藏   回应

  收藏

  推荐
• 

  第1页

  阿石

  我们每天都会上网，无论是电子商务网站，还是各种 SNS 网站，都会碰到五花八门的表格要填写。表单是横亘在网站商业目标与用户需求的一睹门墙，前者需要高额的订单金额和转化率，后者则是真的不愿多填写一个表单，我只想得到我真正需要的。而产品经理或者设计师处理表单时，这要精心雕琢这门墙的情境。 《Web 表单设计》就是这样处理这样情境的一本书，在总结以往表单设计失败案例基础上，将表单设计的指向”谁需要填写表单“、.. (更多)

  我们每天都会上网，无论是电子商务网站，还是各种 SNS 网站，都会碰到五花八门的表格要填写。表单是横亘在网站商业目标与用户需求的一睹门墙，前者需要高额的订单金额和转化率，后者则是真的不愿多填写一个表单，我只想得到我真正需要的。而产品经理或者设计师处理表单时，这要精心雕琢这门墙的情境。

  《Web 表单设计》就是这样处理这样情境的一本书，在总结以往表单设计失败案例基础上，将表单设计的指向”谁需要填写表单“、“用户为什么要填写表单”这样的问题本质上来？是由前Yahoo设计师 Luke Wroblewski ，他的官网是：http://www.lukew.com/

  这本书有以下三个部分：

  表单结构

  表单元素

  表单交互

  1 表单结构

  表单设计原则

  尽量减少痛苦——“不要让我思考”，“不要让我烦”，清晰流畅的浏览线，将注意力分散降到最低

  说明填写完成路径——让用户清楚如何实现目标，任务完成的进度提示

  考虑情境——表单填写的目标用户群，新注册用户，老用户？玩家？客户？还是智障用户？

  确保一致沟通——名词定义一致，如Tab键跳转等交互动作一致

  表单的内容及组织方式（标签、输入框、内容组）是表单的核心要素，而不是视觉和交互设计。表单设计的开始工作是“先考虑人”，考虑用户的真正关切，然后“再考虑像素”，考虑如何设计。设计表单可以遵循以下四个策略：

  保留——表单问题与用户期望给出大答案要一致。

  删减——不需要立即获取的用户答案信息可以去掉这个表单问题

  延迟——有些表单问题不需要马上就问，可以放到后续再问

  解释——比较棘手的表单问题可以向用户解释为神马，要让用户知道问的结果是给其带来好处

  2 表单元素

  表单不只是表格，它是由标签、输入框、交互动作等元素构成。

  1 ）标签

  一般讨论最多是标签该如何对齐，由顶对齐标签、左对齐标签和右对齐标签三种对齐方式，她们都有其存在的必要，具体则依赖于设计的目标。

  顶对齐标签，标签和输入框自上而下的布局，是填写表单的最快捷实现方式，充分利用横向空间的各种组合，但其缺点是稍占用垂直空间。其中需要注意的是相邻输入框间距最好为其50%~70%输入框的高度

  左对齐标签，标签一致左对齐，和输入框拉开间距，便于用户自上而下看标签，而不用急于填充输入框，比较适合高级设置的陌生或较难理解的数据。

  右对齐标签，标签一致右对齐，标签和输入框横向间距最近，可以尽量减少垂直空间，用户填充速度居三者之中。

  2 ）输入框

  输入框出现的目地是让用户可操作的组件，如文本框、单选按钮、下拉菜单等，如何使用各种不同的输入框，要看标签内容的问题，是什么（What）问题，是是否有无（Whether）问题，还是多选单选（How）问题。

  3 ）动作

  动作有主动作和次动作，如提交、保存、继续等为主动做，还有如取消、返回、充值等为次动作。主动作和次动作往往是同时出现的，如“提交和取消”这对组合，在设计上如果这两个按钮大小一致，颜色突出主动作是最佳的动作组合设计，用户完成时间最少。交互动作还有进行中的动作，一般出现于动作需要一定时间处理（如Gmail登录）或者动作的导向情况（如fanli.qq.com导向到其他电子商务网站）。

  3 表单交互

  1）尽量让用户少录入

  复杂的表单填写任务总是让用户烦恼不已，这一点尤其是新用户碰上了新产品上，而输入框中默认值（如邮箱后缀、日期时间等）是往往是最好的导师，尽量让用户较少录入，只需动鼠标就完成表单填写任务。另外额外多余的问题标签可以后移，可以隐藏，也可以以后再加。

  2）即时验证

  表单往往是多个元素混合组成的，用户在填写表单需要即时告知用户录入信息是否正确、完整，省却用户时间并给用户带来循循善诱累积的成就感。一旦出错或不完整，可以即时告知用户错在哪里并重新录入。

  4 读书小结

  Luke 在本书在扉页上写着“ 谨以此书献给每一位不得不填表的人”，不知是否翻译有误，感觉此书应该是奉献给“每一位不得不设计表的人”，是写给产品经理、UI和交互设计师等行业工作者。表单是网页的重要组成部分，表单设计的重要性毋庸置疑。表单也是产品和用户中间的一条槛，让产品有品质上档次，让用户又能轻松跨域，则是我们日常工作要不断尝试、不断反思、不断优化的。

  原文来自：http://www.ashnotes.com/read-web-form-design/ (收起)

  2011-02-27 15:44:50   1人收藏   回应

  收藏

  推荐

• 

  第1页

  阿石

  我们每天都会上网，无论是电子商务网站，还是各种 SNS 网站，都会碰到五花八门的表格要填写。表单是横亘在网站商业目标与用户需求的一睹门墙，前者需要高额的订单金额和转化率，后者则是真的不愿多填写一个表单，我只想得到我真正需要的。而产品经理或者设计师处理表单时，这要精心雕琢这门墙的情境。 《Web 表单设计》就是这样处理这样情境的一本书，在总结以往表单设计失败案例基础上，将表单设计的指向”谁需要填写表单“、.. (更多)

  我们每天都会上网，无论是电子商务网站，还是各种 SNS 网站，都会碰到五花八门的表格要填写。表单是横亘在网站商业目标与用户需求的一睹门墙，前者需要高额的订单金额和转化率，后者则是真的不愿多填写一个表单，我只想得到我真正需要的。而产品经理或者设计师处理表单时，这要精心雕琢这门墙的情境。

  《Web 表单设计》就是这样处理这样情境的一本书，在总结以往表单设计失败案例基础上，将表单设计的指向”谁需要填写表单“、“用户为什么要填写表单”这样的问题本质上来？是由前Yahoo设计师 Luke Wroblewski ，他的官网是：http://www.lukew.com/

  这本书有以下三个部分：

  表单结构

  表单元素

  表单交互

  1 表单结构

  表单设计原则

  尽量减少痛苦——“不要让我思考”，“不要让我烦”，清晰流畅的浏览线，将注意力分散降到最低

  说明填写完成路径——让用户清楚如何实现目标，任务完成的进度提示

  考虑情境——表单填写的目标用户群，新注册用户，老用户？玩家？客户？还是智障用户？

  确保一致沟通——名词定义一致，如Tab键跳转等交互动作一致

  表单的内容及组织方式（标签、输入框、内容组）是表单的核心要素，而不是视觉和交互设计。表单设计的开始工作是“先考虑人”，考虑用户的真正关切，然后“再考虑像素”，考虑如何设计。设计表单可以遵循以下四个策略：

  保留——表单问题与用户期望给出大答案要一致。

  删减——不需要立即获取的用户答案信息可以去掉这个表单问题

  延迟——有些表单问题不需要马上就问，可以放到后续再问

  解释——比较棘手的表单问题可以向用户解释为神马，要让用户知道问的结果是给其带来好处

  2 表单元素

  表单不只是表格，它是由标签、输入框、交互动作等元素构成。

  1 ）标签

  一般讨论最多是标签该如何对齐，由顶对齐标签、左对齐标签和右对齐标签三种对齐方式，她们都有其存在的必要，具体则依赖于设计的目标。

  顶对齐标签，标签和输入框自上而下的布局，是填写表单的最快捷实现方式，充分利用横向空间的各种组合，但其缺点是稍占用垂直空间。其中需要注意的是相邻输入框间距最好为其50%~70%输入框的高度

  左对齐标签，标签一致左对齐，和输入框拉开间距，便于用户自上而下看标签，而不用急于填充输入框，比较适合高级设置的陌生或较难理解的数据。

  右对齐标签，标签一致右对齐，标签和输入框横向间距最近，可以尽量减少垂直空间，用户填充速度居三者之中。

  2 ）输入框

  输入框出现的目地是让用户可操作的组件，如文本框、单选按钮、下拉菜单等，如何使用各种不同的输入框，要看标签内容的问题，是什么（What）问题，是是否有无（Whether）问题，还是多选单选（How）问题。

  3 ）动作

  动作有主动作和次动作，如提交、保存、继续等为主动做，还有如取消、返回、充值等为次动作。主动作和次动作往往是同时出现的，如“提交和取消”这对组合，在设计上如果这两个按钮大小一致，颜色突出主动作是最佳的动作组合设计，用户完成时间最少。交互动作还有进行中的动作，一般出现于动作需要一定时间处理（如Gmail登录）或者动作的导向情况（如fanli.qq.com导向到其他电子商务网站）。

  3 表单交互

  1）尽量让用户少录入

  复杂的表单填写任务总是让用户烦恼不已，这一点尤其是新用户碰上了新产品上，而输入框中默认值（如邮箱后缀、日期时间等）是往往是最好的导师，尽量让用户较少录入，只需动鼠标就完成表单填写任务。另外额外多余的问题标签可以后移，可以隐藏，也可以以后再加。

  2）即时验证

  表单往往是多个元素混合组成的，用户在填写表单需要即时告知用户录入信息是否正确、完整，省却用户时间并给用户带来循循善诱累积的成就感。一旦出错或不完整，可以即时告知用户错在哪里并重新录入。

  4 读书小结

  Luke 在本书在扉页上写着“ 谨以此书献给每一位不得不填表的人”，不知是否翻译有误，感觉此书应该是奉献给“每一位不得不设计表的人”，是写给产品经理、UI和交互设计师等行业工作者。表单是网页的重要组成部分，表单设计的重要性毋庸置疑。表单也是产品和用户中间的一条槛，让产品有品质上档次，让用户又能轻松跨域，则是我们日常工作要不断尝试、不断反思、不断优化的。

  原文来自：http://www.ashnotes.com/read-web-form-design/ (收起)

  2011-02-27 15:44:50   1人收藏   回应

  收藏

  推荐
• 

  第55页

  酸奶-ing (ued书虫群106333963)

  原文地址：http://blog.sina.com.cn/s/blog_633a026d0100pp9e.html （因无法传图，可参考原文） PS:对于一个电子商务网站，一个社区网站，或者一个生产力网站来说，Web表单设计是如此重要，关系着网站的生死存亡。我看完这本书，发现介绍的设计原则和研究理论其实很简单也很容易理解，但却不容易被我们发现和总结，这是一个值得我们深思的问题。在可用性研究、认知心理学、交互设计理论和视觉思维研究的共同基础上，Luke Wroblew... (更多)

  原文地址：http://blog.sina.com.cn/s/blog_633a026d0100pp9e.html （因无法传图，可参考原文）

  PS:对于一个电子商务网站，一个社区网站，或者一个生产力网站来说，Web表单设计是如此重要，关系着网站的生死存亡。我看完这本书，发现介绍的设计原则和研究理论其实很简单也很容易理解，但却不容易被我们发现和总结，这是一个值得我们深思的问题。在可用性研究、认知心理学、交互设计理论和视觉思维研究的共同基础上，Luke Wroblewski归纳出了这些易用和好用的web表单设计理论。我试图怀着一颗感恩的心去读完这本书。

  对于一个网站来说，用户体验的五个要素是：战略层（网站目标和用户需求）、范围层（功能规格和内容需求）、结构层（交互设计和信息架构）、框架层（界面设计、导航设计和信息设计）和表现层（视觉设计）。对于一个Web表单来说，用户体验的三个主要因素是：表单结构（框架层）、表单元素（范围层）和表单交互（结构层）。这本书正是从这三个方面来分析Web表单存在的一些可用性问题，并阐述如何更好地设计Web表单。

  表单设计的重新设计

  用户体验和设计团队通常通过搜集可用性数据、客户支持记录、网站日志和网络惯例，来提出重新设计表单的建议。这些数据的分析如下（个人很期待使用方法2和3，挖掘定量的数据，分析定性的结论，说服力很强）：

  1. 可用性测试——得到定性和定量信息

  •错误或问题的数量和位置

  •错误或问题的严重程度

  •完成率

  •完成整个表单或部分表单的时间

  •满意度评分

  •任务主观评论

  2. 网站跟踪——量化用户的操作数量

  •完成率

  •人们访问表单的方式，从哪进入表单的

  •如未完成表单，在哪个位置放弃

  •已使用表单哪些元素

  •已输入哪些数据

  •人们浏览器和操作系统的信息

  3. 眼动跟踪——记录人们如何理解表单的表现形式

  •人们在表单上看到了什么

  •眼球固定次数越多，说明解析表单越困难

  •眼球固定在一个元素的时间越长，说明人们看这个元素花费时间越长

  4. 客户支持——了解用户问题

  •最多的问题

  •解决这些问题的常见办法

  •报告人的统计信息

  •报告人使用的浏览器设置及操作系统

  5. Web惯例调查——比较相似网站的设计方案，找出网上通用的模式或独特的设计解决方案

  6. 实地测试——从人种学角度出发

  •表单填写环境：吵闹的办公室或...

  •任何说明表单完成或错误率的额外情境

  第一部分的小记先从表单结构方面开始吧...

  （一）表单组织对于表单设计至关重要，一个好的表单组织要做到以下三个方面：

  1.尽可能选取少且合适的问题。设置问题前要问自己两个问题，这个问题一定要问用户吗？这个问题是否符合情境，是否与用户填完表单能获得的东西符合。“保留”必需的问题，“删除”不必立即得到答案或不符情境的问题，“延迟”那些营销性的问题，比如你对我们网站印象如何等，“解释”那些有点过分的问题，比如填写用户的身份证号码。

  2.合理设计标签和输入框，构建自然的对话。其一，输入框作为提问的一部分，限定了回答的范围，使用户更容易填写，如*月*日等；其二，标签可使用询问的语气或模仿自然对话的方式；其三，标签应避免非用户用语。

  3.清晰合理的内容组织。将问题分成有意义的组，分到单个或多个页面。同时，可选性营销问题放在表单填完之后，回答率会增加，因为人们觉得这样侵略性较弱。分割内容组的方式尽可能简单：细线条、粗体字或浅背景+粗体字等。（少点视觉信息有助于保持焦点在表单内容，而不是表现形式，避免不必要的视觉噪音。同时，无助于布局的视觉元素都会损害布局的。）

  （二）表单结构方面的细节设计也同样重要：

  1.表单的命名，应使用户明确填完表单能获得什么。（因为获得毕竟是用户最关注的）

  2.起始页对表单的说明。如果填写时间较长或填写信息比较特殊而可能会影响到用户完成表单，那么设计者就应该在起始页对这些进行说明：填写完成时间、哪些信息、账号类型等。

  3.浏览线要清晰。从尼尔森的一篇研究报告中，我曾了解到人们浏览信息和仔细阅读信息的方式是不一样的。尼尔森研究结果显示，人们在浏览信息或菜单时，倾向于垂直式浏览，然而，人们在仔细阅读大篇幅的信息时，则更倾向于从左到右浏览。根据这个研究结果，我们可以推断出人们浏览表单应该和菜单一样，习惯于垂直式浏览，因此为人们提供垂直式的浏览线将能提高用户的填表效率。本书的结论也刚好与这个推断相吻合，我想Luke Wroblewski也应该是建立在这种视觉思维规律的基础上进行总结的吧。

  4.剔除无关的界面元素，减少注意力分散，消除因此放弃路径的可能。以前，我曾看到过一个“网站二级链接导致用户流失”的案例，这个案例充分显示了此设计原则的强大魅力。这个网站的原版图如图1，改版后如图2，经过改版，该网站的用户流失比例大大降低。很显然，图1中标示的一系列链接分散了用户的注意力，当用户尝试点击它时，却不小心退出了原来的提交流程，造成用户的流失。

  5.如有多个有序的网页时，表单应有进程指示。如支付流程的下订单——支付——确认收货等进程指示。

  (收起)

  2011-03-17 21:42:27   1人收藏   回应

  收藏

  推荐
• 

  第60页

  WHY要这样子

  

  在本文开始之前；允许我介绍一本书《Web Form Design:Filling in the Blanks》；他的作者就是 Luke Wroblewski ；在国内现在已经有这本书的翻译，早先是在网上看到他提供的PDF版本的书籍。因为个人英文水平有限，很多名词和专用术语都不是太理解，还好在豆瓣上看到这本书的中文版《Web表单设计：点石成金的艺术》没有犹豫就在第一时间买了下来。断断续续阅读了前面四章，而第四章是最打动我的部分。 大家在网上shopping的时候，最... (更多)

  在本文开始之前；允许我介绍一本书《Web Form Design:Filling in the Blanks》；他的作者就是 Luke Wroblewski ；在国内现在已经有这本书的翻译，早先是在网上看到他提供的PDF版本的书籍。因为个人英文水平有限，很多名词和专用术语都不是太理解，还好在豆瓣上看到这本书的中文版《Web表单设计：点石成金的艺术》没有犹豫就在第一时间买了下来。断断续续阅读了前面四章，而第四章是最打动我的部分。

  大家在网上shopping的时候，最后结算一定会碰到的表单。索性一起拿出来对比一下：

  1、当当网结算表单

  
  当当网购物车结算表单

  当当网未登录会员时的结算表单

  首先，我们来到这个页面的时候，第一眼显而易见就是界面外观很简洁，名称采用了左对齐，而其他元素采用了居中处理。每样物品的价钱和折扣都表现在每一行，干净，易于视觉流线，从做到右。但有一点，试想一下，你购物车里面的商品达到20个之多的时候，那么这个页面就相对在视觉信息上承载了太多。

  #个人建议，图片可以略去。可以采用鼠标经过书籍标题的时候再出现相关书籍的封面截图。

  还有一点，可以采用数字去刺激加强消费者的购物欲。如上截图的当当价，在当前的界面上，有足够的空间可以采用优惠前的原价，和优惠折扣后的价钱，在数字上对比。在当前的界面上也有折扣体现，只是没有那么明显的区分到底是在当当价的基础上再打折呢，还是当前的价格已经是享受折扣后的价格。那样消费者就会更加确定自己赚到便宜和实惠。间接的可以影响最后订单数量。

  有一点值得称赞，界面上对购物数量的操作，很方便，这样可以省去数字键盘的输入。

  2.北发图书网购物车结算表单

  
  北发图书网购物车结算表单

  以上的截图是来自chrome的浏览器下面，数据上面的显示。数据的标题显示有些凌乱，应该是对表单结构上的问题。

  先撇开网站的信息界面来说，整体还算整洁明了。

  缺点是：对结算最后提交的表单，略略有些草率。3个按钮直接采用系统默认的button，第一眼在视觉颜色上我们不看字会认为他们是等同的。所以在点击“提交订单”上面，需要浪费我们对3个按钮都对其进行扫描。

  建议，可以对提交订单按钮进行区别。对清空购物车这样的操作也进行区分。

  3.九久购书网结算表单

  
  九久图书网购物车截图

  九久网我没有在上面买过东西。但是它有一点做的很好，用数字激励用户；只是在价格的颜色上面，红色的粗体字在界面上太多。而且销售价的哪一行排版还不是太合理。在对比上就没有那么明显了，每次我需要扫描上面价格再跳到下面的优惠价格去扫描。视觉上总感觉有些不妥。可以试试将“为您节省”采用一致的横向排版。

  4.中国互动出版购物车结算表单

  
  中国互动出版网购物车截图

  中国互动出版网购物车截图

  中国互动出版网结算表单

  结算表单也是采用了清爽的浅蓝色来做引导线。整体还是蛮不错，标题栏的“商品”名称如果采用表格左对齐，视觉上势必会更好。标题栏的颜色可以采用深蓝一点的颜色加以提醒。

  交互操作过程这个界面会遇到一个麻烦，左下角的收藏和删除按钮是在一起的。如果我需要对一片文章进行删除或者收藏，我需要先勾选对应的商品名称，然后点击左下角的“收藏”/“删除”，才能完成操作。如果界面上能在商品的右边栏部分，单独增添 删除 | 收藏 来是实现方便操作商品。

  另外还有一点是似乎有点随便，就是人民币的符号“￥”的用法，像上面的表单出现的价钱表单出现的价钱的时候，我们采用符号来解释，只是辅助。但符号出现在上面的界面，略显有点繁琐。而且部分新手网友还不一定知道它代表的意思。可以采用在标题栏，市场价、你的价格、单品总价后面，带单位。 市场价（元）| 你的价格（元）| 商品总价（元）

  表格底部栏，可以试试采将商品的价格和结算按钮并为向右对齐的两行。那样眼睛扫描无需扫左边，再扫右边区域。

  5.卓越亚马逊购物车结算表单

  
  卓越亚马逊购物车结算表单

  卓越亚马逊的结算表单，不瞒说，我第一次在08年在用它的时候，好几次都点错地方了。因为在这个购物车界面，它将收藏的商品和实际购物车的商品一上一下的放置在画面中，不看左边标题，你会猛吃已经下面的订单是我刚才自己加载的吗？

  当然它这样大的幅面设计是简单明了。操作也很简便，只是它的购物车却是在页面的右边，因为它不是在界面的底部。我想这和他的前身很有关系。这些喜欢在美国应该是适用的，但在国内略显有些让人走错巷子，找不到路牌的感觉。

  6.文轩网购物车结算表单

  
  文轩网购物车结算表单

  文轩网的界面和当当有些类似，整体上的布局还是蛮合理的。数量的表单文本框可以适当缩短，没有人一次性输入购买上万本的书籍。优惠一栏在我的购物的途中并没有看到实习的体现，如%比或者是折扣数。

  7.豆瓣网推出的购书单：

  
  豆瓣网推出的购书单

  豆瓣网推出的购书单

  豆瓣推出购书单，其实作为广大的消费者还是很喜欢的，省去了到各大网站比对商品价钱的时间。同时豆瓣还可以拿到一定的分成。只是这样的价格对比，对于小众的购书网站就不利了。因为商品价钱的高低很大程度上决定了购买网名消费者的购物倾向。

  而豆瓣的购书单的亮点更是价格的比对上做的很直接明了。

  8.淘宝购物车结算表单

  
  淘宝购物车结算表单截图

  淘宝的购物车改版过很多次，以前的界面没有这么的易用。而且它带给我们的也是很享受的购物流程。左对齐和居中对齐在这里尽显魅力。表单信息元素的把握很到位。当然看到这个界面我会突然问，假设我来到这个界面，我有一个物品可能不是太急需，下次再买也行，那么我总不能直接删除吧。我要把它暂作收藏怎么操作呢。界面貌似没有给出这样的通道。当然淘宝的结算表单的清晰明了是值得各大网站学习的。画面中它叶没有采用太多的币种符号来辅助，而是在标题栏进行加注。和最后结算的总价的数字单位上进行诠释。而数量添加按钮也是一个亮点，它和当当网相反，是布置在文本输入框的两边，做加减法的提示。

  总体上述；可以发现，每个网站都可以摸索出适合自己的结算购物车。不能直接照搬，当然淘宝我们可以用来学习。因为人家做购物搜索也不是一两天了。看人家那商品搜索，那足足下了很大的功夫改善。才达到现在这样的便利性。很直接参考和学习。

  以上文本纯属个人观点。难免会有错误，敬请提出。

  我还要既继续阅读《Web表单设计》；更多心得下次在这里分享发布。另外我也推荐网页设计师去阅读本书噢，它一定不会令你失望的。

  –Web Form Design: Filling in the Blanks—书籍介绍链接；

  http://www.lukew.com/resources/web_form_design.asp

  Web表单设计：http://book.douban.com/subject/4886100/ 原文地址：http://blog.outwa.com/2011/02/let-me-talk-about-the-settlement-forms-the-major-shopping-sites/ (收起)

  2011-02-26 13:32:58   1人收藏   回应

  收藏

  推荐

• 

  第七章

  飞林沙

  1. 表单的帮助文字是一把双刃剑，和代码的注释一样，能不要就不要。如果每个表单元素都需要一长串帮助文字，那么我们就需要回到最初考虑一下这些问题都是否合理了。 在以下的几种情况下，表单的帮助文字是很必要的： A. 人们不熟悉表单需要填入的数据，比如什么是"PIN码" B. 人们质疑为什么要填入该数据，比如“生日” C. 人们关心数据安全和隐私，比如“地址，银行卡号” D. 系统推荐的填写方式，比如“... (更多)

  1. 表单的帮助文字是一把双刃剑，和代码的注释一样，能不要就不要。如果每个表单元素都需要一长串帮助文字，那么我们就需要回到最初考虑一下这些问题都是否合理了。

  在以下的几种情况下，表单的帮助文字是很必要的：

  A. 人们不熟悉表单需要填入的数据，比如什么是"PIN码"

  B. 人们质疑为什么要填入该数据，比如“生日”

  C. 人们关心数据安全和隐私，比如“地址，银行卡号”

  D. 系统推荐的填写方式，比如“逗号分割”

  2. 表单帮助文字的显示方式：

  我认为最合适的是动态显示，即当用户的鼠标光标在某表单元素上时，在旁边显示出帮助文字。但是这样做存在一个问题是，如果用户扫视一遍表单，发现内容比较难，又没有帮助，用户可能会放弃。

  此外，有一种做法是当鼠标移到某元素上时，在文本框上弹出一个浮层，但是我很反对这样的做法，因为我深受其害，这样会挡住其他的表单元素。

  还有一种做法是留出整个屏幕的右部来专门显示帮助文字，但是我不赞成这样的做法，因为这样会使用户的视线距离增大，影响填写表单的速度。

  有一种折中的做法是在需要帮助的元素旁，放置“问号”之类的提示帮助的元素，由用户主动触发，但是这也会影响网页整体的美观性。 (收起)

  2011-12-29 01:08:26   回应

  收藏

  推荐
• 

  第六章

  飞林沙

  1. 主动作和此动作： 有些动作完成了表单上最重要的行为，比如注册，登陆，提交等，这些被称为主行为。 次动作的使用较少，一般来说比如“撤销”，“重写”等。 本书作者的观点是在表单上就不应该出现次动作的按钮，因为次动作经常会让整个劳动都消失无踪。但是我觉得这个观点就有些极端了，举例来说，比如某一表单分成多页，那么“前一页”也属于次动作，但是这个按钮的存在性我想就无需多说了。 那么是否有必要将主.. (更多)

  1. 主动作和此动作：

  有些动作完成了表单上最重要的行为，比如注册，登陆，提交等，这些被称为主行为。

  次动作的使用较少，一般来说比如“撤销”，“重写”等。

  本书作者的观点是在表单上就不应该出现次动作的按钮，因为次动作经常会让整个劳动都消失无踪。但是我觉得这个观点就有些极端了，举例来说，比如某一表单分成多页，那么“前一页”也属于次动作，但是这个按钮的存在性我想就无需多说了。

  那么是否有必要将主动作和次动作再视觉上区分对待，在我看来也是没有必要的，否则多种视觉因素反而会分散用户的注意力。

  总之，在我看来，此动作尽量可以没有，但是一旦存在，就没有必要对其额外对待。

  2. 其他

  此外，应该尽量将主动作顺着用户的视线去移动，比如整个表单都是左对齐，那么主动作也应该左对齐，以让用户花费的视觉精力最小。 (收起)

  2011-12-29 00:35:50   回应

  收藏

  推荐
• 

  第五章

  飞林沙

  1. 输入框的选择是一个需要注意的部分，其中最常见的三个值得思考的是：文本框，单选框和下拉菜单。 就用购买的商品个数来举例： 用文本框的优点是方便，自然，但是在验证的时候就比较麻烦，因为需要在多一次判断来证明用户填的是正确的。 下拉菜单是最不容易被注意到的菜单，而默认是0的话，那在用户提交之后就会被“提示”，从而带来不好的用户体验。 而单选框遇到的问题其实和下拉菜单有个共性，就是只能购买固定个... (更多)

  1. 输入框的选择是一个需要注意的部分，其中最常见的三个值得思考的是：文本框，单选框和下拉菜单。

  就用购买的商品个数来举例：

  用文本框的优点是方便，自然，但是在验证的时候就比较麻烦，因为需要在多一次判断来证明用户填的是正确的。

  下拉菜单是最不容易被注意到的菜单，而默认是0的话，那在用户提交之后就会被“提示”，从而带来不好的用户体验。

  而单选框遇到的问题其实和下拉菜单有个共性，就是只能购买固定个数的，比如1——4，并且单选框最大的问题在于他需要抢占很多屏幕空间。

  2. 输入框的长度其实可以作为“暗示”。比如邮政编码的输入框的长度应该符合邮政编码的位数，这样会给用户以暗示。

  相反，如果在一个很短的问题启用一个很长的输入框，那么就会给用户以错误的暗示，让用户疑惑。

  3. 必填项用 ＊ 来标识几乎已经成了一个既定标准。那么什么时候需要标识出必填项，什么时候时候需要标识出可选项。作者认为，应该让页面上尽可能少地出现表单无关元素，也就是说，比如必填项比较少，那么就应该标出必填项。反之亦然。

  4. 如果输入框之间存在着自然结构，那么就需要通过视觉方式来对输入框进行分组。

  5. 弹性输入框。如果一个问题可能出现多种形式的答案，那么给出弹性输入框是很必要的。比如在填写电话时，可以填写手机，也可以填写固定电话，那么应该给出两种不一样的输入框，然后将这两种输入框用视觉方式分在一起。这个可以参考亚马逊。 (收起)

  2011-12-28 01:19:10   回应

  收藏

  推荐