什么是互动产品，互动营销类产品动效浅析？

前言

互动产品作为各大电商的重要手段，吸引尽可能多的用户参与活动。本文试图从动态设计的意义出发，分析视觉设计师如何更好地为产品赋能，以及如何提高动态设计的效率，节约开发成本。

动态效果值

一、满足用户心理预期

我们生活在一个物质世界，万物的运动都符合物质世界的客观规律。所以人对事物的观察和认识都是建立在对物理规律的认识上的。虚拟界面上的元素都是现实世界中不存在的东西，会让用户感到陌生。

通过合理的动态效果。让虚拟界面模拟物理世界的规律，如惯性、视差等。，可以让虚拟世界与物理世界产生交集。用户将把他们对物理世界的了解映射到他们对产品的了解。下面是一些常见的模拟真实环境的动态效果。

1.弹性

2.空房间

3.变形

案例描述

这是一些网上案例的动态展示，分别模拟了摇号机的摇号；机器操作；雷达扫描的真实感。从而让用户快速将现实认知带入产品。

二。引导用户的注意力

一个营销运营产品往往承载着海量的信息，可能会给用户造成视觉上的混乱。用户可能不知道页面的关键点在哪里，导致页面核心利益的沟通效率低下。而理清这些页面信息的层次关系，可以通过合理的动态效果来实现。

在实践中，我们发现用户对动态元素的关注度最高，其次是颜色，最后是亮度。通过这样一个简单的优先级关系，我们可以初步梳理出页面层次结构。

案例描述

合理的优先级规划可以有效吸引用户的注意力，让他们关注设计师希望他们关注的东西。优化用户体验产品时的视觉动线，帮助用户分清主次。在下面的例子中，动态按钮和金额是设计师希望用户最关注的东西。

三。情感设计

情感化设计的目标是在用户接触和使用产品的过程中，激发用户的积极情绪，如快乐、信任和满足，避免用户的消极情绪，如失望、沮丧和痛苦。积极的情绪会让用户更愿意使用产品，在使用过程中遇到一些小问题也会更加宽容。

案例描述

在可爱宠物项目中，用户点击狗，狗会挠痒作为反馈。这种反馈没有功能上的作用，但是可以取悦用户，让用户感受到与虚拟狗的一种情感联系，最终提高用户的粘度。

挑战

为了应对上述挑战，设计者、运营者、产品和开发者也提出了许多解决方案，动态组件就是其中之一。

动态效果组件化的优势

一、统一体验

统一用户体验的好处是两个产品或者同一个产品的相关界面的设计风格和风格可以保持一致。用户在体验产品时，可以保持流畅的视觉体验。

案例描述

在北京朋友圈的各种活动中，红包频频出现。如果风格不统一，整个产品会显得非常凌乱，用户体验也会支离破碎，不完整。

二。提高效率

动态效率模块化可以显著提高动态工作效率。主要可以体现在动态效果设计师本身在设计大量类似动态效果的时候。模块化设计可以减少重复设计，减轻设计人员的工作量。

案例描述

本案例是“东东萌宠”的动漫形象动态设计。该模块采用组件化设计思想，大大提高了工作效率。这个项目中很多设计师的动态效果也保持了高度的统一。

三。降低成本

降成本主要是指降低动态开发的成本。因为动态效果有时候很酷，但是开发调度有时候不允许，所以类似的效果需要使用组件化来提高代码重用性。

案例描述

数字滚动效果，在很多营销运营中使用，可以引导用户的注意力，反映金额变化，强化用户的获得感。这种效果开发出来后，可以在不同的项目中重用。

组件系统

一、确定设计原则

设计的本质是解决问题，设计原则要基于这个设计的中心思想。其核心可分为两个维度:审美互动维度和发展实现维度。在满足审美维度的同时，设计师还要考虑开发和实现的难度。毕竟没有开发的努力是达不到最终的动态效果的。

二。使用设计语言

为了实现高质量的动态效果，我们需要熟悉几种动态效果的基本属性和运动方式。以下工具的熟练应用可以满足现有的大部分动态需求。

锚点:控制旋转中心点的位置。在实际设计中，可以做出旋转和公转的效果。

位置:最常用的工具，代表物体的运动。

缩放:多用于按钮呼吸效果，或者对物体感知的增强。

旋转:表示物体的旋转，可以表示物体的方向。

透明度:可以显示物体的强度，也可以用于过渡淡入效果。

以下是动态效果设计中几种常见的应用情况。两者之间的细微差别是显示设计细节符合用户心理预期的关键。每种锻炼态度所包含的情绪是完全不同的。

节奏:变化强烈，给人最大的视觉冲击，引人注目。

线性:总体来说比较稳定，没有任何波动和变化。

慢动作:细分也有几种模式，分别是渐进、渐出和渐出。慢动作有节奏感和节奏感。相比线性匀速，更优雅生动，是使用较多的类型。

惯性:效果自然，恰到好处。不会让人觉得突兀，细节丰富。

三。构建组件库

组件库的建立对于提高视觉设计的效率、展示成果、团队成员之间的相互提高和信息共享有着非常重要的作用。对开发也有很好的促进作用，增加代码复用，降低开发

动态效果衍生

1。提供静态图和动态效果说明

软件:素描PS

开发成本:简单的动态效果，如缩放、旋转、位移等。，提供JPG或PNG静态图片和动态效果描述，通过开发实现动态效果。其优点是效果平滑，体积小。关于动态效果的讲解，如果简单的话可以用图文来表达，如果复杂的话需要结合动态效果演示来动态展示效果和具体参数。

当向开发提供数据时，可以选择使用下表的形式。这有助于提高开发效率和还原度。

2。提供GIF图片

软件:素描、AE、原理、PS、Flinto等。

开发成本:复杂的动态效果，如生长、形态变化、组合变化等。，我们可以直接生成GIF图片交给开发，这样实现成本最低，所有动态效果都被设计消化了。对于开发的学生来说，点击只需要替换图片，很受他们欢迎。但是，GIF也不是完全没有问题。它的主要问题是文件尺寸较大，画质越清晰，文件尺寸越大，响应速度相对其他形式越慢。如果是复杂的图片，就要找到画质和文件大小的平衡点。

3。提供SVG图片和动态效果描述

软件:草图

开发成本:SVG图片其实就是用脚本写的矢量图片。Sketch可以直接导出SVG格式，对于设计师来说更方便。而且SVG最小，最灵活，可以很好的扩展。同样的图形动态效果SVG比GIF小95%左右。此外，与JPG或PNG不同，SVG图片不会失真，因为它们是矢量，并且可以支持增长和变形的效果。开发生可以根据我们提供的动态效果说明用代码还原。但是，它有自己的局限性。第一，开发成本高。第二，如果需要在web上使用，IE浏览器不支持。如果产品在网络上使用，这一点应该考虑在内。

4。提供Json文件

软件:草图、AE

开发费用:用AE做好动态效果后，导出Json文件进行开发。它的优点是还原程度高，可以节省一些内存。不过也要注意，json虽然好用，但是过度使用JSON会消耗设备的性能，特别是对一些低端设备造成沉重的负担，尤其是一些大型动画，容易造成卡顿，所以Json更适合小规模的动画。总的来说，有相当多的实现方式。可以先做动态演示，然后和开发同学讨论选择最佳实施方案，确认后再准备可交付成果。

摘要

动态设计在产品营销和运营中越来越重要，其意义也越来越被人们所认识。如何在动态效果实现层面平衡运营、设计师、开发之间的矛盾，是接下来需要我们共同思考和解决的问题。设计师在日常需求中积累的经验和模板，可以构建一个共享的组件库，促进后续的工作效率和相互学习进步，从而更好地为产品赋能，为用户提供更高质量的体验。