在设计流程中，原型构建是关键部分。可交互原型的好处是，你可以观察使用者的交互方式，较为逼真的模拟出实际情况，从而优化设计。我们Tack Blog曾经提到过《基于纸质隐喻的动效》，以及Adobe Edge Animate这样直接生成HTML5动画的原型工具。

Framer.js 是一个可交互原型框架，基于JavaScript，较为诱人的有以下几点：支持手势、动效、状态、基于网页、容易实现、可在任何设备上浏览。最近，我们用Framer.js制作了 Aurora的应用原型。

仅需一点点编码知识，便可以将多种手势支持、交互效果、动效加入到设计中，还可以在手机或平板中预览。而且Framer还提供了 Framer Generator （Framer生成器）插件，可以快速导入Photoshop和Sketch中的图像并根据图层分层，一期 Framer Studio这款可预览编辑器。如果你有任何问题，请去Framer Facebook社区——Framer Facebook group.

让我们通过一个案例来了解Framer.js的核心功能。

图层

Framer中的一切都基于图层。图层指的是区域有限的、有颜色的文本或图像。除此之外，每个图层都有一系列属性可以调整，例如不透明度、宽度、高度、比例、模糊等等。在原型制作中，我们用以下两种方式来使用图层：

• 图像图层，例如UI设计中得标题、按钮等等。在分层导出之前，我们需要考虑哪些部分需要添加效果，哪些无需，无需的部分就不用分的那么仔细了，否则太多的图层做起来会很麻烦。
• 热区图层（类似QC中的Hit Area），设置热区图层后，我们可以通过点击来触发交互动效。在调试过程中，热区透明度要设置为50%。当设置完热区后，透明度设置为0%。

下图便是一个案例，图像为一个图层，可见的热区又是一个图层。

// IMAGE
myPanel = new Layer({x:20, y:100, width:280, height:200, image:"images/panel.png", opacity:1})

// HOTSPOT
myHotspot = new Layer({x:20, y:100, width: 76, height: 50, backgroundColor: "lime", opacity:.5})

图层里面也可嵌图层，处理成组元素比较方便

状态

图层可以有一系列的状态，在触发时会有不同的属性改变。在应用的不同状态下，图层显示不同的状态，例如菜单的侧滑，标签栏悬停时的高亮等等。通过交互来触发状态的改变。

既然状态和图层有所关联，那么可以通过定义隐藏面板的状态。

// STATES
myPanel.states.add({
  hide: {y:600,rotationX:90}
})

动效

我们所创建的每个原型在需要的场合都设置了动效，无论是直接交互，或是触发事件。实际上，好的动效能够处理转场过程中大多数问题，首先能够引导用户，也能适时的展现内容。

动效有很多属性可以设置，例如设置物体状态A Y轴位置是0，状态B Y轴位置为100，可以选择默认效果，也可以修改持续时间、延迟以及动效的其他属性。而且，你还可以选择触发动效的交互方式。

除了标准的交互->动效，也可以设置无需交互而显示的动效。例如，你先让元素如下图般扩大进入视窗。

// ANIMATIONS
myPanel.animate({
  properties: {
    scale: 1
  },
  time: .2,
  curve: "spring(100,10,0)"
});

Framer的动效弹性十足，不过你也可以非常方便的动态调整。可以设置动效的曲线，如下。

// ANIMATION OPTIONS
myPanel.states.animationOptions = {
  curve: "spring(100,12,0)"
}

Framer中，大部分动效属性都可调节。Framer相当于一个大沙盒，想做动效？随便玩！

交互

Framer提供了一系列交互设置，称之为事件，包括了敲击、双击、拖移等更多。虽然手势不是很多。但是可以扩展——

Prototyping swipe and drag gestures with Framer 3

敲击交互效果：

// INTERACTIONS
myPanel.on(Events.Click, function(event) {
 myPanel.states.next("hide");
})

当在图层上侦测到交互事件，就可以触发很多东西，例如状态改变产生动效果。

原型模板

在使用Framer进行移动原型设计时，我们额外在HTML和JavaScript文件中添加了一小段，以便在iOS环境下效果更佳真实。

首先我们关闭了设备中默认滚动效果：

// Disable default scrolling
document.ontouchstart = function(e){
    e.preventDefault();
}

这样Framer就能更好地处理拖移事件，避免和浏览器的滚动操作有所冲突

在一些原型设计中，当用户倾斜设备时，我们提供了视差滚动效果。这需要代码支持，下面这段代码会根据设备的倾斜来移动背景图像：

// Shift background image based on device tilt
window.addEventListener('deviceorientation', function(eventData) {
  eventData.alpha
  eventData.beta
  eventData.gamma
});

window.addEventListener('deviceorientation', function(eventData) {
  var yTilt = Math.round((-eventData.beta + 90) * (40/180) - 40);
  var xTilt = Math.round(-eventData.gamma * (20/180) - 20);
  if (xTilt > 0) {
    xTilt = -xTilt;
  } else if (xTilt < -40) {
    xTilt = -(xTilt + 80);
  }
  myBackground.y = yTilt * 1.5;
  myBackground.x = xTilt * 2.5;
  
}, false);

除了浏览器外，也可以考虑添加应用图标，启动屏、状态栏样式等等，让原型可以从用户的主屏中启动，而无需浏览器浏览，这样原型看起来更加像是原生应用。在iOS中，可以通过在HTML中添加源标签和合适尺寸的图像来实现。

这样，当用户在手机Safari中打开原型时，他们可以将原型添加到主屏幕中，大家若想实现，可以参考这篇文章——check out this post.

总结

在用Framer.js中花费时间进行原型制作并成功后。我们可以迭代、产生不同版本，并能快速从用户处获取反馈。而且用户、测试者可以直接在多种设备中与操作我们制作的原型。

原型工具有很多，解决问题的面向也不同。Framer是一款强力工具，值得学习。

如果对Framer感兴趣，请看这里website,examples 和 documentation.本文的模板和工程文件可以在下面下载：

Get the Template

View or Download the Sample Project

View Aurora Prototype