滚动新闻:
  网站首页     新闻资讯     网络安全     网页制作     办公软件     网站运营     平面设计     网络编程  
今天是,欢迎访问Ok3w新闻发布系统! 请您留言 | 免费下载 | 设为首页 | 加入收藏
您当前位置:网站首页 >> 网页制作 >> Dreamweaver教程 >> 阅读文章
站内查找:

设计表单的标签和输入区


来源:网络收集 发布时间:2009-05-02 01:07:41 查看次数:

有一些元素,看着很简单,设计起来却很头疼。往往这样的元素都具有一个共同的特点——变化多,表单的设计就是如此。你说见过20、30种以上不同的表单,我并不惊讶,产品需求、风格不同,必然五花八门。当然,换了设计师,表单的样式也可能会不同。然而,不能让这种情况继续下去,表单不是艺术展。不要让你的才华阻碍了别人的前进。

表单就是一扇门

古有大禹,三过家门而不入;今有用户,看到表单犯糊涂。难道大禹遇到的是这样的门?

表单,尤其是注册表单,就像一扇门,穿过他才能看到完整的产品。所以千万别做这种门,自己费事不说,用户也不会买账。这个设计最糟糕之处,就在于它有悖常理。好的设计应当遵循于其自然规律,这样一来符合人们预期,使用起来也就顺畅。

表单中标签与输入区的4种对齐方式
  • 标签垂直顶对齐
  • 标签水平右对齐
  • 标签水平左对齐
  • 标签在输入区内部

《Web Form Design》一书中对标签和输入区组合进行了一些研究,我整理了一份数据比较的表格:

数据对比表格

标签垂直顶对齐

标签和输入区垂直依次排列,从而降低了对页面宽度的要求。如果你的页面没有富裕的空间用于标签和输入区的横向排列,这种组合是个不错的选择。

标签垂直顶对齐

眼动轨迹表明,用户自上而下的扫描表单,焦点多集中在左侧一列,且跳动较小。

顶对齐的眼动轨迹

·上一条:没有了
·下一条:Dreamweaver中鲜为人知的小秘诀
相关文章
·Dreamweaver如何创建代码片段 2009-05-02 00:18:55
·Dreamwaver设计div层的对齐方式 2009-04-28 17:41:25
·Dreamweaver常用技巧 2009-04-28 17:25:21
·Dreamweaver十二个小秘诀 2009-04-28 17:15:07
·Dreamweaver制作滚动字幕 2009-04-28 17:14:11
·网页制作之用Dreamweaver优化网页 2009-04-28 17:13:38
·网页制作之用Dreamweaver优化网页 2009-04-28 17:12:56
·Dreamweaver制作网页13种技巧详解 2009-04-28 17:05:21
文章评论
现在有0人对本文发表评论 查看所有评论
赞助商链接
  最新更新
·设计表单的标签和输入区
·Dreamweaver中鲜为人知的小秘诀
·用Dreamweaver进行网页优化
·Dreamweaver表格边框制作详解
·通过Dreamweaver学习了解CSS
·在DW中编写CSS应该学会的技巧
·玩转Dreamweaver速记CSS属性
·Dreamweaver技巧20则
·Dreamweaver七招实用技巧
·Dreamweaver Css背景属性
·Dreamweaver如何创建代码片段
·Dreamwaver设计div层的对齐方式
·Dreamweaver常用技巧
·Dreamweaver十二个小秘诀
·Dreamweaver制作滚动字幕
  阅读排行
·Dreamwaver设计div层的对齐方式
·Dreamweaver常用技巧
·Dreamweaver制作滚动字幕
·设计表单的标签和输入区
·Dreamweaver十二个小秘诀
·Dreamweaver 一打开就关闭的解决法
·网页制作之用Dreamweaver优化网页
·网页制作之用Dreamweaver优化网页
·Dreamweaver制作网页13种技巧详解
·用Dreamweaver制作网页中常用的过渡效果
·Dreamweaver技巧20则
·用Dreamweaver进行网页优化
·Dreamweaver中鲜为人知的小秘诀
·Dreamweaver表格边框制作详解
·通过Dreamweaver学习了解CSS
关于我们 | 使用说明 | 联系方式 | 免责声明 | 免费下载 | 有事请留言 | 滇ICP备08101427号
联系邮箱:zhengbi888@yahoo.com.cn 在线QQ:124895502
Copyright 2009, 版权所有 www.glzy8.com.