srcmini本文概述
欢迎来到我们的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: 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：设计转换游乐场
你只需要两件事：开关本身(至少包含两层)(背景和点), 以及一些在使用开关后进行动画处理的层。
步骤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()
步骤4：调整时间
为了使一切更加自然, 请调整所有状态的时间和延迟：
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：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: false
list.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.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
步骤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.children
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
你可以使用此技术来重新创建所有先前的原型, 并使它们更加复杂。
最后说明
创建微交互时, 你将重点放在最小的细节上。你可以创建由任何类型的动作触发的动画, 并使它们绝对完美。请记住, 有数百种方法可以创建相同的原型, 并且应使用适合你的技能和产品设计需求的方法。
• • •
在srcmini设计博客上进一步阅读：
- 电子商务UX –最佳做法概述(带有信息图)
- 以人为本的设计在产品设计中的重要性
- 最佳UX设计器产品组合–启发性的案例研究和示例
- 移动接口的启发式原理
- 预期设计：如何创建神奇的用户体验
评论前必须登录！
注册