下载首页 | 资讯中心 | 下载分类 | 最近更新 | 排 行 榜 | 国产软件 | 国外软件 | 汉化补丁 |
文章搜索: 分类 关键字 收藏本站设为首页
您的位置:首页网页设计CSS样式 → 转:浅议 Web 的表单设计
转:浅议 Web 的表单设计
日期:2007-6-20 9:36:47 人气:53     [ ]
上一页 [1] 下一页
id="fontzoom">

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

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

表单布局

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

垂直对齐布局的例子

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

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

标签左对齐布局的例子

[1] /200605/99235_2.htm'>[2] /200605/99235_3.htm'>[3] /200605/99235_2.htm'>下一页

出处:本站原创 作者:佚名
 阅读排行
01.精美qq空间横幅代码
02.最酷qq个性女生网名
03.最新又有免费QQ秀啦《..
04.巧用透明FlaSh扮靓你的..
05.花之神匠代码(最新代码..
06.最新QQ空间免费导航
07.最新免费个人形象设置..
08.最新qq空间flash代码m..
09.CSS技术结合图像实现动..
10.Photoshop光影魔术师:..
11.QQ音速种子狂刷
12.最新QQ空间透明代码
13.PS实例教程:教你制作结..
14.Photoshop光影魔术师:..
15.制作背景图__教程
16.用Photoshop制作漂亮的..
17.如何获得QQ音速种子
18.≤QQ空间代码≥在日志..
19.网页浮动广告的制作代..
20.用Photoshop制作大红灯..
21.常用CSS
22.Photoshop给靓丽美女打..
 推荐文章
·Photoshop 表现技法之..
·快速将你的相片矢量化..
·PHOTOSHOP制作炽热的太..
·用Photoshop制作美丽的..
·流行杀手的娃娃工厂__..
·打造8号台球__教程
·PHOTOSHOP制作待机MM图..
·用Photoshop帮MM做纹身..
·PHOTOSHOP美眉着色绝招..
·PHOTOSHOP花露的制作_..
·PHOTOSHOP渐变工具的巧..
·PHOTOSHOP手绘奥兰多-..
·高难度抠图两种方法__..
·Photoshop高尔夫球的制..
·Photoshop打造精美玉佩..
Eqxia_COM下载站 版权所有 Copyright© 2001-2005 Www.eqxia.COM, All Rights Reserved.