网页设计如何正确使用动画
使用动画还是不使用动画?当您建设网站时,这始终是一个问题。网页设计中动画的支持者会告诉你,它注入了一种运动感,产生动态和流畅的用户体验。反对者会争辩说动画会分散注意力,对许多观众来说似乎不专业。如何正确使用动画?事实上,动画可以是网站外观和感觉的绝妙补充,但它们必须以正确的方式工作以适应您更广泛的目标。
动画的基础知识
首先,请记住动画有多种形状和形式。它们可以像按钮的轻微运动一样微妙,也可以像完全动画的背景一样壮观。动画可以设置为对访问者行为的交互式反应(例如滚动时显示的对象),也可以完全独立于访问者的行为。它可以应用于小元素,如箭头,或大元素,如占据整个屏幕的视频背景。了解动画的全部功能将帮助您以更具战略性的方式使用它们。
动画三个不同的类别:
微交互:它们用于为用户快速而清晰地进行小交互(如单击按钮)。这可以通过使用悬停框效果来实现。
转换和页面行为:简化从一个点到另一个点的导航以及页面之间的切换。
令人愉悦和装饰性:这给您的布局带来了一些乐趣,例如视差滚动。
适度是一种力量
谈到动画,就像生活中所有美好的事物一样,适度是关键。克制自己不要用过量的动画炸毁屏幕,这绝对是至关重要的。一方面,您不想让您的网站过于繁重并使其性能负担过重。此外,您不希望过多的动作分散访问者的注意力。保持轻松将确保您的访问者享受流畅的浏览体验并关注您网站的流程。
执行一项任务
与动画保持健康关系的另一条极好的准则是仅在您可以用明确的目的证明其合理性时才使用它。换句话说,动画需要执行一项任务,例如:
通过向访问者显示何时滚动和点击位置来引导网站的移动。
通过逐渐揭示项目来支持您的讲故事。
可视化您的产品或服务的影响
用一些动作打破网站的静态滚动。
在特别适合动画内容的网站上营造特殊氛围,例如儿童服装在线商店。
什么时候使用动画(什么不应该!)
一些常见的网站元素与动画效果特别好,而另一些则不然。将你的动画能量集中在前一组:
触发行为的事物(如导航按钮、CTA 或链接图像)
提供方向性的元素(箭头、背景滚动)
加载条
旨在引起注意的元素(新消息图标、灯箱、完成订单按钮)。
在您不想使用动画的情况下,动画效果会以某种方式损害元素的功能。例如,您不应该为文本段落添加动画,因为这会使阅读它们变得更加困难。您也不希望在访问者输入他们自己的内容(如联系表单或评论)的字段中添加动画,因为这会分散他们完成任务的注意力。
内容变得简单
在网页设计中集成动画的一个很好的策略是将其用作澄清或简化内容的工具。假设您想向网站访问者解释您的包装和搬家公司的运作方式。您可以用几个段落来描述整个过程,您可以创建一个带有项目符号的表格,或者您可以通过仅使用一些动画关键步骤的视觉效果来简化它。通过这种形式的动画传达信息称为入职。这是一种设计技术,通常将简单的文本与动画视觉效果相结合,创建一种直观且引人入胜的方法,让您的观众了解您的产品流程。它既美观又实用,是所有设计师的神奇组合。
观众很重要
对目标受众保持警惕和敏感总是很重要的,这在涉及动画时尤其重要。考虑他们的审美偏好、访问您网站的原因,以及他们的技术能力和可用软件。
如果您的目标受众真的很喜欢单色配色方案;或者如果访问者对您的网站感兴趣以寻求法律建议;或者,如果您怀疑他们中的许多人将通过过时操作系统上的旧浏览器版本访问您的网站, 那么您可以假设动画不是您的正确选择。