被低估的动画 v0.1.0

779 阅读4分钟

这几年前端的发展很快,特别是 javascript。人们越来越关注 javascript 的新事物,关心怎么提高 js 代码可读性和可维护性,这个是值得肯定的。但是,有很大一部分人却逐渐忽视 UI 层级的东西。要知道,直接影响用户体验的是面前的产品界面,UI 美观度和交互的友好性很大程度上决定了最终的用户体验,然而可惜的是,这一切没有得到应该有的重视。我觉得,审美能力和一定的 UI 基础也应该成为衡量前端工程师能力高低的重要指标。

为什么说前端工程师需要具备基础的 UI 能力

前端工程师的产物是界面,一个界面 的 UI 设计直接影响到用户的体验,也是决定一个产品成功与否的重要因素。很多时候,UI 和交互的设计是交给团队的 UI 设计师的,这并不需要前端去关心,那为什么还说前端需要具备一定的 UI 能力呢?

  1. 节省人力成本和时间成本:有些项目不是很重视高质量的 UI,如果这时前端具备一定的 UI 功底,能用项目的 UI 组件库来搭起一个 UI 较为不错的界面,便可以大量节省人力成本和时间成本。
  2. 节省沟通成本:一个正常的项目,即使过了设计稿评审环节,后面也会经常发生对一些局部细节的微调比如需求的小改动。如果这时去请教设计师,经常需要经历这些环节:表达请求调整设计稿的需求=>设计师理解需求,对设计稿作出调整=>前端工程师理解改动的部分。一个设计师经常对应几个项目,此时他可能在做别的事件,他需要切换项目来满足你的小需求。可以想象得到,这其中的效率是不高的,如果你能独立完成对这一小需求的 UI 调整,那便会让项目运作变得高效很多,当然,前提是这只是一个局部小调整,不影响到原先设计师的整体设计语言。事实上,这种情况经常发生,研发阶段的需求经常会发生改动和微调。
  3. 前端是接触 UI 最好的人:正如前面所说,一个 UI 设计师经常会对应几个项目,可能他们出一套设计稿并且过了 UI 评审以后,会接着转向另一个项目。而前端,从一开始的开发阶段和后面的迭代阶段,一直在跟设计稿和页面打交道,他们是整个项目团队里面触碰页面的时间最长的人,他们比任何人更有机会发现页面在 UI 和交互上的问题。一个审美较好的前端,将有更多机会发现问题,从而不断优化产品的 UI,不断优化用户体验。

项目经常被用到的动画

那么,作为一个前端,怎么提高 UI 层级的体验呢?方式可能有很多种,但动画绝对是性价比最高的一种。动画对于提高用户体验来说很重要,它可以增加体验舒适度,让用户认知过程更为自然。一个有动画的界面和一个没有动画的界面,它们的体验差别是很大的。

其实,很多公司的 UED 给出的 UI 设计稿都没有包括对动画的描述。那么,很多时候需要前端自己去定义这些动画。

用 transition 来过渡你的 css 属性变化

transition 绝对是用来做动画的一大利器,也是使用率很高的一个 css 属性。color、background-color、width、height、padding、margin 等等这些有变化过程的 css 属性,如果加上 transition,你会发现组件优雅了很多。

用 transform 来写不阻塞的动画

transform 属性不会影响当前页面的布局,它的效果是通过 GPU 来渲染,不会占用 js 的主线程。这点很棒,可以避免一些动画导致页面卡顿的问题。

当然,给一个组件加入动画前,你必须思考这个动画的存在意义。动画并非都是有利于用户体验的,无脑引入动画会让你的页面变的糟糕和没有目的性。那么,怎么衡量一个动画的意义呢?我们可以根据蚂蚁动效给出的两点原则来衡量:

  • 一个动效的存在是否合理:是否带有明确的目的性,助力交互体验,没有多余的动效。

  • 动效与性能:不能出现大幅度波动丢帧或者卡顿现象, 动效的体验须是流畅的,并且不影响产品的性能。

参考链接:

Ant Motion - Ant Design 的动效规范与组件motion.ant.design