表单设计的首要目标：让人们迅速并且轻松地完成填写。
一、内容的组织
为了保证对话流程，可以将问题分成有意义的组。根据问题数量和情境，可以将这些组分到多个网页或者单个网页的不同部分。
例如 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付款表单采用细线条分隔有意义的内容组。只需要通过最少的视觉元素来形成清晰的区别
网友评论