设计表单的标签和输入区(2)
作者:波希米亚 来源:b3inside.com 发布时间:2009-04-27 16:16:00
标签:设计,表单,标签,注册
标签水平右对齐
标签右对齐和输入区水平排列,从而降低了对页面高度的要求。但与标签垂直顶对齐相比,由于标签文字左侧参差不齐,对问题的认知和扫描时间变的更长。
眼动轨迹表明,用户花了更多时间在看问题,输入框对他们来说很简单。
标签水平左对齐
标签左对齐和输入区水平排列,同样降低了对页面高度的要求。标签左对齐有利于用户对问题标签的扫描,但不利于填写答案,因为标签距离输入区较远,要重新定位到右侧输入框,确实要消耗一点时间。
眼动轨迹表明,用户花在定位输入区上的时间比看清标签更长,从而影响了整个表单的完成时间。
标签在输入区内部
这种方式虽然具备垂直组合的优点,但仍应谨慎使用。当焦点移入输入区后,标签消失,看不到问题,可能会忘记要回答什么,很郁闷,不得不清掉输入好的字,把“问题”还原出来。这种组合比较适合只有一两个输入框的简短表单,而且人们对他很熟悉,不用费力去记住标签提出的问题,比如:搜索框。
当你真的选择用这种表单的时候,注意,让标签和真实内容区分开来,一些约定俗成的做法是减淡标签字色,在后面打上“…”;下拉菜单则在默认选项两侧打上“-”,以示区别:
设计要有一条主线,贯穿于整个产品,别让人用着感觉像是几个设计师干的事。认真思考一遍,就会有新一层的理解,这对我的工作有极大的帮助。
原文:http://blog.b3inside.com/userexperience/label-and-input-in-form-design/
0
投稿
猜你喜欢
- 本节笔者主将要介绍Active Server Page的另一对象Response,Response对象的作用是在向浏览器发送数据。将Resp
- 最简单的方法:取整后判断是否和原值相等!javascript的取整函数是:parseIntif(parseInt(value)==value
- 假如不使用INSTEAD OF触发器或可更新分区视图而是通过视图来修改数据,那么再修改之前,请考虑下列准则:◆如果在视图定义中使用了 WIT
- 方案5 使用xml参数 对sql server xml类型参数不熟悉的童鞋需要先了解下XQuery概念,这里简单提下XQuery 是用来从
- 阅读《YUI学习笔记(1)》YAHOO.lang.dump 与 YAHOO.lang.substitute。1.&nbs
- 我们经常会遇到多重查询问题,而长长的SQL语句往往让人丈二和尚摸不着头脑。特别是客户端部分填入查询条件时,如用普通方法将更是难上加难。以下巧
- 代码如下:<% Randomize Do While Len(pass)<12 
- 本篇文章适合css新手学习,对于已经掌握了css的朋友们也可以通过本片文章来复习知识。作者通过实践,认为在有些情况下css的代码是可以更加简
- ERROR 2003:Can't connect to MySQL server on 'localhost' (1
- 这样处理的弊端是:如果数据量大,子分类很多,达到4级以上,这方法处理极端占用数据库连接池 对性能影响很大。 如果用SQL下面的CTE递归处理
- 因AJAX接受数据时服务器默认是采用UTF-8的编码形式进行传送,所以在很多GB2312中文网页中应用AJAX回传数据经常会发生中文乱码。解
- 在这系列视觉设计的文章间隙插一篇字体单位的文章。前文说了,字体单位应该用em而不用px,原因简单来说就是支持IE6下的字体缩放,在页面中按c
- 如何制作一个从Access数据库中读取记录的下拉菜单?看看这个例子:<% SQL = "SEL
- 书 名:细节决定交互设计的成败国际书号:ISBN 978-7-121-08232-0作 &nb
- 现在电子商务网站的设计,正面临着一系列的挑战,其中最主要的挑战是:我们尝试建立一种用户体验,来提高用户在线购物的可能性。为了对抗网上激烈的竞
- 我们小组讨论的话题是tab(标签)在使用时的禁忌。在讨论的开始,大家很快产生了六个感兴趣的话题:如何处理海量的tab?在浏览器中关掉tab之
- 在我的上篇文章发出之后,我听到对“WEb2.0视觉风格”这个称谓的不认同声音。其实这并不出乎我的意料,因为,我在认真的开始思考“WEb2.0
- (一)行号显示和排序 1.SQL Server的行号 A.SQL 2000使用identity(int,1,1)和临时表,可以显示行号 SE
- ALTER TABLE将表更改为当前字符集。如果在执行ALTER TABLE操作期间遇到重复键错误,原因在于新的字符集将2个键映射到了相同值
- 以SQL Server中的Northwind示范数据库为例,利用DTS设计器,进行数据的转移。转移任务的步骤:◆1. 新建目的数据库NOrt