• 输入表单的三种布局2007-06-18

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://dedream.blogbus.com/logs/5992307.html

    关于输入表单的三种常用布局,大家应该都比较熟悉了,

    第一种是这样,称为右对齐/左对齐,左边的标签右对齐,右边的输入框左对齐(来自yahoo):

     right left

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

     form left left

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

    updown

    (以上源页面版权归各网站所有,红色或绿色的指示线为作者添加。) 

    这三种方式各有什么不同呢?

    从视觉流来看,右对齐/左对齐强调的是标签和输入框这一对元素之间的关系(从左到右,它们在距离上最接近),缺点是,如果左边的标签长短差别很大,就会造成参差不齐很难看的页面;左对齐/左对齐的布局削弱了这种标签-输入框的对应关系,但是很方便从上到下浏览所有的输入标签,当然,如果左边的标签长短差别大,也会造成距离过远,难看的页面;上下布局则兼顾了标签和输入框之间的关系,以及从上到下的很好的逻辑顺序,它的缺点是,不适合输入框太多的情况。

    左右两种布局在中文界面上也许可以取得一致,即,让所有的标签长度一致,在左对齐的同时也右对齐,中文真是一门奇妙的语言,在英文页面上,就很难做到这一点了。

     问题:

    什么时候应该采用右左布局,什么时候应该采用左右布局?

    为什么我说上下布局不适合输入框太多的情况?


    收藏到:Del.icio.us

    评论

  • 呵呵,学医的我上半学期在学校选修了数据分析,有节课是调查问卷的设计,为平时很普通的东西背后原来有很多学问而mini惊叹了下,呵呵,现在super mini了下下
  • 呵呵,学医的我上半学期在学校选修了数据分析,有节课是调查问卷的设计,为平时很普通的东西背后原来有很多学问而mini惊叹了下,呵呵,现在super mini了下下
  • YAHOO中英文邮箱还不能通用。
  • 不错,很好,很强大,欢迎大家在博客大巴踊跃发言,请关注地震事件!为我们的国家出一份力。 q4z7m6xr
  • 觉得mason说的左右和右左很有道理。



    关于上下:我觉得当输入框太多的情况下,可能会有两种缺点:

    一方面是,上下排版同样的输入框会占去等于左右排版的两倍的版面,浪费了版面,很可能使得我需要借助鼠标的滚轮才能完成注册。



    另一方面,我觉得这样很可能会造成标题和输入框对应错位的情况,(douban网采用字体区别来减小这种情况)。

    就像这个blog的评论留言的排版一样,我很容易就把评论和发表评论的人对错位(我会搞不清楚到底是评论在上面还是发表人名在上面),即使同一个人的发言与他的签名离得更近一些,但这仍然需要我思考一段时间(虽然是很短的时间)才能确定。
  • 右左yahoo:

    填空内容是常规问题,促进用户快速完成注册



    左右google:

    促进用户认真阅读左边的内容,填空内容是需要三思的



    上下:

    如果问题n太多,每个问题包含标题,填空内容,注释3个信息行

    3*n,回去检查填空内容会不会陷入行行阵中



    期待答案
  • 您好,看过你的blog内容非常丰富,我是做.NET的,想和您取经,交个朋友,我已经把您的链接做好了,希望您也能帮我做下.谢谢..
  • windy JJ 的文章总是写的这么精彩,继续学习中。。。。。。。