WEB表单设计-1表单的组织

表单设计的首要目标：让人们迅速并且轻松地完成填写。

一、内容的组织

为了保证对话流程，可以将问题分成有意义的组。根据问题数量和情境，可以将这些组分到多个网页或者单个网页的不同部分。

例如 yahoo!注册表单将个人信息、正在创建的账号、访问账号的方式和若干信任及安全条目问题分成四个不同部分。这些部分用标题区别于网页中的其余元素。紫色粗体标题比其他的表单标签承载了更多视觉分量，你能浏览扫描表单，明白需要提供哪些信息

图1.1  yahoo! 注册表单采用对话语气来吸引新成员

二、归纳区别

内容组之间的差异不需要大量视觉差异。事实上，内容组之间对比太多往往会造成过多视觉污染，会阻碍人们浏览表单。以图1.1为例，每个内容组都从视觉上区别于表单其余部分（紫色粗体）。

请考虑下图1.2和图1.3表单之间的区别。一个表单是黄色边界，黄色背景色，红色栏目标题，表格框合并归纳相关内容。而另一个表单只用一种弱背景色变化来区分表单中有意义的部分。使用最少的视觉信息有助于保持焦点在表单内容而不是表现形式。

图1.2  表单中多个不同视觉元素阻碍人们看见表单所提问题

图1.3  背景柔和变化或者细线条常常足以有效组织表单中的相关内容

但即使内容组之间的细微区别也会被滥用。有些设计师考虑到他们所认为的标签左对齐的缺点，会选择使用交替背景颜色来组织左对齐标签与右对齐输入框，如图1.4。但标签定位眼动跟踪研究表明，在标签左对齐布局中，人们一般能顺利将输入框和标签联系在一起，只是花费时间会更长。因此，这种做法并没有真正解决问题，事实上还会引发另一个问题。

图1.4  采用交替背景色来组织左对齐标签和相应输入框，这种做法具有诱惑力，但这些视觉元素给表单带来大量视觉噪音

两种不同背景颜色用来区分标签和输入框，水平线用来分隔每一对标签和输入框。这种做法增加了15种额外的页面布局元素：中心线、背景区和水平线。这些元素分散了注意力，焦点更难集中到布局的最重要元素：标签和输入框。信息由产生作用的差异构成，任何无助于布局的视觉元素都会损害布局。扫描左栏标签时说明了这一点。眼睛需要一再停顿，因为要考虑水平线和背景颜色组合构成的每对水平线和文本框。

图1.5  过多视觉元素分散了对表单主要内容的注意力，还会中断表单扫描线

当然，这并不是说表单布局绝对不能使用背景色和线条。考虑区分内容组时，应当考虑采用最少的视觉信息图1.6。  过多的视觉信息可能会导致注意力分散，弄巧成拙。

图1.6  eBay express付款表单采用细线条分隔有意义的内容组。只需要通过最少的视觉元素来形成清晰的区别