ifuzhu字幕网      
首页 | 音频技术 | 视频技术 | 图像设计 | 影视合成 | 动画制作 | 字幕制作 | 资源下载 | 知不知道 | 专题 | 会员中心 | 支持论坛
  当前位置:电影资料>图像设计>文章内容
浅议Web网页Form表单设计技巧
来源: 论坛整理 作者: 发布时间:2007-12-18  
  “输入框( Input )应当符合逻辑地划分为小组,这样大脑就可以很好的处理大堆区域间的关系。”
  ——《HTML权威指南》

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

  表单布局

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

  
Dreamweaver


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

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

  
Dreamweaver


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

  
Dreamweaver



(阅读次数:
上一篇:常用Web图像格式简述:png/svg   下一篇:巧妙用文字给你设计的网页“注入情感”
[收藏] [推荐] [评论(0条)] [返回顶部] [打印本页] [关闭窗口]  
用户名: 新注册) 密码: 匿名评论
评论内容:(不能超过250字,需审核后才会公布,请自觉遵守互联网相关政策法规。
 §最新评论
  热点文章
·网站界面设计:网页的均衡规划与
·常用Web图像格式简述:png/svg
·常用Web图像格式简述:bmp/jpg/g
·视觉设计方法与过程讨论:用理性
·巧妙用文字给你设计的网页“注入
·从字体销售排名看英文字体设计使
·Web2.0网站的视觉风格进化论(二
·Photoshop轻松制作炫光特效
·打造性感MM老照片效果
·Photoshop将浓浓的春景变为金色
·效果图水彩效果篇
·Photoshop绘彩色玻璃透明图标入
  相关文章
·常用Web图像格式简述:png/svg
·巧妙用文字给你设计的网页“注入
·网站界面设计:网页的均衡规划与
·常用Web图像格式简述:bmp/jpg/g
·视觉设计方法与过程讨论:用理性
·从字体销售排名看英文字体设计使
·常用配色基本概念及精彩相关实例
·手机GUI设计基本知识
·网页设计配色应用——色彩的调和
·引领全球WEB标准 Microsoft.com
·网页设计技巧系列 之 文本排版
·网页设计配色应用实例剖析——蓝
www.ifuzhu.com