如何设计具可用性的网页表单?
作者：党韬 来源：猪窝 发布时间：2010-03-20 21:57:00
备注: 关于label和tag,在中文中都翻译成标签,而下文中出现的标签,都是对label的翻译,比如”用户名”+输入框, 这里的”用户名”项在英文中是label,约定翻译为标签
页面表单已经是web设计中讨论最多的元素,已经超过10年了.我们无法避免.Call-to-action(一般翻译为”行动呼吁”,”行动号召”,但是都觉得不理想.译者注)的方式通常会将用户引导到表单页;付费需要使用表单;用户注册或订阅需要使用表单-表单的使用是不会停止的.
尽管在HTML中,把表单拼凑到一块相当容易,但是对于可用的,友好的表单来说,编码,制作样式和设计是很难的.在网站的转变中,对于成功转化率,表单始终扮演着很重要的角色,下面的小贴士和文章末尾处提供的源码,应该会对制作和编码页面表单的开发者提供有价值的信息.
两列 VS 一列
这个取决于表单的内容,不过当表单内容相当简单时,通常尽量避免两列布局.
下面是一个很好的简单表单的例子,它将每个标签(label)都放到相关表单元素的上方
这种表单布局的好处有哪些,仅仅是为了反对两列布局?首先,表单的元素具有更大的空间,可以满足今后对于文案的修改.两列布局的表单在这点上会有限制,甚至可能需要重构整个表单部分才能满足调整的需求.另外一个好处就是看上去不杂乱,在每个标签部分不会有大量的空白,所以很容易阅读并且很容易将标签与输入框联系起来.另外,每个成对的标签/输入框的背景色可以让表单从视觉上看更吸引人.
作为对比,让我们看看下面这个两列布局的表单
尤其是因为左对齐的文字和不明显的颜色,这个表单不具备上一个例子中那种干净的视觉效果.事实上,在标签和输入框之间的垂直空白多少会分散人的注意力,误认为里面包含了很多个部分,而实际上一个简单的表单在视觉上应该表现的像一个整体.
但是使用两列布局来完成一个清晰的,有条理的效果也不是不可能的,正如下面展示的例子Chapters Indigo Books
清晰有条理的两列布局表单
因此,尽管表单的布局没有明确的规定,但是仍存在有效的原则:包括简单的表单避免使用两列布局;如果使用两列布局则应该让标签右对齐.
0
投稿猜你喜欢
- 你是否对获得MySQL数据库与表的最基本命令的实际操作感到十分头疼？如果是这样子的话，以下的文章将会给你相应的解决方案，以下的文
Yahoo发布了一款基于FireFox的插件，名叫YSlow，这个插件可以分析网站的页面，并告诉你为了提高网站性能，如何基于某些规则而进行优- 1 递归函数的特点特点一个函数 内部 调用自己函数内部可以调用其他函数，当然在函数内部也可以调用自己代码特点函数内部的 代码 是相同的，只是
- 遇到了这个问题，意思是你的 CPU 支持AVX AVX2 （可以加速CPU计算），但你安装的 TensorFlow 版本不支持解决：1. 如
- 前言本文通过示例给大家介绍了python嵌套字典比较值，取值，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。示例代码#取值
- 当我们准备建立一个Web站点时，就必须向域名登记机构申请一个Internet域名，因此，我们通常希望了解自己准备使用的域名是否已经被注册，这
- 闭包的概念我们尝试从概念上去理解一下闭包。在一些语言中，在函数中可以（嵌套）定义另一个函数时，如果内部函数引用了外部函数的变量，则可能产生闭
- 原始生成对抗网络Generative Adversarial Networks GAN包含生成器Generator和判别器Discrimin
- 在使用Python的过程中，一定是离不开数据结构的， 也就是List-列表，Tuples-元组，Dictionaries-字典。那实际应用中
- DVWA（Damn Vulnerable Web Application）是一个用来进行安全脆弱性鉴定的PHP/MySQL Web应用，旨在
- 1 引言Pandas是作为Python数据分析著名的工具包，提供了多种数据选取的方法，方便实用。本文主要介绍Pandas的几种数据选取的方法
- 如下所示：a = [0,1,2,3,4,5,6,7,8,9]b = a[i:j] 表示复制a[i]到a[j-1]，以生成新的list对象b
- PHP输出JSON格式数据常用框架封装好的方法来输出JSON数据，但是手动去书写的时候却遇到了问题，因为输出的数据类型为字符串类型，导致不能
- 1.交换变量x = 6y = 5x, y = y, xprint x>>> 5print y>>> 62
- 这篇文章主要介绍了基于Python获取城市近7天天气预报,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的
- 整数对象在Python内部用PyIntObject结构体表示：typedef struct {PyObject_HEADlong ob_iv
- 在Centos中安装完MySQL数据库以后，不知道密码，这可怎么办，下面给大家说一下怎么重置密码1、修改配置文件my.cnf 按i编辑[ro
- 这次哀悼，网页设计方面除了应用CSS灰度配色和滤镜，还用到正计时代码，就象汶川大地震已过去了多少天。下面这段代码，是从网易页面提取出来的，具
- 你的设计为什么平平无奇，为什么吸引不到别人的眼球，这里先来说说什么是焦点（也可以称兴趣中心或者视觉中心），我认为用焦点更能简单准确的阐述。有
- 栅格就是你对页面版式的规划你日常所见的许多页面都有栅格存在。你可能注意不到，但它确实存在，并且支撑着设计内容，建立整体的架构，引导着页面的元
