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

PROTO·PIE

写在开头

首先非常感谢ProtoPie官方的认可，在交流中可以感觉到菠萝头派的团队非常友爱和人性化，也对我个人在该系列教程上提供了大量的支持和帮助。各位读者如果对菠萝头派有更好的建议和反馈，也可以在本文进行评论或者私信我，官方是可以看到的哦，如果没有看到的话我也会在筛选后进行转达，以帮助软件不断地改善和帮助我们更好地在工作中提高效率。

在之后的系列教程中会使用到官方设计师提供的原型，再次感谢

本系列教程为入门教程，因为我个人也不是一个设计师，所以并不是专为设计师们所写，如果想要深入学习或交流的童鞋们欢迎加入我们的交流群

目前消息官方将在本月或者下月推出中文版，像我这样的英语渣终于不用翻译工具啦，鼓掌（啪啪啪啪啪）~

本期内容

这是protopie入门教程的第三集，主要内容是讲解四大控件的属性及相关应用场景

四大控件

图片

图片插入

图片是目前ProtoPie中使用频次非常高的工具，各种图片资源的导入全靠它，因为目前不支持文字编辑功能，所以大家可以将文字用图片的形式导入，个人比较爱用PNG格式。接下来看一下图片的属性：

图片属性

Not to Respond to Touch Input：不响应触摸输入，勾选上了之后该图片控件无法接收触摸事件

Position：位置，这里的X,Y值表示锚点的位置

Size（dp）：图片控件的大小，DP为安卓常用单位，不了解的可以自行百度，大致的概念就是会随着手机屏幕大小自动变大缩小

Rotation（°）：旋转角度

Origin（%）：原点，图片的原点，可以通过左边的九宫格快速设置，同时也可以通过后面填写X,Y的值。这里需要注意的是单位是百分比，例如：X=50,Y=50，就是说原点在图片中心，不要忽略了括号中的单位

Opacity（%）：不透明度，0=完全透明，100=完全不透明，这里值得注意的是当不透明度为0时，无法响应事件，如第二集所提到的那样，但是这里有一个容易搞混的概念，元件的透明度和填充色的透明度是不同的，在下文中会提到

矩形和圆形

添加矩形和圆形

矩形和圆形是ProtoPie现有的两种图形形式，可以满足大多数需求，下面来看一下他们的属性，因为属性相同，所以只截取其中一个：

矩形和圆形属性

相同的介绍过的属性就不重置描述了：

Use as Mask：用作蒙版，可理解为显示该区域内的内容

蒙版

例如图中所示：我想得到一个半圆形，此时我可以勾选Use as Mask，就能够得到我们想要的效果了，同时Mask会将位于其上方的图层全部加入到蒙版中，如果层级很复杂，我们可以使用之后介绍的容器工具，使用打组的功能，将需要的部分放入一个容器中，以避免影响其他的图层

Radius：圆角，同时调整矩形4个角的圆滑程度

Fill Color：填充色

Alpha的值就是填充色的不透明度了，这就是我想重要提到需要大家注意的一个细节，之前说到当元件透明度为0时无法接受触摸时间，指的是元件的Opacity为0%，而不是填充色的Alpha值为0，当Alpha=0，Opacity不等于0时，一样可以接受触摸事件，同时元件是全透明的

容器

按照字面意思，容器就是可以存放东西的器皿，可以将其他的图层放入其中，他们就形成了一个编组，同时这个容器可以接收事件

容器属性

Clip Sublayers：裁剪图层，并非真正意义上对容器中的图层进行裁剪，而是只显示容器区域的内容，就像是容器刚被创建出来的时候是一个很大的透明玻璃瓶，我们把东西塞进去之后，可以看到它里边所有的东西，而当我们勾选了该属性之后相当于这个瓶子就不是透明的了，我们只能够从瓶口看到里边东西的一部分，而容器的大小就是这个瓶口的大小

其他的属性都已经介绍过了，令我稍有疑惑的是既然他是一个容器，为什么需要填充色，而设定了填充色后相当于是给了背景色，里面所有图层都会在它之上，我个人觉得加入这个属性的目的是为了使用者方便地找到容器所在的位置，而不是所有容器都是透明的，不容易调整，不是各位看官有何见解？

后续

那么4大元件就介绍完了，因为最近正好TI火热，本人也是DOTA爱好者，所以用四大元件做了这个

DOTA

其中用到了3种，矩形、圆形、容器，看来没有文字输入功能真的挺麻烦呀，哈哈，其中遇到了一些bug，在把图层置入容器的时候会丢失MASK和旋转角度的数据，大家的使用的过程中可以暂时在置入后重新设置图层的这两个属性以保证最终结果，因为这几天熬夜看比赛，所以这个教程就写到这里啦

附件

protopie入门第三集拼字DOTA

DOTA

在保存文件时发现一个图层的旋转数据无法保存，所以大家在附件中查看的时候红框内数据虽然正确但是并没有旋转，需要设置为其他数值再设为20才可以正常查看，-。- 等待官方攻城狮们优化

下期预告

下期在一位读者的建议下会先更新引导页的制作方式，官网也有相应的教程，可以自行阅读