如何设计具可用性的网页表单?
作者：党韬 来源：猪窝 发布时间：2010-03-20 21:57:00
备注: 关于label和tag,在中文中都翻译成标签,而下文中出现的标签,都是对label的翻译,比如”用户名”+输入框, 这里的”用户名”项在英文中是label,约定翻译为标签
页面表单已经是web设计中讨论最多的元素,已经超过10年了.我们无法避免.Call-to-action(一般翻译为”行动呼吁”,”行动号召”,但是都觉得不理想.译者注)的方式通常会将用户引导到表单页;付费需要使用表单;用户注册或订阅需要使用表单-表单的使用是不会停止的.
尽管在HTML中,把表单拼凑到一块相当容易,但是对于可用的,友好的表单来说,编码,制作样式和设计是很难的.在网站的转变中,对于成功转化率,表单始终扮演着很重要的角色,下面的小贴士和文章末尾处提供的源码,应该会对制作和编码页面表单的开发者提供有价值的信息.
两列 VS 一列
这个取决于表单的内容,不过当表单内容相当简单时,通常尽量避免两列布局.
下面是一个很好的简单表单的例子,它将每个标签(label)都放到相关表单元素的上方
这种表单布局的好处有哪些,仅仅是为了反对两列布局?首先,表单的元素具有更大的空间,可以满足今后对于文案的修改.两列布局的表单在这点上会有限制,甚至可能需要重构整个表单部分才能满足调整的需求.另外一个好处就是看上去不杂乱,在每个标签部分不会有大量的空白,所以很容易阅读并且很容易将标签与输入框联系起来.另外,每个成对的标签/输入框的背景色可以让表单从视觉上看更吸引人.
作为对比,让我们看看下面这个两列布局的表单
尤其是因为左对齐的文字和不明显的颜色,这个表单不具备上一个例子中那种干净的视觉效果.事实上,在标签和输入框之间的垂直空白多少会分散人的注意力,误认为里面包含了很多个部分,而实际上一个简单的表单在视觉上应该表现的像一个整体.
但是使用两列布局来完成一个清晰的,有条理的效果也不是不可能的,正如下面展示的例子Chapters Indigo Books
清晰有条理的两列布局表单
因此,尽管表单的布局没有明确的规定,但是仍存在有效的原则:包括简单的表单避免使用两列布局;如果使用两列布局则应该让标签右对齐.
0
投稿猜你喜欢
- 昨天又翻了下前段时间WD内部培训的幻灯片，发现了kejun推荐的一篇好文：Javascript Closures，看了之后受益匪浅。这篇文章
- 刚才运行了一段代码，来查看Request.ServerVariables里面有多少值，看了一下，共50个！代码<％=Request.S
- XML文档因为其固有的描述性特性而趋向于变得很罗嗦。其结果是文档会由于被描述的数据增多而变得很长，而这种很大的文档会在需要同其他实体进行交换
从本篇开始讲述如何用css实现网页的布局，即如何用css控制网页内各个元素的显示位置。如果你是一个初学者，很可能觉得做一个网页的第一步就是布- 使用cookie来判断来访者身份，是否是首次登陆， asp代码实例如下：< ％@ LANGUAGE=&q
- Dreaweaver MX 2004 中增加了图片处理功能，如图片亮度和对比度的调节、图片的锐化效果等
- 当我们使用访问一个没有声明的变量时，JS会报错；而当我们给一个没有声明的变量赋值时，JS不会报错误，相反它会认为我们是要隐式申明一个全局变量
- 本文讲解了一个使用XML技术上传文件的例子，使用该方法没有传统方法中的种种限制。 这个例子讲述了如何使用MSXML3.0和ADO Strea
- MySQL数据库由于它本身的小巧和操作的高效, 在数据库应用中越来越多的被采用.本文中列举了一个P2P应用开发实例，实例中使用了MySQL来
- 在这里我想有必要再较系统说一下ADO的各种对象的方法、属性。毕竟ADO不仅应用在ASP中，VB,VC都可以用到。在这十天中我想主要提到的对象
- 在DBA的日常工作中，经常需要重装或在新机器上安装Oracle,但每次安装所浪费的时间、精力以及失败的挫折都在考验着DBA的承受能力，本文着
- 本文中的示例主要是解决在函数间不能传递多个(32个以上)参数的问题，解题的具体思路就是采用记录类型作为函数的输入和返回值，所以我们需要先定义
- 这个问题对于规模稍微大些的项目而言，显得尤其重要了，数据库中如果有几百个存储过程， 难道还一个个找不成，即使自己很了解业务和系统，时间长了，
- 我们可以用鼠标把Dreamweaver的层在页面内拖动，但要全屏拖动就困难了,下面是一种实现的方法:制作步骤：一、准备图片，取名/file/
- 从今天开始起，基督山将和大家一起进入ASP.net 诸多程序的学习中，老实说，.net到底是法宝还是垃圾，我们拭目以待。有任何问题，联络基督
- 1.用CSS实现布局让我们一起来做一个页面，首先，我们需要一个布局。请使用CSS控制3个div，实现如下图的布局。考察应试者的基本布局知识—
- 4款JavaScript放大镜特效脚本。准确的说，Anythingzoomer和Bezoom才是正宗的放大镜特效，当鼠标悬浮在图片上时，能放
- 在CSS中我们会经常要用到“清除浮动”Clear，比较典型的就是clear:both;CSS手册上是这样说明的：该属性的值指出了不允许有浮动
- 基础知识-----黄金分割法960px宽度的网格设计的好处无需我多说了，下面主要是复习一下如何作图求出960px宽度下的黄金分割点1、首先沿
- 现在很多以内容为核心的网站上都在文章底部添加了社会化分享按钮，能让浏览用户在发现一篇有价值的文章时，可以通过社会化网络快速分享给自己的好友，
