智唯高端建站是一家专注中小型企业网站建设、营销型网站建设、响应式网站建设公司

建站优化电话:138 2557 5516(免费SEO检测 保证收录 保证排名)
广州建站微信号
返回旧版
行业新闻News
公司网站建设

目前为止用户体验度最好的表单:浮动标签式的表单

关键词:广州建站 作者:智唯建站 | VISITORS: | 来源:智唯网络科技
26Jan
2018
在当今这个互联网时代,填写表单对用户来说就是家常便饭,在网站进行注册登录时、在网上购物时,都免不了填写表单这一环。表单是网页设计中重要的组成部分之一,在获取用户信

undefined

 

  在当今这个互联网时代,填写表单对用户来说就是家常便饭,在网站进行注册登录时、在网上购物时,都免不了填写表单这一环。表单是网页设计中重要的组成部分之一,在获取用户信息方面发挥着不可或缺的作用,它是用户和网站的一种互动形式,这种形式的互动越顺畅,网站的用户转化率就越高。这也是为什么许多站长们一直在研究如何设计表单才能让用户快速高效地填写。如今,关于表单设计的方法也越来越丰富,这不,最近又兴起了浮动标签式的表单,不少设计师认为这种设计手法在提升用户体验方面的效果很是显著。所以今天小飞就来介绍一下浮动标签式表单的发展历程以及它究竟有哪些优势。

  在介绍浮动标签式表单之前,我们先来了解一下表单的组成部分:

  标签:告诉用户表单问题是什么;

  输入框:供用户填写答案信息;

  动作:用户提交表单,即用户点击一个按钮或链接,执行一个操作;

  帮助文字:为如何填写表单提供帮助;

  输入反馈:针对用户输入给出反馈,输入正确还是错误;

  

undefined

 

  浮动标签式表单的发展历程:

  阶段一:文本占位符旁的图标动画

  早在2013年,浮动标签式这个概念就已经出现了。当时设计师的想法很简单,在占位符文本中,借助动画加入一个图标显示,以确保用户不会在填写信息的过程中迷失。不过,这种形式有一个缺陷:并不是所有的文本标签都有可以搭配的图标,没有图标搭配的文本标签在传递信息时不够清晰。

  

undefined

 

  阶段二:浮动标签

  虽然浮动式图标动画没有达成效果,但却给了设计师一些启发和灵感。随之而来的就是浮动式的标签式设计了。在这种设计中,当用户点击输入框的时候,作为占位符的文本标签会向上浮动到输入框的上方,这种动画效果能让用户明白标签和输入内容之间的关系。另外,标签的颜色也会有相应的改变,能让用户知道哪个输入框正处于活动状态。浮动式标签的优势很明显:简洁、清晰、可用性高。

  

undefined

 

  看到这里,相信大家对浮动式标签已经有了一定的了解。下面小飞将通过传统的顶部固定标签和浮动式标签的对比,让大家对浮动式标签的优点有更加深刻的认识:

  1. 更小的视觉压力

  虽然固定式和浮动式的标签同样只有4个字段,但是在顶部固定标签式的表单中,用户其实需要浏览更多的内容,这是因为固定式标签和输入框是分开的,是有一定空白区域的,在用户看来,这完全是8个需要浏览的字段。用户在进行视觉处理时会下意识觉得信息量比较密集,需要填写的内容很多。而在浮动式标签中,标签字段相对而言占据较小的位置,主体输入字段更加显眼,不会给用户带来视觉上或心理上的压力。

  2. 更容易检查

  在表单填写好之后,用户通常都会快速地检查一遍其中内容,再进行提交。而在顶部固定式标签中,彼此独立的标签和输入框会让用户在检查字段内容时浪费不少时间。这是因为标签和输入框之间有一定的分界线,用户必须上下扫视匹配输入内容和对应标签,以确保填写的字段是正确的,这无形之中就让检查工作变得繁琐复杂。

  除了顶部固定标签外,,这还有一种可用的表单设计模式。那就是让标签作为占位符置于输入框中,当用户点击输入时候就自动消失。这种设计同样也存在问题,虽然它们看上去很是简约,但用户在输入内容时很容易忘记需要输入的字段是什么。这种需要考察记忆力的设计方式加重了用户的认知负担。

  而第三种解决方案就是我们现在所说的浮动式标签,它结合了前面两者的优点,又成功的规避了两者的缺陷。一方面,浮动式标签占据位置较少,不会产生固定标签那样的视觉障碍,简约的设计有助于数据的顺畅检查;另一方面,标签在用户输入的时候只会自动上移而不会消失,这不会让用户感到疑惑,降低了认知压力。

  

undefined

 

  3. 更明显的视觉焦点

关于网站制作,看看客户怎么说
***(匿名) 评价文章 签约佛山宏飞石材网站制作服务

2016年7月,佛山建站公司智唯网络成功签署佛山宏飞石材PC网站建设项目。帮助宏飞石材树立全新的品牌形象。具体包括:品牌策划、网页设计、网站程序开发、产品上传等一站式...

***(匿名) 评价文章 佛山pc网站制作和手机端网站对企业营销哪个更有优势?

不管是pc端也好,还是移动端也好,如果老板认可互联网,那两者都可以做,配合起来做还是效果非常好的,不会做可以请专业的做,但老板的思维和心思要有的,包括鼓励以及...

***(匿名) 评价文章 广州网站制作中网站建设相关的详细流程介绍

广州网站制作 中网站建设相关的详细流程介绍 第一步:客户提出需求 客户通过电话、电子邮件或在线订单方式提出自己 网站建设 方面的基本需求。确定网站的功能、栏目、页...

公司网站建设
Hi,Are you ready?
准备好开始了吗?
那就与我们取得联系吧

广州建站 感恩回馈

咨询送礼现在提交,将获得智唯网络策划专家免费为您制作
价值5880元《全网营销方案+优化视频教程》一份!
下单送礼感恩七周年,新老用户下单即送创业型空间+域名等大礼
24小时免费咨询热线0757-8108-9123
合作意向表
您需要的服务
您最关注的地方
预算
  • 验证码

直接咨询