信不信由你，你没有足够的时间来说服你的网站访问者留下来。 你的窗口实际上比你想象的要短得多。
从本质上讲，它只需要 0.05秒 在您的页面加载后，访问者可以形成意见。 更具体地说，转换为50毫秒。 出乎意料的短，对吧？
好吧，其中一些人会离开。 但其他人可能会选择留下来。
然后是印象阶段，基本上 持续时间仅为10秒。 如果您的网站无法管理稳定的网站，那么在转化过程开始之前，您的网站流量就会大量减少。 他们只是继续按下后面或关闭按钮。
如果你有任何恢复它们的希望，这是一个很难的事实。 88％的人 在糟糕的经历之后，不太可能回到网站。
但是，等一下。 一旦他们登陆网站，他们的工作是保留网络流量的？
好吧，当然，责怪该网站的内容管理员是很自然的。 你可能是对的。 但只是部分原因。
事实证明，这一切都始于网页设计师。 事实上，一项广泛调查了广泛的消费者反馈的研究证实了这一点 94％的负面因素 与设计有关。
这是什么意思？
对于初学者来说，没有逃避这一点。 主要责任在于你。 除了实现我们过去作品中涵盖的所有设计最佳实践外，您还必须佩戴公关帽，并考虑有效连接流量的元素。
我在谈论像web动画这样的东西。
为什么我们特别建议？
嗯，这是我即将透露的内容。 本指南将引导您完成Web动画的所有关键方面。 但首先，我们来探索基础......
Web动画的基础知识
想象你最喜欢的卡通人物在屏幕上漫步。 或者，当您重启设备时，手机的徽标可能会在屏幕上跳动。 他们有什么共同点？
嗯，它们都是动画的基本例子。
动画基本上发生在静止元素被“带入生命”时。 然后它开始展示某种形式的运动。
我们不确切知道这种做法何时开始。 但是，我们确实有一个想法 第一部动画电影 历史是在一个世纪前制造的。 由于技术的进步，这一趋势在此后得到了广泛的发展。
然而，有一点是不变的 - 动画原理。 事实上，迪士尼的奥利·约翰斯顿和弗兰克·托马斯后来在他们的书中写到了“生命的幻觉：迪士尼动画“。 这是完整的清单：
- 上诉
- 实心绘图
- 夸张
- 定时
- 副作用
- 弧
- 缓慢而缓慢
- 跟进和重叠行动
- 直线行动和摆姿势
- 分期
- 预期
- 南瓜和拉伸
这十二个仍然为今天的动画设计提供框架，包括在网络上发布的视频，WebGL，SVG，CSS和GIF。
现在，网页动画可以像将鼠标悬停在字母上时显示的高亮显示一样简单，也可以显示复杂的多层全屏视频系列。 换句话说，你可以采取一种微妙的方法，或选择全力以赴的主流动画，以引起注意。 这一切都取决于具体情况。
这就引出了一个问题 - 你什么时候应该使用动画？
你什么时候应该使用网络动画？
当然，他们很可爱。 它们肯定会成为您网站布局的有趣补充。
但是，你知道吗？ 他们随后的疗效水平完全不同。 因此，不言而喻，动画并不适合所有网站项目。 最重要的是，随意采用它们是一个坏主意。
正好 46％的在线消费者 根据整体视觉吸引力和美学判断网站的可信度。 你根本无法承受设计不佳的动画框架。 与此同时，由于未能利用动画而不断错失黄金转换机会将是不幸的。
那么，你何时应该利用它们？
嗯，这就是事情。 当您需要通过吸引注意力或帮助用户进行导航过程来提高可用性时，Web动画主要是理想的选择。
怎么样做？
一般来说，它需要 2.6秒 让访客的眼睛登陆网站部分主要影响他们的第一印象。 但是，巧妙地使用动画可以立即将注意力吸引到网站的最关键区域，从而加快速度。
当您试图引导用户浏览转化渠道时，动画也会派上用场。 例如，弹出的动画表单将是构建邮件列表的深思熟虑的策略。 然后，在购买过程中，您可以考虑嵌入视频。 他们已被证明可以说服他们 73％的买家 继续购买产品或服务。
最后，您可以纯粹为了审美目的使用网络动画。 平滑无缝的装饰动画可以非常显着地改善整体视觉吸引力，从而在用户和界面之间建立情感联系。 这就是你如何逐步提高用户参与度。
网络动画工具
准备开始创建网络动画了吗？ 完善！ 但是，你应该从哪里开始？
那么，如何寻找一个强大的工具来将您的想法转换为实际的动画？ 值得庆幸的是，网络上有各种各样的简洁选项，这些选项针对不同的用户和不同类型的动画进行了优化。 您为项目选择的内容取决于您的技能，主要目标，预算以及您正在处理的网站类型。
也就是说，这里有一些突出的例子，每个都有自己独特的用例：
- js
- 3D使用Three.js排列动画
- js
- 飞天法宝
- 彩色动画
- jqClouds
- Scrollissimo
- CEL-动画
- js
- js
- CSS3动画
- 变换时
- js
- Rellax
- AOS
- js
- ScrollTrigger
- Scrollanim
- js
- js
- js
- js
- Foxholder
- Animatelo
- CSS
- Animista
- js
- CAAT
- AnimateMate
- js
- Stylie
- GFX
- js
- js
- js
- jQuery DrawSVG
- 冲压发动机
- 冲击力
- MixItUp
- CSS
- CSS
- js
- 塞瑟
- CSSynth
- 藏红花
- CSShake
- CSS
- js
- 火箭
- 过境
- CSS
- js
- Popmotion
- GSS由GreenSock提供
- js
- js
- CSS Animate
- 现在是星期二
- 腥
- js
- js
- js
- js
- js
- 等待！ 活跃
- 运动UI
- js
- 懒线画家
- js
- js
- js
- AnijS
- js
- 魔法动画
- CSS
设计Web动画
悬停效果
悬停动画无疑是网上最简单的动画。 当指针移过它们时，它们会生动并突出显示所选元素。 动画本身可以以各种形式出现 - 例如大小变化或颜色变化。
这里的诀窍是谨慎地采用这些效果。 否则，您可能会突出显示太多元素，这可能会使用户感到困惑。
建议在整个网站中保持某种形式的方法。 例如，如果您的主页按钮从绿色变为红色，请使用相同的框架在其他网页中添加其他高亮显示。
背景动画
嵌入背景动画是一种有效的策略，可以为您的网页增添兴奋和活力，而不必干扰主要重点。 您可以使用从视频到顺序移动的细微图像的任何内容。
这里最好的方法是保持结构简单。 如果您选择整合视频，请相应地缩短视频并保持与您的网站相关的循环。 然后确保运动足够微妙以吸引注意力而不会压倒用户。
GIF风格的动画
如果你对一部非常容易设置的动画特别感兴趣，那么GIF是值得考虑的。 一个典型的可能就像移动文本或内容布局中嵌入的微笑小丑。
您需要做的就是提出一个坚实的想法，获取相关的视频或图像，然后使用合适的编辑软件将其转换为完美的GIF。 以GIF格式上传结果创建会生成类似视频的动画，其加载速度与小图像一样快。
过渡动画
当用户从站点的一个部分移动到另一个部分时，过渡动画用于引入活力。 它们类似于从一张幻灯片移动到下一张幻灯片时显示的幻灯片动画。
图片学分： 存在Shutterstock
为了获得完美的结果，请确保整个网站的动画流畅和一致。 它们也应该足够短，不要拖延实际的过渡过程。
加载动画
事实是 - 47％的在线消费者 希望您的网页加载至少2秒。 如果您未能实现此目标，则每增加一秒，转换为7％转换。
走了 当前平均加载时间为22秒很明显，满足2第二期望是相当困难的。 但是，当其他网站元素继续加载时，您可以通过让他们忙于动画来挽救大量的流量。
专注于创建简单的轻量级，几乎立即加载流量重定向到您的网站。 它们应该旨在系统地向访问者介绍品牌和整体网站主题。
滚动触发动画
眼动追踪研究已经确定了网站用户的花费 57％的时间超过了折叠。 但是，事实证明，只要您提供有利的设计结构和机制，他们中的许多人都愿意向下滚动。
而这恰恰是滚动触发动画的用武之地。它们立即开始动作，用户开始滚动以创建平滑，无休止的页面的错觉。 这是消除转换的一种深思熟虑的方法，否则会阻止滚动。
导航和菜单动画
说实话。 菜单选项占用相当大的屏幕空间，特别是在具有多个级别选择的整体动态网站上。 幸运的是，您可以利用动画来隐藏选项，然后仅在用户点击或悬停在相应按钮上时显示它们。
这种类型的动画还通过将整个结构压缩为可视连接的菜单选项来简化和简化导航过程。 该框架应设计有子菜单段，只要用户点击或指向重叠的菜单选项，系统就会弹出。
图库和幻灯片
也许不足为奇的是 人的平均注意力范围 是8秒 - 至少根据微软最近的一项研究。 即使是金鱼也能够比典型的个人更长时间保持注意力。 因此，您可以打赌，您网站的大多数访问者都不会足够坚持点击您的所有图库项目。
但猜猜怎么了？ 您可以巧妙地利用图库和幻灯片动画来自动展示大量图像，而无需强制用户浏览它们。
这里最重要的是图像显示时间。 具有快速过渡的短显示会感到匆忙，而具有缓慢过渡的长显示将变得枯燥乏味。 考虑到这一点，设计整体布局以显示每个图像大约5到8秒，然后迅速转换到下一个。
总结
总而言之，您应该根据他们随后改善用户体验的程度来分析动画。 一个伟大的应该触发用户的情感联系或简化导航过程。 另一方面，完美的一个应该能够舒适地同时获得两者。
为实现这一目标，请在设计和嵌入动画时，花时间批判性地评估所有相关参数。 请记住 - 保持简洁，轻盈，与您的品牌保持一致。
标题图片由...提供 阿尔弗雷达维拉| vaneltia
