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

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

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

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

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

左对齐标签


右对齐保签


顶对齐标签

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

三种对齐方式优缺点

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

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

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

二、输入框内标签

输入框内标签

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

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

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

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

三、混合对齐方式

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

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一. 表单设计的影响与原则 1.1 表单的产生 由内而外,网站根据自身信息存储格式要求,从数据库映射成表单。 由外...
    晓梦蝉君阅读 12,158评论 1 30
  • 本书一共14章,讲了三部分内容:表单结构、表单元素、表单交互。表单是横在用户和企业之间的一道障碍, 没有任何人喜欢...
    2c5994723157阅读 3,252评论 0 16
  • 我们每天都要和大量的表单交互,表单设计的好坏直接影响着我们使用产品的直观感受,同时表单设计的好坏还会影响公司产品的...
    北海_阅读 1,369评论 0 14
  • 这两天看了《web表单设计》,根据自己以前对表单的理解,写下总结。 表单的组织 先考虑人,再考虑像素。用户真正关心...
    交互小小白阅读 714评论 1 10
  • 结束了国庆长假后的连续七个工作日,盼来了双休日,原本的计划是早点起床,陪儿子做完功课,下午赶着英语补习和上画...
    只想活得简单阅读 164评论 0 0