用户名: 密码: 免费注册 忘记密码? 网站地图 | 加入收藏 | 设为首页
首页 | 新闻 | 工具 | 系统 | 办公 | 聊天 | 多媒体 | 网页 | 运营 | 平面 | 欣赏 | 数据库 | 程序 | 服务器 | 组网
网页 | 3dmax | Ghost | Windows Xp| Dreamweaver | photoshop | Flash | office | Alexa | Css | QQ | Asp | PHP | Jsp | Access
Flash MX 2004入门 | 网站推广策略 | CorelDRAW入门 | ASP学习 | 网站建设大师功 | Word入门
  iTbulo.com > 学院 > 网页制作教程 > 网页制作技巧 > 正文
浅议 Web 网页 Form 表单设计技巧
iTbulo.COM 2006-11-24 junchenwu.com()

“输入框( Input )应当符合逻辑地划分为小组,这样大脑就可以很好的处理大堆区域间的关系。”– 《HTML权威指南》

  Web 应用程序总是利用表单来处理数据录入和配置,但并不是所有的表单都保持一致。输入区域的对齐方式,各自的标签(label),操作方式,以及周围的视觉元素都会或多或少影响用户的行为。

  表单布局

  考虑到用户完成表单填写的时间应当尽可能的短,并且收集的数据都是用户所熟悉的(比如姓名、地址、付费信息等),垂直对齐的标签和输入框可以说是最佳的。每对标签和输入框垂直对齐给人一种两者接近的感觉,并且一致的左对齐减少了眼睛移动和处理时间。用户只需要往一个方向移动:下。

  垂直对齐布局的例子

  在这种布局中,推荐使用加粗的标签,这可以增加它们视觉比重,提高其显著性。如果不加粗的话,从用户的角度讲,标签和输入框的文字几乎就一样了。

  如果一个表单上的数据并不为人熟悉或者在逻辑上分组有困难(比如一个地址的多个组成部分),左对齐的标签可以很容易的通览表单的信息。用户只需要上下看看左侧一栏标签就可以了,而不会被输入框打断思路。但这样一来,标签与其对应的输入框之间的距离通常会被更长的标签拉长,可能会影响填写表单的时间。用户必须左右来回的跳转目光来找到两个对应的标签和输入框。

  标签左对齐布局的例子

  于是产生了一种替代的方案,标签右对齐布局,使得标签和输入框之间的联系更紧密。然而结果是左边参差不齐的空白和标签让用户很难快速检索表单要填写的内容。在西方国家,人们习惯于从左至右的书写,所以这种右对齐的布局就给用户造成了阅读障碍。

  标签右对齐布局的例子

[1] [2] 下一页

文章搜索
相关资讯
相关文章 相关下载
网页中各度量单位的比较
网页制作知识总结:常用的CSS知识
图例详解网页制作中的绝对定位和相对定位
常用Web图像格式简述:png/svg
5种Web图像格式简述 文字说明版
焦点信息