有效网页表单的八条规则[译]
作者：珊瑚 来源：cssrain 发布时间：2009-06-01 10:29:00
如果你正从你的用户那里收集信息, 没有比网页表单更简单和直接的办法了。
一份有良好设计的表单可以提供有价值的信息, 相反, 他们有可能把用户吓跑。
明确了这一点之后, 每个设计师就应该知道一些设计网页表单的规则。
文章中所有的实例都是用CoffeeCup Web Form Builder生成的.
1. 保守性的搭建, 并带有目的性的设计表单
我们要面对的现实是没有人喜欢花大把的时间填写表单. 保持表单的短小精悍
并且剔除绝对不必要的或者不会提供实际收效的表单元素. 保证表单的每个部
分都对整体起到了推动作用, 这样用户会感谢你。
你的表单结构应该和表单内的元素一样具有功能性. 当设计表单样式的时候,
要记得, 至少在西方国家, 人们的阅读习惯是从上到下, 从左到右. 他们也经常
用Tab键在表单各个元素之间移动. 你的设计应该通过元素摆放的合理性和标
签的语义性来实现. 当然, 永远不要让你的表单看起来分散或杂乱无章——保证
所有的元素都均匀的分隔开, 并且排列整齐。
下面是一些标准表单, 你可以用来作为出发点, 设计出更加有创造性的表单:
标签左对齐, 输入字段垂直罗列：
这个表单的特点是标签左对齐, 输入框整齐有序的从上到下排列. 我们的眼
睛能够很容易的捕捉表单元素, 特别是当你问到一些用户不太熟悉的问题时。
因为他们可以很顺利的从上到下阅读问题列表而不被输入框打断, 他们会更
专注于你所问的问题. 但是这个样式会延长填完表单的时间, 因为视线在标
签和输入框之间移动会占据大量的时间。
标签右对齐, 输入字段垂直堆叠：
右对齐的标签能够更容易区分和阅读, 并且剔除掉了标签和输入框之间那些
不合适的空间. 但是, 却使阅读更加困难. 它不那么吸引人, 而且看起来不整齐。
标签顶端对齐：
顶端对齐的标签可以使填写表单更加迅速和容易, 因为眼睛不需要在标签和
输入框之间来回移动. 这种样式也让你把相关的字段放在一起, 节省了空间。
0
投稿猜你喜欢
- 快捷键可以帮助我们有效提高效率，我们来看看网页设计软件FrontPage有哪些快捷键。相关文章：Dreamweaver快捷键大全、photo
- 在今天的设计中，排版常常被忽视，特别是被网页设计师忽视。这真是件遗憾的事情因为CSS可以做很多事情来控制我们的排版。也就是说，我们被局限于某
- 摘要：本文主要就数据库恢复与系统任务的调度，在结合一般性的数据库后台处理的经验上，提出较为实用而新颖的解决方法，拓宽了数据库后台开发的思路。
- 首先得抛出个重要的前提观点，大屏幕、宽屏幕根本不是为方便“扫视”准备的。所以说以内容为基础的网站设计不用考虑超宽、超大的场景，甚至包括服务类
在网页设计中有一些通用的交互设计模式。网站导航各种各样的通用和大家熟知的设计模式，可以用来作为为网站创建有效地信息架构的基础。这篇指南涵盖了- 注:所有文字,除注明网站类型外,其他均针对企业站点.请随时注意留言,若修改则会在首页提示文字里标注.若牵扯到业务方面的问题,我可能不会做过多
- 今天看了篇关于Web Form Design的成功案例，虽然讲的事情很简单，但总结了一些方法，翻译过来做个原始积累吧，以后写东西举例子时也好
- 你喜欢在博客文章中使用图片吗？是的，如果不是很麻烦的话，相信大家都不会介意放上几张漂亮的图片来点缀一下内容的，不过你的图片可能会导致下面的两
- ..:: 巧用CSS制作艺术字 ::..如果灵活应用CSS各种滤镜的特点并加以组合，我们可以得到许多意想不到的效果。这是一些效果示范，供各位
- 写了个简洁的隔行变色代码，支持三种动作变化颜色<!DOCTYPE html PUBLIC "-//W3C//DTD XHTM
- 数据库操作类的优点优点可以说是非常多了，常见的优点就是便于维护、复用、高效、安全、易扩展。例如PDO支持的数据库类型是非常多的，与mysql
- 好久没有写ASP代码了，今天在做一个简单的留言本时，出现了一下错误： Microsoft Office Access Database En
- CREATE TABLE `category` ( `Id` binary(1
- 下面是我已经证实可用的自动备份的方法. 1、打开企业管理器->管理->sql server代理 2、新建一个作业,作业名称随便取
- 前两天特意装了一下IETester，用以方便测试，装好后使用发现IE8有两个地方需要大家注意。IE5MAC的过滤器对IE8 Beta 1版同
- 一、功能简述正是微博如火如荼的时节，其中各个微博的分享功能是网站推广产品的好东东啊，此时如何方便快捷的使用微博的分享功能就显得比较重要了。我
- 从CNNIC在2009年的报告中可以看到，超过80％的网民购物之前都要看评论（包括本站、其他站评论），超过80％的网民都比较信任口碑（包括网
- 一段重用很高的ajax代码，可以套用 <!DOCTYPE HTML
- 这几天有一台MySQL数据库服务器出现了频繁的掉线情况，通过排查，并没有排查出哪个网站被攻击，百思不得其解中的时候，群里有个朋友说是因为微软
- <!-- -----------[test]表生成脚本---------------
