全国免费咨询热线:400-611-9921
 
网页设计中的动画简介

2018-02-27

1186

动画不再仅仅是漫画。从全屏移动图像到小型悬停效果,动画的触感随处可见。动画是时尚,有趣和用户友好的。 而使用动画的障碍已经开始下降。随着大多数用户进行高速连接以及创建简单动作或傻瓜gif到几分钟动作等任何操作,动画已成为实用且有用的网页设计工具。
动画不再仅仅是漫画。从全屏移动图像到小型悬停效果,动画的触感随处可见。动画是时尚,有趣和用户友好的。

而使用动画的障碍已经开始下降。随着大多数用户进行高速连接以及创建简单动作或傻瓜gif到几分钟动作等任何操作,动画已成为实用且有用的网页设计工具。

动画基础

当以静止或二维形式创建的东西被“带入生活”并且似乎以遵循物理定律的方式移动时,动画就会发生。这是一个漫画人物在屏幕上漫步的方式,或者是一个应用程序图标在加载到Mac桌面时如何像球弹跳一样。

其中一个几乎与动画同义的词是迪斯尼。在二十世纪八十年代早期,两家公司的高级动画师写了一本详细描述动画原理的书。弗兰克托马斯和奥利约翰斯顿的“ 幻觉生活:迪士尼动画 ”仍然为今天的动画提供了框架。

挤压和伸展
预期
分期
直行动和姿势构成
遵循并重叠操作
慢进和慢进

次要行动
定时
夸张
纯色绘图
上诉


网页动画通常保存为GIF,CSS,SVG,WebGL或视频。它们可以是任何内容,包括将鼠标悬停在单词上时出现的简单下划线到全屏视频或背景图像。与其他任何设计技术一样,动画可能很微妙,或者它们可能在你的脸上,很难避免。



2017年新兴趋势

网页设计中的动画是我们每天都会看到更多的东西。动画作为设计趋势的关键是适度。小而简单的动画引人入胜且有趣; 用户可能甚至不会考虑他们是否是动画。大型动画可能是一种有趣的视觉效果,可将您引入设计中。但是如果你开始混合太多不同的移动效果,它可能会导致完全混乱。

什么让动画时髦是现实主义。在今天的设计风格中,有这么多平面和最小风格的设计,用户需要更多线索来告诉他们该做什么。动画的简单部分可以引导用户而不改变审美。它有助于添加指令和命令,设计可能过于简单的方案,以便为用户提供足够的方向。在这个例子中,动画创建了简洁和易用性之间的愉快媒介。

这一趋势的另一个促成因素是在设计的后端和用户端使用工具。您不再需要Flash来制作更复杂的动画。(如果你还在Flash中建设,现在该停下来了。)它可以通过许多其他方式来完成。今天的动画不会让网站或网络服务器停滞不前,使用户能够快速加载效果,并且高速互联网访问动画不会在活动周期的中途停顿。


大型与小型动画

当谈到网页的动画时,它可以分为两大类:大和小。(你大概可以猜到它们的外观。)

大型动画是对他们有一定规模的动画。通常以运行时间的视频的形式,大型动画填充屏幕的重要部分并且是短片的特征。这些动画是整体设计的焦点。用户通常不必执行任何操作即可看到运动中的动画。如果您仔细观看Studio Meta网站,每个大图像在阅读副本时都会放大。

小动画是您在开始与网站互动时发现的小小片段。这些divots可能是悬停状态,微小的装饰或可用性指南或工具。小动画是有助于整体美学的重音,但不太可能成为设计的重点。在亨利布朗的网站中,简单的动画是如果仔细观察,图中的眼睛实际上就会闪烁。

何时使用动画

每个趋势的问题,包括这一个,都知道何时使用它。动画对于您的设计工具包来说可能是一个很好的小窍门,但并不适用于每个项目。动画应该平滑无缝,而不是跳动或机械。它需要为用户服务,而不是妨碍内容的发展。

使用动画的主要原因是增加可用性。简单的动画可以成为很好的指导工具,以帮助人们了解在网站地图上点击哪些按钮或下一步去哪里。许多使用复杂滚动效果的设计师将简单的动画与用户工具配对,以便进行滚动或点击。(这包括一个简单的弹跳图标或弹出说“向下滚动”的单词的所有内容。)

可用性有几种形式:

通讯功能或如何使用网站
显示更改,例如正确填写表单或突出显示元素可点击
创建流程或将用户引导至号召性用语
使用动画的第二个原因是美学。动画可以是一个很好的“装饰”。有时动画元素的目标是纯粹的视觉效果,这是一个可以接受的用途。这种装饰动画可以帮助讲述故事或在界面和用户之间建立情感联系。动画的目的可以是引发视觉兴趣,并让用户长时间与您的网站互动。

创建纯视觉动画时,应考虑它应该做什么。想想你想让用户拥有的连接。它应该是有趣还是令人惊讶?是否有一些独特的内容是专为共享而设计的?即使是纯粹的视觉也应该有一个目标。

资源


准备开始动画?以下是一些用于进一步阅读的资源和帮助您开始使用的工具。

在生活视频幻觉显示的方式,很容易理解各的12个原则。
” 工作中的网络动画 ”从列表除了是什么使动画的创作有很大的资源。
“ 初学者对CSS动画的介绍 ”向您展示了如何使用CSS属性将正方形变成圆形。
弹性动画SVG元素是关于如何整合和动画SVG组件的教程。
该UI动画演示的艺术由马克·盖尔使用动画来解释概念。
如果您已经理解了基本知识,“ 15个创建高级动画的顶级HTML5工具 ”是一个很好的下一步和工具列表。
动画师的生存工具包教导适用于所有形式的动画的基本原则。


结论

在动画方面,经验法则是:良好的动画会让用户的体验更好。这可以通过情感联系的形式 - 例如有趣的积极体验 - 或者通过使网站更易于使用。

动画是一种有趣的技术,对于各种应用程序来说,它变得更加标准。如果您正在寻找灵感,请务必回过头来阅读本文,然后点击整个视觉示例的链接,访问网站并使用其中的动画功能进行播放。玩的开心!


本文来自广州品牌网站建设网站设计制作公司-纵天科技

标签:公司网站制作,广州建设网站,官网建设,网页制作公司,建网站公司,企业建站,广州网站建设公司,广州网页设计公司广州网站设计公司,广州企业网站建设

热门标签
营销型网站建设柏洪集团网站集团网站建设新元素网站教育网站德胜教育集团德国商会网站建设德国商会品牌网站建设福美控股赛立信网站建设智能家居网站运动网站建设贸易网站建设玩具网站建设化工网站建设日化网站建设家电网站建设音响网站建设物流网站建设旅游网站建设网站建酒店网站建母婴网站建设珠宝网站建设钟表网站建设培训网站建设教育网站建设建材网站建设装饰网站建设机械网站建设美妆网站建设展览网站建设皮具网站建设五金网站建设仪器网站建设照明网站建设水电网站建设咨询网站建设法律网站建设家具网站建设家居网站建设服装网站建设服务网站建设食品网站建设金融网站建设餐饮网站建设环保网站建设政府网站建设科技网站建设地产网站建设医药网站建设数码网站建设营销型网站广州网站制作广州网站建设公司建网站广州网站设计公司建站优必思官网英文版网站定制网站广州网站建设中服装网站设计服装网站制作防火板网站大数据网站科技网站制作三盟科技物联网网站人工智能网站防火板网站制作家居网站制作枕头网站电器网站制作电器网站家具网站家居网站斯帝罗兰网站建设公司​手机网站建设响应式网站企业官方网站网站策划官网改版企业网站建设网站制作网站设计建站公司网站建设公司企业网站网站建设费用网站建设广州企业网站建设企业建站官网建设公司网站制作拉链官网广州建站广州网站建设纵天科技
立即致电纵天品牌顾问:
400-611-9921
联系我们:

地址1:广州市天河区珠江新城邦华环球广场16F

地址2:杭州市滨江区滨安路1190号智汇中心B308

业务 QQ: 3561401262

E-mail: sales@zomsky.com

电话咨询 在线咨询 QQ咨询 官方微信
官方微信
TOP

立即与纵天项目顾问通话

400-611-9921

您也可以咨询我们的在线客服或预约资深顾问

信息保护中,请放心填写
关闭