主机运维
当前位置:主页 > 建站资讯 > 主机运维 >
迄今为止最好的形式用户体验度:浮动选项卡形式
发布日期:2021-04-28 阅读次数: 字体大小:

迄今为止最好的形式用户体验度:浮动选项卡形式



在当今的互联网时代,填写表格对于用户来说是司空见惯的事情。 在网站上注册和在线购物时,不可避免地要填写表格。 表单是Web设计的重要组成部分之一,并且在获取用户信息方面起着不可或缺的作用。 它是用户与网站之间互动的一种形式。 这种互动形式越流畅,用户在网站上的转化率就越高。 更高。 这就是为什么许多网站管理员一直在研究如何设计表单以允许用户快速有效地填写表单的原因。 如今,表单设计的方法越来越丰富。 不是这种情况。 最近,浮标形式出现了。 许多设计师认为,这种设计方法对改善用户体验具有显著作用。 因此,今天,小飞将介绍浮动标签表格的开发过程以及它的优点。
在介绍浮动标签表单之前,我们首先要了解该表单的组成部分:
标签:告诉用户表单中的问题是什么;
输入框:用户填写答案信息;
action:用户提交表单,即用户单击按钮或链接以执行操作;
帮助文本:提供有关如何填写表格的帮助;
输入反馈:提供有关用户输入的反馈,无论输入是否正确;

迄今为止最好的形式用户体验度:浮动选项卡形式



浮动标签格式的开发过程:
阶段1:文字占位符在图标动画旁边
最早于2013年 ,浮动标签形式这个概念已经出现。 当时设计师的想法很简单。 在占位符文本中,在动画的帮助下添加了一个图标显示,以确保用户在填写信息的过程中不会迷路。 但是,这种形式有一个缺陷:并非所有文本标签都具有可以匹配的图标,并且没有图标的文本标签不够清晰,无法传达信息。

迄今为止最好的形式用户体验度:浮动选项卡形式

[hh]第2阶段:浮动标签
尽管浮动图标动画没有达到效果,但它给了设计师一些启发和启发。 接下来是浮动标签设计。 在这种设计中,当用户单击输入框时,文本标签占位符将浮到输入框的顶部。 这种动画效果使用户可以理解标签和输入内容之间的关系。 此外,标签的颜色也会相应更改,从而使用户可以知道哪个输入框是活动的。 浮动标签的优点是显而易见的:简洁,清晰且高度可用。

迄今为止最好的形式用户体验度:浮动选项卡形式



看到这一点,我相信您已经对浮动标签有了一定的了解。 以下小飞将比较传统的顶部固定标签和浮动标签,以便每个人都对浮动标签的优点有更深入的了解:
1.视觉压力较小
尽管固定和浮动标签也仅具有 4个字段,但在顶部的固定选项卡样式形式中,用户实际上需要浏览更多内容。 这是因为固定标签和输入框是分开的,并且有一定的空白区域。 似乎这些都是需要浏览的8个字段。 在执行视觉处理时,用户会下意识地感觉到信息量很密集,并且有很多内容需要填写。在浮动标签中,标签字段占据的位置相对较小,主输入字段更加醒目 ,这不会给用户带来视觉或心理压力。
2。 更容易检查
填写表格后,用户通常会快速检查内容,然后提交。 在顶部固定标签中,独立标签和输入框将使用户在检查字段内容时浪费大量时间。 这是因为标签和输入框之间存在一定的分界线。 用户必须上下扫描以匹配输入内容和相应的标签,以确保填写的字段正确,这无形地使检查工作变得繁琐而复杂。除顶部固定标签外,还有一种表单设计模式可用。 也就是说,将标签标记为占位符输入框中,当用户单击输入时它将自动消失。 这种设计也存在问题。 尽管它们看起来很简单,但用户很容易忘记输入内容时需要输入哪些字段。 这种需要检查内存的设计方法增加了用户的认知负担。
第三种解决方案是我们现在所说的浮动标签,它结合了前两者的优点,并成功地规避了两者的缺点。 一方面,浮动标签占用的空间较小,并且不会像固定标签一样引起视觉障碍。 简单的设计有助于顺利地检查数据; 另一方面,标签只会在用户进入时自动向上移动。 消失,不会使用户感到困惑并减轻认知压力。

迄今为止最好的形式用户体验度:浮动选项卡形式



3。 更明显的视觉焦点
在移动界面中,如何控制视觉焦点非常重要。 这是因为由于屏幕限制,用户通常在查看界面时进行键入。 只有完成内容输入后,他们才会回头查看输入内容以及输入是否自动正确。输入框的视觉焦点越明显,用户在填写信息时会发现越方便。 以下是在三种不同的表单设计模式下输入区域的可识别性的比较:
第一个是顶部的固定标签。 在这种设计中,输入框的字段很突出,但是标签的识别是不够的(为了区分输入字段和标签,大多数形式都是以此方式设计的)
第二种设计是当用户进入时标签消失。 在这种模式下,该字段足够突出,但是文本标签是完全不可见的,并且用户无法判断输入内容是否满足要求;
第三种是浮动标签。 在此模式下,标签和输入字段在颜色和大小上有所区别,边框和标签围绕该字段,具有清晰的主要和次要效果,以及更好的视觉效果。

迄今为止最好的形式用户体验度:浮动选项卡形式



4。 更清晰的错误反馈
无论表单采用哪种设计模式,当用户输入错误信息时,表单都需要立即报告错误,以供用户调整内容。 在这种需求下,最上面的固定标签和浮动标签设计模式可以更清楚地传达错误消息,而输入期间隐藏标签的设计只能通过输入框的颜色来识别,这是相对较差的。

迄今为止最好的形式用户体验度:浮动选项卡形式



老实说,无论我们探索了多少个最佳网站示例,多少个最新趋势设计趋势,我们都无法确保用户对 网站。 因为有太多因素影响用户与网站之间的交互:用户对设计趋势,用户习惯等的熟悉程度,所以即使是不同年龄的用户也将对同一设计表现出不同的反应。 因此,测试是必不可少的,毕竟实践是检验真相的唯一方法。 在设计表单时,我们还必须针对目标群体,不同的设备等进行测试,以便我们知道哪种设计模型更符合我们的品牌特征并且可以更有效。
最后,小飞想说的是,当用户填写表格时,很容易犹豫和放弃。 通过表单获取用户信息,改善用户体验,提高用户转化率。 我们必须尽可能简化此过程,注意每一个细微的变化,无论是标签的显示形式还是标签的颜色,都应尝试提高其可用性。 快来在Qifeiye的自助网站建设平台(https://www.jianzhanlong.com(建站龙)

标签:用户体验度输入框占位符占位符文本