我们来讨论一下如何给我们设计的作品添加动画，使其和我们品牌标志的某些层面的内容，如字体、颜色、布局以及其它各种东西保持一致。
动画是非常有趣的。给我们的设计添加动画可以使其变得有生命，同时也让我们的设计脱颖而出。动画可以是展示设计是如何组合的一起的。它们可以提供上下文帮助大家理解我们的产品。
动画往往是我们放在最后的策略。我们在一个模态窗口或滑动菜单上放一个过渡，但是我们通常都不会考虑这个动画是否符合我们整体的设计。
样式指南 样式指南是指 提供便于大家提高沟通的样式 的文档。它覆盖了各种关于排版和写符合规范的样式，以及其它各种更广泛的内容。它可能是一个静态视觉文档，展示了各种风格的ui，如下面展示的codecademy.com的设计。
来自“ reimagining codecademy.com ” by @mslima 的ui工具包
它可能是代码实例的一个技术参考。codepen的新 设计模式和样式指南 提供了非常棒的参考，展示了整个网站的使用所有组件的代码。
codepen的设计模式和样式指南
一份样式指南可以为你的项目提供宽阔的视野，它使得我们在添加新内容时可以保持一致性，我们还可以使用我们的样式指南来呈现动画。
有生命力的文档 样式指南不需要一定是静态的。我们可以使用它们来展示移动。我们可以分享css关键帧动画、过渡动画，然后放到产品中。我们还可以解释为什么动画放在第一位。
正如样式指南解释了我们为什么选择了某种字体或布局，我们可以使用样式指南来解释动画背后的寓意。当有其他人需要创建一个新的组件，他们就会知道为什么要应用动画。
如果你还没有设置过样式指南，你可能需要看一下 pattern lab 。这是一个非常棒的设置你自己的样式指南的工具，包括大量的设计模式来帮助你开始。
有很多样式指南文章，来自非常棒的、开源的 website style guide resources 。anna debenham在这块也有一本非常棒的 口袋书 。
添加动画 在你开始给各种东西添加动画之前，先创建你想要传达的主体。
andrex puppy (british tv ad from 1994)
列出几个可以描述你的目标对象的特色的单词。如果是andrex品牌，它们的词大概是：有趣、好玩、柔软，舒适。
也许你的目标对象是一些比较严肃、可靠、权威的内容。也可能是兴奋、紧张，或者是放松、随意。对于每一种场景，代表这些单词的动画都是不一样的。
在下面的例子中，两个动画的时间长度是一样的，但是使用了不同的时间函数。一个是 ease ，另一个是 bounce 。两个都是可以的，根据你的具体需要。
时间函数（ codepen ）
示例：ktiman labs 使用kitman labs，我们花了一点点时间在纠结我们要描述的对象的单词上：
scientific（科学的） precise（精确的） fast（快） solid（实体） dependable（可靠的） helpful（有帮助的） consistent（一致） clear（清晰） 有了这样一个列表之后，我们就可以设计合适的动画了。我们可能会使用补间来让对象快速移动到目的地，然后轻微地缓一下或反弹。
我们使用这个列表来证明使用动画，比如帮助我们的用户理解网页上数据的上下文。或者在会破坏信息一致性的情况下，我们也可以选择不添加动画。
创建样式指南 如果你已经有一个样式指南，可以从创建一个概述来开始添加动画。
一种方法是创建一个本地网站，然后在你的团队中分享。我们最近为此成立了一个本地站点。
一个最近关于动画主题的项目的介绍
本文档将在给组件添加动画时成为一个参考。包括链接到的相关资源或动画示例，以帮助展示你需要的动画样式。
原型设计 你可以使用动画示例解释你的动画样式指南的寓意，我们还可以通过原型来展示动画。
现在有非常多的原型工具。你可以使用 invision 、 principle 、 floid ，甚至可以使用html和css作为嵌入的 codepen 。
principle中创建的登录流程原型
这些工具可以帮助我们通过几种方法尝试我们的想法。创建视频、动图gif或在线demo，来和别人分享。实验。找到最适合的，让你大脑中的想法最快地得到实现。使得它在接近生产之前就不断修改完善好。
建立一个集合 创建你自己的指南，一次一个动画。
有些人喜欢用松散的结构来写指南，这样当他们有新想法的时候就可以加进去了；其他人可能会一次创建完整的一页——这并不重要。主要的是，你收集动画和收集交易卡是一样的。让它们随时准备好开始播放，完成棒棒的效果。
你可以包括gif动画，或链接到视频，甚至展示动画的网页。使用动画可以提高用户体验，在val head的“ ui animation and ux article on a list apart ”一文中也很好地讲述了。
重要的是你为它们创建了一个有组织的地方。下面是一些ideas的展示。
logo和品牌标志 很多网站都在它们的logo中应用了一些巧妙的动画。这可以吸引眼球，增加一些特色，或给静态页面带来一点活力。yahoo和google一直在给它们的logo尝试添加各种各样的动画。即使是一个简单的弹跳动画，如 hop.ie 的logo，也可以增加特色。
hop.ie的css弹跳动画
内容过渡 添加内容，删除内容，显示和隐藏信息，这些都是添加动画的机会。仔细地使用动画可以帮助传达在屏幕上发生的动作。
添加了css动画的列表（ cssanimation.rocks ）
关于这方面的更多细节，我推荐 pasquale d’silva 的“ transitional interfaces ”。
页面切换 比内容改变更大的变化，在网站的页面切换之间创建一个平滑的过渡。medium的文章切换是一个很好的示例。
medium-style页面切换( tympanus.net)
在内容到达前先准备布局 我们可以使用动画来绘制内容准备好之前的页面，例如，在一个页面向服务器请求的数据到达之前，先展示动画。
乐观的加载网格（ codepen地址 ）
有时候展示一些东西让用户知道一切都很好是很重要的。用一个简短的动画来覆盖初始化内容加载完成之前的空白，可以使得加载的过程感觉上是无缝过渡的。
交互 悬停效果、下拉菜单、滑入菜单和active状态的按钮和表单，都可以添加动画。找到可以删除突变状态的方法，有助于使得你的ui感觉更顺畅~
( studio mds )的表单中placeholder内容的动画
保持动画可见 维护一个样式指南，然后保持更新，这是值得的。它会帮助你在引入动画和相关的设计决策时，完成得更快。如果你能让这个过程保持有趣，并对成果感到骄傲，就更好了。
在更新你的样式指南时，确保动画是在同一时间显示的。这可能包括动态gif、视频和嵌入的动画示例。
这样做，你可以使得动画贯穿在你的整个设计过程中，确保它始终保持相关联。
灵感和资源 网上有大量的资源可以帮你。我最喜欢的是ibm的设计语言 网站 。
ibm的设计语言：动画设计参考
ibm描述了动画原理如何应用于它的ui和组件。他们把动画分成了五类，以及解释了他们如何应用于每个示例。
这个网站还包括一个 动画库 ，包含了动画实例的视频和源码的链接。
ibm组件库 的实例组件
ibm设置此网站的目的不只是帮助现有的设计师和开发者，还有新员工。此外，这是ibm向世界展示它们关心细节的方法。
另一个流行的动画资源是google的 material design 。
google的material design文档
google的指南覆盖了从理解easing，到创建优秀的、有用的移动ui的各方面的内容。
这可以在许多google的app和软件中可以看到，并影响了非常多网页的设计。这个网站对于学习动画和如何展示实例是有帮助的。
框架 如果你不想从头开始创建所有的内容，你可以使用一些现有的资源来开始创建动画，完成你的ui设计。有一个是salesforce的 lightning design system 。
这个系统比大多数指南更进一步。它包括一个可下载的框架，可以用于在你的项目中添加动画。他有一些有趣的概念，例如：设置海拔高度，表示处理对象在z轴上的位置。
salesforce的lightning design system中的实例：设置海拔高度
你还可以看看 animate.css 。
animate.css给你一套先设计好的动画，你可以直接使用class应用给页面上的元素。如果你使用javascript添加或删除class，你触发复杂的动画。它还可以和滚动触发很好地玩耍，以及像 wow.js 这样的工具。
学习，吸收，让它变成你自己的 有丰富的在线信息和指南，可以帮助我们更好地理解动画。它们可以激发和给我们的视觉和动画样式带来灵感。所以，我们可以纠结动画设计，和字体、颜色和布局一样。选择动画，让它成为我们样式指南的一部分。
非常感谢 val head 抽出时间校对，还为本文提供了很好的建议。
本文根据 @donovan hutchinson 的《 animating your brand 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： https://24ways.org/2015/animating-your-brand/ 。
彦子 在校学生，本科计算机专业。逗比一枚，热爱前端热爱生活，喜欢css喜欢javascript喜欢svg，爱玩ps玩ai玩啊逗比的软件。努力向上，厚积薄发。