关于可用性表单编码和设计的小贴士.pdfVIP

关于可用性表单编码和设计的小贴士 备注: 关于label和t ag,在中文中都翻译成标签,而下文中出现的标签,都 对label的翻译,比如”用户名”+ 输入框,这里的”用户名”项在英文中 label,约定翻译为标签 页面表单已经 web设计中讨论最多的元素,已经超过10年了.我们无法避免.Call-t o-act io n(一般翻 译为”行动呼吁”,”行动号召”,但 都觉得不理想.译者注)的方式通常会将用户引导到表单页;付费需要使 用表单;用户注册或订阅需要使用表单-表单的使用是不会停止的. 尽管在HT ML中,把表单拼凑到一块相当容易,但 对于可用的,友好的表单来说,编码,制作样式和设计 很难的.在网站的转变中,对于成功转化率,表单始终扮演着很重要的角色,下面的小贴士和文章末尾 处提供的源码,应该会对制作和编码页面表单的开发者提供有价值的信息. 两列 V S 一列 这个取决于表单的内容,不过当表单内容相当简单时,通常尽量避免两列布局. 下面 一个很好的简单表单的例子,它将每个标签(label)都放到相关表单元素的上方 这种表单布局的好处有哪些,仅仅 为了反对两列布局?首先,表单的元素具有更大的空间,可以满足今 后对于文案的修改.两列布局的表单在这点上会有限制,甚至可能需要重构整个表单部分才能满足调整 的需求.另外一个好处就 看上去不杂乱,在每个标签部分不会有大量的空白,所以很容易阅读并且很 容易将标签与输入框联系起来.另外,每个成对的标签 输入框的背景色可以让表单从视觉上看更吸 引人. 作为对比,让我们看看下面这个两列布局的表单 尤其 因为左对齐的文字和不明显的颜色,这个表单不具备上一个例子中那种干净的视觉效果.事实上 ,在标签和输入框之间的垂直空白多少会分散人的注意力,误认为里面包含了很多个部分,而实际上一 个简单的表单在视觉上应该表现的像一个整体. 但 使用两列布局来完成一个清晰的,有条理的效果也不 不可能的,正如下面展示的例子Chapt ers Indigo Boo ks 清晰有条理的两列布局表单 因此,尽管表单的布局没有明确的规定,但 仍存在有效的原则:包括简单的表单避免使用两列布局;如 果使用两列布局则应该让标签右对齐. 让交验的反馈信息在一行中显示 最近Luke Wro blewski在A List A part 中写了一篇关于表单交验的反馈信息放到一行显示的文章.其中 提到 当使用交验信息显示在一行时,我们的测试者(完成的)更快,成功率更高,犯错更少,而且更满意 jQ uery Inline Fo rm Validat io n, Because Validat io n is a Mess这篇教程一步一步的介绍了如何使 用jQ uery在信息较多的表单中将反馈信息显示在一行. 另外一篇文章:Really Easy Field Validat io n Dexagogo提供了一个可以将你的表单交验信息显示在一行的简单的脚本.演示中的例子不 最好的, 不过你完全可以按照你需要的来自定义.脚本中使用了Script aculo us来实现的渐入渐出的效果. 组织有关联的输入框 在一个较长的表单中,为了增加可用性,你可能会受到一些限制,但 将关联的输入框组织到一起,将表 单分割并用可控的视觉化组件表现出来,可以使表单不那么吓人.这样,表单可以让人感觉更容易填写, 即使填写它可能跟填写没有组织的表单花费的时间一样. 为了将关联的表单组织起来,使用 和可选元素,正如下面的代码一样 Basic Inf o Name: Passwo rd: Co nf irm Passwo rd: A ddress A ddress: A ddress (co nt ’d): Z ip Post al: Cit y: Co unt ry: 默认会带边框,不过可以修改,通常会通过CSS来去掉.下面 单独表单一个例子,它使用和分割成两个 部分 Cosmicsoda Regist rat io n Fo rm 不幸的 , 的边框在不同的浏览器中表现不一样,所以一般最好的方法 通过css去掉边框并且通过其他的方式 建立自定义的边框.不过这也会影响的效果,因此现在很少看见使用和和两个HT ML元素.但 仍然可 以用来组织元素,同时通过自定义边框和标题来实现比较基础的效果.和元素对表单的易用性还 有 额外的帮助的. 必填项的明确标识 表单中通常都会使用与其他文字颜色不一样的星号(*)来表示必填项,这样必填项 较突出的.尽管现 在大多数网站包含(必