Framer.js:一个交互原型设计框架

交互原型设计框架 Framer.js 今天发布了 Mac 桌面软件 Framer Studio,算是为移动交互设计领域增添了又一款强有力的生产力工具。

Framer.js 的创始人 Koen Bok 和 Jorn van Dijk 分别是之前 Mac 平台著名的软件开发公司 Sofa 的创始人和设计总监,随着 Sofa 几年前被 Facebook 收购,他们也都加入到 Facebook 做起了产品设计,但最近两人离职后创立了 Podium,专注于打造小而美的生产力工具,当然目前还只是针对 Mac 平台,可以说是建立了第二个 Sofa 吧。

58a2d09534e6152ad1a2a4165ce437c3

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

81709

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

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

图层

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

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

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

81658

 

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

状态

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

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

81692

 

 动效

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

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

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

81691

 

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

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

交互

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

Prototyping swipe and drag gestures with Framer 3

敲击交互效果:

81698

 

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

原型模板

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

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

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

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

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

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

总结

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

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

官方网站:http://framerjs.com/

1 收藏

资源整理者简介:卢伟

设计师、极客爱好者 个人主页 · 贡献了320个资源 · 5 ·    


直接登录

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1439 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer