Web表单设计—点石成金的艺术(三)之标签

每个表单都至少有三个基本要素:标签、输入框、动作。标签则负责提出问题。

标签除了要简洁清晰让人们明白外,还应具备良好的布局。

一、三种常见的标签对齐方式

输入框标签包括顶对齐、右对齐和左对齐。如下图所示:

左对齐标签


右对齐保签


顶对齐标签

下表中详细列明了三种对齐方式的优缺点:

三种对齐方式优缺点

马泰奥·彭佐的眼动研究发现三种对齐方式的填写速度:

三种对齐方式的速度及试用情景

可见,填写速度分别是顶对齐最快,其次是右对齐,左对齐最慢

二、输入框内标签

输入框内标签

这种做法可以节省宝贵的屏幕空间,但是填写时输入框内的标签会消失,如果突然忘记了要回答什么问题,可能一时半会找不到标签。因此该方案并不适用于表单太长甚至中等长度的表单。

该方式更适用于问题只有一个的表单如搜索框,或者问题很熟悉如通讯录

不明显的问题不建议采用输入框内标签。

现在开发人员通常使用placeholder属性来设置输入框内表签。

三、混合对齐方式

如果考虑在同一工具或网站不同表单采用不同的对齐方式,应当平衡情景和一致性。而情景常常比一致性更重要。

同一表单中不建议使用不同标签对齐方式,会破坏明确完成路径,让人们感到迷惑。

Web表单设计—点石成金的艺术(一)

Web表单设计—点石成金的艺术(二)

推荐阅读更多精彩内容

  • 一. 表单设计的影响与原则 1.1 表单的产生 由内而外,网站根据自身信息存储格式要求,从数据库映射成表单。 由外...
    晓梦蝉君阅读 5,183评论 3 29
  • 本书一共14章,讲了三部分内容:表单结构、表单元素、表单交互。表单是横在用户和企业之间的一道障碍, 没有任何人喜欢...
    交枪不杀阅读 1,637评论 0 14
  • 我们每天都要和大量的表单交互,表单设计的好坏直接影响着我们使用产品的直观感受,同时表单设计的好坏还会影响公司产品的...
    北海_阅读 599评论 0 13
  • 这两天看了《web表单设计》,根据自己以前对表单的理解,写下总结。 表单的组织 先考虑人,再考虑像素。用户真正关心...
    交互小小白阅读 391评论 1 10
  • 无论你是做什么产品的,我相信表单设计的需求都是非常常见的,但是也是容易被忽略的。跟以往不同的是,写这篇文章并不是我...
    idatadesign阅读 856评论 1 25