谁说交互原型制作难?那是你还没用过这个神器!

一小时上手,分分钟作出高大上交互动效。Win&Mac双平台,支持Sketch和AdobeXD无插件导入…

孔子曰:「工欲善其事必先利其器!交互制作太不易,选个工具善待自己。」我本人是做UI设计的,同时也是个工具癖,市面上新出的工具都会去用一下,为的就是以后工作上有需要的时候,能快速判断应该选择哪个工具。​

今天就来说说设计工具里面的小分支:交互原型工具。选个好的交互工具很重要,而好的原型工具应该具有以下基本特质:

现代人,​效率​很重要。学习成本大,用起来还麻烦的,就算了吧 一定可以制作​逼真​的交互:设计本就比较主观,交互体验更是一个摸不着的东西。没有一个可以演示,且逼真的原型,仅凭几张图,你的说服力在哪里? 工具使用​逻辑​要符合开发逻辑:交互的开发不是时间轴的逻辑,更不是前后页面一连接的逻辑,如果你是这样思考,那我保证,当开发说「这个难实现」的时候你一定是一脸不理解的。

符合上面要求的,市场上不少见,比如Principle,Framer、Axure、ProtoPie等。而我自己最终选择了ProtoPie。理由有六:

小白也可以马上学会,我当时用了30分钟做出了第一个交互原型 支持Sketch、​Adobe XD​等无插件导入 支持​Windows​和Mac,以及​安卓​和iOS上的预览 支持线上分享,离线预览 高保真,除了页面串联还要能打造交互细节(后面有作品) 隐藏福利:支持传感交互 + 多屏幕间的互动

△ 外媒对ProtoPie的评价

下面具体来说一下。

一、国内外大公司为其背书

ProtoPie在2017年1月正式上线,国内有阿里、一加等很多团队在用,国外有谷歌、Line、星巴克在用。Oneplus首席设计师Crayon和支付宝团队在采访中都提到过:「​ProtoPie是设计流程中重要的一环​」。

△ ProtoPie官网上写的背书公司

二、支持Windows和Mac,可在安卓和iOS演示

ProtoPie绝对是Windows用户设计师的福利。​Windows不知道得罪了谁,很多设计工具都只有Mac版。所以Windows设计师,你们没得选择,只有ProtoPie了。好在我们公司有给配Mac(贱贱的笑)

△ 支持Mac和Win64、Win32

ProtoPie由制作部分 – Studio和演示部分-Player组成。这个Player是真真的不错:除了可以保存原型方便实时拿出来查看,还可以在离线状态下用USB连接Studio。但我个人最最最最喜欢的是​演示速度调节功能​,给开发看细节逻辑的时候经常用到,如下:

△ 慢速演示,一切尽收眼底

三、真假难辨的保真度

追波​上随便搜一下ProtoPie,就可以看到手机app、平板、横屏、网页、车控屏、智能冰箱、微波炉等多种平台上的交互设计。原型保真度让我很难分清是原型还是真实的产品。你也来看看下面这些我摘自Dribbble的作品,够逼真不。

△ Dashboard设计 – 鼠标悬浮效果

△ 键盘输入效果

△ 利用表达式制作

△ 金融App – 选择银行卡

四、交互制作逻辑清晰,小白也可以分分钟上手

上面的作品看起来很高大上,感觉难以企及,其实再难的交互效果都是由​触发动作、反应动作、对象​,三者拼接起来的。不知道大家有没有看过《微交互》这本书,里面就提到了和这个类似的公式(触发+反应+规则+循环)。而ProtoPie就是还原交互本质,不管是高手还是小白,都可以遵循这个本质,马上上手。

△ ProtoPie交互制作逻辑

在ProtoPie里,你需要做的就是把下面触发动作和反应动作拼到一起,逐渐组成最后的完整原型。

△ 交互思维逻辑宝典

直接上视频吧,帮大家瞬间秒懂:(两个交互模块以拼接,搞定!)

△ 查看动态ProtoPie制作交互逻辑 – 小白设计师也可马上举一反三

五、支持Adobe XD和Sketch无插件导入

根据需要,可以选择带入整个画板或单个图层,导入后不需要重新排版,直接开始添加交互动作即可。

△ ProtoPie and Adobe XD CC

六、交互不再停留在界面元素,传感交互+跨屏幕交互是新趋势

△ 多个屏幕间的互动将是设计新趋势

生活中屏幕越来越多,触发方式也增加了语音、手势、倾斜角度等。那么IoT等产品的设计师要使用什么工具制作交互原型呢?ProtoPie站在技术前沿很好地填补这个空缺,推出了无代码传感交互制作功能。现在支持麦克风、陀螺仪、指南针、距离、震动等传感。

△ ProtoPie 传感交互-3个模块无代码完成语音交互界面

除了传感,ProtoPie也是独家支持无代码跨屏幕交互。什么叫跨屏幕?手机遥控电视;手机点击音乐播放后电脑上播放;多部手机扫描同一个平板上的二维码…信息的输入和显示在多个屏幕上完成时,就称为跨屏幕。

△  查看动态ProtoPie制作的跨手机和平板的游戏互动。

不仅是屏幕间互动,软硬件的互动也完全没有问题,比如arduino。(估计小米的设计师会比较喜欢这个)这个功能我还没用过,就不在这儿班门弄斧了,懂硬件的大牛可以再去找找相关资料。

七、价格99美元,永久使用,一年更新

官网​注册会员,可以免费获得17天试用,之后就要付费了。

独家优惠来了!

正值双11,优设和ProtoPie 合作给读者专属优惠,限时半价活动,截止到24号。一天仅需一块钱,就能永久提高工作效率,抓紧时间咯 → 优设专属购买链接(由于购买人数较多,网页打开速度有点慢,请您稍等片刻)

写在结尾

交互设计不难:目标用户+用户应采取的行动+给个动作的目的+需带给用户的情感每个交互的设计只需都把这几点考虑清楚。 原型设计不难:工具很多,上面是我选择的标准,如果你和我有相似的需求,别犹豫,开始学习ProtoPie吧。 小白入门交互不难:多模仿,多训练思路,从学习工具开始也是一个不错的上路方法

 

优设大课堂

文章来源:

Author:3年2班程远
link:https://www.uisdc.com/interactive-prototyping-tool-protopie