整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
在一个互联网产品的团队中，往往不可或缺的不是产品经理，或者说很多产品经理的工作是很容易被替代的。
我也经常的问自己，怎样的产品经理才算是不可替代的呢？
产品设计的能力自然是参考核心标准，如果将其作为核心技能，也就是产品经理的入门的门槛，就像是木工师傅要会木工，铁匠师傅要会打铁一样，属于基础技能。
同时产品经理一直是团队中沟通协调的中轴点，很多时候需要担当决策者，因此需要同时衔接开发、设计、运营、商务等等职位的同事的工作。
沟通的角度来讲，了解了这些工作内容，才能够顺畅的获取和传递信息。
决策的角度来讲，了解了这些工作内容，才能够做出高效正确的选择。
所以，在我看来，跨领域依然能够保持专业视角的产品经理能够提高团队效率，保证团队产出的质量。这样的产品经理才是不可替代的。
在这抽出设计和开发中的转场特效聊下：我眼中产品经理需要懂的那些转场动画特效。
转场动画特效是指在产品页面或页面元素的切换或状态转换时的过度特效。
转场特效的两个设计准则
1.符合物理规律、自然规律、符合人眼视觉认知
心理学依据
转场特效存在的心理学依据：
A． 一方面可以缩短用户在界面切换等待时可感知的时长，
B． 另一方面可以减少界面切换给用户视觉上带来的冲击感，实现平滑过度。
认知规律
转场特效是要以人为本的，也就必须做到符合人类认知规律，设计中需注意两点：
运动变化需符合自然规律：如运动、颜色、形状等不能突变，启动以及收尾需要有自然过渡的阻塞感等。
人眼认知动态变化时存在视觉模糊，如果不添加动态模糊会显得变化生硬不自然，设计动画时需勾选视觉模糊选项。
2.不影响用户操作效率
不打断操作，保证操作顺畅
转场动画切记不要拖沓累赘，不要采用过于臃肿的信息来做转场过渡，耗时也要注意尽可能的精简，不可打断用户操作，造成更长的时间等待感。
产品性能优先
如果因为绚丽的转场动画造成了产品性能的降低，显然是更加损伤用户体验的，坚决不可取。转场动画属于优化性质的需求，不是核心需求。
上文讨论的都是设计理念，然而最终实现转场动效还是要从开发视角来看。
体验控制
A.符合自然规律，动效不能出现突变
开发工程师在实现中不采用突变性质的函数，回归到数学原理上，所采用的函数须符合傅里叶变换。对函数参数的控制需按照设计师给出的效果设置。
B.保证操作顺畅、性能优先
开发工程师实现过程尽量采用开发工具或引擎所自带的动效函数库中的函数，如果无法实现也尽量采用优化过得动效函数。 这点需要产品经理尽量提前沟通，保证项目顺畅进行，我之前就遇到过因为视觉特效实现困难，险些延期的情况。
另外，动效能否实现、怎么实现、实现成本这些问题，作为产品经理都需要有所了解，这样才能正确的评估转场动画特效的需求重要性。
实现方式
1.采用开发引擎，设计逐帧切图，通过软件内循环播放实现。实现成本因特效不同和引擎支持的函数库不同差别较大。
2.视频、Flash、gif直接嵌入，开发成本相对较低，但可能对产品性能造成较大影响。
3.HTML5、CSS根据动画、参数、元素实现，综合成本低、性能影响小，但应用范围较小。
产品经理可以适当的使用AE这种视觉特效软件，试用下里面自带的常见的动效函数的效果，看完之后会有更整体的感受。
常见转场动效函数
对应函数变化曲线如下：
曲线斜率代表变化速度，上下两条横线代表起始状态与终止状态。
那么知道了这些，如何衡量一个动效的好坏呢？
参考腾讯设计师的文章，将动效分为三个阶段：（图片摘自腾讯大讲堂）
移动端领域的转场动画，我个人有如下衡量标准。
启动阶段
移动端操作集中在手势，启动阶段要求跟手，要略有阻尼感，也就是速度变化尽量的平滑。
如果是非手势操作的过度场景，启动阶段也应该干净利索，柔和过度，变化速度的参数的控制尽量不要太大。
采用较低次的函数动画（如一次缓入、二次缓入等函数的起速阶段），整体给用户的感知更加柔和。
采用较高次的函数动画（如四次缓入、五次缓入等函数的起速阶段），整体给用户感知更加干脆，利落。
运行阶段
保证动画的稳定性，给用户更多的安稳感，所以建议不要有较大的趋势变化，保证加速度一致或速度一致。
恢复阶段
强调动画延续，但是不能影响操作，MIUI6的动效在发布会上独立拿出来讲解，也确实做的很优秀，尤其是收尾动画的控制：
感兴趣的朋友可以观察下MIUI解锁后的效果，给人很大的愉悦感，延伸性，同时不影响操作的顺畅连贯性。
这是因为对多元素的动画分节奏采用同样的高速动画形成的节奏感，从而产生了极强的延伸性。
多个元素：建议采用类似MIUI的方案，采用高节奏、统一的高变化速率的动效函数。
单一元素：建议采用阻尼回弹函数等收尾阶段有回弹效果的动效函数。需要注意的是，收尾一定要利落干脆，不然会影响用户操作的连贯性。
本文为作者萌斯特（微信号：DudusTaste）投稿发布，转载请注明来源于人人都是产品经理并附加本文链接
着CSS3和HTML5建站技术的发展，动效在网页设计中的作用越来越显著。
与静态界面相比，动态的转变更符合人们的认知体系，可以有效降低用户认知负载。
这是因为，在网站界面使用动画效果能让元素的变化、界面的转变、层次结构之间的关系更加清晰自然。从某种程度上来说，动效还是用户交互的基础。
△做这种动画有什么要求？
那么，什么样的动效才是有效的呢?小编浏览了不少网站，问遍千锋教育成都校区的HTML5讲师，总结出5点要求。
一、流畅自然
一个好的动画效果应该是自然流畅的。
在很多糟糕的网站设计中，我们可以看到页面或元素的状态改变都很生硬、突兀，这会让用户产生困惑：为什么某某元素突然出现或消失?
任何事物都存在一个转变的过程，人们早已在自然界、生活中形成了这样的认知规律。
下图就是一个比较好的示例，当用户在列表中选取一个项目点击查看时，小卡片会展开为大卡片，展示众多细节，这种动效是有规则可循的。
所以当网站的页面有两个或多个状态，需要使用动画效果做过渡时，一定要保证它的自然流畅，让用户明白所以然。
当然了，有些糟糕的设计作品，比如说卡顿的，视觉效果也不好，所以......你懂得。
二、层次分明
一个高效的动效应该是层次分明的。
层次分明的动效一方面能够清晰展示页面状态的变化，另一方面能够有效抓住用户的注意力，决定着用户的关注持续时间。
以下图为例，圆形的悬浮按钮处设置了动效，它会扩展为带有3个按钮的头部导航元素，导航界面与原先的界面有很鲜明的层次分割。
虽然初次浏览的用户难以预测到这一转变的发生，但是这种形式的动画能够很好地保持用户的注意力，引导用户进行下一步的交互。
三、关联自然
网站页面上动画效果大多都涉及到前后元素或状态之间的变化。
虽然我们在前面也强调了不同元素和状态之间的层次分明，但是，光有层次感可不行，动画效果也要有逻辑感，能呈现出一定的关联性，让用户清楚界面变化的过程。
以上两个栗子给大家实际展示一下什么是动效的关联性。
在第一个栗子中，新出现的界面与动效触发点较远，这让整个界面看上去有断层的感觉，用户在浏览起来时也没有那么顺畅;
在第二个栗子中，新出现的界面就是从触发点延伸出去的，这种形式的动效在关联性上就做的很好。
四、精准快速
如果说网站中的动画效果只能有一个准则的话，那一定就是动效的快速精准。
当我们在网站中设计转场动画时，动效的速度绝对是一个需要重点考虑的因素。
它既不能太慢，浪费访客的时间，也不能太快，让访客觉得难以理解。以上是一个反面教材，动画效果的速度太慢了，这种不必要的延迟会加长用户的等待时间，让用户觉得烦躁。
这还有一个正面的栗子。
当元素在不同状态中切换时，动效的速度是恰当的，足够快速精准，也足够让用户理解。千锋教育建议大家，为了兼顾动效的效率、用户理解的顺畅，动效应该在触动后的0.1s内开始，在300ms内结束，这算是一个最佳的状态。
不过这条准则也不是固定不变的，你可以根据自己网站动画效果的实际状况进行调整。
五、简单清晰
动画效果还应该简单清晰。如果用户界面上存在许多动态或交互的元素，用户的注意力会分散，不知道究竟应该点击哪一个。这在一定程度上会引起用户的混乱。
所以，动效应避免一次呈现过多效果，尤其当动效同时存在多重、复杂的变化的时候。少即是多的原则对于动效同样也成立。如果某个动效的简化能够让整个UI更加清晰直观，一定要去进行修改。还有，当动效中同时包含形状、大小和位移变化的时候，一定要保持移动路径的清晰，让状态变化更清晰。
动效本质上是视觉沟通的一种方式。当你在设计动效时，一定要聚焦域他们能为用户带来什么。
网站中使用的动效，不管是有趣的还是直接的，最好跟自己网站的风格相结合，给用户提供清晰、一致的浏览体验。
rocessing.js
Processing.js是一个开放的编程语言，在不使用Flash或Java小程序的前提下，可以实现程序图像、动画和互动的应用。Processing.js是轻量，易于了解掌握的理想工具，可用于可视化的数据，创建用户界面和开发基于Web的游戏。
FABRIC.JS
FABRIC.JS是一款简单而强大的JavaScript Canvas 库，提供了互动的对象模型，同时还包含 Canvas-to-SVG 解析器。
oCanvas
oCanvas是一个JavaScript框架，用于简化HTML5 Canvas标签的使用，可以利用对象来代替像素。 oCanvas 可以帮助你很容易的在 HTML5 的 Canvas 标签上创建对象，并且创建这些对象的动画。
jCanvas
jCanvas 就是一个 jQuery 的绘图插件，它封装了一些绘制图形的方法，只需编写几行代码即可生成图形。
RGraph
RGraph是一个使用HTML5 Canvas标签实现的图表制作Library。利用该Library生成的Chart具有可交互性，当鼠标点击或移过时会显示相应的信息，可以动态加载Chart或对特殊点进行缩放。
Two.js
Two.js 是面向现代 Web 浏览器的一个二维绘图 API。Two.js 可以用于多个场合：SVG，Canvas 和 WebGL，旨在使平面形状和动画的创建更方便，更简洁。
Paper.js
Paper.js是一款开源的矢量图形脚本框架，基于 HTML5 Canvas 开发，提供清晰的场景图、DOM和大量强大的功能用来创建各种向量图和贝塞尔曲线。
EaselJS
EaselJS 是一个封装了 HTML5 画布(Canvas) 元素的 JavaScript 库。
Kinetic.JS
Kinetic.JS 是一个封装了 HTML5 Canvas的JavaScript 库，能为桌面和移动应用提供高性能动画，转场效果，节点嵌套，分层，滤镜，缓存，事件处理以及更多功能。
Pixi.js
Pixi.js 是一个 2D webGL 渲染器，提供无缝 Canvas 回退，支持主流浏览器，包括桌面和移动。
*请认真填写需求信息，我们会在24小时内与您取得联系。
