交互设计工具protopie入门第一集

软件介绍

Protopie（菠萝头派）是一款交互原型设计工具，与Axure RP,墨刀等相比，它更加轻量级，集成的功能更吸引人，可以调用iphone系统的陀螺仪，3Dtouch等等

官方网站 http://www.protopie.cn  里面已经提供简单的介绍和教程，在这里不进行赘述，在之后更新的文章中会通过我自己的使用和体验对其中的各个小功能进行尝试和介绍，如有使用不当或者描述不清的请各位读者回复或者给简信，谢谢各位

下面是一些来自网络的介绍：

对于APP设计师来说：

在 ProtoPie 上使用时不需要编写代码，通过后者可视化的设计即可完成相应功能的增减。比如，在一款软件设计时，设计师无需记住具体的数据, 通过时间轴拖动相应版块就能完成操作。在完成软件设计后，设计师可以将其导出到 ProtoPie 的应用中供开发者直接查看。

对于移动开发者和APP产品经理来说：

可以直接在“设计师版”的应用中看到设计师的功能设计、交互逻辑等，还会获得一份由 ProtoPie 提供的具体参数数据，并按照这份数据进行开发。如此一来不仅减少了设计师和开发者的沟通成本，也为设计师探索新的交互设计提供了平台。

如何下载

首先打开Protopie官网http://www.protopie.cn：

首页

点击下载免费测试版之后会跳转至页面底部：

下载

点击免费下载测试版 for Mac就可以下载软件了，之后在相应目录打开安装包后即可进行软件安装，安装完成后就可以看到菠萝头派啦

Mac测试版 ProtoPie

这就是ProtoPie的图标啦，看起来非常像一个派啊，作为一个吃货表示很有食欲

移动端软件安装

装了电脑版之后在编辑文件后需要在移动端进行调试和查看效果，那当然少不了移动端的软件安装了，我们可以通过APP STORE直接搜索ProtoPie Player进行下载

苹果商店下载

第一次尝试

既然装好了，那我们赶紧打开体验一下，首先打开PC端的ProtoPie

Protopie主界面

红色框区域可以切换界面大小，这里我们选择相应的设备大小就可以，其他的功能在本集中就不进行详细介绍了

然后我们随便拖动一张图片放置于页面上方，就像是这样

Hello ProtoPie

第一次使用的时候我们需要将手机与软件相关联，先点开界面右上角的关联IP，是一个二维码，等一下我们需要通过手机扫描

二维码

然后我们就需要打开我们移动端的APP了

移动端界面

红色方框区域就是二维码扫描，点击后用摄像头对着我们PC端上得二维码即可相互关联，关联后就可以在二维码下方的设备中看到自己的设备已经被添加进了软件，如果不使用这种方法的话也可以点击第二个按钮，然后输入二维码边的IP地址即可完成连接，连接成功后界面如下

连接成功

点击RUN或者电脑界面上的三角播放按钮后就可以运行啦

移动端运行效果

在手机上看到了我们刚才制作的第一个界面

至此，我们就成功完成了软件的安装及第一次调试，接下来更多的功能大家可以自行尝试，也可以等待教程的不断更新

那这一次的菠萝头派第一集就到此结束了，如有疑问可以随时简信我，每天中午都会查看并回复，谢谢大家

预告

在第二集中，我们将会对一些简单控件的应用进行讲解，包括界面的功能区分类等等