用Figma做完设计后,我该如何制作交互原型

去年,当我认识Figma这款线上协作设计工具后,便爱上了它。没想到今年Fimga在国内也火得不要不要的,不过作为交互设计师,我对设计工具的要求可不仅限于视觉设计,交互原型也是我关注的一部分。

一、为什么不用Figma自带的原型功能,却要找一个新的工具?

Figma自带的原型功能其实也很直观,通过连线的方式就能作出交互动作。但我们公司的用户测试也好,领导/客户展示也好,必须要用高保真的交互原型。执着于制作高保真原型的原因主要有以下几个方面:

  • 可以测试我自己的交互想法:当然这意味着我更愿意在真实设备上测试
  • 更容易说服领导/客户:越真实,越高保真,你的设计就越有说服力(尤其是对付那种异想天开的金主爸爸,你懂的)
  • 用户测试结果更准确:测试环境越真实,你得到的反馈也更真实。
  • 方便和开发对接:说一万句比不上一个高还原的交互原型,所有细节让开发自己亲测比花一天时间写说明文档更有效率。

那我说的高保真要保真到什么程度呢?

这个根据项目要求每次都不一样,但既然要选一个工具,我肯定希望这个工具既能制作简单的跳转也能制作下面这种带有逻辑判断的原型。

转自dribbble作品 https://dribbble.com/shots/10687809-Calendar-Animation

二、你用Figma吗?那一定试试ProtoPie的Figma插件

我发现ProtoPie的契机很偶然,月初Figma官方推特账号上介绍了一款交互原型工具插件叫ProtoPie。看英文大致意思是说使用这款插件可以直接将Figma的素材导入至ProtoPie,还能做出高保真的原型。既然是Figma强力推荐的,那我肯定要试试。

于是我安装了插件,还免费试用了ProtoPie

ProtoPie打开了我对交互的新世界!!

平复一下激动的心情,下面详细说一下我如此激动的原因

  • 支持Windows、Mac双平台
  • 支持中文界面,使用完全无障碍!
  • 上手容易,界面清晰
  • 交互效果多(居然还有语音交互)
  • ProtoPie插件真的是太人性了(一会儿重点介绍)

01.上手容易,界面清晰

我最最最喜欢ProtoPie的地方就是他的交互制作原理,真的是一下点到了交互本质。

交互= 对象+触发动作+反应动作

ProtoPie很好地利用了这个原理,他提供了很多触发动作和反应动作模块,然后通过拼接就可以制作一个个的微交互。

02.交互效果多,保真度高

根据上面的原理,ProtoPie提供了很多可供选择的触发动作和反应动作。

最让我吃惊是他们不仅支持常用的手势,还支持多点触摸、传感器、语音交互,软硬件交互。而且用起来真的是超级简单,插入个图层就搞定了。具体的使用方法我这里就不一一说了,大家有需要我再单制作教程。这里我就放几个官方Demo,自己感受一下这个让人泪目的保真度吧。

银行应用原型(3D旋转)
智能电视交互原型(语音交互,软硬件交互)
车载交互原型(语音交互,软硬件交互,跨设备交互)

03.ProtoPie插件:最人性的插件

最重要的东西一定要压轴来说。作为交互设计师,我最关注的还是UI设计师的Figma素材能不能快速且准确的导入进ProtoPie,这样才能让工作流程没有缝隙,所以我着重对Figma的ProtoPie插件做了以下几点测试:

  1. 导入速度
  2. 导入自由度,我能不能自由选取要导入的图层
  3. 我能不能在ProtoPie里编辑导入的素材
  4. 如果在Figma上修改后再次导入的话,之前制作的交互会不会有影响(这是我最关注的点)

04.测试结果

  1. 导入速度根据导入的素材量有偏差,总体来看算比较快。我导入了4个画板,花了大概30秒。
  2. 导入自由度高!可以自由选取一个或多个画板,导入后成为ProtoPie的场景。也可以自由选取一个或多个图层导入,想怎么导就怎么导。
使用素材转自Figma

3.做交互时会遇到修改设计的情况,我不想每次有修改都去Figma里改了再导入。结果证明,我可以在ProtoPie中先把导入的图层转化为矢量图后进行编辑,还能将文本转化为文本图层后进行修改。(非常不错👏)

使用素材转自Figma

但是,当我导入渐变色图层,把渐变色转化为矢量图时出现不能识别的情况,ProtoPie似乎还不支持编辑渐变色图层。希望在之后的版本里能得到改善。

  1. 在Figma上修改了一个图层后再次导入,ProtoPie之前制作好的交互不会被改变!
使用素材转自Figma

对Figma素材导入做了测试之后,我发现用Figma做设计+用ProtoPie制作交互原型的流程非常棒!使用时间不长,先做了一个比较简单的登录页给大家秀秀。

使用素材转自Figma

大家可以先下载ProtoPie,然后在Fimga上安装插件,就可以将Figma的设计稿做成交互原型啦!

05.注册&下载ProtoPie

https://www.protopie.io

06.安装Figma插件

https://www.figma.com/community/plugin/908870217222043020/ProtoPie

UI KIT免费素材共享资源

免费的21个3D人物插画素材

2020-11-9 11:44:56

常见问题教程

figma对电脑硬件要求

2020-5-20 13:43:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索