如何创建自定义加载动画以降低跳出率

最初称为 throbber，加载动画用于指示数据收集或界面渲染的进度。 虽然您曾经可以通过使用沉闷的进度条来指示这一点，但那些日子已经一去不复返了。

今天，利用 CSS、jQuery 或简单的动画 GIF 制作精心制作的动画是一个让您的界面活跃起来并为您的产品增添个性的机会。

周到的动画可以在您的用户等待您的内容加载时娱乐他们。 一个好的加载动画有助于管理期望并通过保持兴趣来改善用户体验。

在本教程中，我们将使用 Sketch 创建基本形状，并使用 Principle 快速创建简单的自定义加载动画。 （这两个应用程序都适用于 Mac。）您将学习如何创建 Trello、Flickr、Slack 等使用的彩色加载动画。

让我们开始吧。

松弛加载动画

在 Sketch 上，绘制四个边长为 50 像素或每个半径为 100 像素的圆角正方形。 它们应该看起来像完美的圆形，但我们使用圆角的正方形来创建动画中的线条拉伸效果。

以这样的方式放置四个形状，以创建一个假想的正方形，每边之间有 150 像素的空间。 应用四种不同的颜色（#35BA90 绿色、#69CADD 蓝色、#EBA900 黄色和#E20661 粉色）。

将形状导入到 Principle，将它们分组，然后单击“创建组件”以嵌套组。

进入嵌套组并将画板旋转 15 度。 然后选择每个单独的圆圈并将其旋转回其原始位置（向后 15 度）。 这会在直线上产生拉伸效果。

将“自动”触发器应用到画板，然后将每个圆角矩形拉伸到画板的另一侧，长度为 295 像素。 为两个画板上的每个形状设置 75% 的不透明度。

将另一个“自动”触发器应用到第二个画板。 在新画板上，将每行缩小到原来的 50px 宽度，但在原来位置的另一侧。

使用“自动”触发器将最后一个画板链接到第一个画板。 单击“返回父级”按钮以预览最终结果。

提示：当您转到“Back to Parent”时，您可以将主组旋转 -30 度以看起来更像 Slack。 此外，您可以在“动画”面板中更改动画速度，并应用“同时缓和”效果来平滑过渡。

Trello 加载动画

使用 Sketch，绘制一个 100 像素的蓝色正方形。 绘制一个 60px 宽 x 140px 高的白色矩形。 将其与前一个正方形的左上角对齐，顶部和左边距为 30 像素。 复制那个白色矩形，将其与正方形的右侧对齐，右边距为 30px，然后将其高度减小到 70px。

将画板导入 Principle 并应用“自动”触发器来创建新的关键帧。 在新的画板上，反转白色矩形的高度（使左侧矩形 70 像素高，右侧矩形 140 像素）。 在“Animate”面板中应用“Ease-Both”效果来平滑过渡。

滚圈

在 Sketch 上画一个圆圈。 使用“Dash”和“Gap”值应用 10px 边框且无填充。 为边框使用“角渐变”颜色，以突出您稍后将创建的旋转效果。

打开一个新的 Principle 文件并使用“Import”按钮从 Sketch 中传输圆。 连续应用两个“自动”触发器。

要创建旋转效果，请选择中间画板中的圆圈并将其“角度”值更改为 360 度。 然后选择第三个圆圈并在左侧面板中给它一个不同的名称（即“复制”）。 这将伪造无限旋转。

最后，用另一个“自动”触发器将第三个画板链接回第一个画板。 对画板 1 和 2 之间的时间线应用“线性”过渡。检查您刚刚在预览窗口中创建的动画。

Flickr 加载动画

并排绘制一个蓝色圆圈和一个粉红色圆圈。 将它们导入 Principle 并应用“自动”触发器来创建新画板。

反转圆圈的位置并应用新的“自动”触发器来创建第三个画板。 在那个新的画板上，反转左侧面板上圆圈图层的顺序。

应用第三个“自动”触发器来创建第四个画板。 在最后一个画板上，再次反转圆圈的位置，并将最后一个画板的“自动”触发器应用回初始画板。

装载类型

在 Principle 上创建一个新项目，并使用文本工具编写“LOADING”。 将文本左对齐并在画板中垂直居中。

连续五次应用“自动”触发器。 让最后一个画板的第五个触发器循环回初始画板。

从初始画板开始向右移动，编辑每个画板上的文本，分别在原始“加载”文本旁边添加零、一、二、三、二和一个句点。 画板的进程应该是这样的：

加载加载。 加载中..加载中...加载中..加载中。

现在您可以预览刚刚创建的动画。

脉动点

跟踪一个 60 像素的点。 再复制并粘贴一个点并将其放置在右侧 60 像素处。 确保两个点，包括 60 像素的间隙，都在你的画板中完全居中。

连续四次应用“自动”触发器。

在第二个画板上，将第二个点缩小到 30 像素。

在第三个画板上，将第二个点缩小到 0 像素，将第一个点缩小到 30 像素。

在第四个画板上，将第二个点放大到 30 像素，将第一个点缩小到 0 像素。

在第五个画板上，将第一个点缩小到 30 像素，然后使用“自动”触发器将画板链接回第一个画板。

滚点

在六面骰子上的排列中放置五个点。 将画板导入到 Principle 并将其居中。

在画板上应用“自动”触发器。

在新画板上，将这组点旋转 360 度。

使用“自动”触发器将第二个画板链接回第一个画板。

脉动圈

从一个 50 像素的圆开始，在一个 150 像素的圆内居中对齐，该圆有 5 像素的边框但没有填充。

连续三次应用“自动”触发器。

在第一个画板上，将线圈缩小到 50 像素，将内圈缩小到 10 像素。

在第三个画板上，将线圈缩放到 200 像素，并为其设置 0% 的不透明度。 将内圈缩放至 150 像素，并为其设置 50% 的不透明度。

在最后一个画板上，将内圈缩放至 200 像素，并为其设置 0% 的不透明度。 将线圈缩小到 50 像素，并给它 25% 的不透明度。

将“自动”触发器应用于最后一个画板。 将内圈缩小到 10 像素，不透明度为 50%。

使用“自动”触发器将最后一个画板链接到第一个画板。

跳点

将三个高度为 50 像素、间距为 50 像素的完美圆圈排成一行。

应用“自动”触发器。 在第二个画板上，将第一个圆圈向上移动 50 像素。

将“自动”触发器应用到第二块板上。 在第三个画板上，选择前两个圆圈并将它们向上移动 50 像素。 这三个圆圈应该在对角线上。

将“自动”触发器应用于第三块板。 在第四个画板上，将第一个圆圈向下移动 50 像素。 选择最后两个圆圈并将它们向上移动 50 像素。

在第四块板上应用“自动”触发器。 在第五个画板上，将前两个圆圈向下移动 50 像素。 选择最后一个圆圈并将其向上移动 50 像素。

在第五块板上应用“自动”触发器。 在第六个画板上，将最后两个圆圈向下移动 50 像素。

最后，回到第一个画板，将第一个点向上移动 50 像素，然后使用“自动”触发器将最后一个画板链接到第一个画板。 您可以预览最终结果。

经典加载器

在 Sketch 中画一个圆，给它一个 20px 的灰色边框，没有填充。

将相同圆圈的副本粘贴在其上，并将副本填充更改为不同的颜色。 对于这个例子，我们将使用蓝色。

跟踪一个正方形，重叠蓝色圆圈的四分之一。 将矩形图层移动到圆形图层下方，并将“蒙版”应用于矩形图层。

移至 Principle 并使用“Import”按钮导入 Sketch 图稿。

将“自动”触发器应用于第一个画板并将蓝色圆圈旋转 360 度。

将第二个“自动”触发器应用于第二个画板。 将生成的第三个圆形图层重命名为“复制”，并使用“自动”触发器将其链接回第一个画板。

结论

一旦您练习了创建其中一些经过验证的加载动画，您应该对使用此处学到的技能为您自己的应用程序创建独特动画的能力充满信心。

借助 Sketch 和 Principle 中的一些想象力和方便的工具，您可以在几分钟内创建与您的应用程序设计相匹配的独特加载动画。 您的用户将欣赏您的应用程序在努力工作的专业外观和友好指示。

• • •

进一步阅读 Toptal 设计博客：

• 电子商务用户体验——最佳实践概述（附信息图）
• 以人为本的设计在产品设计中的重要性
• 最佳 UX 设计师作品集——鼓舞人心的案例研究和示例
• 移动界面的启发式原则
• 预期设计：如何创造神奇的用户体验