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

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

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

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

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

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

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

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

△ 外媒对ProtoPie的评价

下面具体来说一下。

优设独家5元优惠券 →  https://partner.lizhi.io/uisdc/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天试用，之后就要付费了。

优设独家5元优惠券 → https://partner.lizhi.io/uisdc/protopie

写在结尾

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