简单好上手!帮你快速做出高质量交互原型的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

相关推荐

  • Don't make me think 读书总结

       这本书算是一本很入门的交互设计图书,很多内容其实都是通过以前的积累已经知道的内容。我相信对于大家来说,“要记得在每个页面上加导航栏”这种提醒已经不需要了。所以,我在下面列出一些看完过后,觉得可以温习…

    2015-08-20
  • 为什么蓝色会成为UI设计中最常用的色彩?

    蓝色依然是一种安全的色彩,当你的产品或者网站契合蓝色的气质的时候,不妨选择它,但是始终记住一点:选择适合自己的产品的色彩,才是正确的选择。

    2017-06-08
  • 由爱奇艺视频弹幕引发的思考

    弹幕一词最早用于军事领域,指代对某一区域进行密集火力攻击。2006年,日本视频分享网站Niconico首次尝试在视频画面上实时显示用户评论。由于评论在屏幕上快速飘过的形态类似飞行中的子弹,因此它被形象地称为“弹幕”。
    被称为“A站”的AcFun最早在2007年上线,是国内首个推出弹幕视频的网站。与Niconico相似,早期的AcFun同样聚焦动漫和游戏内容。2009年,哔哩哔哩(Bilibili,又被称为“B站”,最初站名为Mikufans)成立,其目标是为用户提供一个稳定的弹幕视频分享站点。

    2017-06-04
  • UED设计流程和方法

    看惯了淘宝阿里旺旺的UED团队做的图,突然有点冲动,组建一个属于我们自己的UED。没有阿里、百度、腾讯等大型互联网公司有专门的UED团队成员,但我们凭着自己团队合作成立了属于自己的手机客户端UED。 1、需求调研…

    2014-10-29
  • 聊聊交互新人容易犯的七个错误

    新手们在学习交互设计时永恒的问题

    2016-07-21
  • 一款运动类APP的产品交互设计全过程(两万字干货)

    这次的分享是前不久完成的一次比较完整的交互设计工作,基本上涵盖了前、中、后期的完整流程,包括前期的定位分析、用户调研、业务需求分析、目标用户画像、用户需求分析、关键因素分解、路径分析,完整的交互设计文档,以及后期的可用性测试,希望对需求分析、交互设计或可用性测试感兴趣的朋友们有用。1第一卷 需求分析1概述1.1 产品目标以运动为主题,选定某一种运动形式,完成一款 APP 产品的交互设计,内容集中在统计和分享运动量方面。1.2 关键词分解...

    2018-01-31
  • 在做交互设计时,你需要知道这几大定律

    形式是跟随功能的,功能是满足用户需求的。尊重你的用户,让每个产品的细节都是合情合理的,然每一寸体验是“走心”的!

    2017-05-20
  • 交互设计基本原则(第二部分:默认和可见性)【UXRen译#157】

    作者:Bruce Tognazzini  |  翻译:邱金,校审:Chen Jing   一、默认Defaults 1.1 原则:输入框的默认值应该很容易“吹走” 当用户激活一个输入框,当前条目应该自动被选择,以便按退格/删除键或开始键入来清空条目…

    交互专题 2017-08-07
  • 困扰多年的选择困难症,居然让交互设计给我治好了...

    觉得自己患上了选择困难症?也许这并不是你的错,而是对方给予的选项太多。 Hick’s Law(席克法则)中说道:一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长。用数学公式表达为反应时间 T=a+b log2(n…

    2015-09-10
  • 制作UI 设计规范时,你遇到的最大瓶颈是什么?

    上一篇文章是给大家提供一个制作UI设计规范的大体思路,这一篇准备来聊聊我们在具体执行过程中遇到的最大问题、瓶颈是什么!
    此篇文章适读人群:想进阶的初级UI设计师、有追求的初级交互设计师。

    2017-05-12