随着技术和个性的需求不断提升，动态元素在网站设计中几乎无处不在。从完整的视频到微妙的动画，这些元素是激发用户兴趣和参与度的宝贵工具。它可以帮助你跟随趋势、吸引用户注意力或为你的网站提供更具品牌感的体验。
动态主视觉元素几乎是一个明显的趋势，但它的完成方式和成功程度存在很大差异。
今天，我们就来看看这个网站设计趋势以及如何让它可以更好的为你服务。
识别动效主视觉元素设计趋势（Identifying the Animated Hero Elements Design Trend）
这个其实很容易识别：任何在主视觉区域中包含动画元素的设计都很重要。这种动态效果在范围上可大可小，它可以是简单或复杂的，发生一次或循环播放。在线制作动态效果有很多不同的方式。
你可能会看到这种趋势元素的一些地方包括：
· 加载动画
· 动态导航元素
· 视频
· 动画插图
· 文本运动或滚动
· 动画悬停状态
· 在屏幕上增加视觉趣味的元素
· 提供信息的动画（例如滚动通知）
设计趋势的关键特征（Key Characteristics of the Design Trend）
既然动态主视觉元素最明显的特点就是动效，那我们就重点说说好的动效的一些特点吧。
如果你遵循这些规则考虑，你将很快看到仅仅作为装饰的动态效果与作为设计的一部分服务于更大目的的动效之间的区别。这也是这个趋势能够构成良好且持久的网站设计趋势的原因。
趋势主要特征包括：
· 它需要讲述一个故事或帮助用户更好地理解设计。
· 它是可信的或感觉像是有目的的，过多的动态效果会让人头晕目眩，最好的感觉是真实的。
· 它不应该影响设计的其余部分。如果用户只看到动效而忽略了其他内容，那么他们不太可能按照你想要的方式进行行动。
· 它应该帮助用户与设计建立联系并指引用户做一些事情、更深入地探索或提供反馈。
· 它应该让用户感到愉悦，并让他们想要进一步参与设计（点击、滑动或滚动）。
动效的类型（Types of Hero Animations）
作为这种设计趋势的一部分，你可以期望找到和使用哪些类型的动效呢？答案是一切。
最适合你的网站项目的类型完全取决于你可用的内容和资产。动效可以与其他趋势设计元素结合或独立使用。
动效类型可能包括：
· 运动的形状或几何
· 滑块或移动图像面板
· 插图或卡通元素
· 增加微妙动作的漂浮物
· 动态图像或插图（电影）
· 加载元素
· 视频
· 液体元素或斑点
· 悬停运动
· 反弹或方向状态
你可能会从技术的角度来考虑动效。通常你可以使用 HTML5、CSS、JavaScript 和 SVG 这些主流技术来完成。解决方案的类型完全取决于项目和所包含元素的类型。
使用此网页设计趋势的提示（Tips for Using this Web Design Trend）
确保趋势成功的一种主要方法是：有目的地设计和使用它。
这可能比听起来更困难，挑战主要是因为创建出色动效的许多技巧是相互矛盾的。所以这就是你要做的，选择其中一个技巧并使用它，有目的地创造。
· 创建让用户惊喜和愉悦的微妙动画
· 动画可以直接且大胆，让用户无法忽略
· 使用动画来做用户期望的事情
· 将它们用于完整设计，以便网站的每个部分都包含动画元素
· 设计一个特定的动画元素以引起对设计或故事的某一部分的特别关注
3个我们喜欢的例子（3 Examples We Love）
动效有很多种形式，挑选一些最喜欢的确实有点困难。不过，最核心的点在于使用的动效元素应该是柔和的，不会对用户造成太多的困扰。以下是一些我们喜欢的示例。
Days
Days 有很多动作效果，是一个几乎隐藏在时髦设计中的电商类网站。简单的滑动动画既有趣又引人注目，滑块可以显示多个产品并将你的注意力吸引到它们而不妨碍其他内容。
Popcornopolis
这是最有趣的动画，爆米花在首次加载时会“弹出”到设计中。主视觉区域中的一个动画元素可以引起你的注意，然后剩余的一切都非常简单。这是一种非常有效的技术，尤其适用于对内容的展现。
Idear Ideas
此设计中一个动效元素具有两种效果——分别发生和同时发生。随着用户进入网站，这些字母与许多小点一起出现，元素之间仿佛具有磁性而相互吸引，然后字母破裂并以悬停状态进行重组。
总结
动效主视觉元素正在成为设计项目的流行元素。但是，在技术上以及在可行的设计和失败的设计之间存在很多差异。
和众多设计趋势一样，恰到好处和过度之间可能仅仅只是一线之隔，你需要注意把握度，在处理这种设计趋势时，反复测试和关注用户反馈对于确保你的设计尽可能有效非常重要。
----图文来自：design shack