申请报道

扫一扫,联系编辑获得审核机会

符合以下要求,获得报道机会

  • 1. 新公司求报道
  • 2. 好项目求报道
  • 3. 服务商求报道
  • 4. 投资融资爆料

当前位置:首页 >  站长 >  网站运营 >  正文

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

 2018-01-26 11:23  来源:A5企业专栏  我来投稿

  月入百万 2018互联网创业项目加盟

undefined

 

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

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

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

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

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

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

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

  

undefined

 

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

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

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

  

undefined

 

  阶段二:浮动标签

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

  

undefined

 

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

  1. 更小的视觉压力

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

  2. 更容易检查

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

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

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

  

undefined

 

  3. 更明显的视觉焦点

  在移动界面中,如何控制视觉焦点是很重要的。这是因为由于屏幕的限制,用户一般都是看着界面打字的。只有他们完成了内容输入后,他们才会回过头去看自己输入了什么,以及输入的自动是否正确。输入框的视觉焦点越明显,用户在填写信息时会觉得越方便。下面是3种不同的表单设计模式下的输入区域的可辨识度对比:

  第一种是顶部固定标签。这种设计中输入框的字段突出,但标签的识别度不够(为了区分输入字段和标签,大部分表单都是这样设计的);

  第二种是用户输入时标签消失的设计。这种模式下字段足够突出,但是文本标签就完全看不到了,用户无法判断输入内容是否符合要求;

  第三种是浮动式标签。这种模式下标签和输入字段在色彩和尺寸上都作了区分,且边框和标签都围绕着字段,主次分明,视觉效果较好。

  

undefined

 

  4. 更清晰的报错反馈

  不管表单采取哪种设计模式,当用户输入信息错误时,表单都需要即时报错让用户调整内容。在这种需求下,顶部固定标签和浮动标签的设计模式都能更为清晰地传递报错信息,而输入时隐藏标签的设计则只能通过输入框的色彩来识别,相对而言可识别度较差。

  

undefined

 

  老实说,不管我们探究出了多少最佳的网站实例,多少最新的潮流设计趋势,我们也无法确保用户对网站的反应。因为影响用户与网站进行互动的因素实在是太多了:用户对设计趋势的熟悉程度,用户的使用习惯等等,甚至不同年龄段的用户针对同一种设计都会呈现出不同的反应。所以说,测试必不可少,毕竟实践才是检验真理的唯一渠道。在进行表单设计时,我们也要针对目标群体、不同设备等进行测试,这样才能知道哪种设计模式更符合自己的品牌特征,更能发挥效用。

  最后,小飞想说,用户填写表单时,很容易产生迟疑而放弃。要想通过表单获取用户信息、提升用户体验、提高用户转化率。我们必须尽量简化这个过程,关注每一点细微的变化,无论是标签的显示形式还是标签的颜色,尽量增强它的可用性。快来起飞页自助建站平台(http://www.qifeiye.com/?t_wd=a5)搭建一个响应式网站吧!

扫一扫关注A5创业网公众号

扫一扫关注A5创业网公众号

责任编辑:扬扬   /   作者:起飞页

相关文章

  • 如何看待网站的生命周期 沉默后还会爆发吗

    网站用户的生命周期大概分为五个阶段:引入期、成长期、成熟期、沉默期、流失期。判断网站运营是否有效,主要是在引入期和成长期,如果有大量的用户进来,说明增工具还是有效的,而当新用户越来越少,则意味着该渠道已经趋向饱和

    标签:
    网站运营
  • 如何快速完成网站运营指标?

    行业不同,定制的网站不同,而网站不同自然运营方式和策略不一样,以至于最终的运营效果也是不一样的。但是不管怎么说,作为网站运营站长,你必须要想尽各种不同的方式方法,快速完成运营指标,在每一个运营环节,都要思考和分析网站的实际情况

    标签:
    网站运营
  • 网站主页上使用“图片轮换”,为什么转化率不高?

    就算没见过成百上千个,我相信你肯定也见过几十个图片轮换页面吧?这些图片会自动切换或者滚动(这种模式也称为“旋转供图”)。你可能挺喜欢它们。但事实是,这种展现图片的模式,可能不利于提高商业转化率。既然这种模式没什么卵用,那为什么人们还是用得乐此不疲呢?原因有两个:有些人认为这种展现图片的模式很酷炫。但

  • 一个网站“荒芜”了 可能是这几个原因造成的

    网站优化是一个长期的过程,网站在一天,就需要做优化,做推广,如此才能逐渐提高自己的“江湖地位”,互联网营销推广离不开网站,因为网站是展示产品和服务的重要所在,网站作为自己的“一亩三分地”,最好不要轻易荒芜了。

    标签:
    网站运营
  • 网站运营有了这四要素 用户体验刚刚合格

    一些网站通过一些灰色广告吸引用户点击,然后站内广告漫天飞,稍不留意,用户就会点击广告,甚至被动下载某个软件,这样的网站从一开始就把用户当多“傻子”,就算有用户体验,也是是负面的。

  • 网站运营基础:一个网站如何让人信任

    最近,德邦物流的网站出现很多“李鬼”网站,不但截流了官方网站业务,而且这些网站低质量的服务,让德邦物流的声誉受到了影响。“李鬼”网站并不稀奇,而为什么这些网站能够带来用户,得到用户的信任呢?这才是值得深思的。

    标签:
    网站运营手册
  • 浅谈:为什么有些人觉得网站推广不好做?

    现如今,很多的网站推广的站长都在不断的抱怨说网站推广效果不好,其实,在整个推广的过程中,影响到推广效果的因素有很多的,并且随着互联网的发展,之前很多推广方式也都已经失效,效果确实没有之前好,那么到底是什么原因导致现在很多推广站长会觉得网站推广越来越难做?

  • 商城网站日常运营 5个基本要做好

    建立一个商城网站有多难?今天还在冲量,明天就宣传失败,这就是商城网站的命运,在强大的电商平台,诸如天猫、京东的“压迫下”,很多商城网站都在考虑一个问题,在这些电商平台卖货就得了,何必再上线一个前途未卜的商城网站呢?更何况很多商城网站运营的并不是理想,负面消息频出。如果每天看着竞争对手的网站,或被电商

    标签:
    商城推广
  • 站长网站被攻击怎么办?几种网站攻击的解决办法

    那我们站在出现了网站被攻击,如何解决呢?下面我来说说两种大的方式:有钱人方式:直接换高防御服务器或者高防IP(推荐使用百度云);穷站在如何解决:首先我们小站长肯定是没有钱去做高防御的,因为成本实在是太高,比如X里云动不动就是3个月2万多,不是一般人能消费的起的。我也是曾经被人黑过的站长,也是穷站在,

  • 网站内容页面需要翻页阅读?到底是何居心

    内容是最贵的!对于运营网站的人来说,如何才能让内容获得更多的价值呢,最好的方式就是在内容附近布置广告,如果第一页不够,就再来一个翻页,有的网站甚至一张图片就是一个内容页,在用户点击翻页的时候,达到频繁看广告的效果。

小程序

热门排行

信息推荐

扫一扫关注最新创业资讯