网站建设之使用动画提高网站的用户体验

最初,动画被视为一种美学,但现在它们已成为使用户交互顺畅的非常强大的工具。 然而,基本原理没有改变,由于有了更好的技术,我们有了更好的实施。 创建动画一直被认为是Web设计中最复杂的方面之一。许多设计师(仅作为设计师阅读)正在After Effects中创建动画,然后将其发送给与他们合作的开发公司。毫不奇怪, WP网站建设

最初,动画被视为一种美学,但现在它们已成为使用户交互顺畅的非常强大的工具。

然而,基本原理没有改变,由于有了更好的技术,我们有了更好的实施。

网站建设之使用动画提高网站的用户体验

创建动画一直被认为是Web设计中最复杂的方面之一。许多设计师(仅作为设计师阅读)正在After Effects中创建动画,然后将其发送给与他们合作的开发公司。毫不奇怪,许多人没有晋级。我们稍后再会说明原因。

动画到底是什么?

动画不仅用于卡通。从小型悬停效果到全屏运动图像,到处都可以找到动画的触感。它很时髦,很有趣,而且用户友好。

 

网站建设之使用动画提高网站的用户体验

这个词实际上来自拉丁语“ Anima”,意思是“灵魂”。基本上,这是将生命呼吸到静态人造物体中的尝试,这种现象在数千年前的皮格马利翁(Pygmalion)试图唤醒他的Galatea雕像时就出现了。

当您拥有最初以2D或静态形式制作的东西时,动画实际上就是发生的事情,并且它按照物理定律被赋予生命并以某种方式运动。

这是应用程序图标在加载时像球一样弹跳的方式,或者是卡通人物在屏幕上行走的方式。最重要的事实?如今,动画已根植于网页设计中,实际上是对许多网站元素的重要补充。

动画趋势

在网页设计领域,动画是您每天都会看到的越来越多的东西。关键是要适度,因为小的,简单的动画可能会引人入胜且有趣,而用户甚至根本不会考虑它。

另一方面,大型动画可以用作吸引您进入设计的有趣视觉效果。但是,如果您混合了太多的移动效果,则会导致完全混乱。

动画崛起的一个影响实际上是更多工具的可用性,这些工具将极大地改善UI生产工作流程以及设备和浏览器中的性能。

动画实际上是使用JS和CSS代码制作的,当它们向其中添加移动元素时,它们不会使网站过载。

网站建设之使用动画提高网站的用户体验

而且,更重要的是,这些动画并不是仅仅为了娱乐而已,而是它们实际上改善了用户体验。对于网站设计师来说,这是一个很好的工具,可以帮助他们使网站更好,更易于使用。

使他们变得时髦的是现实主义。当今的设计环境具有许多最小化和扁平化设计,并且用户需要更多提示来告诉他们该怎么做。

一些动画可以指导他们,而不会过多改变外观。动画实际上可以帮助向方案添加顺序和指令,这些指令和方案可能有点过于简单,或者可能无法为用户提供足够的指导。

在这种情况下,动画将在可用性和精简的简单性之间创造一个快乐的媒介。例如,看一下金融科技应用程序。他们需要具有最大的可用性和最少的动画,以便对所有目标受众都适用。他们做的很棒。

为什么在网页设计中使用动画?

像那些横幅广告一样,动画是设计师玩的另一件事吗?还是它们是设计师可以使用的真正必要工具,就像他们使用颜色,网格和流程一样?

动画的主要用途是提高可用性。一个简单的动画实际上可以是一个很好的指导工具,可以帮助人们了解他们应该单击哪个按钮,或者他们应该在网站地图中的下一步。许多设计师会将简单的动画与用户工具配对以单击或滚动。

如果正确使用动画,可以为用户提供有价值的反馈。您以错误的方式填写了几次表格,并且显示了一个消息框,突出显示您的错误并告诉您如何解决这些错误?

网站建设之使用动画提高网站的用户体验

经过深思熟虑的动作可以指导用户并为他们提供背景信息,您甚至有机会给用户一个惊喜,使事情变得更加有趣和引人入胜。

在网页设计中,动画是一种动作,如果您不以纯粹的装饰方式使用它,则实际上非常有用。优秀的UX和UI设计人员通常会使用动画来改善整个工作流程。

显然,动画的第二种用途是美学。动画可以用作很好的装饰。通常,动画的目标是纯粹的视觉效果,并且在一定程度上是可以接受的。

装饰性动画可以帮助在用户和界面之间建立情感联系。动画还可以激发视觉兴趣,并确保您的用户在更长的时间内与您的网站保持互动。

网站建设之使用动画提高网站的用户体验

当创建纯视觉效果的动画时,请考虑该怎么做。考虑一下您希望用户拥有哪种连接。

应该是有趣还是令人惊讶?您是否想放置一些应该共享的独特内容?即使是纯粹视觉的东西也应该有某种目标。

使用动画的另一个原因是传达某种功能。动画可以是一个很好的工具,可以以直观的方式向用户显示特定内容的工作方式。不要因无故过度使用视差滚动效果而犯某些错误。

动画还有助于引导用户。动画不仅是为了动画,还是与转换有关。它们可以帮助您的用户理解该页面,并将他们引导到应单击的特定位置。

您可以使用它们来显示信息。除了提示功能外,还可以使它们成为揭示辅助信息的好工具。

网站建设之使用动画提高网站的用户体验

 

例如,您可以让用户将鼠标悬停在内容上,并显示其他选项。

而且,由于悬停内容的“隐藏”默认状态,您只想将其用作辅助信息,而对于想要浏览您的网站的用户而言,实际上没有什么是至关重要的。另外,请记住,悬停功能不适用于移动设备。

大型动画与小型动画

当涉及到动画时,有两个类别,而且它们很容易理解,您有大大小小的动画。

网站建设之使用动画提高网站的用户体验

 

大型动画可以通过它们具有的比例来识别。它们通常采用带运行时间的视频形式,并且它们占据了屏幕的相当大的一部分,让人想起了一部短片。

您可以将它们用作整个设计中的焦点,并且用户实际上不必执行任何操作即可查看运动中的动画。

它们在当今很常见,视频背景就是一个很好的例子。如果动作很大,则也可以将其视为大型动画,例如整页的下拉菜单。

这些动画是您进入页面时首先看到的东西,因此,很难错过。

相反,只有在开始与网站进行交互时,您才会发现小型动画。它们可能是悬停状态,或者是可用性指南或工具。

它们更像是强调整体美感的口音,而不是设计的重点。它们不像大的那样明显,它们为设计提供了更多的支持作用。

示例包括简单的淡入淡出或尺寸略有变化。您可以将它们视为您不会注意到的动画对象,它们在添加总体体验的同时非常自然。

设计出色的动画

组合动画时,应考虑一些方面。

  • 您想传达什么,但是您不能仅使用UI来传达?
  • 用户需要了解什么?
  • 绝对最微妙的效果是什么?
  • 您想唤起什么感觉?
  • 屏幕阅读器可以访问UI片段吗?

从小开始

当您将动画更多地视为设计工具而不是样式选择时,最好是从小做起。

网站建设之使用动画提高网站的用户体验

 

小型,流畅的动画将表现更好,大型,华丽的动画必须绝对有目的,而且不仅美观。

您将意识到的另一件事是,一切都是角色。当然,乍看之下这似乎并不直观,但请考虑一些事项。网站无缝设计的关键是网站具有同情用户的能力。

  • 是什么让您感到放心?
  • 获取信息的最快方法是什么?
  • 哪个元素最引人注目,您可以直接注意它吗?

动画应该或应该快速发生

我们如何与真实物体互动?有时我们走得更慢,有时走得更快。速度可能取决于大小,任务或我们是否正在处理不希望溢出的充满液体的物体。

通常,我们可以很快地拾取和移动物体,甚至单个动作甚至可能在几毫秒内发生。

这是我们要用于用户界面动画的相同度量。如果时间更长,人们将对您的产品或他们的机器或两者失去耐心。

如果应重复使用该产品,则尤其如此,因为即使动画既有趣又有趣,但如果有人必须多次查看它,它就会失去吸引力。

偶尔让东西弹跳

物理物体会反弹。有些不擅长此事,但是如果没有太大的空气阻力,如果在坚硬的表面上跌落足够远,任何东西都会反弹。

网站建设之使用动画提高网站的用户体验

与UI元素进行交互就像与小的硬对象进行交互一样。当您将它扔到一侧时,它会弹起一点。如果将其放下,它会弹起一点。

因此,使动画反弹,尤其是在垂直移动的情况下,可能会有所帮助。保持幻觉至关重要。

您需要教动画自己生活,这是开发过程的很大一部分,这可以通过以下两种方法来实现:

  • 动画应该朝着提供实际信息的方向发展,引导用户的注意力并吸引理性的行动。
  • 动画的设计应采用与页面其余部分相同的方式进行设计– 调色板,情节提要和构图,所有内容都应匹配。
  • 动画需要遵循品牌指导,吸引用户的情感,并成为生活风格指南的一部分。

 运动中的事物需要一点时间才能停止。而且,如果您将静止的对象置于运动状态,则将花费一些时间来加速运动。是的,物理学!

因此,当您使事物移动时,请确保它们有一点时间(当然,以毫秒为单位),以使它们放慢速度或加快速度。这被称为“缓动”,您实际上会发现它内置在CSS中的功能。

摘要

动画很重要,好的动画无疑会使用户的体验好得多。例如,这可以是情感联系的形式,也可以只是使站点更易于使用。

这是一种设计技术,不会很快就走到任何地方,因为它即使在最繁琐的任务中也能吸引用户,增加了设计的生命力,并使您真正脱颖而出。

如果要使情感从可用的网站跃升为理想的网站,动画是核心组成部分。

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/10722

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买