Framer教程：如何创建出色的交互式原型

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

Wojciech Dobry(网络互动), PatrykAdaś(地图框API), Krijn Rijshouwer-Framer团队

Framer一周前推出了最新版本, 原型市场将永远不会相同。 Framer原型制作工具曾经很难掌握, 但作为最准确和无限的原型制作软件很有用。现在, 情况已经改变。 Framer现在具有设计+代码+协作功能, 这意味着你可以直接在Framer内部创建原型, 无需任何第三方软件和任何编码技能即可开发功能齐全的原型。

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

Framer基础

让我们开始吧！只需访问framer.com并下载试用版。他们给了你两周的全功能演示, 并且相信我, 这是足够的时间来学习有关此原型软件的很多知识。

安装后, 你可能需要仔细阅读它们提供的一些示例, 并对其进行一些操作。完成后, 就该开始制作原型了。

(在这个Framer教程中, 我将集中精力直接在Framer.js中创建原型。你还应该知道还有其他方法可以在Framer中开始进行原型设计。例如, 你可以直接使用Sketch文件。我将在另一篇文章。)

全新Framer–设计模式

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

最新版本的Framer具有一个很棒的新功能：设计模式。它使你几乎可以像在Sketch或Figma中一样进行工作。你可以创建矢量层, 导入图像或创建文本层并设置其样式。如果你想在没有任何第三方应用程序的情况下快速进行原型制作, 那么所有这些都变得非常方便。

让我们创建一个应用类型的设计：

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

步骤1：创建简单的按钮和背景。

要开始设计, 请选择第一个选项卡(即设计模式), 然后添加一个画板, 就像在Sketch中一样。在本教程中, 我们将使用iPhone 7原型, 因此我选择了此预设作为我的画板尺寸。我还添加了蓝色背景填充。

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

步骤2：添加一张带有图片的卡片。

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

步骤3：添加应用标题。

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

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

在开始我们的Framer原型之前, 我们还有另外一步。我们只需要告诉Framer哪些层将是交互式的即可。只需在图层面板中单击图层名称旁边的点。正确命名每个图层以备将来使用是很好的。我将图层卡和按钮命名为。

步骤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图层。现在我们的互动游乐场已准备就绪。

我们将逐步创建此应用程序原型。

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

在此处下载整个原型：https://framer.cloud/QatjE

1.创建按钮反馈交互

要设计任何交互, 我们需要一个触发器来使其实现。它几乎可以是任何东西：屏幕轻按, 动画结束, 图像加载结束或手机加速度计。

步骤1：创建互动事件。

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

layerA.onTap (event, layer) ->

Framer只是为你编写了这一行代码。这意味着, 当你点击按钮层时, 将会发生某些事情。

步骤2：向事件添加动画。

让我们在触发后开始制作动画。为此, 请在图层面板中单击按钮图层旁边的点, 然后选择”添加动画”。添加动画时, Framer会跳到动画编辑模式。你可以缩放, 移动, 旋转或更改图层的任何参数：

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

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

Framer中的按钮反馈原型

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

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

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

向卡添加状态的方法几乎与添加动画相同。你必须单击卡层旁边的点, 然后单击添加状态。现在, 你已进入状态编辑模式。根据你的喜好进行设计：

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

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

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)"

步骤2：添加事件。

使它正常工作仅需一步。我们必须创建一个事件来更改这些状态​​。

button.onTap ->
	card.stateCycle()

这样做是每次执行动作时, 都会一层一层地更改所有状态。因此, 在本例中, 每次我们点击按钮层时, 我们都会更改为卡状态。如果你想创建更多状态并正确触发它们, 下面的代码段将为你提供更好的服务：

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

当你要触发图层的特定状态时, 此片段非常有用。

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

card.animationOptions =
	curve: Spring
	time: 0.8

状态在iPhone原型上的交互

你可以使用事件做更多的事情, 但是在这一点上, 你将能够创建几乎任何基本的交互。它是我见过的写得最好的文档之一。

在Framer中加速工作：组件

现在是时候添加一些组件来加快你的工作了。要从现在开始充分利用本教程, 请下载以下原型：https://framer.cloud/WTySI

1.第一部分：滚动

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

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

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

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

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

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

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

list.parent = scroll.content

步骤3：锁定垂直滚动。

现在允许我们滚动, 但是它发生在各个方向。我们必须在垂直轴上锁定滚动：

scroll.scrollHorizontal = false

滚动组件

哇！你仅用五行简单的代码在应用程序内部创建了一个滚动条。

2.页面组件：在屏幕之间滑动

在页面组件中, Framer使你可以在屏幕之间滑动并自动将它们固定到位。

滑动屏幕是一种非常流行的交互方式。这里的想法与滚动组件非常相似。你可以在此处下载有效的原型：https：//framer.cloud/icddT

步骤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组：www.facebook.com/groups/framerjs。周围有一个庞大的社区, 这对于你入门时很有帮助。

如果你想深入了解Framer, 请尝试阅读Framer文档。

• • •

在srcmini设计博客上进一步阅读：

• 电子商务UX –最佳做法概述(带有信息图)
• 以人为本的设计在产品设计中的重要性
• 最佳UX设计器产品组合–启发性的案例研究和示例
• 移动接口的启发式原理
• 预期设计：如何创建神奇的用户体验