一、 ：动态设计的挑战与机遇

动态设计已经成为提升用户体验的关键手段。只是动态设计的交付过程却充满了挑战。本文将从巨大厂的视角，全面解析动态设计交付的各个环节，带您一探究竟。

二、 动态交付的方式：文件式与参数式

在目前的体验设计中，动态交付的方式基本上包含文件式交付和参数式交付两种。

1. 文件式交付

文件式交付基本上是指通过给动态格式文件的方式来达到预期效果。对于开发者只需要针对性地兼容动态文件的格式及库就能得到该格式的看得出来效果。比方说GIF、WebP、APNG 等都是常见的动态格式。

2. 参数式交付

参数式交付基本上是对动态运动的文字表述，开发能根据图文雅的表述对动态进行代码还原。这种方式需要开发者和设计师之间有良优良的沟通，以确保效果准确无误。

三、 动态设计交付的成像原理

动态设计的成像原理基本上基于以下几种方式：

1. 透明通道序列帧

通过将 mp4 视频与相应的 alpha 通道视频叠加，能使得原视频具有透明效果。

2. 视频+透明通道

WebP 相对较新鲜，是谷歌在 2010 年发布的。它支持库是在 2018 年 4 月发布，目前已有 95.77% 的浏览器支持该格式。

3. 矢量动画

矢量动画通过解析渲染完成， 具有高大兼容性和极细小的文件巨大细小，是目前互联网产品中比比看通用的解决方案。

四、与开发团队高大效沟通

正确的阐述动态设计的关键信息是有效交流的关键。

1. 明确需求：在设计阶段，确保对需求有清晰的认识。

2. 详尽说说：用详细的语言说说动画效果，避免歧义。

3. 图形化标注：对于麻烦的动画，能用图形化标注法，使表达更清晰。

五、 常见动态格式性能对比

格式	优良处	不优良的地方
GIF	兼容性优良，用性能稳稳当当	压缩效果差，看得出来效果最差
WebP	压缩率高大，兼容性优良	有些 iOS 版本存在兼容问题
APNG	看得出来效果优于 GIF	兼容性相对较差
Lottie	高大兼容性，文件细小	实时渲染，对内存和设备性能消耗巨大

六、实践案例：起点读书动态设计交付

起点读书在动态设计交付方面积累了一定的经验。

1. 动态卡牌：用 WebP 格式，兼容性有力，展示效果佳。

2. 动态挂件：用 PAG 格式，文件细小，性能高大。

动态设计交付是一个麻烦的过程，需要设计师和开发者之间的紧密一起干。通过本文的解析，相信您已经对动态设计交付有了更深厚入的了解。希望这些个经验能对您的实践有所帮。

本文来源于某巨大厂设计团队， 版权全部，未经授权禁止转载。

---