陈振华 张宇红 (江南大学设计学院 江苏无锡 214122)

一、Web表单的相关概述

对于互联网而言，表单是电子商务、社交活动和大多数基于生产力应用类型网站的关键，相比较于现实世界中的多感官交流，表单是商家与用户交流的唯一平台，也是用户需求和商业目标之间的一道障碍，所以表单的完成率往往直接影响着商业目标的成功率。

对于任何表单，从非常简单直接的表单到花哨多彩的表单，每个网站可能都会呈现不同的风格。当考虑站网站的界面设计时，这些风格必定是你应该关注的元素。但是不论是登录/注册表单，还是联系表单，或者其他类型表单，我们只需要牢记一点：帮助用户完成信息输入。

二、Web表单制作的设计原则

第一，在合适的情境下保证和用户的流畅交流，减少用户的挫折感。设想当你在浏览网页时，如果在浏览网站前就必须填写相应的个人信息，这势必会引起你的反感，即使你愿意填写相关信息，很大可能上，你也会填写一套虚假的个人信息。反之，如果你完成了网购商品的付款流程，可是网站却不问你街道地址，你又会觉得很奇怪。

第二，选择合适的问题，并以最合理的方式组织起来，再辅以最人性化的语言表达，以表单为媒介构建用户和商家之间的互信。在选择表单问题的过程中，最核心的关注点应该是人，这个“人”既包括客户，也包括企业和组织。关注用户和企业的需求，平衡二者之间的关系，才能选择最有效率的问题。对于企业或者组织而言，之所以让用户填写表单就是为了获得用户的相关资料，从而更加有利于公司的发展，但是公司或者企业的各个部门对于信息的要求又有各自特点，这就导致表单会非常复杂，也是很多网站注册非常复杂的原因所在；从用户的角度看，最不希望填写表单——除非有利于帮助他们完成任务，因为没有人会愿意泄漏个人隐私而不能完成任何事情。

如何选择合适的问题？一般在选择问题的过程中遵从“保留、删减、延迟、解释”四大策略：对用户渴望给出答案的问题予以保留；对实际上不是真的需要的问题予以删除；对不急着马上知道答案的问题延迟发问；对公司的确需要但是用户不理解的问题予以解释。

第三，对表单的问题进行系统的归纳和区别。之所以对表单的相关信息问题进行分组，是为了保障对话的流畅。这样做不仅可以将较长而复杂的表单分割成几块，降低用户的恐惧感，同时系统的提问方式，符合用户的生活习惯，能够提高表单信息输入的完成率和准确率。

三、Web表单元素的设计方法

当你完成的表单基本问题的组织和框架设计，你就应该开始关注于问题之外的东西了，比如表单名称、表单的起始页、用户浏览效率以及最重要的进程指示等，而所有这些都是以表单组成要素为基础的。

1.表单名称

表单名称和表单起始页的优秀设计，能够拉近用户和企业或者组织之间的距离，消除隔阂，让用户能够清楚的知道为什么要填这个表单，如何才能完成这个表单以及需要花多长时间。对于提高用户的浏览效率，主要有提供合适的功能分块(比如浅色的线条和冷色系背景色块)、色彩的使用和按钮数量和摆放位置。

2.标签

对于标签除了合适命名，更多的应该关注于对齐方式。是左对齐还是右对齐又或者顶对齐，需要根据实际情况而定。这个实际情况主要包括展示屏数，信息类型和表单在整个界面中可使用的空间。但是一般来说，左对齐比较适合同类型信息的列表展示，比如电话本和邮箱信息，又或者为了减缓用户阅读速度(有的信息填写需要用户非常谨慎，从而避免出现错误)；右对齐比较方便于标签与信息文字相对性展示，以一问一答的形式来提高效率，也是用的最多的一种方式；顶对齐是浏览速度最快的一种对齐方式，同时也可以横向减少占用的空间(这个在手机界面设计里面用的非常频繁)。

3.输入框

对于输入框，需要关注的是输入框的类型，输入框的长度、输入框的展现形式和输入框的交互情境。输入框目前普遍使用的是单选框、复选框、下拉菜单、下单列表等等，它们各有利弊，如何在合适的环境中使用合适的类型，能够让整个交互体验完全不一样。而且对于很多输入框的使用，其实没有标准的方式，这就需要设计师的创造性思维了。同时既然输入框是用户信息的输入口，那么输入框本身的功能就更加应该注意了。比如，如何合适的规范输入框的长度，如何合理的鉴别必选项和可选项，如何提供更好的人性化的输入选择。

4.动作

对于动作主要是指动作的放置位置和主次关系的体现。对于动作的放置位置你要考虑以下几点：第一，是否符合逻辑关系，尽量避免下控制上；第二，动作的隐蔽性考虑的同时又不影响用户专注于完成表单；第三，是否符合人们现有的使用习惯，如果你不确定能够提供更加合理的交互方式，那就尽量保持一致性，不要为了装饰而装饰。对于动作的主次关系，你需要考虑的是尽可能的减少误操作的可能性，尽可能的让用户完成表单而不是退出。

5.帮助文字

对于帮助文字，在设计的过程要注意提供帮助的时机，是决定放在输入框里面还是输入框后面，或者是当前话题的下面等等，这都需要根据实际情况而选择。总而言之，是为了帮助用户，而不是赶走用户。

6.信息提示

信息提示主要指错误信息和成功信息的提示，对于错误信息的提示，如果可以的话，应该尽可能的避免，因为这是造成用户挫折感的最直接因素，但是无论表单设计的多么完美，总是有用户因为这样或者那样的原因填写错误。既然无法避免，那么怎么样告诉用户错误的地方以及解决的方法就尤其重要。为了让用户明确的知道错误操作的位置，最常用的方法是使用双重强调，比如特定的图标，红色的字体，或者高亮等等。如何组合这种显示区别无所谓，最重要的让用户能够非常清楚的看到错误信息又不让用户反感。此外提供解决错误的方法也非常重要，这点在实际设计中却经常被忽视；对于成功消息的提示，应该尽可能的避免直接弹出模态窗口，毕竟成功的操作不应该被打断而是被鼓励，所以在成功提醒页面可以附加考虑用户在成功填写表单后，下一步所需要完成的任务。这样既能达到提醒用户的目的，又能将干扰因素影响降到最低。

[1]罗博乌斯基.卢颐.高韵蓓译.Web表单设计—点石成金的艺术[M].清华大学出版社，2010.6.

[2]Jesse James Garrett.范晓艳译.用户体验要素—以用户为中心的产品设计[M].机械工业出版社，2007.10.