Framer 教程：改进原型的 7 个简单微交互

欢迎来到我们的 Framer 教程系列的第二部分。 在上一篇文章中，我们了解了在设计模式下使用 Framer 的基础知识，以及如何编写一些简单的代码来让我们的设计栩栩如生。 在这篇文章中，我们将专注于使用 Framer 创建微交互和动画过渡。 我们将介绍如何为您的原型创建七种有用的交互。

为什么要对小型交互进行原型设计？

平滑的移动、状态变化和细微的过渡通过向用户提供有关某些操作的反馈来帮助用户了解如何使用您的界面。 通常，这些转换会与现实世界的类似物相呼应（例如开关控件的滑动）或使用常见的设备交互模式（例如点击展开）。 在本教程中，我们将专注于为界面添加画龙点睛的交互，以引导理解并激发用户的乐趣。

看看下面的例子。 世界各地的设计师正在各种产品中创建这些微交互。

7 个原型

在本教程中，我将概述每个微交互和一些代码片段。 我们将使用几种不同的技术，因此您将能够选择最适合您的产品的一种。 在 Framer Studio 中没有“正确”的方式来创建任何东西——正如我在之前的文章中提到的，Framer 为您提供了很多自由来创建您想要的方式。

你以前见过这样的互动吗？ 当然，你有！ 您每天都会在智能手机上看到它们。 是时候创建自己的了。

1.动作按钮

动作按钮通常代表当前屏幕的主要动作。 有时它内部包含几个动作。 我们将为第二种情况创建交互。 在此处下载工作原型：https://framer.cloud/ShBnH

第 1 步：创建三个圆形按钮

首先，创建一个内部带有图标的主圆形按钮和两个放置在主按钮下方的较小按钮。 不要忘记在设计模式中将所有这些层标记为交互式（使用目标指示器）。

第 2 步：为所有层设计两种状态

为图层创建两种不同的状态。 使用下面的代码使较小的按钮移动到主按钮上方并将图标旋转 45°：

 button_1.states.a = y: 427 x: 246 width: 64 height: 64 button_2.states.a = y: 330 x: 246 width: 64 height: 64 icon.states.a = rotation: 45

第 3 步：添加活动

为了使这个原型动画化，我们必须添加一个事件。 点击操作按钮后，更改所有图层的状态：

 button.onTap -> button_1.stateCycle() button_2.stateCycle() icon.stateCycle()

第 4 步：弹簧动画

此时，动画看起来非常机械。 为了增加人情味，我们将为所有图层添加弹簧动画：

 button_1.animationOptions = curve: Spring(tension: 170, friction: 12) button_2.animationOptions = delay: 0.05 curve: Spring(tension: 170, friction: 12) icon.animationOptions = curve: Spring(tension: 250, friction: 5)

操作按钮已准备就绪！

2.交互开关

以下步骤将使您能够创建自己的开关交互。 在此处下载工作原型：https://framer.cloud/ieypV

第 1 步：设计一个 Switch Playground

您只需要两件事：开关本身，它至少包含两层（背景和点），以及使用开关后要设置动画的一些层。

第 2 步：创建状态

你还记得第一篇文章中如何直接在 Framer Studio 中设计状态吗？ 以您喜欢的方式设计您的状态，或使用我的设置：

 dot.states.a = x: 50 backgroundColor: "rgba(5,106,161,1)" switch_bg.states.a = backgroundColor: "rgba(0,136,205,1)" icon.states.a = opacity: 0 circle.states.a = x: 37 y: 183 width: 301 height: 301 circle_1.states.a = x: 20 y: 166 width: 337 height: 337

第 3 步：添加活动

为了使原型工作，我们必须向开关添加一个事件。 点击开关后，我们将改变所有层的状态：

 switch_1.onTap (event, layer) -> dot.stateCycle() switch_bg.stateCycle() circle.stateCycle() circle_1.stateCycle() icon.stateCycle()

第四步：调整时间

为了让一切更自然，调整所有状态的时间和延迟：

 dot.animationOptions = time: 0.2 switch_bg.animationOptions = time: 0.2 circle_1.animationOptions = time: 0.5 curve: Spring circle.animationOptions = time: 0.5 delay: 0.05 curve: Spring icon.animationOptions = time: 0.5 curve: Spring

现在我们的原型已经完成了！

3.列表项滑动动作

这是从列表中删除、归档或保存项目的典型交互。 向左或向右滑动，一个项目将被清除。 在此处下载原型：https://framer.cloud/rzMWP

第 1 步：在设计模式下创建原型

如果您愿意，您可以使用自己的设计。 你只需要保持层的相同结构。 如上图所示，所有列表项下方都有一个“撤消”按钮。

第 2 步：使项目可拖动

为简单起见，我们将仅为第一个列表项创建交互。 首先，使列表项可拖动： item.draggable = true 。

然后锁定垂直轴： item.draggable.vertical = false 。

设置可拖动区域的约束： item.draggable.constraints

最后将大小设置为项目 size: size: item 。

这是整个代码的样子：

 item.draggable = true item.draggable.vertical = false item.draggable.constraints = size: item

现在您可以左右滑动，该项目将始终返回其原始位置。

第 3 步：创建状态

接下来，为列表项创建删除状态。 我只是使用 x 轴将它移到屏幕外。

 item.states.a = x: -360

第 4 步：滑动后更改状态

最后，我们必须创建一个触发器来启动交互。 当我们将项目拖到屏幕左侧时，它应该被移除。 代码将如下所示：

 item.onMove -> if item.x < -70 item.stateCycle("a")

在这种情况下，我们使用“if”语句。 上面的代码基本上是说，当我们将 item layer 移动超过 70px 时，将 item state 更改为 state 'a'。 您可以阅读 Framer Studio 文档中的 if 语句：https://framer.com/getstarted/programming/#conditional

第 5 步：点击后撤消操作

我们几乎完成了这种交互。 唯一剩下的就是撤消此操作：

 item_bg.onTap -> item.stateCycle("default")

您应该熟悉上一教程中的这段代码。

第 6 步（可选）：调整动画时间

如果你愿意，你可以调整动画的时间：

 item.animationOptions = time: 0.75 curve: Spring

4.按钮加载器

对于需要用户加载或等待时间的操作，这是一个非常有用的交互。 当我们创建这种交互时，您将学习如何管理许多一个接一个发生的动画。 在此处下载原型：https://framer.cloud/FxmHN

第 1 步：在设计模式下创建原型

创建一个带有四个子层的简单按钮：一个进度条和三个用于不同状态的图标。 我设计了一个上传图标可见的按钮，底部有一个宽度为 0 的进度条，以及另外两个隐藏图标。

第 2 步：添加活动

只需使用 Framer 的自动编码功能，就可以制作整个原型，而无需编写任何代码。

首先，添加一个事件。 我们将通过点击按钮层触发整个交互：

这是 Framer 为您编写的代码：

 button.onTap (event, layer) ->

第三步：设计动画

我们将使用 Framer 的自动编码功能来设计所有动画：

我设计了四种不同时间的动画：

• 第一个动画是改变进度条的宽度。
• 第二个是隐藏不透明的上传图标。
• 第三个是旋转并显示加载器图标。
• 最后一个是显示和缩放检查图标。

以下是 Framer 为每个动画编写的代码：

 # change progress bar width progress.animate width: 247 options: time: 1.4 curve: Bezier.ease # hide upload icon upload.animate opacity: 0.00 y: 39 options: time: 0.2 curve: Bezier.ease # show and rotate loader icon load.animate opacity: 1.00 rotation: 360 options: time: 1 curve: Bezier.ease # show and scale check icon done.animate opacity: 1.00 scale: 1.4 options: time: 0.2 curve: Bezier.ease delay: 1.00

第 4 步：重置加载动画

您可能已经注意到，我们没有在动画结束后隐藏加载器图标。 为了完成这个原型，使用这个事件触发另一个动画： load.onAnimationEnd ->

 load.animate opacity: 0.00 options: time: 0.2 curve: Bezier.ease

5.拉动刷新

几乎每个带有列表的产品都使用这种类型的交互。 用户下拉整个列表以刷新它。 它很容易创建。 在此处下载原型：https://framer.cloud/DgMDw

第 1 步：设计一个带有刷新图标的简单列表

我们可以直接进入设计模式。 我们需要两件事：一个列表和一个刷新图标。 这里的关键是用不透明度隐藏刷新图标并将其放在我们的列表中：

第 2 步：创建滚动组件

我们想让我们的列表可滚动。 为此，请使用滚动组件并向其添加列表层：

 scroll = new ScrollComponent size: Screen scrollHorizontal: false list.parent = scroll.content

第 3 步：使刷新图标可见

为图标创建一个简单的状态：

 icon.states.a = opacity: 1

第四步：下拉后添加事件

我们的列表现在是可滚动的。 这意味着当我们向上或向下滚动时，整个滚动内容都在“y”轴上移动。 有了这些知识，我们可以创建一个事件：

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a")

我们再次使用“if”语句。 如果列表被下拉（在 y 轴上移动）超过 180px，我们将触发一个动作。 在这种情况下，我们将为两个图层设置动画：列表和刷新图标。

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1

我们正在使用“动画”将列表向下移动 210 像素并将刷新图标旋转 360°。

第 5 步：重置所有状态

原型几乎可以工作，但我们必须在刷新动画后重置所有图层。 为此，我们将在动画结束后使用一个事件：

 icon.onAnimationEnd ->

我们正在将刷新图标的旋转动画化回其原始位置，并通过使用状态循环，我们正在重置列表和图标背景状态：

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1 icon.onAnimationEnd -> refresh.animate rotation: 0 list.stateCycle("default") icon.stateCycle("default")

而已！

6.拖动交互

你有没有注意到，当你在应用程序中拖动一个项目时，项目本身总是会发生一些事情？ 有时项目会缩小，可能其他项目会模糊，或者不透明度会发生变化。 让我们学习如何创建这种交互。 在此处下载工作原型：https://framer.cloud/YstiW

第 1 步：用瓷砖设计一个简单的网格

创建一个瓦片网格，并确保它们位于父元素内。

第 2 步：使用“for”循环定位所有图块

“ for循环”可能听起来很吓人，但其实很简单。 如果你不熟悉for循环，可以先阅读一点背景知识：https://framer.com/getstarted/programming/#loops-and-arrays

我们将使用for循环来定位网格内的所有图块：

 for item in grid.subLayers

使用这行简单的代码，您可以定位网格层内的所有层。

第 3 步：使图块可拖动

使网格内的每个项目可拖动：

 for item in grid.subLayers item.draggable = true

第四步：设计拖动状态

所有项目在被拖动时都应该有一个状态。 您必须从代码开始，但稍后您将能够在图层编辑器中编辑此状态：

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)'

第 5 步：拖动事件

我们必须创建事件以在拖动项目时触发不同的状态。 当我们开始拖动时，第一个事件将触发一个动作：

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a")

我使用this.bringToFront()来确保该项目始终位于其他层之上。

第二个触发器将重置项目的状态：

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default")

至此，我们有了一个工作原型。

第 6 步（可选）：玩计时

交互总是沿着时间线发生。 很好的调整时间线以达到完美的效果：

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default") item.animationOptions = time: 0.3 curve: Spring

7.多个“喜欢”按钮（高级）

在这个原型中，我们将使用更先进的技术向您展示在 Framer Studio 中定位图层的不同方式，这将在更短的时间内构建更具响应性的交互。 如果您不熟悉基本编码，建议您先阅读这篇文章：https://blog.framer.com/code-less-achieve-more-with-arrays-in-framer-c43594d13d59

对于这种交互，我们将跳过设计部分并使用我专门为本文创建的原型：https://framer.cloud/SZMCH

第 1 步：创建数组

看一下 Framer Studio 内层的结构：

我们在“列表”组的“行”中有一个“按钮”。 我们将在按钮层上创建交互，因此我们必须以它们为目标。 但首先，我们必须找到所有的行层并将它们放入一个数组中：

 rows = list.children buttons = []

我还为所有“按钮”层创建了一个空数组： buttons = [] 。

第 2 步：将子层添加到数组

让我们从“for循环”开始：

 for i in rows buttons.push(i.children[0])

要将图层添加到数组中，我们将使用： buttons.push() 。 这意味着我们将每个“行”组的第一层放入一个数组中。

第 3 步：创建状态和事件

现在我们将为我们的“喜欢”按钮创建一个状态，并在点击时向它们添加一个事件：

 for i in buttons i.states.a = scale: 1.2 hueRotate: -80 i.onTap -> this.stateCycle() i.animationOptions = time: 0.3 curve: Spring

您可以使用此技术重新创建所有以前的原型并使它们更加复杂。

最后说明

当你创建微交互时，你关注的是最小的细节。 您可以创建由任何类型的动作触发的动画，并使它们绝对完美。 请记住，有数百种方法可以创建相同的原型，您应该使用适合您的技能和产品设计需求的方法。

• • •

进一步阅读 Toptal 设计博客：

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