Framer 教程：如何创建令人惊叹的交互式原型

看看下面的示例原型。 这些都是在 Framer 中完成的。 在本教程之后，您将能够立即开始创建自己的令人惊叹的动画原型。

Framer 一周前发布了其最新版本，原型市场将不再一样。 Framer 原型制作工具过去很难掌握，但作为最准确和无限的原型制作软件非常有用。 现在，情况发生了变化。 Framer 现在带有设计 + 代码 + 协作功能，这意味着您可以直接在 Framer 中创建原型，开发功能齐全的原型，无需任何第三方软件，也无需任何编码技能。

在这里，我将教你如何使用简单的 Framer 代码，而无需任何编码知识。 您将学习如何在 Framer 中结合设计和代码模式的最佳功能来创建动画和交互式原型。 因此，让我们进入本教程并获取一些小代码片段来改进您的原型。

成帧器基础

让我们开始吧！ 只需访问 framer.com 并下载试用版即可。 他们给了你两周的全功能演示，相信我，有足够的时间来了解这个原型软件。

安装后，您可能需要浏览他们提供的一些示例并稍微玩一下。 完成后，就该开始制作原型了。

（在本 Framer 教程中，我将专注于直接在 Framer.js 中创建原型。您还应该知道还有其他方法可以在 Framer 中开始原型设计。例如，您可以直接使用 Sketch 文件。我将在另一篇文章。）

全新的成帧器——设计模式

在本文中，我们将在几分钟内用最少的代码创建三个很酷的原型：基本交互、滚动组件和页面组件

Framer 的最新版本有一个很棒的新功能：设计模式。 它允许您以与在 Sketch 或 Figma 中几乎相同的方式工作。 您可以创建矢量图层、导入图像或创建文本图层并设置样式。 当您想在没有任何第三方应用程序的情况下快速制作原型时，所有这些都变得非常方便。

让我们创建一个 App 类型的设计

在本教程的第一部分，我们将为我们的 Framer 原型准备一个游乐场。 我们将创建一个应用程序类型的设计，具有三种不同类型的图层：矢量、图像和文本。

第 1 步：创建一个简单的按钮和背景。

要开始您的设计，请选择第一个选项卡（即设计模式）并添加一个画板，就像在 Sketch 中一样。 在本教程中，我们将使用 iPhone 7 原型，所以我选择了这个预设作为我的画板尺寸。 我还添加了蓝色背景填充。

接下来，选择矩形工具并以简单的圆形按钮的形式创建一个形状。

第 2 步：添加带有图像的卡片。

添加图层的第二种方法是拖放功能。 您可以从计算机中选择任何图像文件，将其放入 Framer，然后使用右侧边栏对其进行样式设置。 我使用了一个简单的插图并将其设计为卡片。

第 3 步：添加应用程序标题。

Framer 还允许您添加文本图层。 同样，它的样式与任何图形软件中的基本相同。 您可以选择字体、大小、对齐方式、字母间距等。

第 4 步：告诉 Framer 哪些层是交互式的。

在开始我们的 Framer 原型之前，我们还有一步。 我们只需要告诉 Framer 哪些层是交互的。 只需单击图层面板内图层名称旁边的点即可。 最好正确命名每一层以供进一步使用。 我将图层命名为card和button 。

第 5 步（奖励）：定义全局颜色。

一个好的做法是为整个原型定义一些变量。 您可以从一开始就设置要使用的调色板、版式和基本尺寸。 这有助于节省时间。

设置颜色时，只需在代码编辑器中命名它们，并在相应的“=”符号后提供 HEX、RGB 或 RGBa 值。 请记住将所有变量保留在代码的最顶部。

 # variables ------------------------------- blue = "#005D99" green = "#3DBE8B" white = "#FFFFFF"

第 6 步（奖励）：添加相对位置。

使用新的 Framer，很容易让您的原型保持响应。 您可以在设计模式中设置相对位置，如下所示：

这是一个简短的属性列表，可用于直接在代码中对齐和计算图层位置。 您可以进行必要的数学运算来计算图层位置。 当您稍后添加交互并且希望保持原型响应时，这变得很有必要。

 # This is how you can align layer position: x: Align.center(0) # align layer horizontaly x: Align.center(200) # align layer horizontaly with 200 offset x: Align.right(0) x: Align.left(0) y: Align.center(0) # align layer verticaly y: Align.top(0) y: Align.bottom(0) # You can use also some variables width: Screen.width # current device width height: Screen.height # current device height # As a reference you can also user layer names x: layerA.x # layerA horizontal position y: layerA.y # layerA vertical position width: layerA.width # layerA width height: layerA.height # layerA height # You can combine all of this into the simple math to calculate position or dimensions width: Screen.width / 2 - layerA.width

现在你已经设置好了——让我们开始我们的项目

我们创建了不同类型的 Framer 层。 现在我们的交互游乐场已准备就绪。

最后！ 无聊的部分已经结束。 现在是时候进行一些交互设计了。

在此处下载整个原型。

1.创建按钮反馈交互

为了设计任何交互，我们需要一个触发器来实现它。 它几乎可以是任何东西：屏幕点击、动画结束、图像加载结束或您的手机加速度计。

第 1 步：创建交互事件。

我们将保持简单。 让我们在您点击它时创建一个按钮反馈，使用以下命令：

 layerA.onTap (event, layer) ->

Framer 刚刚为你写了这行代码。 这意味着当你点击按钮层时，会发生一些事情。

第 2 步：为事件添加动画。

让我们在这个触发器之后开始一个动画。 为此，请单击图层面板中按钮图层旁边的点，然后选择Add Animation 。 添加动画时，Framer 会跳转到动画编辑模式。 您可以缩放、移动、旋转或更改图层的任何参数：

Framer 添加了几行代码。 （不用担心——您仍然可以使用动画面板编辑动画。）

 button.onTap (event, layer) -> button.animate borderRadius: 27 borderWidth: 10 borderColor: "rgba(115,250,121,1)" options: time: 0.30 curve: Bezier.ease

恭喜！ 您刚刚创建了第一个交互。 它现在只能工作一次，但我们会解决这个问题。 您只能触发此动画一次的原因是动画完成后不会发生任何事情。 我们必须在第一个动画结束后将所有参数重置为之前的状态。

第 3 步：重置动画。

添加另一个事件，几乎就像我们之前所做的那样。 不同之处在于我们正在寻找动画结束时的事件：

这一次，Framer 添加的代码将如下所示：

 button.onAnimationEnd (event, layer) ->

因此，当按钮层上的动画完成后，我们可以添加下一个将重置按钮层参数的动画：

 button.onAnimationEnd (event, layer) -> button.animate borderWidth: 100 borderColor: "rgba(255,255,255,1)" borderRadius: 100 options: time: 0.3 curve: Bezier.ease

而已！ 点击我们的按钮后，我们现在有工作反馈。

2. 为卡片层交互创建不同的状态

好的，现在您知道如何设计动画并触发它了。 更多的时候，你必须设计一个层的不同状态。 您可以通过仅更改一些参数（例如位置、大小或不透明度）来设计同一层的多个状态。

第 1 步：为卡片层添加和创建状态。

给卡片添加状态的方法几乎和添加动画一样。 您必须单击卡片层旁边的点，然后单击Add State 。 现在您已进入状态编辑模式。 随心所欲地设计它：

请注意代码的缩进。 它应该从第一行开始。

我为卡片层设计了两种不同的状态：

 card.states.a = width: 248 height: 287 x: 63 y: 190 borderWidth: 10 borderColor: "rgba(115,250,121,1)" card.states.b = x: 139 y: 529 width: 98 height: 98 borderRadius: 49 borderWidth: 1 borderColor: "rgba(255,255,255,1)"

第二步：添加事件。

只有一步才能让它发挥作用。 我们必须创建一个事件来改变这些状态。

 button.onTap -> card.stateCycle()

每次你做一个动作时，它所做的就是一个一个地改变层的所有状态。 因此，在我们的例子中，每次点击按钮层时，我们都会切换到卡片状态。 如果您想创建更多状态并正确触发它们，下面的代码片段将更适合您：

 button.onTap -> card.stateSwitch("b")

当您想要触发图层的特定状态时，此代码段很有用。

我对原型所做的最后一次调整是动画速度和状态之间曲线的变化：

 card.animationOptions = curve: Spring time: 0.8 

你可以用events做更多的事情，但是在这一点上，你将能够创建几乎任何基本的交互。 这是我见过的最好的书面文件之一。

加快您在 Framer 中的工作：组件

现在是添加组件以加快工作速度的时候了。 要从现在开始充分利用本教程，请下载此原型。

1.第一个组件：滚动

我稍微修改了我们的原型。 现在我们有一个列表，但它的高度高于屏幕分辨率。 我们必须创建滚动才能在原型中看到整个列表。

第 1 步：创建图层并设置组件。

让我们首先创建一个高度大于屏幕的图层。 将此图层标记为交互式并将其命名为list 。 然后跳转到代码模式。 这次我们不会使用方便的左侧边栏。 让我们将整个屏幕设置为可滚动：

 scroll = new ScrollComponent width: Screen.width height: Screen.height

此代码使用当前设备的宽度和高度创建一个不可见区域。

第 2 步：告诉 Framer 您要滚动哪些图层。

什么都没有发生。 我们必须告诉 Framer 哪些层应该是可滚动的。 为此，我们将列表层添加到滚动组件：

 list.parent = scroll.content

第三步：锁定垂直滚动。

我们现在可以滚动，但它正在各个方向发生。 我们必须在垂直轴上锁定滚动：

 scroll.scrollHorizontal = false 

哇！ 您只用五行简单的代码在您的应用程序中创建了一个滚动。

2. 页面组件：一屏一屏

在屏幕之间切换的一种非常流行的交互方式是滑动。 这里的想法与滚动组件非常相似。 您可以在此处下载工作原型。

第 1 步：设置组件。

首先，我们必须在代码编辑器中创建一个“盒子”，魔法将会发生：

 page = new PageComponent width: 315 height: Screen.height x: Align.center scrollVertical: false clip: false # the content outside the box won't be clipped

此时，您应该熟悉这里的所有代码。 它只是组件及其区域的简单设置。 现在我们必须创建一些图层来滑动。

第 2 步：创建图层

我们将使用我们的第一个原型设计并对其进行一些修改。 这次我导入了两张图片，而不是一张卡片图片。

首先，我们必须使画板宽两倍。 在画板属性面板中，找到宽度并将其乘以 2（或仅添加*2 ）。 将卡片彼此相邻放置，用蓝点激活它们，并正确命名： card1和card2 。

第 3 步：向页面组件添加图层。

在代码编辑器中的代码末尾，我们必须添加：

 card1.parent = page.content card2.parent = page.content

这意味着我们正在将这些层添加到组件中。

页面组件现在可以使用了！

最后一句话

就是这样，伙计们！ 我希望您发现此 Framer 教程对您开始使用市场上最强大的原型制作工具很有帮助。 此外，您应该考虑加入 Facebook 上的 Framer 小组。 周围有一个庞大的社区，当您刚开始时，它们会很有帮助。

如果您想更深入地了解 Framer，请尝试阅读 Framer 文档。

• • •

进一步阅读 Toptal 设计博客：

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