设计系统中的动画
发布日期:2017-04-25 / 浏览:1295
  

我们的现代前端工作流已经成熟,包括设计系统和组件库,帮助我们保持有序,改进工作流程和简化维护。 这些系统在执行良好时,确保对可用代码的正确记录,并使我们的系统能够缩减通信冲突。

但是,虽然大多数这些系统对字体,颜色和一般构建块采取了关键立场,但是它们对动画的处理仍然是无组织的和临时的。 让我们利用现有的结构和工作流程来减少动画的摩擦,并创造凝聚力和高效的用户体验。
 
了解动画的重要性
 
我们把动画看作二等公民的部分原因是我们不认为它的力量。 当用户扫描网站(或任何环境或照片)时,他们正在尝试建立其周围环境的空间地图。 在这个过程中,没有什么能像运动中的东西那样引起注意。

我们经过生物学训练可以注意到运动:从进化上讲,我们的生存取决于它。 因此,动画完成后可以指导您的用户。 它可以帮助和强化这些地图,并给我们一种感觉,我们更深刻地了解用户体验。 我们检索信息,把它放回它来自哪里,而不是弹出和弹出的地方。
  “那菜单去了哪里? 哦,它在那里。

为了更深入地了解动画如何连接不同的状态,我写了关于CSS模式的UX模式中上下文转换的重要性。
 
移动设备上的动画流。
 
动画也有助于感知性能。 Viget进行了一项研究,他们测量用户参与标准加载GIF与自定义动画。 客户愿意等待定制加载器的长度的两倍,即使它不是什么非常奇特或疯狂。 只是通过向他们的用户展示他们关心他们,他们坚持下来,跳出率下降。
 
 
这也适用于表单提交。将您的个人信息提供给在线过程(如静态形式)可能会有点令人痛心。它变得更加悲伤,没有动画用作一个事情发生的信号,一些过程正在完成。同样的动画也可以招待用户,让他们觉得等待不长。

Eli Fitch在CSS Dev Conf中发表了一个演讲,名为“感知的性能:唯一真的重要”,这是我最喜欢的谈话标题之一。在其中,他讨论了我们倾向于测量时间线和网络请求等内容,因为它们更具有可量化性,因此更容易测量 - 但是测量用户在访问网站时的感觉更重要,值得时间和注意。

在他的演讲中,他指出“人类高估了被动等待36%,麻省理工学院的理查德·拉森。这意味着如果你不使用动画来加快表单提交的等待时间的加载速度,用户感觉它比开发工具时间线记录慢得多。
统治它

与字体,颜色等不同,我们倾向于添加动画作为最后一步,这导致无序的实现,缺乏整体的凝聚力。如果你问设计师或开发人员他们是否会创建一个模型或构建一个UI,而不知道他们使用的字体,他们会不喜欢这个想法。不知道他们正在使用的构建块意味着设计可能崩溃,或者开发可能会因为在开始时遗漏的东西而崩溃。好的动画工作方式一样。

使用动画的第一步是执行动画审计。看看你在网站上使用动画的所有地方,或者你不使用动画但可能应该使用动画的地方。 (提示:表单提交上的加载器的感知性能可能会大幅改变跳出率。)

不知道如何执行良好的审计? Val Head在她的书“设计界面动画”中有一个伟大的章节,它有大量的研究和伟大的想法。

即使一些漂亮的组件库,在文档中有动画也会犯这样的错误。你不需要每一种动画,就像你不需要每种字体。这使我们的代码膨胀。问自己的问题,如:你真的需要翻转180度动画吗?我甚至不能设想一个典型的UI上的地方,这将是有用的,但我看到的大多数组件库有一个mixin只是这样。

这导致...
有意见

许多人对材料设计困惑。他们认为材料设计是运动设计,主要是因为他们从来没有见过任何人对动画采取立场,并记录这些意见。但是每次使用Material Design作为运动设计语言,人们都会看到您的网站并认为GOOGLE。现在是好的品牌。

通过使用Google的运动设计语言而不是您自己的语言,您将失去在您自己的网站上难忘的机会。

在实践中对运动的看法是什么?这可能意味着你决定你从来不翻转的东西。这可能意味着你的轻松总是滑翔。在这种情况下,你会努力找到一个轻松,看起来“滑动”,并提出任何变化:scaleX(-1)动画,你在你的网站上找到。在团队中,每个人都知道不要花时间嘲笑翻转动画(即使他们在一个完全不同的代码库上工作),而是做一些感觉像它滑动的东西。你节省时间,不必一次又一次地沟通,使事情感觉凝聚力。
创建好的开发人员资源

有时人们不会将动画融入设计系统,因为他们不知道如何,超出基本的徘徊状态。所有动画属性可以分解为可互换的部分。这允许开发人员和设计师相似地混合和匹配并快速迭代,同时仍然保持正确的语言。以下是一些建议(附带代码和演示):

创建计时单位,类似于h1,h2,h3。在我最近工作的系统中,我称这些t1,t2,t3。 T1将保留较长的片段,下降到t5这是一个有点像h5,因为它是默认值(通常大约0.25秒或大约)。保持动画缓慢的入口,退出,入口强调和退出重点,人们可以参考。这和动画填充模式可能是可以重新用于动画的入口和退出的两个属性。使用animation-name属性来定义动