Framer教程（7个简单的微交互可改善原型） _原型设计

本文概述

为什么要原型化小的互动？
7个原型
最后说明

欢迎来到我们的Framer教程系列的第二部分。在上一篇文章中, 我们了解了在设计模式下使用Framer的基础知识, 以及如何编写一些简单的代码使我们的设计栩栩如生。在本文中, 我们将重点介绍如何使用Framer创建微交互和动画过渡。我们将逐步介绍如何为原型创建七个有用的交互。
为什么要原型化小的互动？平稳的移动, 状态更改和细微的转换通过向用户提供有关某些操作的反馈, 帮助用户了解如何使用你的界面。通常, 这些转换会回响现实世界的模拟(例如, 开关控件的滑动)或利用常见的设备交互模式(例如, 分接扩展)。在本教程中, 我们将重点关注为界面添加画龙点睛的交互作用, 以引导理解并激发用户的愉悦感。
看下面的例子。全世界的设计师都在各种产品中创建这些微交互。

文章图片

文章图片
原型作者：Artem Litvin, Johny Vino, Marcin Michalak(合同书)
7个原型在本教程中, 我将为你简要介绍每个微交互和一些代码片段。我们将使用几种不同的技术, 因此你将能够选择最适合你产品的技术。没有在Framer Studio中创建任何东西的” 正确” 方法—正如我在前一篇文章中提到的那样, Framer为你提供了很多自由来创建你想要的方法。

文章图片
你以前看过类似的互动吗？当然可以！你每天都可以在智能手机上看到它们。是时候创建自己的了。
1.操作按钮
动作按钮通常代表当前屏幕的主要动作。有时它内部包含几个动作。我们将为第二种情况创建一个交互。在此处下载有效的原型：https://framer.cloud/ShBnH

文章图片
步骤1：建立三个圆形按钮首先, 创建一个内部带有图标的圆形主按钮, 并在其下方放置两个较小的按钮。不要忘记在设计模式下使用目标指示器将所有这些层标记为交互式。

文章图片
步骤2：为所有图层设计两种状态为图层创建两个不同的状态。使用以下代码使较小的按钮移至主要按钮上方, 并将图标旋转45°：

button_1.states.a = y: 427 x: 246 width: 64 height: 64button_2.states.a = y: 330 x: 246 width: 64 height: 64icon.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：设计转换游乐场

文章图片
你只需要两件事：开关本身(至少包含两层)(背景和点), 以及一些在使用开关后进行动画处理的层。
步骤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: 0circle.states.a = x: 37 y: 183 width: 301 height: 301circle_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()

步骤4：调整时间为了使一切更加自然, 请调整所有状态的时间和延迟：

dot.animationOptions = time: 0.2switch_bg.animationOptions = time: 0.2circle_1.animationOptions = time: 0.5 curve: Springcircle.animationOptions = time: 0.5 delay: 0.05 curve: Springicon.animationOptions = time: 0.5 curve: Spring

现在我们的原型完成了！
3.列表项滑动动作
这是从列表中删除, 归档或保存项目的典型交互。向左或向右滑动, 一个项目将被清除。在此处下载原型：https://framer.cloud/rzMWP

文章图片
步骤1：在设计模式下创建原型

文章图片
如果愿意, 可以使用自己的设计。你只需要保持相同的图层结构即可。如上图所示, 所有列表项下面都有一个” 撤消” 按钮。
第2步：使项目可拖动为简单起见, 我们将仅为第一个列表项创建一个交互。首先, 使列表项可拖动：item.draggable = true。
然后锁定垂直轴：item.draggable.vertical = false。
设置可拖动区域的约束：item.draggable.constraints
最后将大小设置为项目大小：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” 语句。上面的代码基本上说, 当我们将项目层移动超过70px时, 然后将项目状态更改为状态” a” 。你可以在Framer Studio文档中阅读有关if语句的信息：https://framer.com/getstarted/programming/ ＃有条件的
第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) ->

步骤3：设计动画我们将使用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: falselist.parent = scroll.content

第3步：使刷新图标可见为图标创建一个简单状态：

icon.states.a = opacity: 1

步骤4：下拉后新增活动我们的列表现在可以滚动。也就是说, 当我们向上或向下滚动时, 整个滚动内容都在” y” 轴上移动。有了这些知识, 我们可以创建一个事件：

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

同样, 我们使用” if” 语句。如果下拉列表(在y轴上移动)超过180像素, 我们将触发一个操作。在这种情况下, 我们将为两个图层设置动画：列表和刷新图标。

scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a")list.animate y: 210 options: time: 1 curve: Bezier.easerefresh.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.easerefresh.animate rotation: 360 options: time: 1icon.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

步骤4：设计拖曳状态所有项目在被拖动时都应处于状态。你必须从代码开始, 但是稍后你将能够在” 层编辑器” 中编辑此状态：

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.childrenbuttons = []

我还为所有” 按钮” 层创建了一个空数组：按钮= []。
步骤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

你可以使用此技术来重新创建所有先前的原型, 并使它们更加复杂。
最后说明创建微交互时, 你将重点放在最小的细节上。你可以创建由任何类型的动作触发的动画, 并使它们绝对完美。请记住, 有数百种方法可以创建相同的原型, 并且应使用适合你的技能和产品设计需求的方法。
【Framer教程（7个简单的微交互可改善原型）】? ? ?
在srcmini设计博客上进一步阅读：