动画 ,像其他任何方面的网络, 必须是设计。 作为web开发人员,我们考虑排版的影响,布局,交互,并改变视窗,但当将动画我们有另一个需要考虑的因素:时间。

不仅仅是一个额外的方面考虑,要么:它增加了复杂性的上述参数指数。 而不是看这是一个沉重的大众的想法,我们可以烤动画的核心用户体验过程 创建令人眼花缭乱的、激动人心的和迷人的工作 推动边界和集体提升网络的媒介。

“形式”和功能

形式 是最重要的一个网站上的UI元素。 联系方式是通往你的公司,最清晰的方式来捕捉领先一代,因此,收入。 你越努力让表单的用户体验,你将失去的更多的钱。 如果你不考虑这个组件的可用性,你公司和用户,一个不公正的提交按钮 是最强大的一种形式的一部分。 我们通常解决这个问题通过强烈的色彩来吸引注意力。 但当提交按钮被激活时,会发生什么? 用户必须等待,不知道如果表单工作,还是他们提供即时反馈? 一个简单的提交按钮,即使有推动动画,有时不能实现这一目标,而一个按钮加载器可以让观众而在后台加载数据。 这有助于与期待动画的一部分,但当表单输入实际上是提交的时候会发生什么? 你应该旨在给客户反馈 当这一过程完成。 成功的页面是很好,但是 平稳过渡 成时在视图可以给他们更好的视觉反应,产生小但令人愉快的结果。

因为形式的重要性,每个人都需要能够访问它,包括屏幕阅读器。 在这种情况下,我们应该使用CSS或SVG;如果我们使用

形成与animation-assisted用户体验。 你按下这个按钮看动画。

这些方面我们认为是放在一起的,一个动画:

你想传达什么信息,不能单独完成了UI设计吗?

用户需要了解什么信息,他们会吗?

什么是最微妙的影响(在这种情况下,推的按钮)?

什么感觉你是想唤起(预期按钮加载的同时,积极的反馈表单时成功,等等)?

的部分是UI屏幕阅读器可以吗?

什么一个字符

首先要意识到当你设计的动画 一切都是字符 。 起初这似乎违反直觉,但有几件事需要考虑。 可用性专家知道创建一个无缝设计系统的关键是能够同情用户:

这些信息的最快办法是什么?

什么会使我感到轻松吗?

最引人注目的元素是什么我可以直接关注的地方吗?

我们明白,我们邀请人们到他们不熟悉,情况由HTML元素而不是砖块和砂浆,但创建的外观都是一样的。 A / B测试表明 观众的注意力可以漫步在几分之一秒 。 设计人员和开发人员需要创建经验,尽可能引人注目而不会导致在这些间隙紧张的时刻。

动画帮助在这种情况下如何? 通过 观众的注意力 。 动画创建一个字符的接口。 观察这条付款说明无效的用户数据,例如(从这一点 真的写得好的文章 ):

它不仅让你理解有错误,它没有大红色警告,这可能导致用户焦虑。 信用卡付款已经一个忧心忡忡的过程…为什么这样让他们更吗?

相比之下,这个输入形式成为一个人物,我们更倾向于同情,参与,可以命令我们的注意力比一个简单的静态框。

像演员、 设计师必须知道一个角色 。 演员不只是知道他们的线路是:他们知道什么时候他们的个性在早晨起床,他们最喜欢的口味的冰淇淋。 他们可能永远不会使用这些信息的性能,但他们有一个完整意义上的角色是什么,这样他们就可以应对任何情况下,提出了一种可信,整体的肖像。 做得很好时,我们完全认同这种表示方法,和性能的技巧就消失了。 这正是品牌努力完成。

谷歌的材料设计的影响,在我看来,不在于设计语言本身,和更多的,这是第一个主要行业的公司合并的例子 动画指导方针 在其品牌。 第一次,人们开始思考 风格的动画 作为一个功能的实体,一个声音,一个必须设计与一切凝聚力。

如果我们公司是一个可信的,斯多葛派的保险公司,我们网站上任何动画的角色将会是更少的更正式,我们会倾向于使用线性放松而不是反弹或弹性运动。 但更舒适和友好的品牌,像Zendesk或MailChimp,形式应遵循相应的品牌和更生动的动画,同时还有效地沟通,魅力的东西 Chris Gannon的加载器 似乎简单,但令人兴奋。

如果你回想一下你第一次哭了,因为一个虚构的人物,这是可能的动画。 Aarron沃尔特斯的 “情感设计” ,他讨论了情感与边缘系统:我们更容易记住的东西成为我们的情绪记忆的一部分。 第七章他的书进入硬数据的多少投资回报(ROI)可以获得通过专注于用户的情感体验的影响。

如果你有一个静态内容,看起来像一个Photoshop模型在一个网页,观众参与停止你的CSS。 动画允许我们显示,而不是告诉一个至关重要的策略考虑 用户通常只扫描正文内容 。 它允许客户附着于我们的ui就我个人而言,他们需要在他们面前展开。 如果做得正确,积极参与的潜力是惊人的。

最近谈论的有很多 认为用户体验 。 有时你不能绕过的时间加载的东西(虽然你应该尽你最大的努力)。 如果你给你的用户在此期间无关,你可能会失去他们。 动画特殊酱料的是,它可以将用户从一个界面移动到另一个,和娱乐,他们等待。 秒,以前觉得艰难,让他们移动到Facebook现在和感觉无缝。 这可能是最重要的一个理由在用户体验使用动画。

提升这

动画必须学会靠自己的作为 实质性的开发过程的一部分 。 我们可以通过几种方式实现此目的:

动画必须设计就像页面的其余部分是:实物模型,调色板,故事板线框图,自己的作文。

你的设计过程应遵循相同的逻辑结构代码。

动画必须走向信息化,呼吁理性行为和指导用户的注意力。

动画应该遵循品牌指南,生活风格指南的一部分,吸引用户的情感。

我们不应该重新发明轮子。 动画web之外的存在。 (是的,你可以去看玩具总动员“研究”的目的。)

因为动画是如此迷人,很容易做的过分了,但是并不是所有在屏幕上需要动画。 你不发动战争的秘密武器。 动画可以 一种表示结束或者开始的 ,以及指挥你的注意力。 动画,是有目的的和计划根据观众参与,绩效预算,和品牌,我们可以提高媒介。 瓦尔讨论这很显然当她写到 看不见的动画。 好的动画看起来不应该的,也不会是一个事后的想法。

看看奥列格Solomka 泡沫布局演示 (很高兴的声音):动画的足以让你从事你导航,但失去你的方式在你阅读的内容。 请记住,这些教程的目的是展示一个特定的方法;在野生环境中,实现甚至可以缓和了稍微适应一个专业,但引人入胜的效果。

时间就是金钱

动画通常被认为是一个事后的想法在企业发展的过程。 我们做模型,通过他们,培养他们,在最后添加一个动画。 正因为如此,动画组件可以经常看起来像他们:奶油绒毛。 只有当动画融入到布局的实质,故事板,开发过程,它所包含的意义作为一个高性能和大量的web体验。

工作室就像 活动理论 早些时候与这次谈话侥幸与他们的客户在设计过程中,因为自己的品牌。 “我们让大汉大胆的事情。 “客户寻求积极理论的工作知道他们支付一个大片,一类的网络体验。 这不会是98%的时间。

我们如何改变这个? 再一次,我们通常做的方式。 在推销员的术语,意思是“提高ROI。 “开发人员来说这意味着提升产品的东西有用,增加接触,或有一个 积极的经历 ,然后就不会浪费时间和金钱。 为更多的信息关于如何与客户有效沟通,咨询迈克蒙泰罗的 “你是我最喜欢的客户端” 或 “设计是一个工作” 。

我们兴高采烈地跳过到日落之前,让一切在页面上移动,我们需要提交一些行动项目做一个有效的改变。

第一个是 有效地与客户进行沟通 。 这并不意味着铁路建设成坚持我们的信念。 这意味着解释可能的收益,我们将保证他们 A / B测试 我们的接口和产生可衡量的结果,路上碰到他们津贴。

考虑我们在前面的形式。 显示你的客户两种形式的原型(你可以告诉他们别人的工作作为一个例子,如果你没有时间来构建;CodePen伟大 设计模式 资源)。 一种形式将本身没有反馈按钮,进步,或时髦的成功体验;另一个将把所有的我们在这里学到的教训。 或者更好的是,使用A / B测试(与不同的变体)可用性测试来证明形式与动画是一种更有效的工具。 坚实的数字总是更好的 非主观看法,可以形成趋势,无知,由于执行不力或过去不好的经历。

一旦我们得到批准,我们可以计划。 你现在在新绩效预算津贴类别:

时间

经验

绩效预算

颜色

作文

用户的时间

这看起来可能过于复杂,但你应该能够给自己基本近似数秒内每一个,他们应该考虑在你继续前进。 你缺乏经验吗? 然后你需要多一点时间,因为大部分的事情。 你现在有很多的页面上的其他重资产? 你需要非常小心加载图片,svg脚本和动画库。 你的网站已经有了非常丰富的调色板吗? 你需要那些颜色变量重用。 老版本浏览器是一个考虑吗? 然后你可能会不得不使用图书馆GreenSock ,一个更深层次的跨浏览器的向后兼容性 甚至比本土动画渲染 在svg,同时提供polyfills和回退 矢量图形。

好东西

现在我担心你的项目光滑曲线,我们可以得到有趣的东西。 每个人都有不同的工作方式,没有什么是福音,但这里有几个要点,我已经在这工作一段时间后发现的。

注意的东西如何动作。 这可能会使你笑,它是如此简单。 但是你多久真的看水倒入玻璃吗? 是什么使一个人的步态识别的?

大多数人从一个球开始反弹,这是一个很好的锻炼,部分原因是简单可以带你性格,重量和活力。 这里有两个球弹跳:你能猜出这是硬,软吗?

弹力球演示。

你怎么知道哪个是哪个? 首先是 弹性的对象 。 一种保持一致,另一种是基于影响操纵。 还有什么? 有运动:一个看起来相当严格,和其他更有趣的。 尽管他们有相同的时间,他们的身体运动意味着不同的群众。 宽松函数传递对象的密度。

还请注意,即使他们有相同的 时机 ,宽松函数中使用,它们有不同的关键帧。 如果我把一个闪光灯在这些球,你会看到他们在不同的地方在同一时期。 在旧手绘动画这一概念有一个术语:间距。

弹力球演示。

这也可以进来的形式的运动辅助元素。 如果有人摇玻璃,里面的水是如何影响? 当有人踢一块岩石,岩石表达的力量如何影响? 这里有一个 基本运动设计的很好的例子 。

汉斯。巴彻讨论的 梦想的世界 ,当动画师在“美女与野兽”他们飞往伦敦和法国 观察这些地方的风格 。 你可能没有这种预算(但是如果你这样做了,带我一起去吧!),幸运的是,互联网有很多视觉、历史和空间信息为你。

跟随你的利益。 如果你有任何余地在动画的内容,使用你的优势。 真正的兴趣和热情很容易传达。 你更有可能遵守一个项目如果内容让你感到兴奋。

向前向后移动

在动画开始之前,你 必须 故事板。 故事板 是一个非常重要的过程的一部分,因为它允许你在代码,模块化的工作场景。 它允许您计划好时机。 ,它允许您工作向后: 画的东西,然后慢慢揭开它。

一个常见的误解是,你的故事板必须看起来像抛光漫画。 我经常认为这是为什么人们不想让他们:他们害怕画,他们害怕他们的工作看起来很完美,他们害怕花费他们所有的创造力在规划过程中,他们只是想在这个项目开始工作。 我完全理解这一点。 为了避免所有的,我鼓励你忘记故事板的柏拉图式的理想。

我是一个科学插画家 菲尔德自然历史博物馆 和斯坦福大学。 我是一个绘画教授大学。 我可以画吗? 那还用说。 这里有我的故事板是什么样子:

Storyboard sketch

故事板草图。 ( 查看大版本 )

我感到羞愧吗? 一点也不。 故事板带我45秒,让我和编辑预先了解我要花费很多天。 没有它,我的工作流程将会翻倍。 幕后故事板存在,个人通信。 我不是说你不能创建美丽的独立工作 瑞秋Nabors ,只是你不需要。

让我们重新审视我们的讨论 用户同理心 。 你可以完成这个故事从头到尾所有用户的交互,。 考虑 这篇文章中,“故事地图” 。 一个故事地图带你通过访问您的站点的整个经验和成为一个客户从头到尾。 与肌肉,这是一个故事板,你看他们访问的全貌,因此可以根据期望的方向,有目的的决策结果。

它可能不是新的听到故事板在动画:小漫画,让动画师们可以逐个场景分解任务。 但你知道也有颜色的脚本 吗? 就像你为你的网站设计的颜色和整体品牌,迪士尼动画师和其他动画公司创建脚本工作与颜色的主要人物和通知现场。 你也应该这样做。

这意味着你应该花一些时间 Adobe Kuler 制作 颜色的色板 。 需要少量的时间,但却能桶在你工作。 我们都知道颜色是有意义的。 使用它是由这么多容易与预处理器变量:CSS使用它们你的优势。

上面的动画中使用了两个不同的颜色调色板:一个用于“之前”的场景,一个“后”。 调色板是相关:他们必须创建无缝的事件。 就像一个大公司的动画控制面板必须符合公司的品牌和网站的其余部分。 但第一场景的冷色调与第二通知观众的温暖的色调。 他们是故事的一部分。 如果他们没有计划之前,我开始画画,动画不会有任何意义。

设计和代码的工作流

很明显,故事板回报在动画的设计和规划阶段,但它可以很容易地获得奖励在您的代码体系结构中,。 如果代码反映了相同的逻辑组织你使用你的设计,你获得的所有好处清晰,清晰的结构,和更多的反映了设计过程,就越容易实现两者之间的分享。

功能应该被命名为根据现场 你:即使“sceneOne”就可以了。 同样命名变量看起来很漂亮和整洁,但他们会绊倒你和你的团队从长远来看,特别是作为一个动画变得更加复杂。 命名表单元素作为他们扮演的角色,和设置您的代码在一个清晰的方式,反映你的设计意味着更少的担心范围问题,和更具体的JavaScript和Sass变量和任务之间的分歧。 这也是结束时特别有用,当你要回去和调整的东西:你很容易找到你的地方又自个儿明白。

谋杀你的宠儿

这是一个 旧的报价 ,但这是真的。 你永远不会得到正确的事情第一次如此放松,犯一些错误。 不要太珍贵。 无论你是一个设计师,一名开发人员,或两者,你不像你现在好一开始,中间很多丑陋的东西。 没关系。 这意味着尝试不同类型的动画大小,和所有这些搞乱。 你学习仅JavaScript编程的一种交互使用只有一个图书馆吗? 不。 你学会设计只使用一个组合? 我当然不希望这样。 同样的原则也适用于学习动画。

The difference between novice and experienced programmers.

新手和有经验的程序员之间的区别。 ( 查看大版本 )

或许你可以 图形编辑器和文本编辑器同时打开。 你需要它们之间来回移动流畅。 不要害怕追溯你的步骤,添加东西,或编辑。 你需要准备好访问你的工具, 优化 通过它,这样你就可以迅速行动。 进一步把这些东西远离你,懒慢地你将会调整,编辑,和重建图像或代码当你需要他们。 ,你会需要它们。

你将不得不重做时间和宽松的一百倍。 就我个人而言,我发现它容易当我像GreenSock的使用工具 TimelineLite 移动棋子。 它允许您堆栈、交错、重叠时间,甚至是动画场景

CSS是伟大的非常小的UI交互;事实上我真的推荐它的用例,因为你不需要加载其他资源。 然而,如果你有两个以上动画上设置一个对象,你应该考虑GSAP切换。 的 能够稍微向前移动或在最后的动画 火,或设置在同一时间无论如何,太强大的工具来避免,特别是当您需要排练和调整时机。 CSS使你重新计算所有值如果在动画开始变化,但GSAP时间表不。

这不会是这样的一个主要问题,如果时间不那么重要。 你有没有注意到一些漫画帧没有行动? 他们创造的幻想一个停顿,你的大脑将它。 时间是至关重要的喜剧,搞怪,也为动画出现的UI设计无缝或自然。

就像所有的设计,动画看起来简单和轻松的部分有时最难完成的。

天空的极限

生活的幻想 首先从迪斯尼我一直最喜欢的名言之一:“动画可以解释什么人能想到的。 “这报价是如此的地点,因为它真的是动画的优势: 你可以做任何事情发生 。 您可以创建和摧毁世