-
输入表单的三种布局2007-06-18
版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://dedream.blogbus.com/logs/5992307.html
关于输入表单的三种常用布局,大家应该都比较熟悉了,
第一种是这样,称为右对齐/左对齐,左边的标签右对齐,右边的输入框左对齐(来自yahoo):

第二种是左对齐/左对齐,左边的标签左对齐,右边的输入框左对齐(来自Google):

另一种方式是标签在上,输入框在下(来自豆瓣):

(以上源页面版权归各网站所有,红色或绿色的指示线为作者添加。)
这三种方式各有什么不同呢?
从视觉流来看,右对齐/左对齐强调的是标签和输入框这一对元素之间的关系(从左到右,它们在距离上最接近),缺点是,如果左边的标签长短差别很大,就会造成参差不齐很难看的页面;左对齐/左对齐的布局削弱了这种标签-输入框的对应关系,但是很方便从上到下浏览所有的输入标签,当然,如果左边的标签长短差别大,也会造成距离过远,难看的页面;上下布局则兼顾了标签和输入框之间的关系,以及从上到下的很好的逻辑顺序,它的缺点是,不适合输入框太多的情况。
左右两种布局在中文界面上也许可以取得一致,即,让所有的标签长度一致,在左对齐的同时也右对齐,中文真是一门奇妙的语言,在英文页面上,就很难做到这一点了。
问题:
什么时候应该采用右左布局,什么时候应该采用左右布局?
为什么我说上下布局不适合输入框太多的情况?
随机文章:
说说Axure 2009-04-30年度感言兼新年快乐 2008-12-31移动也做sns了 2008-12-31两个关于在线客服设计的问题 2008-12-08转帖一篇关于响应的文 2008-11-24
收藏到:Del.icio.us








评论
关于上下:我觉得当输入框太多的情况下,可能会有两种缺点:
一方面是,上下排版同样的输入框会占去等于左右排版的两倍的版面,浪费了版面,很可能使得我需要借助鼠标的滚轮才能完成注册。
另一方面,我觉得这样很可能会造成标题和输入框对应错位的情况,(douban网采用字体区别来减小这种情况)。
就像这个blog的评论留言的排版一样,我很容易就把评论和发表评论的人对错位(我会搞不清楚到底是评论在上面还是发表人名在上面),即使同一个人的发言与他的签名离得更近一些,但这仍然需要我思考一段时间(虽然是很短的时间)才能确定。
填空内容是常规问题,促进用户快速完成注册
左右google:
促进用户认真阅读左边的内容,填空内容是需要三思的
上下:
如果问题n太多,每个问题包含标题,填空内容,注释3个信息行
3*n,回去检查填空内容会不会陷入行行阵中
期待答案