表单设计中标签的布局方式有哪些

表单设计的标签本质上是一个与用户对话的起点,了解表单设计的标签的设置规则后,需要关注标签的布局方式,因为网页表单设计是影响用户如何回答问题的关键。表单设计标签的布局方式主要包含三种,测试数据展示,用户耗时从少到多的分别是顶对齐标签、右对齐标签、左对齐标签。下面介绍表单设计中标签的布局方式有哪些?

1、顶对齐标签

表单设计的顶对齐的布局方式,标签和输入框的位置非常靠近,是用户阅读和填写的时间话费少,顶对齐标签为填写表单提供了清晰的完成路径,比左对齐标签方式快。此外,顶对齐标签还提供了大量的横向空间,在扩大或者收缩标签文字时,不会对整个页面布局产生负面影响,非常适用于长标签或者跨文化的本地化场景,例如英文切换至法语、荷兰语等比前者长两倍的语言情况。

2、右对齐标签

表单设计的右对齐标签同样具有输入框与标签相邻的优点,但容易造成左侧不齐,会相对降低阅读表单问题的效率,如果出现标签文字宽度变化,右对齐标签方式还会产生灵活性问题。根据基本原则,在设置表单设计标签的时候,我们应当从用户真正关心的问题内容和用户是否需要回答问题这两个维度来考量标签,尽量让用户少回答问题,并且是在合适的场景下回答合适的问题。

3、左对齐标签

表单设计的三种对齐方式中,左对齐表单的填写速度慢。因为某些长标签经常会增加标签和输入框之间的距离,用户也经常进行“上上下下”式地阅读标签,不会被输入框打断,直到发现输入框和标签之前的联系。尽管表单设计的左对齐标签方式需要用户完成的时间较长,但如果需要用户放慢阅读速度并仔细思考表单中的每个输入框,这倒不失为一个好办法。

表单设计除了这三种主要的布局方式之外,偶尔也会看到输入框内的标签布局方式。如果屏幕空间宝贵,口碑好的表单设计可以考虑将标签和输入框组合成这种单一的用户界面元素。需要考虑的是对于不明显的问题不建议采用输入框内标签,因为用户往往需要参考标签来进行回答。、

其它感兴趣内容可到东软平台产品官网了解https://platform.neusoft.com/allproducts/dataviz/

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

推荐阅读更多精彩内容

  • 这个序可能会有些长 先作个自我介绍,我是一名交互设计师,90后。我并不怎么喜欢编辑文章或写点什么,就是因为懒,所以...
    IxDKN阅读 13,795评论 16 160
  • 一. 表单设计的影响与原则 1.1 表单的产生 由内而外,网站根据自身信息存储格式要求,从数据库映射成表单。 由外...
    晓梦蝉君阅读 14,189评论 1 30
  • 书里面这部分叫序 先作个自我介绍,我是一名交互设计师,90后。 其实我不怎么喜欢编辑文章或写点什么,总觉得很难(l...
    IxDKN阅读 10,388评论 3 33
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 上回我们从朱灵本传中得到了朱灵本身的记录,然而这些事不全面的,所以今天就根据其他人的传记,对朱灵的生平进行补充。 ...
    做笔记的喵Cc阅读 3,452评论 0 3