浅议 Web 网页 Form 表单设计技巧
作者：JunChen 来源：junchenwu.com 发布时间：2007-10-09 13:05:00
标签：表单,form,设计
“输入框( Input )应当符合逻辑地划分为小组，这样大脑就可以很好的处理大堆区域间的关系。”– 《HTML权威指南》
Web 应用程序总是利用表单来处理数据录入和配置，但并不是所有的表单都保持一致。输入区域的对齐方式，各自的标签(label)，操作方式，以及周围的视觉元素都会或多或少影响用户的行为。
表单布局
考虑到用户完成表单填写的时间应当尽可能的短，并且收集的数据都是用户所熟悉的(比如姓名、地址、付费信息等)，垂直对齐的标签和输入框可以说是最佳的。每对标签和输入框垂直对齐给人一种两者接近的感觉，并且一致的左对齐减少了眼睛移动和处理时间。用户只需要往一个方向移动下。
在这种布局中，推荐使用加粗的标签，这可以增加它们视觉比重，提高其显著性。如果不加粗的话，从用户的角度讲，标签和输入框的文字几乎就一样了。
如果一个表单上的数据并不为人熟悉或者在逻辑上分组有困难(比如一个地址的多个组成部分)，左对齐的标签可以很容易的通览表单的信息。用户只需要上下看看左侧一栏标签就可以了，而不会被输入框打断思路。但这样一来，标签与其对应的输入框之间的距离通常会被更长的标签拉长，可能会影响填写表单的时间。用户必须左右来回的跳转目光来找到两个对应的标签和输入框。
于是产生了一种替代的方案，标签右对齐布局，使得标签和输入框之间的联系更紧密。然而结果是左边参差不齐的空白和标签让用户很难快速检索表单要填写的内容。在西方国家，人们习惯于从左至右的书写，所以这种右对齐的布局就给用户造成了阅读障碍。
0
投稿猜你喜欢
- 如何实现像腾讯QQ聊天窗口中文字链接提醒效果。完善了部分代码...比如,在不是连接的地方单击的时候,把那个提示关闭掉...在复制不成功的时候
- 大概在九九年做游戏网站的时候，就对文章的发布感到麻烦，不过那会儿玩ASP不精。只是将就用着。在遇到长文件 10000 字时网页就是一大片长了
前言：书终于完稿了，我也有了一些自己的时间，于是决定将书中讲到的一些比较常见的知识点整理出来，发在Blog里面。当然也不会完全发表出来，毕竟- 不加(0)的用法:set rs=conn.execute(sql)'将这个结果赋给rs这时要读取这个记录集第一个字段的数据就用rs(
- asp中利用XMLhttp对象获取远程的数据，然后用二进制输出到客户浏览器，让客户下载数据,此例从某一远程服务器获取一个压缩包，并且输出到浏
- SQL Server数据库快捷键：书签：清除所有书签。 CTRL-SHIFT-F2书签：插入或删除书签（切换）。 CTRL+F2书签：移动到
- MySQL由于它本身的小巧和操作的高效, 在数据库应用中越来越多的被采用.我在开发一个P2P应用的时候曾经使用MySQL来保存P2P节点,由
- 虽然我只是把豆瓣当作一个纪录工具来用，纪录下自己看过的电影、听过的音乐、读过的书籍，我几乎不关注豆瓣上的任何影评、乐评、音衣服之类的内容，但
- 大家知道，在js里encodeURIComponent 方法是一个比较常用的编码方法，但因工作需要，在asp里需用到此方法，查了好多资料，没
- 显然，效果很实用。对于这个效果，我们并不解释如何去使用效果库，而是讲解如何创建类似的效果，并保持他的可用性，分离式（unobtrusive）
- 近日无事，想起以前曾打算过要做一个定时重启或关机的工具，便花了一点时间以hta的形式写了个，名为"Windows Timer&qu
- 这里会讨论令Oracle停机时间最小化的步骤。各种形式的停机--计划的或者是非计划的--总是不断地发生，一个DBA应该有正确的备份策略，这样
- 特点：1.图片预载入，载入后再显示。意图一次呈现，不会让一块一块下载破坏你的页面，绝佳的用户体验，颠覆传统的浏览器呈现图片的处理方式（需要后
- 记录应用程序的操作日志可以使用数据库、文本文件、XML文件等。我这里介绍的是使用 XML 文件记录操作日志。我觉得使用 XML 记录操作日志
- Wingdings字体，Symbol字体<html> <head> <title>
- 基于ASP技术开发Internet/Intranet上的MIS系统是非常方便的，首先是它借用了ADO技术和概念，同时
- 在各类的前端开发工具里，在功能上虽然Editplus显得有些“单薄”，但是仍然是很多我辈做开发的人们离不开的工具，因为他小巧，语言高亮，支持
- 由于工作需要,所以前一阵子将IE升级到了8.0,结果今天发现出现一个问题,eWebEditor的在线编辑器不好用了,仔细想想,肯定是IE8搞
- 我还我还是有必要改一个标题，（原题为 让你想不通的"bug"），以免有同学误会。先看代码。看完之后我有个问题提问一下，看
- 《用户研究角度看设计》系列是淘宝的用户研究团队在可用性测试之后的点滴思考。在每次与淘宝用户的直接接触、观察用户的操作之后，作为体验分析师的我
