《web 表单设计》-标签

web表单设计有三个基本要素:1、标签  2、输入框 3、动作。标签负责提出问题,输入框供人们填写信息,动作负责提交信息。

在不同的使用场景中,标签有不同的对齐方式。对齐方式的选择主要考虑一下几个要素:1、标签的长度(跨语言的切换)2、用户的填写效率 3、屏幕的空间大小(比如移动设备的横向空间有限)。

目前主要的标签对齐方式有:顶对齐、左对齐、右对齐。还有一种特殊的方式:输入框内标签。

一、顶对齐标签



顶对齐眼动仪追踪轨迹

优点:1、兼容不同长度的标签2、用户处理速度更快,只需要上下浏览表单。

缺点:增加了垂直空间

二、右对齐标签



右对齐眼动仪追踪轨迹


右对齐标签的优点:1、标签与输入框距离较近2、缩短了垂直空间

缺点:1、与顶对齐相比,阅读效率变低。2、标签长度太长或者超过一行时,浏览表单比较困难。

三、左对齐标签



左对齐眼动仪轨迹

左对齐优点:1、浏览标签更加容易2、节省了垂直空间 

缺点:1、标签距离输入框比较远 2、建立标签与输入框的对应关系耗时最长

四、输入框内标签


优点:1、节省了一半的屏幕空间 2、浏览效率较高

缺点:光标激活后,标签消失,用户容易忘记标签内容。

适用于填写内容较少,用户熟悉的表单环境。

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

推荐阅读更多精彩内容

  • 一. 表单设计的影响与原则 1.1 表单的产生 由内而外,网站根据自身信息存储格式要求,从数据库映射成表单。 由外...
    晓梦蝉君阅读 14,173评论 1 30
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 一、表单结构 1、表单的设计 -设计原则 尽量减少痛苦 说明填写完成途径 考虑情境 确保一致沟通 2、表单...
    ba帝儿阅读 3,780评论 0 0
  • 我们每天都要和大量的表单交互,表单设计的好坏直接影响着我们使用产品的直观感受,同时表单设计的好坏还会影响公司产品的...
    北海_阅读 5,176评论 0 14
  • 如果持续性亏损变成一种本能会怎么样呢?目前的我似乎就处在这个怪圈之中。 复盘: 5G:中通国脉(5),极大通讯(2...
    天涯别院阅读 1,059评论 0 0