浅议 Web 网页 Form 表单设计技巧（2）
作者：JunChen 来源：junchenwu.com 发布时间：2007-10-09 13:05:00
借助可视化元素
由于“标签左对齐布局”的优点(方便检索并且减少垂直高度)，尝试纠正它的主要缺点(标签和输入框的分离)就很诱惑人。
一个方案就是增加背景色和分割线，不同的背景色产生了一列垂直的标签和一列垂直的输入框，每一组标签和输入框利用清晰的水平线分开。虽然这听上去不错，但是还是会存在问题。
对比之前的形态(用户主观的视觉区分)，这增加了15个视觉元素:中间线、一个个有背景色的单元格以及一条条的水平线。这些元素会转移用户的视线，让用户难以聚焦到一些重要的元素上，比如标签和输入框。 正如 Edward Tufte 指出的:“信息本身存在差异，必然产生感官上的不同。”换句话说，任何对布局无用的视觉元素都会不断地扰乱布局。当你试着浏览左侧的标签就可以发现，你的视线总是被打断，停下来想那些水平线、单元格和背景颜色。
当然这并不意味着放弃背景色和线条。它们对于划分相关区域信息还是很有效的。比如一条细水平线或者一个浅浅的背景色，都可以从视觉上组合相关数据。背景色和线条对于区分表单的主要操作按钮尤其有效。
主次操作
一个表单的主要操作(通常是“提交”或“保存”)需要一个比较强的视觉比重(在上面的例子里用了亮色调、粗字体、背景色等等)。这相当于给用户一个提示:您已/即将完成填写表单。
当一个表单有多个操作，比如“继续”和“返回”，那有必要减轻次要操作的视觉重量。这可以最小化用户潜在的操作错误的风险。
虽然以上内容可以更好的让你设计表单，但是组合布局、可视化元素以及内容，仍然需要经过用户的测试以及数据分析(完成度评估、错误报告等)。
更多的细节和例子在 Web Application Form Design Expanded。
JunChen 翻译自 LukeW's Functioning Form
0
投稿猜你喜欢
- explain显示了mysql如何使用索引来处理select语句以及连接表.可以帮助选择更好的索引和写出更优化的查询语句.使用方法:在sel
- 在本节描述的示例代码，提供真实的例子来示范在 FileSystemObject 对象模式中可用的许多功能。该代码显示了如何一起使用对象模式的
- 总结常用基本点如下： 1、触发器有两种类型：数据定义语言触发器（DDL触发器）和数据操纵语言触发器（DML触发器）。 DDL触发器：在用户对
- by leecade ：我聊下我的想法 从功能上看，能不能把JS分成3层结构1 语法设计，选择器，常用函数2 业务逻辑（比如封装好常用的TA
登录与注册两个按钮似乎天生就应该是排在一起的，就像很多地方的“确定”与“取消”一样，甚至排在一起的意义远远强于后者。于是长期以来，用户们也形- 当今越来越多的应用程序迁移到web平台上。由于没有平台的限制和安装的要求，SAAS的模式看起来非常有吸引力。Web应用程序的界面设计，其核心
- 一、浏览器允许每个域名所包含的 cookie 数：Microsoft 指出 Internet Explorer 8 增加 cookie 限制
- 很多时候我们写的程序，会花上一分钟甚至几分钟时间。为了使软件使用者能够耐心的等待程序的执行，我们经常会希望有一个进度条来表示程序执行的状态。
- asp之家注：也许你还没有接触过使用js来调用asp文件，也许你也不知道如何用JS调用asp文件，甚至你也不知道JS调用asp文件有什么好处
- 前不久网上公开了一个MySQL Func的漏洞,讲的是使用MySQL创建一个自定义的函数,然后通过这个函数来攻击服务器。最早看到相关的报道是
- 如何取回已忘记的密码？forget.asp' 申请<html><head><title>闪亮日子
- 如何做一个检索结果带链接的检索？具体代码和说明如下：<％ data=request.form("search_da
- 130 ：文件格式不正确。（还不是很清楚错误的状况） 145 ：文件无法打开。 1005：创建表
- 今天在群（CSS森林:30247792）里讨论了border的样式写法，发现border的写法还真是灵活，做了一下总结，希望对大家有用：bo
- 译者：AlphaImageLoader是一个让IE6正常显示PNG32时要用到的一个滤镜，但它在使用中也会产生一系列的问题，本文对使用Alp
- 内容摘要合理使用渐变留白网格布局提高字体应用明确而有效的导航设计漂亮、有用的页脚介绍优秀设计和卓越设计之间的区别是比较小的。一般人可能无法解
- 什么是存储过程呢？定义：将常用的或很复杂的工作，预先用SQL语句写好并用一个指定的名称存储起来, 那么以后要叫数据库提供与已定义好的存储过程
- 网络开发的在分页上要是遇到数（几十）万以上的数据还是用ADO那样的分页会速度很慢的。有了存储过程速度就快多了。下面是本人用50万的数据进行的
- 本文详细解说了MySQL Order By Rand()效率优化的方案，并给出了优化的思路过程，是篇不可多得的MySQL Order By
- 本文介绍的MySQL数据库的出错代码表，依据MySQL数据库头文件mysql/include/mysqld_error.h整理而成。详细内容
