首页
学习
活动
专区
工具
TVP
发布

浅谈反馈式按钮的设计与实现

原创声明

前言

前一段时间在网上闲逛看一些交互案例,偶然的看到几篇关于反馈式交互设计的文章,其中强调了反馈式设计的分类、重要性和机制,让我觉得在目前所负责的项目中这一点做的还不够好,因此萌生了一些尝试优化的想法和兴趣。

理论知识聊起来有点多,一开始就先不长篇大论了,先来见一下我们今天的主角。这是我负责的项目中最终优化形成的效果,实现过程中也并不是那么顺利,遇到一些兼容性问题的坑。

看完效果,先来让我们先来大致了解一下概念。

一、何为反馈交互?

反馈交互意味着通过合适的反馈,以及和程序之间的交互,让用户时刻知道现在发生了什么。大体可以分为正面反馈和负面反馈2 种类型。

对网站用户而言反馈属于提示信息类型的一种,从用户注册账号输入错误的提示,到退出成功的提示,都是属于反馈式交互设计的范畴。

正面反馈机制可以逐渐帮助用户打消顾虑,建立信心,让他们感到一切都在顺利的进行。防止用户在做了正确的事情之后由于担心自己操作有误而撤消之前的动作,或者频繁重复的操作。

负面反馈机制可以准确无误的帮助用户减少错误操作,确保在第一时间告知用户的操作不正确,及时改正,以达到用户的输入符合网站自身运营需要的目的。

正面反馈机制

用户与数据内容发生交互时,都需要正面反馈,比如说注册、登陆、验证、转发评论等等。特别用户在使用支付类的产品交易时,我们要确保用户输入的信息是符合规范的,所以我们要对用户的操作做出正确的引导。

1. 提示类

引导用户少走弯路,帮助他们更快的完成操作步骤。

2. 加载类

下拉自动翻页的功能,会载入较多内容,如果没有 Loading 等字样,告诉用户你所看的内容正在加载。用户会感到迷惑,容易导致用户误以为自己的操作有误,从而撤销之前的操作。

3. 按钮类

给按钮适当的加一些视觉和动画反馈效果,不但能让用户知道自己的操作有效,而且还能给网站增加趣味性、更添色。

负面反馈机制

在人生的道路上,每个人都难免犯错误,重要的是我们如何纠正自己的错误。对于网站的使用者用户而言,为了不让用户继续错误下去,我们帮助他们纠正错误也同样重要。

1. 文字限制类

在 Twitter 中发表内容时,当文字超出 140 字时,Twitter在第一时间用红色的负数代表你已经超出的字数,按钮变为灰色,表示不可点击,希望你及时做删减。

2. 表单类

一旦表单缺少提交的信息,提交的按钮或者表单会抖动几下,向用户强调目前这个表单是错误的,中断了提交步骤。

为什么需要反馈?

人与人的交流中,无法忍受的一种情况是,对方对自己说的话没有反应,好像视而不见。没有反馈或是不友好的反馈,就好像冷冰冰的人一样,会给用户带来无助或不悦的负面体验。好的反馈可以让用户知道下一步应该做什么,而不是一种中断式或无响应的体验。

二、本次项目中的优化点和方案选择

本次的优化是从正面反馈角度出发,由扁平化的纯色按钮借助 CSS3 动画来实现反馈效果,由于有时网络缓慢或者接口请求较慢的问题,用户操作后可能无法第一时间响应,那么他会看到一次正面反馈的交互效果。

为了让效果视觉体验更好,那必定会有性能牺牲。曾经一起合作的设计师向我提出过如下图的交互效果:

我粗略的看了一下网站源码,用户的每次鼠标点击操作,在 a 标签里都会有 JS 操作 DOM 的事件。原理是往标签内 Append 一个 DIV ,而且在点击时还会再往这 DIV 里增加 3-4 个标签,才能实现这个涟漪动画。

我觉得为了这么一个细节,用 JS 去做这么多的影响性能的 DOM 操作,在官网大面积使用的话有点太过了。用在后台管理类或者展示效果类网站是比较适合的。如果能解决这个性能问题那我就能把这个酷炫的效果应用在官网了,所以我打算使用纯 CSS 来实现这个效果。

三、先实现一个小目标

首先,如果要在一个按钮内做交互效果,单靠一个 a 标签是肯定实现不了的,但是标签多层嵌套又不优雅,所以这时候伪元素的作用就出现了。

为了能看的更清楚些,我把「overflow : hidden」 去掉后并把扩散出来的背景色改深了一下。实现思路其实就是在点击时伪元素被触发了一次过渡的动画效果。

首先给一个按钮加上自己的属性,然后起一个名为 ripple 的 class ,然后开始实现扩散背景效果

我在按钮内部创建了一个 after 伪元素,把它定位在按钮的正中间,然后在通过 :active 点击时让 :after 伪元素过渡效果被触发一次:

按钮被点击前,中心往外扩散的遮罩是利用「sacle ( 0, 0 )」属性缩小为 0 的,点击之后,遮罩大小从 0% 到 100% ,透明度从 30% 到 100% ,按照 0.8s 的速度往外扩散。并且在 active 状态设定「transition: 0s」很重要,否则当你按下按钮时扩散的水波会先从外往内变小,形成反向效果,就像这样:

最后,把背景色换成白色,并在 a 标签父容器上加上「overflow:hidden」,就可以把扩散溢出的部分给遮盖起来,最终形成想要的效果:

四、扩展性优化

一个小目标已经达成,但由于伪元素的宽高、定位的位置都是固定单位,一旦需要用在其他按钮上就不方便拓展了。这时候我突然想到曾经在团队中分享过一个利用径向渐变属性画圆圈的效果,当时是取了四分之一来实现一个弧线。在这里不就正好可以用整个径向渐变来实现这个过渡动画吗?

我立即尝试了一下,代码如下:

这样一来拓展性就非常好,基本上一个站点的按钮都可以通用 .ripple 这个 class 的点击效果。到这里,我赶快测试一下各浏览器的兼容性,以便做到渐进增强的体验。

IE10 以下不兼容 CSS3 的镜像渐变,不用考虑。IE10 / 11、火狐、chrome都无问题,本来还有点高兴,结果有一天用第三方浏览器「360 、QQ 浏览器等」打开时,发现在特定情况下,也就是扩散的颜色如果不同于背景色,就会出现下面的状况:

可以看到,扩散出来的水波溢出了按钮的实体边界。这也太奇怪了!我明明写的是圆角,并且确实「overflow:hidden」了,为什么同样是 webkit 内核,第三方浏览器就会显示成这样?要知道现在用第三方浏览器的用户可是越来越多了,如果解决不了的话意味着我可能要放弃这个优化,我心里这么想着……

经过一番仔细分析后我猜想可能是第三方浏览器的 Chrome 内核版本比较低导致的这个Bug,虽然有点不敢相信,但确实是很少遇到过 IE 和火狐都没有但 Chrome 却存在的 Bug 。

接着就从计算机渲染机制思路出发去修改一些属性,尽量规避掉这个 Bug ,方法有三种:

1、「transform: translate3d(0, 0, 0)」或「transform: rotate(0deg)」

一些 Jquery 的视差效果插件都会给元素增加这个「transform」属性,从表面上看它是好像是开启了变形属性处理,但其实它还具有 3D 加速功能,启用后可以强制开启 GPU 加速来渲染动画,使得整个网页中的动画 FPS 变高「网上有人使用 Chrome 的 Performance 工具测试过」,在这里 GPU 代替 CPU 渲染就能解决这个问题。「这一点和迅雷播放器中的硬件加速有点类似」

2、利用遮罩「-webkit-mask-image: url( /*base64 透明遮罩*/ )」

Webkit 的私有属性,黑色代表透明,白色代表不透明,灰色为半透明。

以上代码意为给元素加上一层 base64 的透明遮罩,同样是改变了渲染方式。「关于 mask-image 用法和蒙版使用方法可自行在网上查找,此文不再赘述」

3、必须给父元素加上明确的「z-index」

其实绕了这么大一圈一个简单的「z-index」也可以解决,由于按钮并没有定位的需求,所以一开始没有添加这个「z-index」属性,导致了这个问题被低版本的 Chrome 内核暴露了。由此得到的经验是:今后只要使用了「position」,就应该下意识的补上「z-index」以防止各种低版本浏览器的怪异问题。

总结 Bug :在 Webkit 内核比较老的浏览器中「大约内核版本 45 左右」,设置了圆角「border-radius」和超出隐藏「overflow-hidden」属性的元素,当它的子元素通过动画改变关于「transform」的属性时,子元素会溢出圆形区域。

经过以上修补后,我们的第三方浏览器终于也能兼容这个效果了,并且现在适用于任何大小的按钮。

以上是红袖官网「https://www.hongxiu.com」阅读页,订阅章节的一个典型场景,用户在呼起弹窗前,有较多的 JS 逻辑和后台接口的处理都需要一定的时间,假设再遇到网络不好的情况,可能会造成卡顿或点击后无任何反应。目前来看,这个动画完全弥补了时间的空档,做到了给用户及时反馈的交互体验。

总而言之,通过反馈式的交互,我们可以很清晰的让用户知道当前正在发生什么,帮助用户打消疑虑,让用户尽快完成自己的目标,同时也让我们的网站更加易用,更加人性化。

也许你所在的部门并没有专职的交互设计师来对这种细节把关,也许是他们对前端不够了解,暂时想不到这一层面。既然 CSS3 越来越强大,为何不向团队推广普及一下这种反馈式交互呢?

作者公众号历史文章推荐:

《起点中文网 3D 书封之最佳实践》

原创声明

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171228G0SWAH00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券