Web表单设计技巧探析

刘艳

摘要：众所周知，表单是网页中的重要元素。从用户的角度考虑操作表单时的喜好与感受来设计Web网页中的表单，从表单的布局，表单元素的选择，表单的操作几个方面阐述了表单设计中一些注意事项与技巧。

关键词：Web表单；页面布局；设计技巧

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2014）12-2845-02

一个网站不仅需要各种供用户浏览的网页，而且还需要与用户进行交互的表单，表单实现了浏览器和服务器之间的信息传递，它使网页有单向浏览变成了双向的交互。表单是实现用户调查、产品订单和对象搜索等功能的重要手段。利用表单处理程序，可以收集、分析用户的反馈意见，做出科学的、合理的决策。表单是用户和软件之间的对话，用户是否愿意、乐意去填写表单，能否快速、轻松、正确填写表单，这就要看设计者是否设计了一个优秀的表单。当设计一个表单的时候，不要认为好的设计就是要应用好看的CSS效果或者是添加漂亮的jQuery特效。在设计中需要从用户的角度出发，考虑用户的感受，用户的使用习惯，让用户快速，正确的填写表单，降低填写错误的几率等。一个设计优秀的表单会让用户有一种填写的冲动，并且可以最大限度地降低用户的出错率。下面将从表单布局，表单元素的选择，表单的操作三个方面进行探讨。

用户浏览表单页时，首先接触的是表单布局。如表单中各元素的的对齐方式、各自的标签样式，以及周围的视觉元素都会或多或少影响用户的行为。

布局表单元素时，一般采用表格进行布局，可采用三列，第一列为标签，第二列为表单元素，第三列为对表单元素填写的说明。对于标签，必须让用户迅速且轻松阅读，知道自己要填写什么信息。如果一个表单上的数据并不为人熟悉或者在逻辑上分组有困难，让标签左对齐，用户只需要上下看看左侧一栏的标签就可以很轻松的通览表单的信息，而不会被输入框打断思路。第二列为左对齐的输入框及其他表单元素，这样的布局有时会受到过长标签的影响：标签与其对应的输入框被分离开来，用户不得不左右来回的跳转目光找两个对应的标签和输入框，这样势必会影响填写表单的时间。如果让标签和对应的输入框联系紧密，可以采用标签右对齐的布局，但又会有新的问题出现：左边参差不齐的空白和标签让用户很难快速浏览表单要填写的内容。因此标签的定义就需要给与一定的关注：在表达清晰的前提下，要简明扼要，短小精悍。若仍有标签较长，还是采用“左对齐标签”的布局，因为人们习惯于从左到右的浏览书写，这就需要解决标签和输入框的分离问题，有一种简单的解决方案就是利用背景色和分割线，给一列垂直的标签添加一种背景色，一列垂直的输入框添加另一种背景色，每一组标签和输入框利用清晰的水平线分开。

需要注意的是不要在表单中使用垂直分栏，在表单中使用列的最大问题是流动。表单开始于上面，结束于底部，而列的出现会打破这种流动。 不要假设用户通过标签访问表单，而因此以列的形式导航表单。绝大部分的用户输入习惯于从上而下，使用鼠标/触控板/手指点击进入下一个字段，然后再输入内容。

用户填写完表单后只有提交了，才达到我们收集信息的目的。所以“提交”或“保存”按钮一定要设计的格外醒目。比如可加强视觉比重，设置成亮色调，粗字体等。另外，如果一个表单有多个操作，比如“继续”和“返回”，就有必要加重主要操作的视觉重量。这可以最小化用户潜在的操作错误的风险。例如，不要让“继续”按钮和“返回”按钮的样式一样，“继续”按钮是主要按钮，因此它应当设计的醒目一些。

每个填写表单的用户都希望填写时间越短越好，而且填写的数据都是用户熟悉的。快速、准确的填写表单是用户与设计者共同的目标，表单中的元素是否设计合理是实现此目标的基本。

在浏览网站时经常会遇到一些Web表单，其中的下拉框包含了太多的选项，如100多个国家； 31个日期等等，这样的选择让人很厌倦。Web表单除了文本框（input）和提交按钮（submit），还有单选按钮（radio）、复选框（checkbox）、下拉框（select）和超链接等，尤其下拉框的使用需要进行慎重考虑。大多情况下，表单是用来收集信息的，比如呈现给用户一些问题，并且这些问题都具有有限的答案供用户选择（如职业）。如何设计才能良好地呈现这些答案并且减小用户选错的几率？下面以某旅游网站调查问卷为例，来描述表单设计过程中合理选择表单元素的过程。

在本例子中，想从用户那里收集如下信息：姓名，性别，职业，地区，联系电话，E-mail，来过几次，游玩过哪些项目，建议与意见。

1 表单元素的确定

这些信息的收集是让游客自己输入还是选择作答，通过哪些表单元素实现？通过下面几个问题的解答可以做出决定：

1）输入答案是否比选择答案更加自然？

本例中的姓名、电话、地址等这些我们熟知的信息，使用输入的方式收集比使用选择的方式收集更加自然并且简单。况且对于姓名来说，也无法选择，所以确定需要使用文本框。

2）答案是否不方便统计或者容易输错？

容易输错的信息，就不能使用输入框来收集。不同的游客有不同的答案，不方便后台的统计，在本例中，职业、地区的信息若是输入的话，相同的职业可能会出现不同的表述，给统计带来不便、可以用下拉框或单选按钮让用户进行选择。游玩过哪些项目让用户填写的话，会没有耐心认真填写，可以用复选框让用户选择。

3）用户是否需要浏览完所有的选项，才能理解问题？

比如“职业”这个问题，如果不先浏览所有选项，有时不知自己归属于哪一类。在这种情况下，推荐根据情况使用下拉框。

4）有多少个选项？

滚动条是个老大难问题了，如果下拉框的选项很多，很有可能导致页面需要滚动，下拉框选择也需要滚动。一般来说4个以内选项的问题，使用单选按钮或复选框会比用下拉框好的多。endprint

5）用户是否可以同时选择多项？

一般如果用户可以同时选择多项，那么推荐使用复选框。游玩过哪些项目让用户填写的话，会没有耐心认真填写，可以用复选框让用户选择。

以这些问题解决后，可以列出一张表格，然后平衡选择，决定哪些信息使用哪种形式表现。

2 表单的整体效果和局部调整

尽管对表单元素进行了筛选与确定，但是还需要针对表单整体和局部进行调整。主要有以下3方面。

1）避免太多种类的表单元素

在一个表单中，若既有输入框又有超链接，还有下拉框，对于一般的用户熟悉某种元素的操作，更乐意一直这样操作下去。再换成另一种会让用户有陌生的感觉。

2）使选项精简、易读

单选、复选的选项，尽可能减少选项的数量，短句也可以作为选项。下拉框选项的确定原则是：用户浏览选项的时候方便，不费眼神，不会点错。

3）注意选项的顺序和默认值

对选项进行一个合理的逻辑排序，比如按声母排序，按首字母排序、按数字大小排序，这样当选项多时，用户大体知道所选内容在什么位置，以便能快速找到。最好能根据普遍情况确定一个默认值。

3 表单操作的易用性

1）使用tabindex属性设置Tab键的顺序：即设置键盘中的TAB键在各表单元素中的移动顺序，即焦点的顺序。 有了Tab键的帮助，用户可以完全脱离鼠标，更加快捷地填写内容。

2）如果一个输入框可以满足需求就不要用两个，大部分用户不熟悉盲打。很多用户在输入内容时候都要看键盘。 当要往表单中输入电话号码的时候，会要求添加区号和电话号码。用户看不到，或确实记不住这儿有两个输入框，结果第一个框输入了完整数字，如果这个文本框限制了一定数目的字符限制，问题就更糟了。电话号码就使用一个字段，同样的，门牌号/街道什么的都是如此，只使用一个文本输入框。

3）进行内联验证，即在数据提交前就先行进行验证。有些文本框输入的内容若有限定，（如密码，必须包含字母和数字，字符长度不小于6），在用户输入后就应及时验证，如果没通过验证，要以突出的表达形式给出出错的原因，而不是等到用户滚动到表单的末尾，提交时才发现问题，让用户再返回前面，重新进行填写。这样会给用户带来不快的体验。

浏览者在操作表单时，越方便越好。对于浏览者，什么样的人群都有，有些浏览着可能对电脑操作不熟练，尤其是文本框中输入内容，首先要在文本框中单击，才能输入信息，而有些浏览者不清楚，若让鼠标指向文本框就可获得焦点，可添加如下代码：

请输入姓名….

类似地，可以加入代码到。

在文本输入框中，如果加入了提示信息，浏览者往往需要用鼠标选取后删除，再输入有用的信息。有了代码onMouseOver=”this.focus（）” onFous=”this.select（）” 就可以不必删除提示信息而直接在文本域中输入有用的信息。

更方便的方式是提示信息直接被删除，可添加如下代码：

为了让操作者清楚的知道自己目前操作的对象，还可以作如下设置：

1）表单输入单元的边框设置：更改传统的表单单元边框，会让你的主页增色不少。如：

其中”style=***” 为上、下、左、右和背景色设置，适用于其他单元。

2）表单输入单元的文字设置：表单中单元的字体是可以修改的，如：

参考文献：

[1] 张晓景.DIV+CSS网页布局商业案例精粹[M].北京：电子工业出版社，2007.

[2] 陈承欢.网页设计与制作实用教程[M].北京：人民邮电出版社，2011.

[3] 詹青龙，郭永灿.网页设计与制作[M].北京：清华大学出版社有限公司，2010.

[4] 设计技巧：网页表单设计经验分享[OL].http：//changcongliang.blog.163.com/blog/static/35431849201232201946978/.

[5] nemohq “关于表单设计，每个设计师都应该知道的10件事”[OL].http：// http：//www.iteye.com/news/24822.

[6] 黄永兵译.“让用户不再讨厌Web表单的十九个最佳设计实践”[OL].http：//developer.51cto.com/art/200912/174273.htm.

[7] 浅析Web表单设计 [OL].http：//www.kuqin.com/uidesign/20120212/318117.html.endprint

5）用户是否可以同时选择多项？

一般如果用户可以同时选择多项，那么推荐使用复选框。游玩过哪些项目让用户填写的话，会没有耐心认真填写，可以用复选框让用户选择。

以这些问题解决后，可以列出一张表格，然后平衡选择，决定哪些信息使用哪种形式表现。

2 表单的整体效果和局部调整

尽管对表单元素进行了筛选与确定，但是还需要针对表单整体和局部进行调整。主要有以下3方面。

1）避免太多种类的表单元素

在一个表单中，若既有输入框又有超链接，还有下拉框，对于一般的用户熟悉某种元素的操作，更乐意一直这样操作下去。再换成另一种会让用户有陌生的感觉。

2）使选项精简、易读

单选、复选的选项，尽可能减少选项的数量，短句也可以作为选项。下拉框选项的确定原则是：用户浏览选项的时候方便，不费眼神，不会点错。

3）注意选项的顺序和默认值

对选项进行一个合理的逻辑排序，比如按声母排序，按首字母排序、按数字大小排序，这样当选项多时，用户大体知道所选内容在什么位置，以便能快速找到。最好能根据普遍情况确定一个默认值。

3 表单操作的易用性

1）使用tabindex属性设置Tab键的顺序：即设置键盘中的TAB键在各表单元素中的移动顺序，即焦点的顺序。 有了Tab键的帮助，用户可以完全脱离鼠标，更加快捷地填写内容。

2）如果一个输入框可以满足需求就不要用两个，大部分用户不熟悉盲打。很多用户在输入内容时候都要看键盘。 当要往表单中输入电话号码的时候，会要求添加区号和电话号码。用户看不到，或确实记不住这儿有两个输入框，结果第一个框输入了完整数字，如果这个文本框限制了一定数目的字符限制，问题就更糟了。电话号码就使用一个字段，同样的，门牌号/街道什么的都是如此，只使用一个文本输入框。

3）进行内联验证，即在数据提交前就先行进行验证。有些文本框输入的内容若有限定，（如密码，必须包含字母和数字，字符长度不小于6），在用户输入后就应及时验证，如果没通过验证，要以突出的表达形式给出出错的原因，而不是等到用户滚动到表单的末尾，提交时才发现问题，让用户再返回前面，重新进行填写。这样会给用户带来不快的体验。

浏览者在操作表单时，越方便越好。对于浏览者，什么样的人群都有，有些浏览着可能对电脑操作不熟练，尤其是文本框中输入内容，首先要在文本框中单击，才能输入信息，而有些浏览者不清楚，若让鼠标指向文本框就可获得焦点，可添加如下代码：

请输入姓名….

类似地，可以加入代码到。

在文本输入框中，如果加入了提示信息，浏览者往往需要用鼠标选取后删除，再输入有用的信息。有了代码onMouseOver=”this.focus（）” onFous=”this.select（）” 就可以不必删除提示信息而直接在文本域中输入有用的信息。

更方便的方式是提示信息直接被删除，可添加如下代码：

为了让操作者清楚的知道自己目前操作的对象，还可以作如下设置：

1）表单输入单元的边框设置：更改传统的表单单元边框，会让你的主页增色不少。如：

其中”style=***” 为上、下、左、右和背景色设置，适用于其他单元。

2）表单输入单元的文字设置：表单中单元的字体是可以修改的，如：

参考文献：

[1] 张晓景.DIV+CSS网页布局商业案例精粹[M].北京：电子工业出版社，2007.

[2] 陈承欢.网页设计与制作实用教程[M].北京：人民邮电出版社，2011.

[3] 詹青龙，郭永灿.网页设计与制作[M].北京：清华大学出版社有限公司，2010.

[4] 设计技巧：网页表单设计经验分享[OL].http：//changcongliang.blog.163.com/blog/static/35431849201232201946978/.

[5] nemohq “关于表单设计，每个设计师都应该知道的10件事”[OL].http：// http：//www.iteye.com/news/24822.

[6] 黄永兵译.“让用户不再讨厌Web表单的十九个最佳设计实践”[OL].http：//developer.51cto.com/art/200912/174273.htm.

[7] 浅析Web表单设计 [OL].http：//www.kuqin.com/uidesign/20120212/318117.html.endprint

5）用户是否可以同时选择多项？

一般如果用户可以同时选择多项，那么推荐使用复选框。游玩过哪些项目让用户填写的话，会没有耐心认真填写，可以用复选框让用户选择。

以这些问题解决后，可以列出一张表格，然后平衡选择，决定哪些信息使用哪种形式表现。

2 表单的整体效果和局部调整

尽管对表单元素进行了筛选与确定，但是还需要针对表单整体和局部进行调整。主要有以下3方面。

1）避免太多种类的表单元素

在一个表单中，若既有输入框又有超链接，还有下拉框，对于一般的用户熟悉某种元素的操作，更乐意一直这样操作下去。再换成另一种会让用户有陌生的感觉。

2）使选项精简、易读

单选、复选的选项，尽可能减少选项的数量，短句也可以作为选项。下拉框选项的确定原则是：用户浏览选项的时候方便，不费眼神，不会点错。

3）注意选项的顺序和默认值

对选项进行一个合理的逻辑排序，比如按声母排序，按首字母排序、按数字大小排序，这样当选项多时，用户大体知道所选内容在什么位置，以便能快速找到。最好能根据普遍情况确定一个默认值。

3 表单操作的易用性

1）使用tabindex属性设置Tab键的顺序：即设置键盘中的TAB键在各表单元素中的移动顺序，即焦点的顺序。 有了Tab键的帮助，用户可以完全脱离鼠标，更加快捷地填写内容。

2）如果一个输入框可以满足需求就不要用两个，大部分用户不熟悉盲打。很多用户在输入内容时候都要看键盘。 当要往表单中输入电话号码的时候，会要求添加区号和电话号码。用户看不到，或确实记不住这儿有两个输入框，结果第一个框输入了完整数字，如果这个文本框限制了一定数目的字符限制，问题就更糟了。电话号码就使用一个字段，同样的，门牌号/街道什么的都是如此，只使用一个文本输入框。

3）进行内联验证，即在数据提交前就先行进行验证。有些文本框输入的内容若有限定，（如密码，必须包含字母和数字，字符长度不小于6），在用户输入后就应及时验证，如果没通过验证，要以突出的表达形式给出出错的原因，而不是等到用户滚动到表单的末尾，提交时才发现问题，让用户再返回前面，重新进行填写。这样会给用户带来不快的体验。

浏览者在操作表单时，越方便越好。对于浏览者，什么样的人群都有，有些浏览着可能对电脑操作不熟练，尤其是文本框中输入内容，首先要在文本框中单击，才能输入信息，而有些浏览者不清楚，若让鼠标指向文本框就可获得焦点，可添加如下代码：

请输入姓名….

类似地，可以加入代码到。

在文本输入框中，如果加入了提示信息，浏览者往往需要用鼠标选取后删除，再输入有用的信息。有了代码onMouseOver=”this.focus（）” onFous=”this.select（）” 就可以不必删除提示信息而直接在文本域中输入有用的信息。

更方便的方式是提示信息直接被删除，可添加如下代码：

为了让操作者清楚的知道自己目前操作的对象，还可以作如下设置：

1）表单输入单元的边框设置：更改传统的表单单元边框，会让你的主页增色不少。如：

其中”style=***” 为上、下、左、右和背景色设置，适用于其他单元。

2）表单输入单元的文字设置：表单中单元的字体是可以修改的，如：

参考文献：

[1] 张晓景.DIV+CSS网页布局商业案例精粹[M].北京：电子工业出版社，2007.

[2] 陈承欢.网页设计与制作实用教程[M].北京：人民邮电出版社，2011.

[3] 詹青龙，郭永灿.网页设计与制作[M].北京：清华大学出版社有限公司，2010.

[4] 设计技巧：网页表单设计经验分享[OL].http：//changcongliang.blog.163.com/blog/static/35431849201232201946978/.

[5] nemohq “关于表单设计，每个设计师都应该知道的10件事”[OL].http：// http：//www.iteye.com/news/24822.

[6] 黄永兵译.“让用户不再讨厌Web表单的十九个最佳设计实践”[OL].http：//developer.51cto.com/art/200912/174273.htm.

[7] 浅析Web表单设计 [OL].http：//www.kuqin.com/uidesign/20120212/318117.html.endprint