软件频道>设计在线>网页UI|平面网页Flash视频三维欣赏|设计专题教程素材| 群乐:Vista系统下载
您现在的位置： 天极网 > 软件频道 > 设计在线 > 网页UI设计 > 浅议Web网页Form表单设计技巧
全文

浅议Web网页Form表单设计技巧

2007-05-04 07:42作者：出处：论坛整理责任编辑：Shiny
　　“输入框( Input )应当符合逻辑地划分为小组，这样大脑就可以很好的处理大堆区域间的关系。”
　　——《HTML权威指南》

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

　　表单布局

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

　　
Dreamweaver


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

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

　　
Dreamweaver


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

　　
Dreamweaver
共2页。 1 2 :
相关搜索：
关注此文读者还看过
热门关注
特别推荐
网友关注
软件下载
娱乐下载
驱动下载
文章排行
本周
本月
最近更新
热点推荐
关于我们|网站律师|天极服务|电子杂志|RSS订阅|加入我们|网站地图
TMG
Copyright (C) 1999-2008 Chinabyte.com, All Rights Reserved 版权所有 天极网络
商务联系、网站内容、合作建议：010-82657868
版权声明 在线提交意见反馈 Powered by 天极内容管理平台CMS4i
经营性网站备案信息 网警备案 中国网站排名
天极传媒：天极网|比特网|IT专家网|IT商网|52PK游戏网|IT分众-网站地图