• 首 页

网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

http://www.qitongnet.com 网站建设咨询热线:010-65587978/77/76/75

相关文章

北京网页设计网页制作:从切图到生成网页
企通互联网页设计配色应用实例剖析——绿色系
企通互联网页小技巧:隐藏input 内的文字的方法
北京网站制作DIV+CSS布局网页页面实现多风格选择的方法
网站制作用Photoshop手绘晶莹透明的水滴
北京网站制作在网页上制作仿电视演职员表效果
企通互联网页制作学习:div+css命名参考
网站建设弹出窗口window.open()的参数列表
北京网站设计网页布局的位置重心与位置间的对比关系
北京网站制作网站设计的思考(三)


品牌理念

北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!


友好连接

    • 网站建设
    • 网页设计
    • 网站设计
    • 网站制作
    • 网站优化
    • 百度优化
    • google优化
    • seo
    • 网站推广
    • 网络营销
    • 北京网站建设
    • 北京网站制作
    • 北京网页设计
    • 北京网站设计

文章搜索

你的位置:首页 >> 网页设计 >> 北京网站制作北京网站建设浅议Web网页Form表单设计技巧

北京网站制作北京网站建设浅议Web网页Form表单设计技巧


作者: 北京网站建设   日期:2008-03-27 06:14:05  来源: http://www.qitongnet.com

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

北京网站制作
  表单布局 中国站.长.站

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

Www^Chinaz^com

Chinaz

   Www@Chinaz@com

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

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

Www^Chinaz^com

 

Www@Chinaz@com

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

中.国.站.长.站

中.国.站长站

  中国站长_站,为中文网站提供动力

网站制作
  借助可视化元素 [中国站长站]

网站设计
  由于“标签左对齐布局”的优点(方便检索并且减少垂直高度),尝试纠正它的主要缺点(标签和输入框的分离)就很诱惑人。 中.国.站.长.站 网站制作

北京网站建设 北京网站设计
   一个方案就是增加背景色和分割线,不同的背景色产生了一列垂直的标签和一列垂直的输入框,每一组标签和输入框利用清晰的水平线分开。虽然这听上去不错,但是还是会存在问题。 Www@Chinaz@com

企通互联
  对比之前的形态(用户主观的视觉区分),这增加了15个视觉元素:中间线、一个个有背景色的单元格以及一条条的水平线。这些元素会转移用户的视线,让用户难以聚焦到一些重要的元素上,比如标签和输入框。 正如 Edward Tufte 指出的:“信息本身存在差异,必然产生感官上的不同。”换句话说,任何对布局无用的视觉元素都会不断地扰乱布局。当你试着浏览左侧的标签就可以发现,你的视线总是被打断,停下来想那些水平线、单元格和背景颜色。

中.国站长站

中国站长.站

 

中国. www.qitongnet.com站.长站

北京网站制作北京网站建设
  当然这并不意味着放弃背景色和线条。它们对于划分相关区域信息还是很有效的。比如一条细水平线或者一个浅浅的背景色,都可以从视觉上组合相关数据。背景色和线条对于区分表单的主要操作按钮尤其有效。 Chinaz@com

Chinaz~com

  中国站.长.站

  北京网站建设
  主次操作

Www@Chinaz@com

网站建设
  一个表单的主要操作(通常是“提交”或“保存”)需要一个比较强的视觉比重(在上面的例子里用了亮色调、粗字体、背景色等等)。这相当于给用户一个提示:您已/即将完成填写表单。 Www_Chinaz_com

网站建设
  当一个表单有多个操作,比如“继续”和“返回”,那有必要减轻次要操作的视觉重量。这可以最小化用户潜在的操作错误的风险。 北京网站建设

中国.站 网站设计.长站

中国站长_站,为中文网站提供动力

网站建设网站设计
字体:【大】【中】【小】

上一篇:网站制作浅议Web网页Form表单设计技巧

下一篇:网站建设制作Dreamweaver活动QQ系列菜单

这是一个与众不同的品牌,企通互联只专注于网站建设领域!中小型企业网站建设最佳合作伙伴!网站建设咨询热线:010-65587978/77/76/75!

Copyright © 2008 网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】. Designed by www.qitongnet.com Free Website Templates