动画 性能 序列 今天给大家推荐一款未来很有可能会成为主流的动画解决方案 —— PAG。一、常见动效落地方案1. Lottie它算是市面上比较普遍的一种动效落地方式，它可以制作很多种类的矢量动画以及图片动画，它的缓动曲线会占用很多内存，在各平台效果支持上也不是特别的稳定，而且 Lottie 所支持的 AE 属性对设计师来说有一定的限制。一篇文章帮你了解AE动画插件Lottie的前世今生（附避坑案例）大家好，我是彩云。阅读文章 > 2. SVGA与 Lottie 相比性能和稳定性会更好一些，因为 SVGA 是通过记录我们每个图层每个时间上的动画状态，因此 SVGA 也可以输出序列帧动画，但是它的内存消耗会比 Lottie 高，并且 SVGA 支持的 AE 特性也比 Lottie 少一些。3. Apng 和 Webp这两种动效落地方案目前在原生端可以通过一些代码框架支持，在 Web 端 Apng 和 Webp 格式存在一定的兼容性问题，目前在主流浏览器上是可以支持的。二、动效落地神器——PAG1. PAG 是什么PAG（Portable Animated Graphics）是腾讯自主研发的一套完整的动画工作流解决方案，助力于将 AE 动画方便快捷的应用于各平台终端。设计师在 AE 上设计出动画后，可以通过导出插件导出 Pag 文件，同时可以在桌面端预览工具中实时预览效果，还可以通过桌面端进行性能检测。PAG 可以支持 Android、iOS、web、mac OS、Windows 和 Linux，涵盖了业界常用的终端平台，支持 AE 动画实时渲染、运行时编辑。Lottie 和 SVGA 的设计目标是解决 UI 动画场景，PAG 的诞生的原因是因为 Lottie 无法满足视频编辑场景里的动画需求，后续又兼顾了 UI 动画在内的各种场景。2. 完善的动画工作流通常设计师输出动效给开发都是直接 AE 导出就给开发了，很少去关注动效的性能问题，并且每次想要尝试不同素材动画效果时，需要在 AE 中调试输出后在去看效果，导致设计成本浪费。采用 PAG 进行动效设计的话，我们在 AE 中调试好输出动效后，可以直接在 PAG 桌面端进行查看，在桌面端我们可以快速替换动效中的图片素材或文案来查看效果，同时可以通过性能面板查看当前动效的性能，方便设计师进行针对性优化。3. 性能强文件小PAG 采用了二进制的数据结构来存储动画信息。二进制数据结构能够非常方便的单文件集成任何资源，在解码速度上比 Lottie 所使用的 JSON 文本数据快几十倍，在性能方面，PAG 的实时渲染性能平均可以达到 Lottie 的 1.5 到 2.5 倍左右。而在文件大小上，PAG 通过利用动画文件本身的特点，获得了极高的压缩率。通过跳过大量默认值的存储，使用比特位来紧凑存储，相同动画内容可以比同类型方案平均减少 50% 左右的文件大小。4. AE 特性全支持PAG 动画制作有两种模式，分别为“矢量特性输出”和“BMP 预合成输出”，先来说下“矢量特性输出”：我们可以理解为用矢量素材和图片素材通过 AE 特性进行动效制作，PAG 的 AE 特性的支持是多于 Lottie 和 SVGA 的，且基本上涵盖了所有的 AE 特性，矢量特性输出性能会比 BMP 预合成输出性能更好。再说下“BMP 预合成输出”：我们可以理解为序列帧动画输出，也就意味着通过 BMP 方式输出我们可以使用 AE 中所有的特性，甚至是 AE 插件效果和视频素材，虽然“ BMP 预合成输出”可以支持所有 AE 特性，但是和 SVGA 中输出序列帧一样，“BMP 预合成输出”性能消耗和动效文件大小也会更大，所以大家在使用时要合理把控，PAG 支持了矢量和 BMP 预合成混合导出，从而实现在支持 AE 所有特性的同时，又保持运行时的可编辑性。这里我们再把开头的产品对比横向加入 PAG，可以很直观地感受到 PAG 相比其他产品的优势所在：5. 目前已使用 PAG 的产品下面这些产品中都应用到了 PAG 这款动效落地方案，包括我们非常熟悉的微信、QQ、王者、腾讯视频等。小结目前市面上的动效解决方案各有优劣，Apng 的出现感觉确实很棒，它解决了我们在其他动效方案中所遇见的问题，让设计效率得到了提升，但如果是 PAG，则可以通过“ BMP 预合成导出”方式一键导出，你不需要再去把一些特殊效果进行序列帧输出导入的过程，PAG 会帮你输出这些特殊效果，并做压缩和优化。三、PAG 的实际应用1. 序列帧动画目前 3D 类动画是一个流行的趋势，通常我们都采用的 AE 来制作一些 UI 中的视觉动画效果。如果我们要制作一些特别的效果，比如用三维软件制作一些 3D 的交互视觉动画，以 C4D 为例，我们可以将制作好的 C4D 动画导出为序列帧，放进 AE 中以“ BMP 预合成输出”我们就可以得到一个三维效果的交互视觉动画，而且 PAG 输出的序列帧动画相比 SVGA 性能优化的更好。用过 SVGA 的同学，一定尝试过序列帧来输出动效，通过序列帧虽然能给我们带来更炫的视觉效果，同时它也会带来更大的文件体积和显存效果，通过下图同一序列帧动画文件输出对比：PAG 显存消耗比 SVGA 小 40 倍，PAG 文件大小比 SVGA 小 2 倍，相比 SVGA 序列帧输出，显然 PAG 在序列帧输出的优化上做的更好。2. 礼物打赏动画礼物打赏类动画是比较社交类产品中最常见的视觉动画，礼物动画比较注重整体的氛围感和视觉效果，因此会用到 AE 第三方插件、脚本等丰富画面视觉效果。以 SVGA 为例，通常一些特殊视觉效果需要我们做进行序列帧的方式处理，采用 PAG 输出我们可以在需要输出的预合成名字后面加“_bmp”，通过“ BMP 预合成输出”直接导出动画，PAG 会帮你输出这些特殊效果，并做压缩和优化，提升动画输出效率。3. 悬浮球和图标动画悬浮球运营位也是产品中运营活动的引流入口，将悬浮球采用动态化的设计，可以提升趣味性和视觉吸引力，图标动画也是非常常见的动画表现形式，比如：Tab bar 图标，礼物打赏图标等。4. 匹配和弹幕漂屏动画PAG 也可以制作匹配和飘屏类动画效果，设计师将动画输出给开发，开发可以调用相应方法替换动画中的的图层文件和文本内容，比如：用户匹配成功时的用户头像和名字，以及弹幕飘屏中的用户头像、头像框和用户名字等。5. Banner 动画Banner 类运营动画，相信大家肯定看到过支付宝一些运营 Banner 动画，类似这样的动画我们也可以使用 PAG 进行设计制作后输出给运营的同事进行后台配置，相比静态 Banner，动态 Banner 更加具有趣味性，动态元素更吸引用户注意。6. 徽章动画徽章动画是社交类产品中很常见的视觉动画，使用动态形式表现徽章能更好的体现出尊贵感，在 PAG 中我们可以直接通过轨道遮罩制作扫光效果会简单很多，同时 PAG 还支持 AE 混合模式，我们可以通过混合模式制作一些图层效果。写在最后其实我很早就关注 PAG 这个动画解决方案了，PAG 出来没多久我就去尝试使用了，算是 PAG 比较早的一批用户吧，目前来看 PAG 相比目前市面上的动画解决方案来说确实很不错，无论从 AE 的特性支持，以及序列帧动画输出的压缩和优化都比市面上的其他解决方案更好，自动检测动效文件错误这个功能，对于经验不丰富的设计师来说很有帮助。PAG 会在输出时告知你动效文件可能存在的一些问题，性能检测可以让设计师可以提前预判动画所存在的性能风险，从而对动画进行合理的调整，避免因动效性能导致的产品稳定性问题，目前 PAG 团队还在持续迭代优化中，期待后续更多优秀的功能出现。PAG 原生端和 Web 端 1 月 14 日正式开源，目前可以下载使用，对 PAG 感兴趣的设计师朋友，可以去官网： https://pag.io 了解更多信息。附录——PAG使用指南1. 快速安装 PAG以 MacOS 系统为例，PAG 的安装个人认为对新手用户是非常友好的，整个安装的过程跟着提示确认就行，相比其他的动画方案安装要简单很多。在官网下载 PAG 安装包；安装 PAGViewer 软件；打开 PAGViewer，PAGViewer 将自动检测是否需要安装/更新 AE 导出插件，按提示安装即可（记得安装前先关闭 AE）如果没有自动检测提示安装点击菜单栏 "PAGViewer" -> "安装 AE 插件"2. PAG 插件配置在"After Effects CC" -> "首选项" -> "PAGConfig..."可以打开 PAG 配置面板，配置面板中分为“通用”和“ BMP 预合成”。 “通用”可以理解为使用 PAG 所支持的 AE 特性制作的动效输出，“ BMP 预合成”则是在动效中采用了特殊效果比如AE 插件或脚本制作的特效。通用：导出场景：设计师可以根据使用场景进行设置，我通常用的”通用“模式导出版本控制：这里有三个选项，stable：稳定版，表示导出稳定版本的 PAG 文件，这类 PAG 文件通常可以被线上已经发布的 app 支持。发布到线上的 PAG 常用此选项。beta：最新版，表示导出最新版本的 PAG 文件，这类 PAG 文件可能无法被线上已经发布的 app 支持。测试 PAG 新特性时常用此选项。custom：自定义导出为指定的 SDK 版本能支持的能力，需搭配 TagLevel 使用，具体 TagLevel 的值可以从指定版本 SDK 里的 PAGFile.MaxSupportedTagLevel() 获取。TAG Level：只有当导出版本控制选项取值为 custom 时，TAGLevel 栏才有效，否则无法输入。取值范围为 44 至 1023.具体设置到什么值可以咨询客户端开发人员，通常根据线上客户端 SDK 所支持的最大 TagLevel 确定。位图压缩质量：用来控制位图和 BMP 预合成的压缩质量，取值范围（0-100），越高图片越清晰但是文件越大，默认 80。位图像素密度：用于控制位图在文件中存储的最大像素密度导出图层名字：这个功能默认打开就行导出字体：打开后将会导出动画中使用字体的字体包单独调节图像尺寸：打开后如果导出的素材中包含图片或 BMP 预合成，AE 导出插件将在导出过程中弹出“素材压缩面板“，设计师可以对不同的素材图片进行单独的压缩BMP 预合成：BMP 预合成后缀：在需要输出的预合成后面加入后缀名后，将会以“ BMP 预合成”形式输出，默认后缀是“_bmp”，不分大小写，大家也可以自定义一个后缀。图像质量：用来控制位图和 BMP 预合成的压缩质量，取值范围（0-100），越高图片越清晰但是文件越大，默认 80。导出尺寸上限：用于控制导出 BMP 预合成的最大分辨率（短边）。过大可能会显著增加 PAG 文件尺寸；过小会影响播放的清晰度。默认 720关键帧间隔：用于控制导出 BMP 预合成的关键帧间距。取 0 表示只有第一帧为关键帧；其它正数表示关键帧间距，默认 60，关键帧间距影响播放 seek 时的解码效率。取值过小会增大导出的 PAG 文件尺寸导出版本列表：导出 BMP 预合成时允许单个文件包含多个分辨率版本的截图序列，程序在实际使用时会动态使用最合适的分辨率以降低性能损耗。配置此列表能控制具体要导出哪些分辨率和帧率的截图序列版本，可以通过“增加版本”/“删除选中”来增减列表存储格式：可选“视频序列帧”和“位图序列帧”两种导出的存储格式，视频存储格式会更小，在含有硬件解码的平台上性能也更好。位图存储格式文件更大，在只有软件解码的平台上或者非常小的尺寸时比视频解码略微更快。默认值是 "视频序列帧"3. PAG 设计输出方式PAG 输出动画有两种模式“矢量预合成输出”和“ BMP 预合成输出”。“矢量预合成输出”就是通过矢量图形和位图素材利用 PAG 所支持的 AE 特性制作的动效，这种模式输出的优势在于性能好文件体积小，同时可以在桌面端编辑图片预览不同素材下的动画效果，缺点是无法使用一些特殊效果，比如 AE 的第三方插件 “ BMP 预合成输出”就是序列帧的输出形式，因此可以支持 AE 中所有的特殊效果包括第三方插件和脚本效果等，但它的缺点是性能差文件体积大，同时无法在桌面端编辑替换素材。4. 自动检测动效文件错误这是非常贴心的一个设计，在输出 PAG 动效时，插件会自动检测当前动效中出现的一些问题，提前告知设计师当前动效存在的一些风险，以便设计师即使做出调整，比如：位图数量太多、图层数量太多等，之前有不少设计朋友问过我 SVGA 输出时不知道出了什么问题，在 PAG 中插件会自动检测提示你可能出现的问题。5. 性能检测面板这个功能对于设计师来说是一个很好的功能，很多设计朋友可能更多的关注的是动效的视觉效果，缺忽视了性能的问题，因为通常动效落地方案没有这个功能（SVGA 可以在线查看内存消耗），告诉你性能有问题的一般是开发拿过去测试后发现来告诉你的，但是性能确实还是比较重要的一个事项，因为它可能会直接影响产品的稳定性，有了性能检测面板，设计师可以提前预测到你所产出的动效性能是否合理，在性能面板中可以看到动画时长、播放帧率、显存大小、动画尺寸等，性能面板也给出了性能的参考值，超过这个值会用红色感叹号提示你。6. 快速编辑预览动画这个功能适用于“矢量预合成输出”的动效，“ BMP 预合成输出”不支持图片编辑，设计师可以在文本编辑区编辑文本信息，在图片编辑区直接替换当前动效中所使用的位图素材，可以快速验证不同位图素材和文本信息的效果，不用在到 AE 里在去折腾了提升设计效率。7. 支持音频输出PAG 是可以支持音频输出的，这对于礼物动画设计的设计师来说是好事，通常需求方都希望比较贵的礼物能带一些 BGM 更有氛围，采用 PAG 的话就可以制作一些带音效的礼物啦，可以在桌面端 PAG 文件结构：getRootLayer：PreComposeLayer -> composition:VectorComposition -> audioBytes 的值，来判断 Pag 文件中音频输入是否导出成功，为 {} 时导出成功，为 null 时导出失败或无音频。小结PAG 无论是安装还是 AE 特性支持的都要优于现有的动画方案，两种输出方式可以根据动画效果进行合理选择。自动检测和性能检测能让设计师提前预测可能出现的错误，快速编辑预览帮我们快速尝试不同素材的效果，提高设计效率；支持音频输出对礼物设计来说是件好事。 关于 PAG 的使用介绍我这里只做一些简要的概述，更详细的使用说明大家可以在 PAG 官网中进行查看本篇来源：优设网原文地址：https://www.uisdc.com/pag-2
礼物 动画 序列 首先想说下为啥要写这篇文章，最近接到个项目任务，制作直播间礼物赠送视觉效果，由于之前没有接触过此类设计，因此在多方打听，并在网上到处探索后发现 SVGA 是个不错的选择，在与开发同学沟通并尝试了另外几种格式输出文件后，我们最终敲定了用 SVGA。在网上搜索了很多相关资料学习，发现网上关于 SVGA 的资料相当少，而且很大部分还是介绍关于开发的，关于设计制作的少的可怜，这也是我打算写这篇内容的的原因，我觉得或许应该有这么一篇文章，帮助到一些正在做这个事儿的设计同学，如果有什么表达有问题的地方欢迎大家指正…让动效又快又好落地！5种动效输出格式优缺点分析Halo，这里是设计夹，今天为大家分享的是「动效格式」。阅读文章 > 一、礼物动效输出方法A：导出关键帧动画制作礼物动效缺点：需要把图片带到安装包中，增大了安装包体积B：使用属性动画缺点：开发代价较大，每一套礼物动画基本都不一样，开发人员需要去细细调参，花在业务上编码的时间会变得非常有限，从代码复用率极低C：输出 GIF 文件缺点：输出效果差，并且资源占用高D：使用 SVGA，SVGA 支持位图，并且输出后直接封装打包好的，直接给开发 SVGA 文件就 OK，并且 SVGA 更贴合直播类应该场景，SVGA 所提供的动态文本、动态图像功能都是其它库所不能提供的，在实现炫酷动画的基础上，性能表现也比较棒。SVGA 是开源工具可以跨平台使用，支持 Android、iOS、React Native、Web、微信小程序，但是在微信小程序上表现会差一些。二、什么是 SVGASVGA 是由 YY 团队开发出来的一种跨平台的开源动画格式，同时兼容 iOS / Android / Web。SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率，动画设计师专注动画设计，通过工具输出 svga 动画文件，提供给开发工程师在集成 svga player 之后直接使用。SVGA 不同于 Lottie，Lottie 需要在 Player 一层完整地将 After Effects 所有逻辑实现，而 SVGA 则将这些逻辑免去。也因此，SVGA 可以同时支持 Flash。SVGA 做的事情，实际上，非常简单，Converter 会负责从 Flash 或 AE 源文件中提取所有动画元素（位图、矢量），并将其在时间轴中的每帧表现（位移、缩放、旋转、透明度）导出。Player 会负责将这些信息还原至画布上。关于Lottie：Lottie 动效设计完全指南：渐变修复之前的文章已经介绍了 Lottie 是什么，以及如何导入/导出设计文件，那么今天就为大家讲解如何修复渐变。阅读文章 > 三、AE 基础属性制作输出 SVGA笔者常用的动效制作软件是 After Effects，因此主要讲如何通过 AE 制作导出 SGAV 动效，利用 AE 制作基础属性动画，基础属性动画包括（位移、缩放、旋转、透明度）。第一步：从 sketch 或者 PS 中将礼物和礼物效果元素切图导出，根据个人需可以将礼物拆分成几块分别导出，方便 AE 中制作动态效果。第二步：将导出的切图素材导入 AE 中，利用 AE 制作基础属性动画，制作完成后结果如下第三步：将背景隐藏在窗口-扩展中找到 SVGAConverter_A第四步：用 SVGAConverter_AE 插件导出 SVGA 文件，输出 SVGA 时记得把背景调成透明背景，输出后如下通过下图可以看到 SVGA 输出格式后文件大小仅为 145KB，如果是序列帧的话文件大小高达 10 几 M四、AE 预设效果制作输出 SVGA接触过 SVGA 的同学应该都知道，SVGA 支持位图、矢量和一些基础属性动画，很多时候我们制作礼物特效的时候，都是用自己做好的位图素材导入 AE 进行一些基础属性的动画制作，这次我将利用序列帧位图制作出一些更炫的礼物特效。第一步：在 AE 中用预设效果制作出自己满意的礼物特效第二步：将制作的特效动画导出序列帧，然后在将序列帧从新导回 AE 中，新建预合成将每一帧拼接起来，这样做的目的是因为 SVGA 无法识别 AE 的表达式和效果预设，所以我们将特效转为序列帧后在重新放进 AE，序列帧是位图所以 SVGA 可以识别并导出特效。第三步：接下来将制作好的序列帧预合成放置到礼物特效合成中，打开 SVGA 插件输出 SVGA 礼物特效动画。五、AE 插件制作输出 SVGA这次我用 AK 大佬的插件 saber 为大家做案例，saber 是一款很不错的光效制作插件，也比较容易上手，视觉表现力也非常棒，本篇文章主要是将 SVGA，所以就不给大家具体说明 saber 如果做礼物特效了。第一步：根据礼物的轮廓利用 saber 插件制作出火焰燃烧效果。第二步：和刚才所说的预设效果特效动画一样，我们通过 AE 将特效动画导出 PNG 序列帧，然后在将序列帧导回 AE，并将每一帧拼接起来，这里有个小技巧给大家说下，用过 saber 的同学都知道 saber 的用法是利用 AE 的图层样式“屏幕”将光效合成在图里，其实 saber 也可以导出透明背景的 PNG 的，方法很简单，将 saber 当前图层复制一层，然后对复制出来的副本进行用亮度遮罩。第三步：接下来将制作好的序列帧预合成放置到礼物特效合成中，打开 SVGA 插件输出 SVGA 礼物特效动画。总结最后聊一下关于用其他软件制作的礼物动画，根据上面所说的几种方法可以发现，我们想要在 SVGA 中想要得到更好的效果，就是将制作的特效输出为序列帧后在 AE 中重新拼接起来，换一种说法就是我们可以不仅限于 AE 来制作，也可以使用 C4D 或者其他设计软件来做，只需要我们将最终效果已序列帧的形式进行输出即可。并且我们也可以利用位图、基础属性和插件相结合来做，值得注意的是如果视觉效果做的太过复杂会导致文件过大，同时也会产生性能方面的问题，在制作的过程中大家还时要把握好一个度。附件有 AE 的 SVGA 安装包大家可以下载参考资料：SVGA： http://svga.io/designer.htmlhttps://juejin.im/entry/59f1648f5188254115700ee6https://juejin.im/entry/59f6c0ec6fb9a0451d40bfbfhttps://blog.csdn.net/gutaocslg/article/details/79908414 文件名 如何下载使用 文件大小 提取码 下载来源 SVGA安装包17.07MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/svga-motion-design
元素 画面 动画 近期完成一些视频制作，表现形式着重在 MG 动画和产品的运营宣传方向，在设计阶段遇到一些困惑，同时在摸索中不断扩充这方面的知识体系，通过工作中的实战，总结出来 4 步搞定视频设计的方法，分享出来，不知道你们是否喜欢呢？更多动效干货：让动效又快又好落地！5种动效输出格式优缺点分析Halo，这里是设计夹，今天为大家分享的是「动效格式」。阅读文章 > 一、概念动态设计是指在一定的时间范围内，静态图形连续的运动变化。英文名称 Motion Design，有的时候会使用 MotionGraphics 英文名称，一般引申为动态图形的设计。从呈现形式上可以划分为交互类动态设计和展示类动态设计，此次文章分享的设计方法，主要聚焦在展示类动态设计。二、动态设计的意义1. 设计特点动态设计具有的三大通用优点，对用户的影响力比较巨大。2. 为什么做动态设计我们之所以倾向动态设计是因为动态设计可以为产品和用户带来很多的优势，包含以下五类：三、如何进行动态设计近期一直在支持的产品宣传视频设计，均是通过以下思维模型进行设计呈现。1. 前期分析① 了解需求，收集素材首先了解需求、用户、产品、场景的信息，在初步了解后，可以从用户的预期目标，内容素材的设计方向以及动画的表现形式等维度收集核心关键词；同时确认文案，配音，音效，等视频元素是否添加，以便确认视频动画设计的节奏；② 汇总结论，归纳主题关键词通过信息收集阶段，提炼出以下设计目标和导向：使用场景：应用于可以支持视频的会场，互联网平台（如微信朋友圈，抖音）；设计目标：用户群为企业用户，希望通过视频，向用户阐述产品的功能特色，解决的问题，带动用户的兴趣，进一步了解和沟通，提升线索量，促成交易；设计导向：视频生动有趣，突出核心优势和价值点，清晰快捷传递；2. 提炼设计方向围绕核心关键词，视觉设计的可视化，通过情绪板输出设计可执行方向，包括品牌风格，动画节奏，画面元素，排版设计；动画节奏：以逐步引导深入的方式，展开视频的故事描述；品牌风格：京东云品牌的轻盈、微质感的浅色科技风格为基因进行设计；排版设计：以文本为主，图形为辅的画面设计；画面元素：运用互联网元素，比如鼠标，界面，穿插 2.5Dicon 和红黑双色扁平 icon 使用；3. 设计执行① 脚本一个丰富的成片效果，是通过多组分镜动态呈现。而分镜画面的前后关系，则是通过脚本布局搭建，在做脚本设计时，是按照以下思路进行；内容结构拆解比如这次的产品宣传视频，通过文案逻辑进行拆分，形成分镜画面的设计思路。首先根据文案逻辑划分为四大模块，然后围绕文案提炼出核心内容，视觉元素，动画节奏等，如以下分析结论：封面点题：点出所推产品，继承京东云品牌风格，强调产品视觉特征，使用几何元素构成标题核心，微质感背景烘托主题氛围；用户痛点：分析现有痛点，通过一些常用场景和用户共情。可以使用问号弹跳引导出搜索，输入问题寻找答案，凸显现有问题，面临的痛点，使用图形符号，互联网元素，进行视觉传达；总结问题：通过痛点分析，汇总出企业存在的问题。可以利用鼠标移动逐个收起，引导出产品解决方案的优势特征；解决方案：提出解决问题的方案，这是用户所需要的，也是视频中的重点。以展台+互联网界面的元素呈现，运用镜头的推拉转移，使用户的视线始终能够聚焦在所展示的内容；产品政策：落脚在产品的优惠政策，以及联系方式，运用收尾呼应的方式进行，迎合产品主题，呈现优惠方式和联系方式；脚本规划经过了画面思路的整理，这一步主要是梳理文案和画面的映射关系、画面视觉表现，以及动态效果的编排。根据设计思路和故事主题，以配音的时间线为索引，制定分镜脚本；分镜画面实现前期可以利用手绘方式，通过文字排版和元素设计的简单排布，将画面快速呈现；② 文案内容口播文案如果视频需要使用配音，前期就需要收集口播文案，根据口播文案的逻辑，定义分镜元素的时序；画面文案画面文案是需要依据视频的表现形式进行搭配，比如文本为主或图形为主的画面。文本为主：文字内容为主要表达形式，贯穿画面之中，此类表现形式是需要和需求方确定分镜画面的核心文案；图形为主：图形为主的分镜画面，可依据配音进行图形故事设计，文案则为辅助呈现，文案内容可依据画面给予自主发挥；③ 画面设计风格探索参照制定的设计目标和方向，以脚本框架为引导，进行静态画面的实现。也可出 1-2 个静态视觉和需求方沟通，如无问题，其他分镜效果依此完成。或者可以制作部分画面的动态效果，以便判断脚本最终呈现的视觉效果。画面调性风格：首先遵守品牌风格规范，传递品牌价值，强化品牌基因；其次要提炼产品视觉基因，营造差异性，比如在这次的视频中所运用的色系、画面元素的设计、文案的排版，均以品牌的视觉基因贯穿在各个画面中，并营造产品的个性。色系：依据京东云品牌风格调性，以及产品色系搭配，可以定义出以下色彩搭配规范：灰色：辅助色系，主要是进行氛围渲染、画面转场、视觉层级塑造中使用；白色：视频的主要基调，结合其他色系，营造科技风，轻量化实现，体现产品的温度；红色：产品个性的打造，重要元素使用，凸显层级，信息有力传递；内容设计图形设计：继承京东云的品牌基因，利用光影效果，使用 2.5D icon，结合线面双色 icon 进行图形设计，同时实现元素场景化，使画面更具有冲击力。文案排版：围绕核心主题，以故事传递内容的思路，进行文字的排版，运用卡片方式进行编排，便于在画面中对信息进行层级塑造，利于信息传递。④ 动画实现元素分层将画面元素进行分层拆解，依据画面的氛围场景，和元素的主次关系，进行拆分；核心内容的叙事性：核心内容是主题含义的传达，需要以动画的故事主线进行属性动画的制作；辅助元素的说明性：辅助元素是帮助用户理解产品，营造故事场景，串连分镜画面。比如流程模块的时间轴动态效果，通过逐步呈现的政策趋势，来说明政策演变的历史；背景元素的转场连接和氛围性：背景元素可以提炼出转场元素和背景氛围元素。转场元素：分镜画面之间建立层级，创建空间，流畅过渡，使内容有序呈现；背景氛围元素：提高画面的活跃度，渲染动画的风格氛围；动画编排在时序编排上可以利用入场、停留、延展、退场 4 个阶段进行元素动画的设计，这样可以保持元素动作的连贯性，元素之间的动态过渡流畅。入场：一般指元素进场，出现在用户视线中，信息逐步呈现在画面中。一般用于对用户视线的引导，内容的提前铺垫。可以使用纵深动画、镜头语言、生长动画、组合构建、多重迭代、抽象图形转换方式呈现。入场时机：利用配音语义的上下衔接的时机，进行入场动画设计，平滑过渡到对应的配音时间线上。配音的节奏快慢，决定了元素动画的节奏，所以在配音语速上，要贴合动画的整体节奏。动画速度：需要快速呈现，平均时长在 5-20 帧，画面元素分层越多，属性动画设计越多，整体画面的时间线则会更长。停留/延展动画：一般指元素在画面中需要延时停留的运动过程，帮助信息语义传递更准确。核心元素：加深用户对信息的理解，动态节奏连贯，不拖沓，时间线要保持足够长，便于用户快速浏览。在实现手法上根据故事场景进行设计；背景元素：主要用于烘托核心元素，增加画面氛围。可以使用循环背景、循环流光、粒子衬托、动态背景等动画效果实现。由于运动越快，越容易聚焦用户视线，因此作为背景元素的动画，在运动节奏上适当放慢，时间线拉长，循环使用；退场动画：一般指元素退出用户视线，过渡衔接下一个元素的运动过程。用户往往关注入场动画而忽略退场动画，因此退场动画的设计可以适当弱化，过渡引导到下一个动画就可以。可以使用硬切，抽象过渡，摇摆镜头，蒙板遮罩等动画效果实现。在节奏设计上最好卡点进行，动画形式可以根据下一入场元素的属性动画决定，也可根据整体节奏把握。元素动画实现关键帧：一般指元素在运动中的关键动作所处的那一帧。关键帧与关键帧之间的动画是软件自动补齐，这种帧可以叫做过渡帧或者中间帧。关键帧的时间和位置，往往决定了内容出场的次序，以及动画呈现的密度和节奏的快慢，在设计制作中，做属性动画参数设置时，需要关注入场动画的开始帧，以及退场动画的结束帧。属性动画：一般指元素的透明度、位置、大小、旋转、形状、颜色等属性进行的变化。参数的变化幅度，是根据帧速和时长进行制定，参数幅度越大，动效越明显，或同等参数下，时间短，速度快，时间长，速度慢。时长：从元素动画的开始关键帧到结束关键帧之间的时间线，称为时长。单位上可以用帧表达，也可以用时分秒表达。时长的设置根据动画风格，运动距离作为参照，一般一个常规的动态变化持续时间在 200-500ms 以内。运动曲线：变换的速率曲线，也就是动画中间帧的运动规律。物体的运动不是一直保持同等速度运转，所以在做元素的属性动画时，需要遵照物理世界的运动规律进行。根据元素的画面场景，采用适合的运动曲线，如入场先快后慢，退场先慢后快，弹跳曲线，则是应用在有弹跳物体的场景中。⑤ 剪辑合成剪辑：最终对分镜进行合成和剪辑，形成连贯的、有逻辑、有叙事的呈现，也可根据音效，配音做画面转场的处理；音效：根据动态节奏，还会搭配音效的辅助，提升整体的氛围和风格。⑥ 动画自查一般会从时间、运动，以及元素三个方向，结合物理世界的运动规律，结合用户视觉感知习惯进行画面走查。四、如何交付动画的交付实现，一般会有两种方式实现，代码落地和成片交付：1. 生成成片根据使用的场景的不同可以区分为 MP4 和 GIF 动画交付，可以应用在平台广告或者抖音快手等短视频平台上传播。2. 代码落地实现如涉及到动效的开发，有一部分需要代码语言实现。直接生成代码：利用软件转化成对应的代码格式，现在市场上通用的是 lottie 所生成的 json 进行；提供动效标注图：还有一部分无法直接转化为代码语言，这时候我们可以提供动效的标注图，通过研发实现，标注图规范一般包括，触发条件，对象、变化属性、曲线数值、持续时间等，可以参照以下模板给到具体属性参数；五、最后很高兴您阅读到这里，以上是我的一点思考，希望能给在看的你带来一些小思路。最后祝愿大家在工作中收获美好，困难少一点，开心多一些。欢迎关注作者微信公众号：「JDTDA」本篇来源：优设网原文地址：https://www.uisdc.com/motion-design-2
格式 动画 方式 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
你可以 动画 这就是 大家好，我是灰色执照~ 很开心又和大家见面了。上个月我利用空闲时间学习了一下立体方面的编程知识，努力学习了一个礼拜后，我准备做个学习总结，于是又用了 7 天做出了 NB Map 这款三维地图产品。这就是之前制作的 NB Map，它可以快速的制作国内外各个省市区的三维地图。你可以访问下面链接去详细了解一下它：数据可视化神器！帮你一秒生成三维地图的免费工具NB Maps大家好，我是灰色执照。阅读文章 > 没想到 NB Map 受到了很多设计师的关注，于是我马不停蹄的又努力了 20 天，全新的产品 NB PIE 诞生了~NB PIE 是一款制作立体饼图、环形图、玫瑰图的网页工具。它可以生成透明背景的 PNG 图片，可以生成带有动画的 GIF 动图，可以生成制作视频的 PNG 序列帧图片。你不需要打开任何三维软件，可以用最快的速度得到一个立体饼图。这就是用 NB PIE 导出的动画。你可以设置“镂空”属性，把饼图弄成环形图表，动画就变成了这个样子。你可以修改动画的类型和运动的曲线，让动画以不一样的方式呈现。这就是 NB PIE 的主界面了，它的顶部可以调整饼图的各种样式和动画，左侧设置饼图每项数据的名称和数值，右侧设置灯光、线条、字体等相关参数。通过拖拽屏幕，你可以非常方便的把饼图调整到你需要的角度，如果饼图太大或者小太，你可以通过鼠标滚轮缩放它。NB PIE 生成的饼图其实是矢量的，无论你缩放多大，都会非常清晰。点击左侧的加号或者减号，饼图的数量就对应的增加或者减少了。可以很方便的修改饼图数据的名称和数值。饼图会根据你的修改自动变化。还可以设置“高低错落”属性，饼图就会根据数值按比例展示不同的高度。可以通过设置“镂空”属性，让饼图变成环形图。你还可以把饼图切换成兰丁格尔玫瑰图NB PIE 可配置和调整的参数非常的多，基本可以满足你日常工作中对饼图的全部需求。由于篇幅有限，我这里就不详细介绍了。感兴趣的朋友可以去 B 站看我录制的视频教程了解其全部内容和细节：https://www.bilibili.com/video/BV1Hu411e78H/在调整好参数和角度后，你可以点击菜单栏顶部的下载按钮。NB Pie 支持下载透明背景的 png 图片，支持下载 gif 动画，它甚至支持下载 png 序列帧。如果想做视频或者交付逐帧动画，你可以下载 png 序列帧。你可以利用这些图片合成为 apng 交付开发。可以拿他们做成视频……戳右边链接，就是这款产品的主页了：https://www.pslkzs.com/chart/charts.php这就是 NB PIE 的主页了，点击 开始绘制 按钮，你就可以开始绘制饼图了。凡是饼图相关的，我都已经尽我所能，把能想到的功能都做到 NB PIE 里面了。但是我一个人的想法毕竟局限性较强，欢迎你使用这款产品后，到我们微信设计群里面给我提出改进意见和新的功能需求。你可以加微信：nbchart 我拉你进入设计群。制作这样一款产品真的很辛苦，这 20 天的时间内我几乎满脑子都是各种数学函数的算法，晚上做梦都是在计算圆弧……希望 NB PIE 能够让大家真正体会到方便、快捷。能够缩短你的工作时间，能够真正的给大家带来价值……我是灰色执照，此刻我的脑子里又有了一些新的想法，我要去开发新的设计产品了，我们下次见面时，依旧会给你带来惊喜~想让数据秒变可视化？试试这个免费神器Meta-Chart！统计图表（Chart）是一个易于传达想法的方式，将一般文字数据转为可视化图形，让其他人在更短时间内清楚掌握信息，相对于表格来说也更好阅读，大多数的字处理工具都内建制作图表功能，要在报告或投影片中加入统计图表并不难，如果手边没有合适软件，又要制作图表的话也有在线工具可以使用。阅读文章 > 欢迎关注作者微信公众号：「灰大设计」本篇来源：优设网原文地址：https://www.uisdc.com/nb-pie
动态 动画 格式 本文将从动态的交付文件、成像原理，以及如何高效的与开发团队沟通等角度来分析动态设计交付，旨在帮助与我们遇到类似问题的团队提供合适的解决方案。前言开始阅读之前，我想让大家先思考两个问题：你平时接触的动态设计需求多吗？碰到动态设计，你都是怎么跟开发团队进行沟通的？带着这两个问题，我们开始今天的主题讨论。首先在目前的体验设计中动态交付的方式主要包含文件式交付、参数式交付两种。文件交付主要是指通过提供动态格式文件的方式来达到预期效果，对于开发者来说，只需要针对性的兼容动态文件的格式及库就可以获得该格式的显示效果，根据不同需求还可以简单的控制动态的播放、入场、退场等基础操作；参数交付主要是对动态运动的文字表述，开发可以根据图文化的表述对动态进行代码还原。动态设计的交付方式就起点设计团队来说，在长期的项目迭代中，我们几乎测试了所有的主流动态图片格式。因此针对不同的格式有一些测评和看法，可以跟大家交流，这些格式有 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
动画 用户 数据 Hi，我是彩云。2021 年比 2020 年变得更好了吗？是的，如果我们探讨的是 UI 和 UX 设计的话。新的令人惊艳的网站和 APP 被开发出来，面向设计师的新软件得到更新和发布，创造力被进一步激发了出来。当设计师被迫待在家里时，终于能有时间去反思现有的设计并重新创造。无聊是艺术家最大的敌人，他们会尽可能地打破困局。那么，2022 年的 UI/UX 设计趋势是什么呢？看看现在的情况，我们已经可以预测未来的设计趋势，就像我们对 2021 年所做的预测一样（回头看非常准确）。在本文中，我们将发现：3D 视觉设计师的内卷将会越来越严重数据可视化的工作将变得越来越重要服务的移动化还需要做出更多努力scrollytelling 技术会越来越流行滚动已死，滚动叙事兴起旧的滚动是无聊的。如果你想吸引注意力，你就需要实现滚动叙事（scrollytelling）。（彩云注：这个技术的核心在于边滚动页面边讲故事）《纽约时报》是第一批在他们的文章《雪花飘落》中使用滚动叙事手法的机构之一。它是一种叙事形式，可以在网页和 APP 上呈现。想象一下，在一个网站中每个插图、文本和其他元素都开始变得生动起来。自然地，你会想看到这个故事的结局。它就像一个游戏，带你穿越迷宫。虽然你不能影响它的进程，但却让你感觉自己能参与其中。2022 年，Scrollytelling 将会出现在你看到的每一个流行网站上。另一方面，scrolllytelling 让用户真正去阅读内容。你可以用动态文本让他们产生兴趣，比如谷歌的网站（https://www.google.com/search/howsearchworks/）。他们的团队知道如何让信息看起来更好:Scrollytelling 在用户向下滚动时被激活，因此得名。没有点击，没有选择的麻烦，没有弹出窗口。你似乎停留在一个地方，但通过滚动，把屏幕上的故事慢慢展开。这不仅要求设计师创造出酷炫的视觉效果，还需要认真思考一个你想要讲述的故事情节。所以，最好的网站不可能在 2 天内建成，需要更多的时间去打磨。IAmBinadam 令人惊艳的叙述设计滚动叙事的项目通常需要大量的时间和精力。不过，这样做的结果是值得的。页面变成“活的”，每一秒都有新的事情发生，所以在阅读时很难感到无聊。那么移动端 APP 呢? Pure 是一款约会应用（彩云注，这个应用在 app store 可以搜到，推荐大家安装一个体验一下，非广告），它创造了一种我称之为“tappytelling”的故事（当你第一次点击并打开应用时，它就会被激活）:Scrollytelling 是为用户而创建的，用户很喜欢它，不需要到其他页面去阅读整个故事。相反，网页设计的整个故事都是事先考虑好的，并尽可能以最有趣的方式设计出来。用户喜欢看数据，数据可视化越来越被重视如何在 2022 年做出一个还不错的企业网站？你不会想告诉用户你是“XX 领域公认的领导者，该领域最好的之一”。这种标准的广告表达并不传达任何有价值的信息。最好不要用形容词，而是用事实来说明:你有多少分支机构，在哪些城市，谁是你的客户，以及你是如何帮助他们的。抽象信息是不可靠的。但如果你有很多想要分享的数据，你需要让它不仅简单，而且有趣。数据可视化有助于以一种吸引人的方式传达正确的信息。它也可以与滚动叙事（Scrollytelling）紧密结合。以下是 IAmBinadam 展示数据的方式:通过去除数据集的复杂性，使信息更容易让读者感知。不同级别的数据具有不同的大小，这样用户知道应该先从哪里查看读者可以很快注意到作者试图通过图片引出的结论。考虑到如今人们消费的数据量巨大，那些干净整洁的数字带来的正面影响更大。有些图表乍一看甚至不像图表，这使得它们更加能被注意到还有一种现象叫做“新冠后遗症”。这是 Covid 对公司及其员工的长期影响。根据英国国家统计局的数据，2018 年，压力和焦虑的平均得分约为 2.7/10。自新冠疫情发生以来，得分已升至 4.0/10，很少低于这一水平。同样因为大流行，在过去两年里工作量增加了 4 个小时。人们压力太大，卷的太辛苦，以至于不愿去看复杂的数据。设计师做好数据可视化，以保持人们的注意力。记住，复杂的信息通常被忽略，因为读者试图节省他们的时间，更有可能使用滚动按钮。Illustration by Mona Chalabi以下是我们推荐的一些表示数据的方式图表和曲线图插图静态信息图互动信息图Illustration by Ink Factory如何让信息图表看起来更好?一个好的图表，或者任何其他形式的数据可视化，都应该具有在 Edward Tufte 的“定量信息的可视化显示”中描述的特征。在他的书中，Tufte 通过图表解释了好图表的 3 个原则：1）展示数据的图形元素与数值总数的比值应趋向于 1。简单地说，应该删除一切不必要的元素，保持整洁。Graph by Hootsuite2）充分利用好画面空间。也就是说，需要将数据编排的更紧密。Graph by Hootsuite3）客观地描述数据。不要使用夸张的图表，可视化数据可以看起来很酷，但真实永远是更重要的。2022 年还有必要做 APP 吗？根据 We Are Social 的数据，2021 年有 52.2 亿人使用手机，约占世界人口的 66%。自 2020 年 1 月以来，手机用户数量增长了 1.8%(9300 万)，而手机联网总数量增长了 7200 万(0.9%)，到 2021 年初达到 80.2 亿。过去一年，社交媒体用户的数量增长了 13%以上。到 2021 年初，社交网络上已有近 5 亿新用户注册。根据 App Annie 的数据，Android 用户每天花在手机上的时间超过 4 小时。2020 年，安卓用户上网时长超过 3.5 万亿小时。令人印象深刻的数字，是吗？似乎到 2022 年，为产品做一个 APP 将成为必须拥有的东西。如何知道你的公司是否真的需要一款应用？有以下几点可供评估：1）用户主要通过移动设备访问你的网站这是你应该了解的重要数据。客户和你在一起的时间越长，你就有越多的机会去吸引他们，了解他们的习惯，并给他们想要的东西。（彩云注：这就是为什么各大厂之间都在拼命抢占用户的在线时长。）2）帮助内部业务流程更加有效如果你想要提高员工的工作效率、改进工作流程或增加利润，那么就制作一个可以帮助管理业务流程的移动应用。如今，像这样的手机应用使企业能够执行越来越复杂和多样化的任务，加快日常重复操作和文档管理。3）实现一些网站上没有的新功能如果你认为 APP 能为用户打开新的触点，并让用户体验更加友好，那么它就值得考虑开发。问问自己的 APP 能提供什么新的商业机会？例如，随着疫情的蔓延，许多人开始用上健身 APP 在家里锻炼。4）竞争对手的情况要了解竞争对手在做什么，他们是否有 APP，能做什么，以及他们是否真的对用户有用。查看 App Store 和谷歌 Play 的统计数据。下载和评论的数量可以告诉你用户是如何使用竞争对手的应用的。如果他们的服务真的很方便而且很有必要，那么你就容易被甩在后面。5）复购率一个应用可以帮助你留住那些习惯从你那里购买的人。如果想为老客户开展促销活动了，给他们发送一个通知就能完成，成本更低。在正确的时间提供的报价越有吸引力，人们购买的可能性就越大。出租车服务公司有回头客，他们肯定需要一个应用6）促销工具有了应用，你就不需要花钱设计和制作实体卡，客户也不需要随身带卡。将促销计划整合到 APP，并分享有用的促销信息。做原生 APP 还是移动端网站?开发手机网站比开发手机应用需要更少的工作量，这反过来可以降低整体推广成本。这部分是由于响应式设计的出现，它允许你根据打开网站的设备屏幕来调整网站。至于 APP，它们必须为许多移动平台单独编写:Android、iOS、Windows 等。一些设计师认为“前端驱动的网络体验”会是 2022 年的一个好机会，我非常同意!（彩云注：在国内，现在开发小程序的肯定越来越多了。）3D 设计具备更强竞争力我们一开始并没有将其放在首位，因为这并不是一个新的趋势，在很久以前设计师们就已经设计了很多 3D 图像和动画了。Cardi B rhymes with 3D3D 技术已经在过去流行了很多年，但它不会很快消失。此外，我们预测 3D 图形将变得更加多样化和包容。在过去的几年里，3D 艺术和动画已经出现在各种 UI 设计趋势评论中。这意味着越来越多的设计师将它们整合到页面中。3D 当然应该成为 2022 年最热门的趋势和预测之一，因为与经典动画相比，逼真的 3D 形状结合动画总是引人注目的。“从技术上讲，通过 3D 更容易传达更多内容，因为它比平面图片更接近我们的感知。3D 插图更有深度，信息量更大，也更具互动性。”许多设计师将 3D 对象无缝地“安置”在 2D 空间中。它允许创建更有趣的组合，也作为一个优秀的工作方法蕴藏着巨大的潜力。乌克兰政府网站用 3D 手模拟了黑客帝国注意一点：在整合 3D 图形等重量级内容之前，确保你的应用性能是 OK 的，能够快速加载所有元素。元宇宙风潮Meta 的 logo 既不是 2D 也不是 3D。或者两者兼而有之？这就是即将到来的 2022 年的莫比乌斯带和薛定谔的猫。Meta logo 的变化（彩云注：这个概念在去年简直不要太火，未来几年肯定还会是一个大的趋势，设计师也需要保持关注。跟着趋势走，易于放大自身价值。）混合动画越来越多的公司在网站和移动应用中使用动画，以提高用户的沉浸感和体验，使内容更有趣。动画是 2022 年重要的网页设计趋势。2022 年，如果没有它，你的产品很可能会看起来就像个半成品。混合风格的动画越来越受欢迎:定格动画和 3D 动画的结合，2D 动画和 3D 动画的结合。设计师这样做是为了获得不同寻常的风格解决方案，以及提高最终产品的质量。2022 年，动画设计将是品牌市场定位的重要组成部分，想想一个公司新的视觉形象——动画形象。随着这个领域的专业设计师数量的增长，实现新想法的机会也在增加。2022 年如何使用网页动画?1）讲故事动画可以通过在界面和用户之间建立情感联系来传达信息。加载动画 Yoichi Kobayashi2）更有趣的加载用户不愿意等待，除非载入画面很有趣。带有百分比的动画不仅可以分散用户的注意力，还可以告知他们加载页面需要多少时间。使用进度条或者任何你能想到的可以显示时间流逝的东西。3）光标效果用户可以精确地观察光标所在的位置。通过添加智能互动动画，对这个光标作出反应来探索网站。这种效果在 21 世纪初非常流行。如你所知，流行趋势往往每 20 年就会重演一次。4）动态排版你有没有想过让字母跳舞?添加角色的动画插图据 Statista 统计，2020 年全球动画市场达到了 2700 亿美元。趋势是视频，而不是静态信息。全球品牌在社交网络上使用动画制作广告。毫无疑问，动画插图的优势是它们非常灵活和多样化。宝马历史动画这样的作品通常用于两种情况:1）用于解释视频2）电商广告动画解说的趋势出现在几年前，解说视频清楚地显示点击的位置或公司的项目是关于什么的。在招聘或商业视频中，用户更喜欢看画出来的人物，而不是抽象的形状或物品。画出来的人物可以唤起情感共鸣，就像活着的人一样。微交互，大影响微交互是帮助用户浏览网站或应用的小界面变化。通常这些是作为提示用户的视觉或声音效果：它们显示发生了什么，将导致什么操作，下一步需要做什么。图片来源 awwards动画交互将为你的设计注入活力，并有助于保持用户粘性。关注每一个细节是设计师工作的关键，因为设计中的所有元素都可以带来积极的用户体验。重要的是要达到元素的和谐，而不是把注意力分散到界面的各个方面。微交互作用的一个重要部分是颜色，它们为界面元素增强价值。CTA animated微交互有助于页面导航，解释它们的功能。最重要的方面之一是加快和简化以前冗长的功能，以实现特定的行为。动态 logo，加深品牌印记2022 年，在线品牌面临着新的挑战，需寻求新的解决方案，其中之一就是动画 logo 设计。图片来源 Toridori动画 logo 主要有以下几点营销优势:吸引注意力。这意味着它们有助于提高品牌知名度。有助于提高 SEO。谷歌更倾向于动态内容，带有动态图形的页面更容易吸引用户。在移动端看起来更好。丝滑的动画看起来比静态的 logo 更有趣。最重要的是展示了历史。静态 logo 背后的想法正在动画中发展。由于这一点，在几秒钟内，你可以展示品牌的使命，甚至它的价值!一家洗衣机[公司]的标志现在有很多设计模板，可以很容易地用字体制作一个动画 logo:来源 Shabello, Bobby Voeten最后的话记住，设计趋势总是在变化的，但是设计的意义不会变。如果你不能深刻理解这一点，那么任何设计趋势的文章不能帮你做好设计。独家放送！2022 年值得关注的3个前瞻设计趋势2021 虽不像 2020 那样充满魔幻，但人类还在继续抗击疫情的蔓延。阅读文章 > 欢迎关注作者的微信公众号：「彩云译设计」本篇来源：优设网原文地址：https://www.uisdc.com/2022-ui-ux-design-trends
动画 格式 序列 动效设计，可以提升界面的趣味性和引导性，让用户浏览过程中不会太枯燥，获得更好的体验。最近做的金山知了（后面改名为金山知识库）官网，头图元素加入了缓动效果，第一眼挺新颖的。金山协作新年许愿活动，许愿按钮加入了运动的形象，更能吸引用户点击。不过，输出动图和开发对接的过程中，我也遇到过一些问题：导出的动图模糊、资源太大、开发不支持动图格式等等，当时也是想尽办法地解决。这次我总结了几种常用的动图格式，也提及我输出动图过程遇到的问题和解决方法，以及我们设计师该如何选择合适的动图格式。序列帧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
曲线 动画 互动 从设计的维度，动态设计可以分为交互动效和 Ae 动效，在这两方面个人都有相关落地项目。但是自己感觉学得不够系统，只是能做需求，做得还不够好，所以最近几天我都在学习研究 Material Design 交互动态系统规范。从整体框架和细节入手，我结合日常业务设计思考总结了几点，也输出了一套动效标注模板，希望对大家有帮助。这次总结主要是分享交互动效的相关干货，方便自己沉淀设计经验，大纲如下：动效的作用设计原则持续时间缓动曲线动效风格动效标注动效的作用相信很多设计师在日常业务中都会主动挖掘机会点，来为产品增值赋能。机会点可以是交互动效，但是我们该怎样和产品同学沟通推动才更有说服力呢？如果只是说提升用户体验，说服力是很弱的。因此，我深度学习了 Material Design 动态系统规范，结合界面案例总结了几点作用：1. 使用更愉悦，微体验更好比如标签栏 tab 切换、下拉菜单出现，加入动效，符合现实场景动态，界面更加生动，还能缓解用户对内容的枯燥感。2. 让不同界面的元素更具有关联性，易于理解层级比如收件箱消息列表和消息详情的转换，过渡流畅。3. 提供强提示的反馈和展示当前界面状态比如键盘输出完成，动画显示操作是否成功；列表占位符，加入动画表示正在加载中。4. 教育用户，帮助用户了解如何操作比如滑动打开的手势动画，使操作行为易于理解。动效原则好的交互动效，会给人愉悦的心理感受。设计过程应当遵循以下几点原则：1. 自然在现实世界中，物体的速度会受到自身重量和摩擦力影响，不会突然运动，也不会突然停止，因此要使用缓动曲线，平稳过渡。2. 及时反馈动画持续时间适当，响应迅速，有助于用户了解 UI 变化。不宜太快，人的大脑容易反应不过来，处于很懵的状态。也不宜太慢，用户一直在等待，会产生枯燥不耐烦的心理感受。3. 简单明了动画过渡要简单明了，保持连贯，避免多个元素交叉重叠，显得混乱。4. 一致性遵循尼尔森十大交互原则中的一致性原则。整个产品应当使用统一的动效标准，比如运动速度、缓动曲线统一，使用户体验一致。持续时间在及时反馈原则上，Material Design 规范对于手机端的动画持续时间，提供了三个层级建议：小范围过渡的元素，建议时间是 100ms，比如开关按钮动画。中范围过渡的元素，建议时间是 250ms，比如半屏面板展开。大范围过渡的元素，建议时间是 300ms，比如悬浮按钮转化为全屏面板。这个时间我们只能参考，具体动画时间还是要看界面效果来确定。缓动曲线缓动曲线，调整过渡元素的速度，按物理规律自然地加速或减速，这样动画才会显得自然愉悦。在不同的平台或软件，缓动曲线可能会有不同的命名，MaterialDesign 规范定义了四种：1. 标准曲线标准曲线（也称为 EaseInOut）是最常用的缓动曲线，元素从静止开始快速加速，缓慢减速到结束。这种缓动曲线适合屏幕内的元素在屏幕内的运动，过渡自然，可以用在悬浮按钮转化为面板的动画。2. 强调曲线强调曲线（也称为 EaseInOut）是标准曲线的拓展，元素加速时间减短，减速时间加长，强调过渡的结束。这种动画效果会稍微俏皮一些，对于办公产品要慎用，也避免曲线样式太多设计师无法清晰地区分使用。3. 减速曲线减速曲线（也称为 EaseOut），元素从屏幕外快速进入并逐渐减速，在静止时结束。这种缓动曲线可以用在半屏面板出现的动画。快速进入，可以迅速响应用户的操作行为；当用户大脑收到即时反馈后，为了避免高速移动带来的紧迫感，元素需要缓慢减速到静止。同时，让用户在等待过程中可以提前识别和接收内容信息，动画结束后可以第一时间操作。4. 加速曲线加速曲线（也称为 EaseIn），元素在屏幕内静止，逐渐加速离开屏幕。这种缓动曲线可以用在半屏面板消失的动画。用户操作关闭面板，表示已经不关注面板内容，这时动画就需要快速响应，加速移动屏幕，避免用户出现等待的焦虑感。动效风格设计师了解完动效原则、持续时间、缓动曲线后，当业务需要定制一套动效标准时，我们需要结合产品调性制定动效风格。工具类产品专注内容，可以使用直接、简洁的风格；娱乐类产品，可以使用俏皮、活泼的风格。影响动效风格主要有几点：速度、运动路径、缓动曲线、海拔高度，我们可以看下对比效果。1. 持续时间 300ms 的标准缓动和 650ms 的强调缓动的对比。2. 如果元素沿对角线移动，运动路径可以是直线或弧形，看下对比。3. 默认过渡和弹跳过渡的对比。4. 默认情况下，背景内容在动画过程是静止的。为了动画更生动活泼，可以调整背景内容比例来强调海拔高度。从对比效果来看，持续时间较短、斜向移动的直线路径、默认过渡、默认海拔高度的动画风格直接、简洁，及时反馈，专注内容；持续时间较长、斜向移动的弧形路径、弹跳过渡、变化的海拔高度的动画风格强调动画的过程，俏皮、活泼、生动有趣。如果是办公产品，需要克制下，不要盲目强调动画。动效标注设计师完成交互动效 Demo 后，就要输出一份动效标注交付开发实现。在实际项目中，我有遇到过一些问题：有些设计师反馈文字表格不直观、不易编辑，有些开发同学反馈动画曲线看不懂。为了解决这些协作问题，我结合动效标注的项目经验、参考 Material design 规范动画曲线和咨询开发同学的意见，最终搭建了一个 Sketch 动效标注模板，组件化搭建编辑，比较方便。（有需要的同学可以在文末和开头下载）总结以上就是我对 Material Design 交互动态系统的学习总结。理解交互动效的具体作用，我们才能更有说服力地和产品沟通推动落地。在设计过程中，我们应当遵循自然、及时反馈、简单明了、一致性的原则，结合产品调性打磨出一套自然愉悦的动效标准。还需要注意一点，要恰当使用持续时间和缓动曲线。由于个人还没经历过整套产品交互动效系统的搭建，还有许多不足之处，接下来会继续学习！腾讯出品！2021-2022设计趋势报告：动态篇前言动态设计（Motion Design）有助于创建令人愉悦且直观的用户界面。阅读文章 > 欢迎关注作者微信公众号：「ALEI的设计思考」 文件名 如何下载使用 文件大小 提取码 下载来源 交互动效标注模板3.36M2333 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/material-design-system-conclusion
动画 终端 设计师 在终端 APP 中，动画非常常见，它可以辅助视觉制造焦点，同时也可以让用户交互更加顺滑，但动画的实现却是设计师和研发群体的一个痛点。如何辅助设计师设计高性能炫酷的动画、如何将设计师设计的动画准确无误的还原到终端 APP 上是业界不断探索和解决的问题。图 1 传统动画实现流程图当前最好的动画设计软件是 Adobe After Effects（简称 AE），从 AE 动画制作到终端 APP 呈现，传统的实现方式如图 1 所示，有三大痛点：实现成本高、沟通成本高和性能难以保证。近几年，业界诞生了像 Lottie、SVGA 这样的动画工作流解决方案，虽然在一定程度上提升了生产效率，但存在 AE 支持能力有限、动画性能难以保证、配套工具支持有限的问题。本篇来源：优设网原文地址：https://www.uisdc.com/pag
张大湿
在路上
落霞与孤鹜
表哥
飞翔的企鹅
