简单好上手!帮你快速做出高质量交互原型的ProtoPie

编者按:近年来,交互设计被越来越多的提及,并且还产生出了新的工作岗位「交互设计师」,而且交互设计在产品设计中所占的地位也越来越重要。我也是一直想转交互,了解过Flinto、Principle、Framer、Origami等等,但不是原型保真度不满意,就是学起来太难,或者就是各种代码表达式,很难上手。

简单好上手!帮你快速做出高质量交互原型的ProtoPie

编者按:近年来,交互设计被越来越多的提及,并且还产生出了新的工作岗位「交互设计师」,而且交互设计在产品设计中所占的地位也越来越重要。我也是一直想转交互,了解过Flinto、Principle、Framer、Origami等等,但不是原型保真度不满意,就是学起来太难,或者就是各种代码表达式,很难上手。

我对交互工具的要求:

  • 别让我写代码
  • 支持Sketch导入
  • 支持Windows和Mac(因为我有两台电脑)
  • 协作时方便分享,最好线上线下都可以
  • 保真度一定要高,不能只停留在页面跳转

一天在网上闲逛的时候,无意中看到一篇文章说有款原型设计工具获得了设计界大奖——红点奖「红点奖是设计界3大奖项之一」点进去一看是一个叫ProtoPie的工具。谷歌了一下: 韩国团队开发,2017年1月上线,国内有阿里、一加等很多团队在用,国外有谷歌、Line、星巴克在用。

Protopie

http://www.protopie.cn/

简单好上手!帮你快速做出高质量交互原型的ProtoPie

简单好上手!帮你快速做出高质量交互原型的ProtoPie

△ ProtoPie官网截图

其实之前听圈里朋友提过,但没用过。既然这次又被我碰上了,索性就下载试一下吧。下面是ProtoPie的测评:

节约时间,先说结论:

  • ProtoPie适合做单页面移动端的原型
  • 保真度比Flinto和Principle高,学习难度比Framer要低(很多)
  • 交互全,原型制作时间平均在1-2个小时左右。(单画面的交互动作)
  • 传感交互是亮点,尤其是手机和硬件Arduino交互的功能眼前一亮
  • 工具学习时间 2个小时(有可能和我学过一些其他工具有关,挺快的)
  • 适合制作微交互原型,如果只制作页面跳转有点屈才

一. 大福利:支持Windows和Mac,拥有中文界面

像我这种一台Windows一台Mac办公的设计师,简直太良心了。用Windows的设计师都知道,除了Adobe家大业大,知道开发Windowns的设计工具以外,留给我们可选择的交互工具寥寥无几,ProtoPie可以说绝对是Windows用户设计师的福利。ProtoPie说是支持Win10,不过在我的Win7上运行似乎也没有什么毛病。

简单好上手!帮你快速做出高质量交互原型的ProtoPie

△ 支持Mac和Win64、Win32

其实英文界面对我也还好,不过有中文界面的话,确实上手的时候会轻松很多。

简单好上手!帮你快速做出高质量交互原型的ProtoPie

△ ProtoPie欢迎界面

二. 界面设计:功能区分清晰,不需要写代码,操作简单

简单好上手!帮你快速做出高质量交互原型的ProtoPie

△ ProtoPie的直观界面

简单好上手!帮你快速做出高质量交互原型的ProtoPie

△ ProtoPie交互制作逻辑

ProtoPie的逻辑其实和我跟开发人员说交互时候的逻辑挺像的。官网上有这样一个表,列举了移动端上常用到的交互动作,动作虽然不全,但这种思维方式是我很推崇的。

简单好上手!帮你快速做出高质量交互原型的ProtoPie

△ 交互思维逻辑宝典

三. 学习成本低:有中文教程,用了2个小时全部学完

用ProtoPie做一个交互只需4步:

  • 添加素材
  • 添加点击动作
  • 添加反应动作
  • 预览效果

点击动作和反应动作,ProtoPie都给好了,根据需要选择就行。整个过程和玩拼图一样,很简单。

官网也提供了详细的教程:

简单好上手!帮你快速做出高质量交互原型的ProtoPie

四. 交互效果:交互细致,支持条件判断

ProtoPie在做移动端交互上很牛,尤其是有条件判断(If else 这种)所以做的原型都很高大上。比如下拉刷新、立体旋转等等。其实自己也有做,不过没有官网上的绚丽,就先不出来丢人了,等回头再研磨一下再发,下面是官网上的案例。

简单好上手!帮你快速做出高质量交互原型的ProtoPie

简单好上手!帮你快速做出高质量交互原型的ProtoPie

简单好上手!帮你快速做出高质量交互原型的ProtoPie

简单好上手!帮你快速做出高质量交互原型的ProtoPie

△ 官网4个小案例

这些在其他工具上做就太费劲了,页面和代码一堆一堆的,做不做得出来还不一定。

五. 预览和分享:iOS &安卓手机、网页、电脑即时预览

现在我已经陆续在工作中用ProtoPie,并推荐给开发了。是的,不是设计师,是开发。我们的开发和我不在一层楼,能用企业QQ说的就敲字,说不清的时候直接丢一个Pie链接过去,让他自己看效果。

预览和分享方法一共三种:

  • 在电脑预览窗上看,实时同步
  • 发送到手机上的ProtoPie App,保存到手机,随时可以离线查看
  • 上传到网页上,生成链接,发到工作群里大家一起看

最后,看的人不需要安装ProtoPie,有个链接就能看,良心功能啊。

六. 传感交互:手机原型能控制智能灯?

这个功能一定要留到最后压轴说,很神!先看下面的视频。请注意,所有设备上的画面都是ProtoPie做的原型!

跨设备交互,很高大上的感觉!以前从来没想过,像我这种表达式代码不太灵的人还能做这种交互。而且ProtoPie上做起来超级容易。好心写一下做法:

  • 新建一个文档,像配图左边一样插入触发动作和发送
  • 在新建一个文档,插入接收和移动
  • 在发送和接收的竖向那里写一样的代码,比如123
  • 一个文档的交互发送到手机1,另一个发送到手机2
  • 单击手机1,手机2上的图层就会移动了

简单好上手!帮你快速做出高质量交互原型的ProtoPie

七. 支持Sketch导入,多触点手势

用Sketch的话这个功能不多说,正是我需要的。导入后不需要重新排版,直接开始加交互动作就可以。

支持5根手指的手势。不过你的设备屏幕不够大,一般2个足以了。

价格:99美元,永久使用,一年更新。

如果觉得有点小贵,那可以趁现在ProtoPie官网做Black Friday活动,可以半价购买使用,还可以免费试用哟。

直接戳链接开始免费试用,体验双11的半价活动!http://www.protopie.cn/

其实交互设计并没有你想象中的那么难上手,想要做出高大上的交互效果就是如此简单。

欢迎关注作者的微信公众号「UIfaner」

简单好上手!帮你快速做出高质量交互原型的ProtoPie

「从新人到大牛的交互设计完全修炼手册」

想做交互设计师?先来了解一下它是什么!

《5分钟看完!一份简单易懂的交互设计入门手册》

阿里资深设计师手把手带你认识交互设计!

《交互设计那些事儿(一)》

《交互设计那些事儿(二)》

多位资深前辈经验合集!交互设计师自学指南!

《写给完全零基础新人的交互设计入门指南》

《超全面!给交互设计初学者的完全自学指南》

《高手总结!交互设计基础知识的精华版参考手册》

《交互设计师修炼指南!教你从零开始成为优秀交互设计师》

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/34436/

(0)
震天下震天下
上一篇 2017-11-06 13:55
下一篇 2017-11-13

相关推荐

  • AI 交互设计怎么做?谷歌详解自家 AI 相机设计思路

    文 | 何忞来自雷锋网(leiphone-sz)的报道雷锋网按:日前谷歌在其官网发布博文,文中详细介绍了 AI 相机 Google Clips 的一些设计思路。雷锋网将其编译如下正如过去曾经发生过的移动革命以及再之前的网络革命一样,机器学习正在让我们反思、重构、重新审视我们生活中已经拥有的一切。在 Google 用户体验(UX)社区中,我们开始了一项名为“以人为本的机器学习(HCML)”工作项目,来指导和帮助我们重构世界。站在这样的视角...

    2018-02-03
  • 单选、复选、开关应该如何使用?

    今天来探讨工作中遇到的一个问题:单选、复选、开关。先说一下前提,淘宝的确认订单页面,积分抵扣是用开关做选择的,而唯品用的是复选框,同样都是选择,复选框和开关到底哪个更合适?和同事讨论了半天也没得出一个明确的原则。因此想写篇文章总结一下单选、复选、开关应该如何使用。

    2017-05-16
  • 在不同屏幕和设备上,创建用户体验设计的8个步骤

    从具有微型屏幕的智能手表到最广泛的电视屏幕,其中所开发的内容,应以便在各种屏幕尺寸之间进行查看和交互。但针对不同设备的设计更多的只是调整在不同的屏幕上显示的内容大小。它涉及到很多复杂性:设计师需要把每个设备中的用户体验最大化,以便用户相信实际上应用程序是为他们的设备设计的,而不是简单地拉伸到适合屏幕。为了创建一个好的用户体验,有必要制定一个针对各种设备和屏幕尺寸的策略。

    2017-04-29
  • 一个产品设计师必须会讲的故事——用户体验设计中的故事板

    作为一名设计师,情绪板的运用想必你已轻车熟路了,然而情绪板其实还有个小姐妹不常被人们提及,她就是故事板。【情绪板】常用于品牌与形象设计领域,用来发掘用户对视觉体验的需求,而【故事板】则常用在用户研究和交互设计领域,通过还原用户使用场景来深度挖掘用户对产品整体体验的需求,是提升用户使用体验的有效研究方法。很多希望从视觉设计师过渡到体验设计师的新手设计师,心里很清楚要关注和挖掘用户除视觉以外的其他体验,但是却不知如何下手。各种用户研究方法虽...

    2018-05-08
  • 响应式网页图片库设计的九个注意事项

    响应式设计 无疑是当前网页设计 领域当中,不可忽略的必要组成部分。而响应式网页中的图片显示又是老生常谈的问题,许多争论集中在响应式网站的图片应当怎么展示。继续延伸开来,那么响应式网站中的图片库应当如何设计呢?

    2017-05-25
  • 被忽略的交互设计本质

    谈论交互设计本质是起源于日常的很多谈论,不管是向朋友介绍自己从事“交互”相关岗位,还是需要向亲戚通过三言两语解释自己的工作内容;甚至在工作的上下游沟通中,也经常会被问道“你怎么就判断用户是这么想的”“产品如何从0(概念)到1(页面界面)的”;这些问题促使我想要追本溯源,捋顺一下交互的由来、工作内容,以及依照什么方法执行等问题。(1)把冰箱门打开→ (2)把大象放进去→ (3)把冰箱门关上(1)要充值的手机号码→(2) 确认充值多少钱(用“确认”是因为很多软件提供了默认金额)→ (3)付款搞定。

    2017-05-15
  • iOS和Android规范解析——搜索

    各位亲爱的读者小伙伴们,前面一系列文章为大家介绍了各种弹出物的用法,从今天起,我们开始介绍其它的非弹出类控件。此篇要说的是搜索。

    2017-04-29
  • 网页设计中视频运用的7个技巧

    随着网络传输速度的提升,视频在网页中的应用越来越多,也越来越广泛,带宽和流量对于网页视频的限制已经不再像5年前那么明显。而移动端设备的性能的提升,在移动端网页中使用视频也并不显得吃力。所以,今天我们常常能在不同的网页中看到各种不同功用的视频。

    2017-05-08
  • 跨终端体验设计,绕不开的用户槛儿

      随着平板电脑的普及,越来越多的手机端APP将自己的应用拓展到Pad端,来为用户提供更丰富的多终端体验。此前一些设计师从视觉设计的角度探讨了多终端产品的设计,作为一枚用研,除了视觉体验,我们会更多地去…

    2015-04-18
  • 用户体验设计中的功能动效

    作者:Amit Daliot 出处: http://www.smashingmagazine.com/2015/05/functional-ux-design-animations/ 一个优秀的用户体验设计师可以很容易的解释设计概念中每个决策背后的逻辑。通常包括信息架构,页面内容的层…

    2015-11-08