发布时间：2024-4-11 分类： 电商动态
在今天的互联网时代，填写表格对于用户来说是司空见惯的。在网站上注册和登录时，在网上购物时，填写表格是不可避免的。表单是网页设计的重要组成部分，在获取用户信息方面发挥着不可或缺的作用。它是用户和网站的交互形式。互动形式更顺畅，网站用户转化率更高。越高。这就是为什么许多网站管理员一直在研究如何设计表单以允许用户快速有效地填写。如今，形式设计的方法变得越来越丰富。不是这种情况。最近，浮动标签式表格已经推出。许多设计师认为这种设计方法在改善用户体验方面非常有效。所以今天，小飞将介绍浮动标签形式的发展及其有哪些优势。
在我们介绍浮动选项卡表单之前，让我们看一下表单的组件：
标签：告诉用户表单问题是什么;
输入框：供用户填写答案信息;
操作：用户提交表单，即用户单击按钮或链接以执行操作;
帮助文本：有关如何填写表单的帮助;
输入反馈：为用户输入提供反馈，输入正确或错误;
浮动标签式表单的发展历程：
阶段一：文本占位符旁的图标动画
早在2013年，就出现了浮动标记的概念。当时，设计师的想法很简单。在占位符文本中，添加了一个动画以显示图标，以确保用户在填写信息的过程中没有丢失。但是，这种形式有一个缺陷：并非所有文本标签都有可以匹配的图标，没有图标的文本标签在传递信息时不够清晰。
阶段二：浮动标签
虽然浮动图标动画没有达到效果，但它给了设计师一些灵感和灵感。接下来是浮动标签设计。在此设计中，当用户单击输入框时，作为占位符的文本标签将浮动在输入框上方。此动画效果允许用户理解标签和输入内容之间的关系。此外，标签的颜色将相应地改变，允许用户知道哪个输入框是活动的。浮动标签的优点显而易见：简单，清晰和高可用性。
看到这里，我相信每个人都对浮动标签有一定的了解。下面，通过比较传统的顶部和浮动标签，Xiaofei将更深入地了解浮动标签的优势：
1. 更小的视觉压力
虽然固定和浮动标签也只有4个字段，但在顶部固定标签形式中，用户实际上需要浏览更多内容，因为固定标签和输入框是分开的，有一定的空白。对于该地区，用户看来这恰好是需要查看的8个字段。当用户进行视觉处理时，他们会下意识地意识到信息量相对密集，并且有很多内容需要填写。在浮动标签中，标签字段占据相对较小的位置，并且主输入字段更加显着，并且不会给用户带来视觉或心理压力。
2. 更容易检查
表单填写完毕后，用户通常会快速检查内容并提交。在顶部固定选项卡中，单独的标签和输入框将允许用户浪费大量时间来检查字段的内容。这是因为标签和输入框之间存在一定的分界线。用户必须上下扫描匹配的输入内容和相应的标签，以确保填充的字段正确，这使得检查工作复杂和复杂。
除了顶部固定标签外，还有一种表单设计模式。也就是说，标签在输入框中作为占位符放置，并在用户单击输入时自动消失。这种设计也存在问题，虽然它们看起来非常简单，但用户可以轻松忘记在打字时需要输入的字段。这种设计内存的方式需要增加用户的认知负担。
第三个解决方案是我们现在称之为浮动标签，它结合了前两个的优点，并成功地避免了两者的缺点。一方面，浮动标签占据较少的位置，并且不会像固定标签那样产生视觉障碍。简单的设计有助于顺利检查数据;另一方面，标签仅在用户输入时自动向上移动。消失，这不会让用户感到困惑，减少认知压力。
3. 更明显的视觉焦点
在移动界面中，如何控制视觉焦点非常重要。这是因为由于屏幕的限制，用户通常会查看界面输入。只有在他们完成输入内容后，他们才会返回并查看他们输入的内容以及输入是否是自动的。输入框的视觉焦点越明显，用户填写信息时就越方便。下面是3种不同形式设计模式下输入区域可识别性的比较：
第一个是顶部固定标签。输入框中的字段在此设计中很突出，但标签不够清晰（为了区分输入字段和标签，大多数表单都是这样设计的）;
第二个是用户输入时标签的设计消失。在这种模式下，字段足够突出，但文本标签完全不可见，用户无法判断输入是否符合要求;
第三个是浮动标签。在这种模式下，标签和输入字段在颜色和大小上有区别，边框和标签都在字段周围，主要和次要是不同的，视觉效果很好。
4. 更清晰的报错反馈
无论表单采用何种设计模式，当用户输入错误信息时，表单需要立即报告错误，以便用户调整内容。在这种需求下，顶部固定标签和浮动标签的设计模式可以更清晰地传达错误信息，输入时隐藏标签的设计只能通过输入框的颜色来识别，这是相对更容易辨认的。 。区别。
说实话，无论我们探索了多少最好的网站示例，以及有多少最新的趋势趋势，我们都无法确保用户对网站做出回应。因为有太多因素会影响用户与网站的互动：用户对设计趋势的熟悉程度，用户的使用习惯等，即使是不同年龄段的用户也会对同一设计有不同的反应。因此，测试是必不可少的，毕竟，实践是检验真相的唯一方法。在设计表格时，我们还需要测试目标群体，不同设备等，以便了解哪种设计模式更符合其自身的品牌特征并且更有效。
最后，小飞想说，当用户填写表格时，很容易放弃并犹豫放弃。通过表单获取用户信息，改善用户体验并提高用户转换率。我们必须尽可能地简化流程，注意每一个微妙的变化，无论是标签的显示形式还是标签的颜色，以最大限度地提高其可用性。来到起飞页自助网站（http://www.qifeiye.com/?t_wd=a5）建立一个快速响应的网站！
