56

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

 5 years ago
source link: https://www.uisdc.com/interactive-prototyping-tool-protopie?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

RrErmuj.jpg!web

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

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

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

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

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

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

IbaEv2m.jpg!web

△ 外媒对ProtoPie的评价

下面具体来说一下。

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

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

miEFJja.jpg!web

△ ProtoPie官网上写的背书公司

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

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

jeEjua7.jpg!web

△ 支持Mac和Win64、Win32

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

aqyQNjf.gif

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

三、真假难辨的保真度

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

m6bayeA.gif

△ Dashboard设计 – 鼠标悬浮效果

FBvAZ3n.gif

△ 键盘输入效果

AVVzAfF.gif

△ 利用表达式制作

UbqAray.gif

△ 金融App – 选择银行卡

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

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

6JRRrem.jpg!web

△ ProtoPie交互制作逻辑

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

jueYnqR.jpg!web

△ 交互思维逻辑宝典

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

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

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

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

RVzuYjQ.jpg!web

△ ProtoPie and Adobe XD CC

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

yYJf2yi.jpg!web

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

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

NFFJ3eR.gif

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

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

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

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

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

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

独家优惠来了!

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

写在结尾

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

RFBnYne.jpg!web


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK