设计表单的标签和输入区

重读LukeW的《Web Form Design:Filling in the Blanks》感触很深,除佩服LukeW的钻研精神外,更多的是学习他对设计细节的执着和理解。我把对本书的理解,与工作生活中遇到的实际问题结合起来,作为今后设计工作的指导和规范。

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

表单就是一扇门

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

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

表单中标签与输入区的4种对齐方式

  • 标签垂直顶对齐
  • 标签水平右对齐
  • 标签水平左对齐
  • 标签在输入区内部

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

数据对比表格

标签垂直顶对齐

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

标签垂直顶对齐

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

顶对齐的眼动轨迹

标签水平右对齐

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

标签水平右对齐

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

右对齐的眼动轨迹

标签水平左对齐

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

标签水平左对齐

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

左对齐的眼动轨迹

标签在输入区内部

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

输入框内标签

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

下拉菜单

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

设计表单的标签和输入区

分享到朋友圈


20条评论

  1. 一直习惯于使用右对齐。
    顶对齐较少用。

    郁闷的是,我还见过这样要命的排版存在。。。。
    ——————————-
    昵 称:[________________]
    电子邮件:[________________]
    ——————————-

    标签在输入区内容的方法,
    我觉得在登录表单是可推荐使用的,
    在较长的表单,如注册表单不推荐使用。

  2. 郁闷的是,我还见过这样要命的排版存在。。。。

    昵  称:[________________]
    电子邮件:[________________]

  3. 你说这种是“具有中国特色”的标签,设计者更看重的是标签文字的整齐,比如以4个字为基准,其中2个字,3个字的标签都用空格占位。如果按这种做法来搞一注册表单出来,填表的人还不疯了~

  4. B3,遇到上面那位很无奈吧。
    标签水平右对齐往往在实际应用中能找到最好的平衡,只要标签字数控制好点,就没研究结果那么极端,这点和文案又有关系了。
    但这也要看标签和输入框的整体跨度有多大,不然还是垂直标签好些。

  5. 分析的不错啦,但也需要根据实际的状况,灵活的运用啦。。。 。。。

  6. @jary,恩,没错。其实自己仔细考虑过这个问题,以后就有章可循了。之所以会出现各种样式混用和叫不准,是因为自己还没对这个问题吃透。居右比较适合国内,上面的数据作为指导,此外还要考虑中文的特点,排列的美观

  7. 恩,要考虑到中文的特点,中文的排版设计更有难度,更需要深研究..

  8. @jary
    @B3

    我想AZero举例的意思是表示不赞成这种生硬的对齐。
    下面这种右对齐,我也一直很喜欢。
    昵称:_________
    电子邮件:_________

    怎样对齐,不能一概而论
    跟表单的长短也有关。
    如果不是很长的表单,使用上面这种右对齐,并无不妥。

  9. 麻烦B3删除上一条无用评论。
      昵称:_________
    电子邮件:_________

  10. @Mesure,恩,没关系,我也遇到过那种对齐情况,所以在《标签水平右对齐更适合中文网站》中,找了一个现实中的例子

  11. 如果中间出现一项勾选框,表述又很长
    昵称:_________
    电子邮件:_________
    是否发送到你的邮箱里确认 X
    这个时候这一项的勾选框左好 右好:)

  12. 对于第一种标签垂直顶对齐的看来你给了很高的评价,对于那些数据来源的准确性现先不做考证,个人认为,前标签和内容参差排列,本身主是影响阅读的一种做法,当然这结于空间少的情况下是可用的,当空间过多的情况,其不足性很快就表现出来.

    对于空间过多的情况,用户首先要判断哪个是必填项>>快速扫描

    其次是是表单篇幅过长,这是一个致命的不足,足以吓跑很多用户。

    长其用户养成的右对齐的表单阅读习惯难以重到照顾!

    所以在选择顶对齐的时候就一定要慎重!

  13. 我并没有对垂直顶对齐给予很高的评价,这篇文章只是列举来一些常见的对齐方式和测试结果,虽然从数据来看垂直顶对齐优势很明显,但并不代表它适合中文网站,之后我写了一篇《标签水平右对齐更适合中文网站》表明了我的观点。

  14. 您好,我正在写一篇关于网站注册流程的文章《网站注册流程的分析与研究》,http://www.loveucd.com/,希望你过去看看。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*