有效网页表单的八条规则[译]
作者：珊瑚 来源：cssrain 发布时间：2009-06-01 10:29:00
如果你正从你的用户那里收集信息, 没有比网页表单更简单和直接的办法了。
一份有良好设计的表单可以提供有价值的信息, 相反, 他们有可能把用户吓跑。
明确了这一点之后, 每个设计师就应该知道一些设计网页表单的规则。
文章中所有的实例都是用CoffeeCup Web Form Builder生成的.
1. 保守性的搭建, 并带有目的性的设计表单
我们要面对的现实是没有人喜欢花大把的时间填写表单. 保持表单的短小精悍
并且剔除绝对不必要的或者不会提供实际收效的表单元素. 保证表单的每个部
分都对整体起到了推动作用, 这样用户会感谢你。
你的表单结构应该和表单内的元素一样具有功能性. 当设计表单样式的时候,
要记得, 至少在西方国家, 人们的阅读习惯是从上到下, 从左到右. 他们也经常
用Tab键在表单各个元素之间移动. 你的设计应该通过元素摆放的合理性和标
签的语义性来实现. 当然, 永远不要让你的表单看起来分散或杂乱无章——保证
所有的元素都均匀的分隔开, 并且排列整齐。
下面是一些标准表单, 你可以用来作为出发点, 设计出更加有创造性的表单:
标签左对齐, 输入字段垂直罗列：
这个表单的特点是标签左对齐, 输入框整齐有序的从上到下排列. 我们的眼
睛能够很容易的捕捉表单元素, 特别是当你问到一些用户不太熟悉的问题时。
因为他们可以很顺利的从上到下阅读问题列表而不被输入框打断, 他们会更
专注于你所问的问题. 但是这个样式会延长填完表单的时间, 因为视线在标
签和输入框之间移动会占据大量的时间。
标签右对齐, 输入字段垂直堆叠：
右对齐的标签能够更容易区分和阅读, 并且剔除掉了标签和输入框之间那些
不合适的空间. 但是, 却使阅读更加困难. 它不那么吸引人, 而且看起来不整齐。
标签顶端对齐：
顶端对齐的标签可以使填写表单更加迅速和容易, 因为眼睛不需要在标签和
输入框之间来回移动. 这种样式也让你把相关的字段放在一起, 节省了空间。
0
投稿猜你喜欢
- 原型扩展：>> String.prototype :String对象原型扩展 --------------
- 本文使用的是最新的FCKeditor 2.3.1版本 官方网站下载: http://ckeditor.com/download[建议直接在官
- 因为工作上要将客户的部分资料传给第三方做进一步处理，但是因为涉及到手机号等关键个人信息，所以需要对中间四位数做匿名化的简单处理。>&g
- 昨天在书上看到SQL语句优化时，where条件顺序不同，性能不同，这个建议在Oracle11G版本还合适吗？方式1优于方式2？ 方式1： s
- Python 3中的File对象不支持next()方法。 Python 3有一个内置函数next()，它通过调用其next ()方法从迭代器
- 外观模式（Facade Pattern）是什么外观模式是一种结构型模式，它提供了一个简单的接口，隐藏了系统的复杂性，为客户端提供了一个简单的
- 1、for循环写法基本和其他语言一致，只是没有了while循环，用for代替while。样例代码如下// for循环func loop1()
昨天晚上才发现已经出了jQuery的1.3版本，于是下载下来，把原来一个兄弟翻译的1.2.6的文档移植到了1.3中，点击这里可- 最近需要各种转格式，这里对相关代码作一个记录，方便日后查询。xlsx文件转csv文件import xlrdimport csvdef xls
- 在看高性能MySQL第3版（4.1.7节）时，作者建议当存储IPv4地址时，应该使用32位的无符号整数（UNSIGNED INT）来存储IP
- 1.配置环境操作系统：Ubuntu20.04CUDA版本：11.4Pytorch版本：1.9.0TorchVision版本：0.7.0IDE
- 本文实例讲述了Go语言字典(map)用法。分享给大家供大家参考，具体如下：字典是一种内置的数据结构，用来保存 键值对 的 无序集合。（1）字
- 任何一位数据库程序员都会有这样的体会：高通信量的数据库驱动程序中，一条糟糕的SQL查询语句可对整个应用程序的运行产生严重的影响，其不仅消耗掉
- 前情提要上文我们分析了挂载组件主要调用了三个函数: createComponentInstance(创建组件实例)、setupCompone
- 如果你是一位前端开发工程师，对“跨平台”一词应该不会感到陌生。像常见的前端框架：比如React、Vue、Angular，它们可以做网页端，也
- 如下所示：import requests url='http://www.baidu.com'#下面使用requests.r
- 简要讨论为什么它不提供++作为运算符 正常情况下，当有人问起++原因而不是Python中的运算符时，这一行引起了我的注意。如果您想知道最初的
- python的format函数通过{}来格式化字符串>>> a='{0}'.format(123)>
- 在网站的一些应用中需要提供用户直接打印页面的功能，最明显的就是电子优惠券，商家根据网站提供的模板输入内容，然后生成优惠券页面，用户打印这个页
- ktime 开始时间串 dtime 到期时间串 jmonth 付费间隔月份数 可选(1,3,6,12) 需要 按月查询数据 比如说 ktim
