码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-02-21 17:33:33      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:文化   官网   products   大量   sof   距离   产品   text   com   

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

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

2、右对齐标签

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

3、左对齐标签

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

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

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

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

标签:文化   官网   products   大量   sof   距离   产品   text   com   

原文地址:https://blog.51cto.com/14179302/2353022

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!