想让动效落地？快来收下这份设计师必读指南！（上）

相信大家和我一样，在最开始接触动效设计的时候，看到Dribbble上面的大神们将动效玩的出神入化，深深地被那些有趣、炫酷的动效所吸引，然后在心里埋下了一颗成为动效高手的种子，一腔热血埋头学习。终于有一天，公司派给你一个项目，你满怀欣喜大展身手后给到前端小哥哥却收到一脸懵比的表情的时候，才发现自己做的只是一个“花瓶”而已，对项目起不到任何的促进作用反而浪费了时间。如果设计师仅仅对视觉输出有所了解，不对如何实现落地有所认知，那么结果最后往往会不尽如人意。

随着互联网的兴起，用户对于产品的视觉要求和细节感知与日俱增，他们不再满足于静态视觉上的感官体验，更多是对新兴的视觉展现方式报以更多的期待。对于我们设计师来说，努力打造产品的差异化，提供更好的使用体验，是一直以来不断追求的目标。而动效作为近年来新兴的视觉展现方式，不断的被用户所接受、青睐，无论对于设计师还是技术人员来说，满足用户的新需求、将设计师的想法落地都是一种全新的挑战。

···  动效设计落地存在的问题  ···

· 认知问题

设计师和技术人员的工种类型决定了对于同一件事物的不同认知维度，对于更偏理性的技术人员，他们需要精准的参数去实现动效，而设计师在其中缺少了和技术人员沟通的“桥梁”，缺失对接参数标准，致使动效落地成为一种阻碍。另外，设计师往往只会关注视觉本身而忽略技术层面上的实现问题，也是最终导致动效无法落地的重要原因之一。

· 实现成本

不同的项目需求对于开发成本的要求也不同。虽然现在动效输出的结果有很多，但是其投入产出的性价比往往不尽如人意，其主要体现在时间成本和实现效果上。另外，在追求快速高效的今天，用户对于任何等待的耐心包容度越来越低，如何控制加载资源的时间和大小也是需要考虑的重要因素。

针对以上几个问题，我将总结出一些在我日常工作中经常使用的一些解决方案，帮助设计师在不同情境下选择合适的解决方式。

···  动效设计落地的解决方案  ···

在介绍解决方案前，我们将目前的互联网产品中的动效分个类，不同的动效类型所采用的解决方案也会有所不同。在这里，我把动效分为以下两大类：展示型动效和功能性动效。

展示型动效：该类动效更偏向于视觉性和趣味性，表达的是一种感性的思维，使用类似于动画的方式赋予界面生命和活力。往往用于loading加载、直播间礼物特效、logo展示等场景。

功能性动效：更依赖于界面逻辑层次所产生的动效，主要用于传达客户产品的结构、组件的交互反馈，偏向于交互性。例如界面的跳转、按钮的触发效果等。

★A-针对于展示型动效的解决方案：

1. GIF

GIF格式的名称是Graphics Interchange Format的缩写，是在1987年由Compu Serve公司为了填补跨平台图像格式的空白而发展起来的。GIF可以被PC和Mactiontosh等多种平台上被支持。

该方案是所有解决方案中应用最多，最优的解决方案之一，它的好处是实现快速容易，兼容性极高，可以适配多种平台

但是缺点也十分显著：

· 没有Alpha通道，不支持半透明，且有杂边。例如烟雾、云层的效果就十分糟糕。

· GIF是一种位图，最高仅支持256种颜色。过于细腻的阴影效果或渐变在导出时可能会出现颜色的断层。

· 文件导出的体积过于庞大。如内存无法达到理想值，可通过 https://ezgif.com 进行压缩输出

其输出方式有以下三种：

a.使用Ps导出，但是仅能导出500帧以内的GIF。

b.使用 GIF Brewery 软件进行输出

c.使用 Gifgun 脚本插件进行输出

2. 精灵图/雪碧图

css精灵/雪碧技术(CSS sprites),是一种网页图片应用处理技术。主要是指将网页中需要的零星的小图片集成到一个大的图片中，从而减轻服务器的压力。

其最显著的优点便是来缓解加载时间过长从而影响用户体验的这个问题，而且拥有Alpha通道，支持半透明，颜色更加丰富细腻。

对于我们设计师来说，只需要将动画序列帧按播放顺序，等距依次排列在一张图中给到技术人员即可，但是随之也带来了另外一个问题：文件体积往往会很大。

所以需要将处理好的图片进行压缩，这里推荐一个无损压缩的网站：

https://tinypng.com  （注：图片体积最高不得超过5MB）

3. APNG

APNG（Animated Portable Network Graphics）是一个基于PNG（Portable Network Graphics）的位图动画格式，扩展方法类似主要用于网页的GIF 89a，仍对传统PNG保留向下兼容。

简而言之，Apng中的所有动画帧都储存在PNG标准的扩展数据块里，每一帧都是一张PNG的图片，可以说它就是GIF Plus 版本。它的优点也非常多：

· 支持24位真彩色

· 向下兼容PNG

· 拥有Alpha通道，支持显示半透明，不会像GIF一样在透明背景下会有很严重的杂边

4. WebP

WebP是Google新推出的影像技术，它可让网页图档有效进行压缩，同时又不影响图片格式兼容与实际清晰度，进而让整体网页下载速度加快。在体积缩小的同时而且还具备非常优秀的兼容性。

APNG及WebP文件的生成我们一般通过 iSparta软件输出，其过程非常简单

相关使用教程可以通过下方链接进行查看：

https://isparta.github.io/how.html

今天分享的内容是关于展示型动效的落地解决方案，下期我会介绍功能型动效的落地解决方案，并且会安利些实用的辅助插件便于我们和技术同事建立一个快速高效的对接流程，大幅减少开发成本，敬请期待！

———————————————————————————————

···    END    ···

·

扫码关注 125号设计仓 公众号

带你发现更多更有趣的设计世界

↓