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

设计表单的标签和输入区


来源:网络收集 发布时间:2009-05-02 01:07:41 查看次数:
标签水平右对齐

标签右对齐和输入区水平排列,从而降低了对页面高度的要求。但与标签垂直顶对齐相比,由于标签文字左侧参差不齐,对问题的认知和扫描时间变的更长。

标签水平右对齐

眼动轨迹表明,用户花了更多时间在看问题,输入框对他们来说很简单。

右对齐的眼动轨迹

标签水平左对齐

标签左对齐和输入区水平排列,同样降低了对页面高度的要求。标签左对齐有利于用户对问题标签的扫描,但不利于填写答案,因为标签距离输入区较远,要重新定位到右侧输入框,确实要消耗一点时间。

标签水平左对齐

眼动轨迹表明,用户花在定位输入区上的时间比看清标签更长,从而影响了整个表单的完成时间。

左对齐的眼动轨迹

标签在输入区内部

这种方式虽然具备垂直组合的优点,但仍应谨慎使用。当焦点移入输入区后,标签消失,看不到问题,可能会忘记要回答什么,很郁闷,不得不清掉输入好的字,把“问题”还原出来。这种组合比较适合只有一两个输入框的简短表单,而且人们对他很熟悉,不用费力去记住标签提出的问题,比如:搜索框。

输入框内标签

当你真的选择用这种表单的时候,注意,让标签和真实内容区分开来,一些约定俗成的做法是减淡标签字色,在后面打上“…”;下拉菜单则在默认选项两侧打上“-”,以示区别:

下拉菜单

设计要有一条主线,贯穿于整个产品,别让人用着感觉像是几个设计师干的事。认真思考一遍,就会有新一层的理解,这对我的工作有极大的帮助。

·上一条:没有了
·下一条:Dreamweaver中鲜为人知的小秘诀
相关文章
·设计表单的标签和输入区 2009-05-02 01:07:41
·Dreamweaver中鲜为人知的小秘诀 2009-05-02 00:55:13
·用Dreamweaver进行网页优化 2009-05-02 00:52:06
·Dreamweaver表格边框制作详解 2009-05-02 00:50:10
·通过Dreamweaver学习了解CSS 2009-05-02 00:47:30
·在DW中编写CSS应该学会的技巧 2009-05-02 00:46:53
·玩转Dreamweaver速记CSS属性 2009-05-02 00:46:00
·Dreamweaver技巧20则 2009-05-02 00:45:02
文章评论
现在有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.