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

PROTO·PIE

本期内容

这是protopie入门教程的第二集，主要内容是讲解软件功能分区，以及基础的4大元件功能的使用和介绍，以帮助大家初识protopie，为了更好地方便大家记忆，也按照惯例在内容介绍的过程中做出一个原型，以便于读者在看完教程后能够看到相应的效果，加深记忆

为什么选择protopie

这是来自官方的内容：

1. 低学习成本

ProtoPie的操作原理直观易懂，并具有和其他图像编辑软件相似的用户界面，只要是有过一点使用图像编辑软件经验的朋友，都可以快速掌握ProtoPie。

2. 无代码

ProtoPie无需用户编写任何代码就可以轻松制作精益原型。摆脱复杂的代码和函数运算，轻轻松松拼接交互模块，就可以制作出丰富多样的交互效果。

3. 多点触摸手势&传感器 （最吸引我的）

ProtoPie支持多点触摸手势。因此无论是双指还是三指，都可以成为你交互原型的一部分。除此以外，智能手机内置的传感器也可以作为触发动作被使用。交互不再限于屏幕上的点击动作，声音触发、倾斜触发、甚至智能设备间的通信等都可以被添加到交互原型中，使原型扩展到更多的服务设计领域。

4. 支持手机演示

ProtoPie支持在真实的手机上演示原型，并且可以向多部手机同时发送。无论是多人会议还是用户调查，ProtoPie可以使你在多种场景下展现自己的设计。

顺便提一下自己觉得略显不足的地方：目前还不支持软件内绘制，只有简单的四大控件，需要在使用中配合其他绘制工具，笔者使用的是sketch

功能分区（如果有了解了的小伙伴可以跳过）

功能分区在官方的介绍中有讲到，先让我做一个安静的 美男子 搬运工

功能分区图

工具栏

在这里可以对画布大小，场景个数以及连接设备等一些基本设置进行调整，还可以添加图层以及交互模块。

图层栏

在这里可以观察所有图层间的关系。

视图窗

在这里可以看到图层是如何在手机屏幕上显示的。

交互栏

作为ProtoPie独有的用户界面，可以在这里组合拼接交互动作。

属性菜单

在这里可以对图层属性或交互属性进行更详细的调整。

ProtoPie不仅可以制作单页的交互动作, 通过位于工具栏的‘Scene‘ 功能可以制作多页连贯的交互原型。

---

下面是笔者自己的一些理解

工具栏：

工具栏

首先，我们可以将工具栏分成4个区域，从左至右分别为元件区（插入元件或者叫插入图层），场景区（调整画布大小，多场景切换和添加），事件区（添加触发交互的事件，与交互栏协调使用），调试区（连接手机进行调试）

图层栏：

元芳

点击工具栏中的元件后会在当前视图中插入元件，然后可以调整各种属性，这里不能够按住option拖动进行复制，但是可以command+c-command+v，会在原有位置复制出一个一模一样的元件，元件名称为原元件名称+copy

视图窗

这里可以理解成画布，白色区域内就是我们在手机上看到的效果，这里需要注意的是元件可以放置于场景外，例如我们需要做一个点击飞入的效果，这时候可以将元件在初始状态置于场景外，在触发相应事件后做飞入动作

交互栏《=====重点，重点，重点

我们所有的交互事件和动作都是在交互栏中进行设计和安排，能否做好一个导演就看对交互栏的理解程度和能力啦，在本集中不详细写，我想在之后的更新中会花大量篇幅去学习包括描述它

属性栏

不用多说，各种属性都在这里调整，元件属性，交互属性，传感器属性……

四大元件

四大元件就是 图片，矩形，原型还有容器

前面3者很好理解，容器在protopie中有很多使用方式，会在后续陆续地展开讲解，如果有没有提到的也请读者们简信或者评论建议，会尽量地把更多的使用方法更新出来共勉

元件属性

圆形与矩形的属性是一样的，这里就不重复截取了

其中的属性都是浅显易懂的，其中需要注意的是透明度，如果一个元件图层的透明度为0%时，是无法进行触发时间的，就是说如果你对一个元件做了交互事件，但是当它透明度被调整为0%时，无法触发，待它透明度发生变化时，触发时间依然可以顺利运行

接下来我们进行一个案例的描绘，首先我们在页面中添加4个元件，每种一个

元件

在场景中依次添加了4个元件，矩形，圆形，图片，容器，在这次的教程中，实现一个类似打台球的效果，拉杆撞击圆球，然后推动图片置顶，具体的交互动作不在这里详细说明，会在文末附上下载地址，有需要的可以下载运行体验

本次介绍容器的作用之一，触及区域控制，上文提到了如果元件透明度为0时无法进行触控事件的触发，所以绘制透明矩形显然不能够在这里使用了，还有一种绘制矩形，不调整元件透明度而填充Alpha值为0的颜色，也可以接收触控事件。

我们想要实现的效果是拉动球杆进行击打，但是球杆描绘地非常小，所以用一个容器作为触及区域，只要触及容器区域，即可触发相应的事件，我把矩形放置于容器内部，便于理解，也可以不放在容器内部

接下来我们需要规划整个动作流，我希望在我按下触控区域时拉动拉杆，在交互区进行动作添加，选择按下（这部分内容如果看的不够清楚的话，在之后介绍触控事件的文章中详细介绍后相信大家都能够分得清清楚楚，不必要担心）

按下事件

然后在抬起手指时，希望进行击打，小球移动，图片移动一系列的操作

抬起事件

相当简单吧，需要注意的是自己调整我们触控事件的目标和交互动作的目标，把控时间轴和动作流

附件

protopie入门第二集击打小球

下期预告

在第三集的入门教程中，会介绍四大元件的属性详细的设置方法，可能会加入常用事件的添加方法，方便大家快速上手，边玩边学

喜欢我的可以点一下关注，每周六更新，谢谢大家