格式 动画 方式 Halo，这里是设计夹，今天为大家分享的是「动效格式」。文章来源于设计师「三长老」对于 UI 动效输出格式的设计研究。作为用户体验领域不可缺少的一部分，动效随处可见。日常工作中，我们可能只用 1-2 种动效格式，对其他格式的了解有所欠缺。这次介绍 5 种动效输出格式和教程，包括 PS 输出和 AE 输出，建议收藏保存下来随时查看，帮助大家更快更好地完成落地！更多动效基础知识：设计师必学的73个基础动效设计！附全面系统的免费入门教程大家好，我是和你们聊设计的花生 ~昨天看到一个小伙伴在群里分享了一个网站——动效周期表（Motion Periodic Table），里面以“元素周期表”的形式罗列出Ae常用的73种基础动效设计，非常有意思。阅读文章 > 一、PNG 序列帧方式PNG 序列帧就是把一张一张的 PNG 图片按照顺序播放，跟 GIF 相比不会产生边缘锯齿的效果，也比 GIF 支持的色彩范围大。优点：制作方便简单，还原度高，颜色偏差损失基本没有（PNG 图片压缩可能会有颜色偏差），动效效果还原度高（因为就是一张一张图片播放的，像 AE 做的一些雨水，火焰都可以显示出来，开发人员可调节播放速度）。缺点：需要加载全部图片，文件占用内存大，内存一大就容易造成打开页面的时候卡顿，大的文件用户体验感很差。1. PNG 序列帧-PS 输出方式2. PNG 序列帧-AE 输出方式3. SVGA 方式Svga 背景：jianshu.com/p/dfa16d9d67cd官方网站： https://svga.io/index.html官方插件： https://svga.io/designer.html官方文章： https://svga.io/article.html优点：SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。SVGA 的转换器和播放器都开源。使用设计师工具，可以轻松的将 Aep 或 Fla 格式的动画文件导出成 SVGA 格式资源文件。动画设计师通过工具输出 svga 动画文件，提供给开发工程师在集成 svga player 之后直接使用。动画文件体积小，播放资源占用优，动画还原效果好，使用方法简便，大大提高了工作效率。缺点：有损压缩，不支持图层渐变和插件特效，有的平台并不支持 Svga。4. SVGA 动效输出流程5. SVGA 动效输出方式二、Lottie 方式Lottie 是 Airbnb 开发的一款能够为原生应用添加动画效果的开源工具。Lottie 目前提供了 iOS,Android 和 ReactNative 版本。Lottie 通过 AE 设计好的动画效果，通过 Bodymovin 插件直接导出 json 文件，并允许开发人员直接调用它们。Lottie 库使开发人员能够实现动画效果，提升了工作效率，减少了码代码的时间。优点：前端可以方便地调用动画和控制动画，以减少前端码代码的时间。json 文件的小，性能表现也很好。缺点：不支持渐变、粒子、阴影透视等效果，表达式也只支持一部分，图层命名需要英文。1. Lottie 动效输出流程2. Lottie 动效输出方式三、GIF 方式一种无损压缩的 8 位图像文件。大多用于网络传输上，速度要比传输其他格式的图像文件快，但不能用于存储真彩的图像文件。优点：兼容性好，可以多平台支持。缺点：GIF 格式仅支持 256 种不同的颜色，文件占用空间大，会有色彩失真效果。1. GIF-PS 输出方式2. GIF-AE 输出方式四、MP4 方式常用的视频格式，通常用在网站的展示背景还有宣传的 MG 动画什么的。优点：兼容性非常好。缺点：适合背景展示或者其他展示方面，其他方面很少使用。1. MP4-AE 输出方式五、交互动效输出文档动效参数文档是一种把动效参数量化的文档，它是动效设计师和前端开发人员沟通的重要工具。以前动效标注文档还要一个一个图层标注(位置，旋转，透明图，动画曲线)。现在直接用脚本直接就可以一键出来了。最后以上是 5 种常见的动效输出格式和输出教程，强烈建议收藏保存下来，已备随时查看，也希望这些内容能让大家对动效格式有更多了解和使用～欢迎关注作者微信公众号：「Clip设计夹」本篇来源：优设网原文地址：https://www.uisdc.com/5-dynamic-format-analysis
图片 格式 在线 上次写了「 Compress JPEG 免费图片压缩服务，支持四种格式单次可处理 20 张 」文章后意外发现这家公司还有提供另一个很好用的免费 SVG 转档工具「 SVG Converter 」，主要是针对 SVG 格式进行转档、转换格式和优化处理，大家都知道 SVG 是目前网页上经常会遇到的格式，因为是向量图特性无论放大缩小都不会影响到图片画质，而且在计算机屏幕呈现相当好的效果。完全免费！可批量压缩图片的在线神器「Compress JPEG」我很习惯在写文章插入图片前先对屏幕截图进行压缩，让图片容量更小、开启速度更快，更重要的是几乎不会影响画质，以前我都使用 TinyPNG 这个相片压缩工具，只要将图片拖曳到网站就能快速处理，后来就选择以 Imagify 自动从 WordPress 媒体库对图片压缩和优化（免费版每月只能处理阅读文章 > SVG 格式非常适合使用于网站的标志、图标或是一些没有大量细节的图片，用户可以在编辑器中直接修改 SVG 参数，或是在网页原始码透过 SVG 程序代码来加载图片，不过它的缺点是一般的相片编辑器可能不支持这种格式，因此在某些情况使用者可能会想将 SVG 转为 PNG、JPG、EPS 等常用图片格式，如果你有类似需求，或是想将图片转为 SVG 文件，都可以在 SVG Converter 做到。SVG Converter 主要提供两大类的 SVG 转档工具：PNG 转 SVG、JPG 转 SVG、EPS 转 SVG、PDF 转 SVG，或是将 SVG 转 PNG、SVG 转 JPG、SVG 转 EPS、SVG 转 PDF，也就是 SVG 在不同格式间互相转换功能，除此之外，网站也提供 SVG 优化功能，可以在压缩文件时不降低质量。SVG Converter网站链接：https://svgconverter.com/zh/使用教学开启 SVG Converter 网站后会切换为适合用户的语言，从右上角可切换不同语系，这项服务有提供中文界面，操作上非常简单，主要的功能选项从上方的列表选择。SVG Converter 提供各种 SVG 转文件其他格式或将图片格式转为 SVG 功能，网站有特别标示所有上传的数据会在一小时后自动删除。举例来说我选择将 SVG 转为 PNG 的转换器，操作方式很简单，只要把 SVG 拖曳到网站即可，就和其他的在线转档工具差不多，或是点选「上传文件」找到要转换的文件。转换后点选图片底下的「下载」按钮就能保存文件，若是转换的文件数量较多，也能点选「下载所有」将全部的结果打包一次下载。除此之外，SVG Converter 也有提供把 PNG、JPG、EPS、PDF 转换为 SVG 格式的功能，基本上操作的方式都是一样的，找到对应的转换功能，将文件拖曳到网页中就能直接转换，完全不用额外下载或安装软件，非常好用。转换后一样点选图片底下的「下载」将它保存即可，图片数量较多也可一次打包下载。最后再介绍 SVG Converter 另一个功能「SVG 优化」，依照说明，这个功能可以对 SVG 格式进行压缩、优化，将 SVG 容量变小但又不会影响到图片质量，操作方式跟转档工具一样，只要打开网页然后把 SVG 图片拖曳到网站就能进行自动化处理。值得一试的三个理由：SVG Converter 在线转档服务将 SVG 转换为各种常见图片格式；也支持 PNG、JPG、EPS、PDF 转档为 SVG 格式；透过 SVG 优化工具将文件上传压缩以获得更小的文件免费！支持超过 100 种格式的图片格式转换神器「Pixelied」Pixelied 是一家提供相片编辑器的服务商，旗下有个「Free Image Converter」的图片格式转换工具，让使用者通过浏览器进行在线批次编辑，而且不用担心降低照片画质，也无需下载或安装任何应用程序，提供最快速、免费且易于使用的图片转文件功能，这项服务支持各种常见图片格式包括阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/svg-converter
素材 网站 格式 大家好，我是和你们聊设计的花生~今天为大家推荐一个免费开源的素材网站 SVG Silh，上面有非常多高质量的剪影及写实线条风的素材，而且提供 SVG 的下载格式，方便我们在设计中进行再次编辑，一起来看看吧~「网站直达」 https://svgsilh.com/ ，网站首页看起来比较简单，但是素材非常实用。SVG Silh 上有大量矢量剪影素材，种类齐全，数量丰富。设计中常用的人物、动物、节日、建筑、边框、勋章等素材都有提供。网站给出的素材分类非常细致，我们也可以通过顶端的搜索框进行相关搜索。网站素材的一大亮点就是有很多高质量的写实线条风素材，尤其是动物和植物类的。这类素材适合用在海报或者包装中作为装饰，在国内的网站上下载都是需付费的，但是在 SVG Silh 上不仅能免费下载，还提供可编辑的 SVG 格式。素材详情页 SVG Silh 内有各种格式的下载链接SVG Silh 上的素材提供 SVG 和透明底 PNG 两种格式。SVG 格式下载后可以拖进 Ai 中再次编辑，PNG 格式有 512px 和 1024px 两种有尺寸（宽度）。素材详情页内有各种格式的下载连接SVG Silh 还有一个功能就是，可以通过网站首页顶部的颜色块，直接修改站内所有素材的颜色，下载后直接使用。通过色块将网站内素材的颜色都改成了绿色以上就是今天的推荐，再为大家总结一下 SVG Silh 素材网站的优点：海量矢量素材，种类丰富类型齐全高质量写实线条风素材，海报、包装设计必备提供 SVG 及 PNG 两种格式下载，还可预设素材颜色想获得更多免费的素材资源，可以看这里免费可商用！图标、插画和图库应有尽有的素材站「Reshot」本文要推荐的「Reshot」是一个整合、收录三大类型素材免费图库，网站提供超过 40000 个 SVG 免费图标、超过 1500 个插图素材和超过 25000 张相片，这个网站最大特色是素材都能实时下载并适用于商业用途，无需付费，使用时也不用标记出处来源。阅读文章 > 免费可商用！超过 500 个线性图标打包下载的「Lineicons」Lineicons 是一套收录超过 5000 种图标的合集，主要设计风格为手工制作线条图标，适合使用于各种现代化用户界面，例如网页、桌面软件等等，对于设计师或开发项目来说非常有用。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/svg-silh
格式 在线 图片 苹果公司在 iOS 11 以后对相机加入新的 HEIF 和 HEVC 影像和影片格式，默认情况会使用「高效率」模式储存拍摄的照片和影片，减少相片影片占用的容量，不仅画质更好，容量只有 JPEG 一半，使用者可以储存多达一倍的照片影片。HEIF 是「高效率图档格式」（High Efficiency Image File Format）缩写，HEVC 则为「高效率视频编码」（High Efficiency Video Coding），而 HEIF 格式的扩展名为 .heic，或许大家都曾经碰过，特别是你也是 iPhone、iPad 使用者，一定对于这个格式不陌生。本文要介绍的「HEICFile」是一个将 HEIC 文件转换为 JPG、PNG 或 GIF 格式的在线转档工具，如果发现你的计算机或设备无法正确开启 HEIC 图片格式，可先行将它转为 JPG、PNG 常见图片格式，能解决因为格式问题无法检视浏览的问题。HEICFile 和之前介绍过的AnyWebP 应该来自同个开发商，它们界面看起来几乎一样。免费转换！批量将 WebP 转成 JPG、PNG 格式的神器「AnyWebP」Google 在 2010 年释出全新 WebP 图片格式，至今也已经超过十年，WebP 就像 JPEG 也是一种有损压缩图片格式，但在相同画质下有着比 JPEG 更好的效率和压缩比，也因此被广泛应用到网页，现今大多数主流浏览器都已经支持 WebP 格式。阅读文章 > HEICFile 特色是只要将 .heic 图片拖曳到网页、选择要转换的格式就能批次转换，非常方便，也能调整图片质量，值得一提的是 HEICFile 使用先进的 JavaScript 和 VUE 技术不会将任何 HEIC 文件上传到服务器，也就是透过浏览器就能转换格式，确保使用者获得更好的隐私保护。HEICFile网站链接：https://heicfile.com/使用教学开启 HEICFile 网站直接将 .heic 图片拖曳到网页中，从「Output」选择要转换的格式，支持 JPEG、PNG 和 GIF 三种，如果想调整图片画质（Quality）也能在转档前先行选择。若要转换的图片很少，直接点选后方的「Start」开始转换，遇到要转文件的图片很多，HEICFile 支持批次转换功能，直接点选最下方的「Convert All HEIC」将所有 HEIC 图片转为特定格式。HEICFile 会在转换后将图片压缩为 .zip 压缩文件，解压缩后就能取得所有新的相片格式。如果你觉得在线转档工具无法满足你，要转换的 HEIC 相片真的很多，也可以透过 HEICFile 免费下载计算机版 HEIC 转换工具，支持 Windows 和 macOS 两种操作系统，不过我就没有实际试用了，如果需要转换大量文件的话可能使用脱机工具会更快、更方便。值得一试的三个理由：1. 将 HEIC 在线转换为 JPEG、PNG 或是 GIF 格式2. 支持批次转档，所有文件会压缩为 .ZIP 压缩文件进行下载3. 不会将任何 HEIC 文件上传到服务器，确保使用者获得更好的隐私保护免费！支持超过 100 种格式的图片格式转换神器「Pixelied」Pixelied 是一家提供相片编辑器的服务商，旗下有个「Free Image Converter」的图片格式转换工具，让使用者通过浏览器进行在线批次编辑，而且不用担心降低照片画质，也无需下载或安装任何应用程序，提供最快速、免费且易于使用的图片转文件功能，这项服务支持各种常见图片格式包括阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/heicfile
图片 在线 格式 Pixelied 是一家提供相片编辑器的服务商，旗下有个「Free Image Converter」的图片格式转换工具，让使用者通过浏览器进行在线批次编辑，而且不用担心降低照片画质，也无需下载或安装任何应用程序，提供最快速、免费且易于使用的图片转文件功能，这项服务支持各种常见图片格式包括 PNG、JPG、WebP、SVG、GIF、AVIF 和 TIFF 等超过 100 种格式。依照 Pixelied 说明，「Free Image Converter」可以批次进行图片格式转换，举例来说将 WebP 图片全数转为 PNG 或是将 JPG 全部转为 PNG 等等，将原始相片拖曳到网页进行上传，选择要转换的目标格式后就可以自动进行转文件，如果图片数量较多，还能将转换后的图片一次打包下载。之前还介绍过其他类似的工具：想转换图片格式？用这个在线网站超方便！这几年很常在网络上看到图片格式「WebP」，使用先进的压缩技术可有效减少文件大小，达到和 JPEG 格式相同图片质量，而现今在网页上较常看到的格式包括 PNG、JPG、GIF 和 WebP，如果就方便性来说前两者还是略胜，也是大家普遍都会用到的格式，但有许多网络服务考虑到流量和速度问题，阅读文章 > 想转换PDF/视频/图片的格式？收下这个在线免费神器！本文要介绍「TinyWow」是一个免费在线工具，首页明确标示「这是一个解决文件问题的工具」，使用者在 TinyWow 可以找到各种解决问题的功能，主要有 PDF、视频、图片、文件和其他工具，使用上也非常简单，选择要用的功能、将文件上传后就能进行处理，完全不用额外安装软件，不过要注意的是这阅读文章 > 免费超好用！支持视频、音频、图片格式转换的在线神器「Convertr」若偶尔需要对文件进行转档，但又找不到适合的转换工具，直接打开 Convertr.org 将文件拖曳进去、选择要转换的格式就能处理。阅读文章 > Pixelied Free Image Converter网站链接：https://pixelied.com/convert/使用教学开启 Pixelied 的 Free Image Converter 免费图片转换功能，点选「Choose Files」选择要转文件的原始图片或是直接将图片拖曳到网站上传，依照说明，转换图片只需要四个步骤就能轻松完成。接着图片会逐一被上传到 Pixelied 转换器，不过不用担心，Pixelied 表示他们会在 24 小时后自动从服务器删除图片，不会处理或是储存用户的图片，所有档案会以最高的安全性和隐私处理。预设情况下画质会降低为 85%，若不希望转档后影响到原始画质，点选左上角「Settings」将质量调高为 100 即可维持原有画质。接着从上方「To: Choose file type」选择要转换的新格式，支持 PNG、SVG、JPEG、GIF、WebP、AVIF、TIFF 和 Base64 编码。点选右上角「Start Conversion」开始全部转换，也可单独点选每个图片后方的「Convert to」转为特定图片格式，转换时如果图片较多需要一些等待时间。转档完成后点选右上角「Download All」将所有新的图片打包、一次下载。前面有提到 Pixelied 本身是提供相片编辑器的公司，在图片转换工具也有整合编辑功能，点选图片后方的「Edit PNG」按钮开启编辑功能，就能通过 Pixelied 编辑器对相片进行更细部的调整。值得一试的三个理由：1. Pixelied 提供在线图片转文件工具，可将图片转换为各种常见格式2. 支持超过 100 种图片格式，在没有降低画质的情况下转档3. 转换后批次打包、下载所有图片文件，亦可使用在线编辑器细部调整本篇来源：优设网原文地址：https://www.uisdc.com/pixelied
动态 动画 格式 本文将从动态的交付文件、成像原理，以及如何高效的与开发团队沟通等角度来分析动态设计交付，旨在帮助与我们遇到类似问题的团队提供合适的解决方案。前言开始阅读之前，我想让大家先思考两个问题：你平时接触的动态设计需求多吗？碰到动态设计，你都是怎么跟开发团队进行沟通的？带着这两个问题，我们开始今天的主题讨论。首先在目前的体验设计中动态交付的方式主要包含文件式交付、参数式交付两种。文件交付主要是指通过提供动态格式文件的方式来达到预期效果，对于开发者来说，只需要针对性的兼容动态文件的格式及库就可以获得该格式的显示效果，根据不同需求还可以简单的控制动态的播放、入场、退场等基础操作；参数交付主要是对动态运动的文字表述，开发可以根据图文化的表述对动态进行代码还原。动态设计的交付方式就起点设计团队来说，在长期的项目迭代中，我们几乎测试了所有的主流动态图片格式。因此针对不同的格式有一些测评和看法，可以跟大家交流，这些格式有 GIF、WebP、APNG、Lottie、VAP、PAG，我们将结合实际情况，对这些格式做些简单的科普和性能比对。1. GIFGIF 对于互联网来说是一个传播率极高的古董级动态格式，它诞生于 1987 年，即使是最后一个版本也是在 1989 年了，在各大网站上浏览的动态广告、以及与生活息息相关的动态表情包几乎都是 GIF 格式。GIF 在我们使用的所有格式中是压缩效果是最差的，还因为是采用了 8 位色压缩，只能处理 256 种颜色，所以也是所有格式中显示效果最差的。即便如此，GIF 还是存在一些优点的，它较为广阔的传播性让其在各种环境下都有比较不错的兼容性，它的使用性能也是相对稳定的，同时兼容 Android、iOS、Web，并且可实现循环以及首尾帧控制。在起点读书中 GIF 的应用主要集中的 UGC 内容上，例如官方表情包、头像挂件展示等场景均有使用过 GIF 作为主要格式。点娘表情包2. WebPWebP 相对上面的 GIF 要年轻很多，它是谷歌在 2010 年发布，支持库是在 2018 年 4 月发布，我们也是在第一时间在产品中试用了该格式，并获得了不错的体验，截止目前，已有 95.77% 的浏览器支持该格式。WebP 目前支持有损和无损压缩以及动画和 alpha 透明度的图像格式（基于 VP8 视频格式）。WebP 通常比 JPEG、PNG 和 GIF 具有更好的压缩率，并且旨在取代它们。WebP 同时兼容 Android、iOS、Web，并且可实现循环以及首尾帧控制。通过千元机实机测试，WebP 也兼具了较高的稳定性，是比较不错的通用动态格式选择。为了让用户获得更好的视觉感官体验，因此在起点读书中例如挂件、动态卡牌的格式选择上，WebP 是绝佳的通用解决方案。起点头像挂件起点动态卡牌3. APNGAPNG 相对于 WebP 要早出生几年，是基于 PNG 格式扩展的一种动画格式，所以它保留了向下兼容 PNG 的特性，因此当解码器不支持 APNG 时，会默认展示第一帧图像；APNG 拥有 24 位图像和 8 位透明性，相比 GIF 拥有更高的显示效果。目前关于 APNG、WebP、GIF 的测评对比较多，GIF 自不必多说，它早已成了各大主流动态格式测评的计量单位，我们这里只谈 APNG、WebP，从压缩率上来说，APNG 优于 WebP；从兼容性上来说 WebP 的兼容性明显高于 APNG，谷歌从 Chrome 59 开始才支持 APNG，而 WebP 是谷歌的亲儿子，兼容性自不必说，目前安卓兼容无压力，iOS 中部分版本存在兼容问题，但考虑到 iOS 的高版本覆盖率，因此起点在动态格式上选择了 WebP。4. LottieLottie 是 Airbnb 开源的一个面向 iOS、Android、RN 的动画库，能分析 AE 导出的动画 json 文件，客户端通过引入 Lottie 的支持库来解析 json 文件，通过此方法原生 App 就可以像使用静态素材一样来实现出动画效果。一篇文章帮你了解AE动画插件Lottie的前世今生（附避坑案例）大家好，我是彩云。阅读文章 > 要使用 Lottie 需要先通过 bodymovin （AE 插件）将 AE 动画工程文件转换为 json 格式的描述文件。Lottie 负责解析动画的数据，包括动画大小，动画时长，帧率，用到的图片，字体，图层等等信息，最终精准地渲染出动画。Lottie 支持矢量（MG）动画，并最终效果通过解析渲染完成，因此具有比较高的兼容性，并且可以在极小的文件大小下，实现极佳的画质效果，同时兼容 Android、iOS、Web，是目前互联网产品中比较通用的解决方案；并且可以通过解析文件实现循环、首尾帧固定、图层颜色修改等操作。虽然 Lottie 很强大，但因为其实时渲染的特点，因此对内存和设备性能在碰到复杂文件消耗巨大，加上其在动态效果上的支持比较局限，所以 Lottie 仅能解决一些简单到中等的动画问题，对于例如直播间特效、打赏类动画来说，Lottie 则会显得力不从心。5. VAPVAP（Video Animation Player）是企鹅电竞开发，用于播放酷炫动画的实现方案，它可以播放带有 Alpha 通道的视频。是一种拟 WebP、APNG 的动画解决方案，与之相比具有压缩率高（素材更小）、硬件解码速度快的优点，比 Lottie 能实现更复杂的动画效果（比如粒子特效）；并且 VAP 可以将自定义的属性合并到动画中。VAP 简单点理解就是将 MP4 (H264) 文件的透明通道与原动画一起导出，然后通过解析合成形成透明动画的显示效果。这种方案占用内存小，性能高，文件体积小，支持效果全，是比较理想的特性动画解决方案。起点卡牌6. PAGPAG 是腾讯自主研发的一个开源项目，它同时支持「矢量预合成」导出和「BMP 预合成」导出两种方式。比Lottie还好用！腾讯新晋免费动效设计神器 PAG在终端 APP 中，动画非常常见，它可以辅助视觉制造焦点，同时也可以让用户交互更加顺滑，但动画的实现却是设计师和研发群体的一个痛点。阅读文章 > 矢量预合成导出无法支持所有的 AE 特性，但相对来说还是比 Lottie 支持的格式要多的多，在理想情况下使用矢量预合成可以获得更好的性能和更小的动画文件。BMP 预合成导出模式支持所有 AE 特效，设计师只需要关注视觉效果本身即可，相应的会对设备性能产生一定消耗。BMP 预合成目前支持视频序列帧和位图序列帧两种导出的存储格式，它对位图做了简单的帧间压缩，可比传统的 PNG 序列文件小 50%。视频存储格式帧基于 H264 帧间压缩并补充了透明通道（类似 VAP 的解决方案），相比位图存储格式只有 10% ~ 25% 左右的文件大小。而且在目前的版本迭代中，PAG 还同时支持了「矢量预合成」和「BMP 预合成」混合导出，可以在文件导出效果、性能、体量上做到更优秀的表现。不过虽然 PAG 在效果和压缩上表现优越，但是在遇到大型动画或复杂特效后对设备性能的压力还是巨大的，而且目前仅支持 iOS、Android，Web 支持正在开发中。此时 VAP 可以作为 PAG 的平替。起点票赏目前在起点读书内的各类打赏投票场景，为了更好的展示效果，动效格式都会优先考虑 PAG。动态文件成像原理1. 透明通道序列帧简单来说就是 PNG 序列，但是也有比较高级的表现方法，就是通过帧间压缩来进行图片压缩，可以做到比普通的 PNG 整列更小的体积。2. 视频+透明通道上面也提到了，是将 mp4 视频与相应的 alpha 通道视频叠加后，就可以将原视频表现得带有透明效果。3. 矢量动画形成动画的物体、动作及时间都是通过代码来完成，也因为是纯代码动画，因此可以做到体量极小，性能也是极佳的。4. 图片「渲染」动画指通过 json 格式的描述文件，将指定图片赋予运动、时长、动作，最终通过解析渲染出描述中的动画效果的形式。5. 视频帧混合矢量指将「视频+透明通道」与「矢量动画」混合导出的动画表现形式，既保证了视频的全特效效果，又保留了矢量动画的最佳显示效果，并且没有增加动画文件体积。通过上面的一系列介绍，可以了解到我们在做动态文件交付时，需要综合考虑的因素就较多了，例如不同平台的特性、低版本兼容问题、动态库的适配性等。格式的选择不是一成不变了，为了让用户可以获得更好的互动体验，可以针对性地对不同端的动态格式进行变换。起点在漫长的迭代周期中，在不同版本时期引入过不同的动态文件格式，综合各项性能，目前选用了 PAG 作为我们的客户端主要使用格式，并且在 PAG 的开发过程中，我们也始终与其研发团队保持一定的沟通，帮助我们解决了不少技术难题，就目前来说 PAG 依然是强有力的动态交付解决方案。关于参数交付参数交付的核心在于沟通，而如何正确有效的与开发人员进行沟通就显得至关重要，我们通过下图可以看到一个典型案例。正确的阐述动态设计的关键信息才是有效交流，才能让开发更精准的还原你所要的效果。但现实往往是我们会碰到大量复杂动画，此时用语言来描述动画会显得特别疲软复杂，而如何将这些复杂语言进行图形化的传达，让表达更清晰，就显得至关重要。因此我们综合日常的一些工作经验，建立了图形分段式动态标注法，让动态一目了然。动态标注的本质就是将时间（时间节点）、地点（位置）、人物（物品）、通过「动作」进行呈现就是标注的基本结构了，当然也可以通过此方法来衍生出一些特需标注法。例如在一个复杂的动态设计需求中，涉及到的动画较多，有位移软转场动画、手势操作响应、操作反馈动画、随机动画等。为了让开发实现的效果达到设计预期，使用了图形化标注法，将时间轴、动作、曲线、运动轨迹等进行呈现。关于标注的详情信息，就不再进行详细文字描述了，感兴趣的可以通过大图进行详细了解。看到这里我想有些朋友会产生一些疑惑，为什么都 2022 年了，你还在做动态标注？目前行业中不是有很多动态输出的解决方案吗？Principle、ProtoPie、Origami、Cocos Creator 等等，这些不乏比较高效的解决方案，同时笔者也在设计中或多或少的使用过相关的软件来作为高效解决方案，但如果你想系统性的学习动态图形和动画设计那么 After Effects 是首选，强大的功能，能尽情实现你的动画创意。至于笔者会倾向为动态设计输出标注，有几点我觉得至关重要，一是强化在设计过程中对动态理论的掌握；二是对动态设计进行整理归档，方便为全局动态做统一形成规范；三是在开发过程中可以精准定位问题，并提高还原率，实际项目证明，有标注的动态还原在第一次交付走查时可达到 60%~80%的还原率。结语遇到动态设计需求时，在符合条件（例如实时反馈、聚焦动画、转场动画等）的情况下参数交付是最优的；而有些场景（例如重视觉效果呈现、复杂交互动画、动态展示等）优先使用文件交付。建议的解决方案排序是 PAG＞VAP＞Lottie＞WebP/APNG…，例如在 iOS 平台，所有的 PAG 文件播放都有比较不错的体验，因此我们更建议使用 PAG 交付，而在 Android 端 WebP 的稳定性更好，因此在 Android 更建议使用 WebP，当然在 Web 端依然可以使用 Lottie、WebP 作为平替。无论多简单的动态在需要开发实现时候，都建议进行标注落地，有效的标注可以减少不必要的沟通以及非必要的后期走查反复。关于制作工具，笔者无特殊偏好，常规的动态设计软件都会去接触，如果需要给到一些建议的有条件或想系统性学习动态的可以优先学习 AE，在 B 站上有很多教程，上手需要一点难度，但一劳永逸；如果只想学习并使用 UI 交互类动态，那么 Principle、ProtoPie 是不二选择，甚至 Figma 本身也是不错的解决方案；如果成为全栈设计师是你的梦想，那么 Origami 或许可以为你打开一扇门；如果你想在特效及 3D 动画上有所建树，那么我优先推荐 Blender 作为你的主力工具。最后送大家一首劝学（内卷）诗：三更灯火五更鸡，正是男儿读书时，黑发不知勤学早，白首方悔读书迟。参考资料关于 WebP 格式： https://developers.google.com/speed/webpWebP 引文： https://caniuse.com/webpAPNG 制作： https://ezgif.com/apng-makerAPNG 引用： https://juejin.cn/post/6857678436304388104APNG 对比链接： http://littlesvr.ca/apng/gif_apng_webp3.htmlLottie 参考： https://cloud.tencent.com/developer/article/1005896VAP 地址： https://github.com/Tencent/vap/blob/master/Introduction.mdPAG 相关阅读推荐：https://mp.weixin.qq.com/s/a8-yOp8h5LiFGKSdLE_toAPAG 官网： https://pag.io/docs/pag-export.html用起点读书的实战案例，教你从AE制作到落地开发的方案导语动画可以辅助视觉制作焦点，引导注意力的方向，越来越为广大视觉设计师青睐。阅读文章 > 欢迎关注作者的微信公众号：「阅文体验设计YUX」本篇来源：优设网原文地址：https://www.uisdc.com/motion-design-delivery
动画 格式 序列 动效设计，可以提升界面的趣味性和引导性，让用户浏览过程中不会太枯燥，获得更好的体验。最近做的金山知了（后面改名为金山知识库）官网，头图元素加入了缓动效果，第一眼挺新颖的。金山协作新年许愿活动，许愿按钮加入了运动的形象，更能吸引用户点击。不过，输出动图和开发对接的过程中，我也遇到过一些问题：导出的动图模糊、资源太大、开发不支持动图格式等等，当时也是想尽办法地解决。这次我总结了几种常用的动图格式，也提及我输出动图过程遇到的问题和解决方法，以及我们设计师该如何选择合适的动图格式。序列帧GIFLottieAPNGSVGA序列帧刚开始接触动效，我最先了解到的 PNG 序列帧，就是输出动图的每一帧图片，然后交付开发，按帧播放图片实现。比如这个加载动画，我的练习作品，导出序列帧资源很大，所以我平时基本不用这种格式。导出方法：AE 输出选择 PNG 序列，如果要导出透明背景，通道选择 RGB+Alpha。GIFGIF 支持安卓、iOS、网页，可以说也是比较常用的格式之一。界面设计中的小元素可以使用这个格式，比如运营按钮动画、点赞图标动画等，资源不会太大。像我之前负责的新年许愿活动，因为是从 0 到 1 的产品，开发还没有支持 Lottie，所以许愿按钮动画输出 GIF 给开发实现，压缩后资源 300KB。虽然动图放大周围有锯齿，但是在手机上是看不到的。导出方法有三种：1. AE 导出 MOV 格式，再用 PS 转换成 GIF。（注意：可能是因为动画时间太长、文件太大，导出经常失败，所以我很少用这种方式)2. AE 安装 Gifgun 插件，直接导出。3. AE 导出 PNG 序列，将所有图片拖进 iSparta，勾选 GIF 输出。（注意：如果导出 GIF 图片有问题，需要勾选压缩质量，填写小于 100 的值就可以解决了）如果 GIF 文件太大，可以使用无损压缩软件：PPDuck。LottieLottie 是一个用于 Android、iOS、Web、Windows 的动画库，用于解析使用 bodymovin 导出为 json 文件的 AE 动画。动画通过代码实现，是矢量的。动画库资源会增加安装包的大小，客户端会有推动成本，不过 WPS Office 有在使用，资源大小和稳定性目前来说是可以的。比阿里犸良还强大！Lottie动效设计完全指南之前的文章已经介绍了 Lottie 是什么，以及如何导入设计文件，那么今天就为大家讲解如何根据我们的需要导出 Lottie 文件。阅读文章 > 不支持 AE 效果器直接添加的效果，比如高斯模糊、内发光、投影。支持用图片导入 AE 做出的动效，比如金山知识库官网的头图，就是使用 Lottie 方式实现，资源小，动图也很清晰。支持颜色渐变，但是导出 json 容易出问题。比如之前设计的会员卡片动效，渐变颜色导出后变成了黑白渐变。这时候只需要将所有渐变图层名称按顺序改为 Gradient fill 1、Gradient fill 2、…，就可以解决了。导出方法：AE 安装 bodymovin 插件，直接导出。（注意：要选择保存路径，导出按钮才能点击。点击设置图标，选择 Standard 和 Demo，才能导出 json 文件和 demo 预览效果）APNGAPNG 是基于 PNG 格式的位图动画格式图片，文件后缀依然是.png，可以在浏览器中预览动画。金山协作的表情包使用的也是这种格式动图。和 GIF 对比，它的优势在于动图边缘光滑，不会有锯齿和颗粒感。导出方法：AE 导出 PNG 序列，将所有图片拖进 iSparta，勾选 APNG 输出。SVGASVGA 是由 YY 团队开发出来的一种跨平台的开源动画格式，同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式，常用于直播礼物场景，适合炫酷的礼物动效。因为礼物效果比较复杂，一般是用 png 序列，一张图一帧地制作动画，输出 SVGA 文件。它只会生成一个 svga 后缀文件，代码和位图元素都被集成在了一起，但是 Lottie 会生成两个文件：json 代码文件+img 文件夹。支持 AE 自带基础动画：位移、缩放、不透明度等，但是不支持图层渐变（Lottie 支持渐变）和 AE 自带及外部插件的效果控件特效，所以 UI 动效 Lottie 比较通用，不容易出错。总结讲了那么多动效落地方案，那么在实际工作中我们该如何选择使用呢？资源大小对比质量对比使用场景对比Lottie：基本适合所有 UI 动图，比如图标动效、加载动效、插图动效、运营按钮动效等，优先使用GIF：移动端小元素动图可以使用，比如点赞动效（大尺寸透明背景动图不建议使用，锯齿严重）APNG：表情包、小元素动图（比 GIF 质量好）SVGA：直播礼物炫酷动效序列帧：资源太大，不建议使用以上就是我的业务动效落地经验总结，大家有需要这些导出插件的可以找我。腾讯出品！AE 动效设计必备指南（附超多神器和技巧）动效是用户体验的重要组成部分，也是产品调性的重要体现。阅读文章 > 欢迎关注作者微信公众号：「ALEI的设计思考」本篇来源：优设网原文地址：https://www.uisdc.com/motion-design
影片 就能 格式 本文要推荐「Hitomi Downloader」是一个强大的影片下载器，除了下载影片也能从各种网站下载图片、影片、音乐或文字内容，具有简单、干净的用户界面，本身以 yt-dlp 做为基础（youtube-dl 的分支），支持超过 1200 种网络服务，非常强大！缺点是只提供 Windows 版本。Hitomi Downloader 操作方法很简单，只要将影片网页的网址复制、贴上，选择要下载的格式即可进行下载，具有基本的下载加速、限速、多线程等功能，也支持 BitTorrent、Magnet 协议和 M3U8、MPD 格式，像是常用的 YouTube、Facebook、Instagram、Niconico 都能够下载，有兴趣的朋友可先下载，然后参考接下来的操作教学吧！Hitomi Downloader网站链接：https://github.com/KurtBestor/Hitomi-Downloader使用教学开启 Hitomi Downloader 的 GitHub 页面，找到「Download」链结取得最新版本，一般使用者只需要下载包含 GUI 的 .zip 格式，解压缩后执行就能使用。开启 Hitomi Downloader 主画面如下图，最上方是贴上影片网址的字段，贴上后点选右侧下载就能取得影音文件，中间是下载的任务排程。在选项里还能调整保存路径、格式、同时下载的最大任务数或是各种网络服务的选项，若遇到无法顺利下载的问题可先从偏好设定进行调整设定。将影片页面的网址复制、贴上 Hitomi Downloader 会自动辨识，点选右侧的「下载」按钮将任务加入排程，有些服务还能选择要下载 MP4 影片或是只有 MP3 纯音频文件。下载任务开始时会显示预览图、标题、完成百分比，也会标示目前的下载速度、剩余时间和档案大小等信息，Hitomi Downloader 单次可处理多个下载任务。下载完成后会有一段时间转换格式，等待转换完成使用者就会取得文件。在下载项目点选右侧选项就能打开文件、在浏览器中查看、复制网址、打开文件夹、删除等等操作，我的习惯是打开文件所在的文件夹、确认下载的影片有无正确储存。将网络影片透过 Hitomi Downloader 下载后保存为 .MP4 或 .MP3 格式，就能用影音播放软件播放，在没有网络的环境下也能正常开启，如果有要储存网络影片内容需求可试试这款免费的下载工具。值得一试的三个理由：Hitomi Downloader 是以 yt-dlp 作为基础的下载工具界面干净、操作方式简单，支持超过 1200+ 网络服务支持 BitTorrent、Magnet 协议和 M3U8、MPD 格式输入网址就能批量下载网站图片的在线神器「Image Extractor」如果想要下载网页里出现的图片，最简单的方法就是在图片按下右键选择「另存图片」，相信大家都熟悉这个方法，下载的图片数量较多，一个一个保存很浪费时间，这时候就使用图片下载工具辅助吧！阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/hitomi-downloader
在路上
飞翔的企鹅
落霞与孤鹜
表哥
张大湿
