protopie中文教程

如何将设计好的界面放到手机上进行操作，达到以假乱真的效果？给各位推荐一款最近比较流行的交流动效软件投入派，不仅能实现基础的动效，比如滑动、点击、缩放，而且还支持调出系统组件，模拟真实的使用场景， 比如键盘、相机、拍照、云识别等等。就像你平时使用手机那样，当你在 big 码或者 master go 里面做好设计之后，可以通过插件导入 potalpi 里面做点击效果。里面的操作逻辑也比较 简单，比如最简单的你想要这个正方形，点击后进行移动，那么触发类型选择单机，然后添加移动效果，输入移动后的位置，再点击预览就完成了。获取 figma 或者 principle， 这里的软件能够做到，但是目前他们能够实现的效果还是有 有线图。图派还支持多屏幕交互和硬件结合等等。这类复杂的场景功能非常齐全，而且不限于单个屏幕的交互。它能够实现智能手表与智能手机的配对，也不需要写任何代码，在实际工作场景中也能快速进行交互体验测试。 除了传统的移动端和网页端，还支持车载交互、智能电视等等，满足了不同的场景需求。 做好之后一个链接就能分享给团队其他成员预览交通效果开发也能在上面查看一些运动参数，从而方便了我们的工作流程。如今动校已经成为设计师的必备技能，你就赶紧学起来吧！

好，我们今天看一下如何在 protope 中做单机或者叫点击按钮的效果啊。首先我们需要把在设计软件上做好的界面导入到 protote 中，然后在 protope 的左上角，我们可以看到有个导入啊，点击对应的软件， 可以在他们的官网，可以在他们的官网下载到你软件的插件，那我已经安装好了，我就不演示了，你选择这个画板之后，选择插件直接导入到葡萄配中。 看到已经导入项目了，看起来有点乱，不过没关系，我们可以调整一下，因为从外部导进来后，部分的实量图或者是文字没有被识别，我们可以手动的将他们识别一下 u 键，将它的门板取消。 下一步我们可以看到这个矩形，他其实是不可编辑的属性，那么怎么把它转化为适量的矩形呢？我们可以找到这个图层，然后在他的属性面板上有个转化可编辑模式，我们点一下之后可以看到这个图层的样式， 他就是可以编辑的啊，单独的文字也是一样的，我们找到下一步这个文字目前是不可编辑的属性，那么同样的，我们在属性面板上最上面找到转为可编辑模式， 他的字体包括字号都是转化为可编辑的模式。同样的，我们可以同时选择这两个 元素，就是按住 command， 同时点击这两个图层，然后 command 加 g 将他们编组，我们从命名为按钮。其实这些操作呢，都是跟其他的设计软件呃，大同小异呃，基本上 你们可以无门槛的去熟悉，那这里我们给他做一个剪切门板的效果啊，我们复制一个图层，然后 如果你不把它转化为可编辑模式，是没有门板的效果。我们同样的把它转化为可编辑的模式，他其实就成了一个矩形。那么右击转化为遮罩层，那将这个遮罩层的颜色给取消了，同时选择他们渴望的加击。编 好的，看一下图画。给按钮添加顶级效果。在右侧有一个面板叫交互面板，在这里单击添加触发，选择手势下的单击效果。 在这个属性里，我们选择单击对象为按钮组，注意是按钮整个组，不是按钮组下的字，或者是他的背景， 是整个按钮组。好，我们对这个按钮添加了一个单击的时间，那么可以看到在单击的时间底下出现了一个加号，你点击这个加号，可以看到会出现许多的 属性，那么这些属性代表着我们单机之后将要直行的操作。呃，这里有大小，呃，移动，包括旋转，还有一些颜色透明度的改变，包括他的排序跟滚动。那这里我们选择转场，我们打算 对这个按钮，因为是下一步，我们肯定是要跳转到下一页，这是下一个场景。我们点击转场，可以看到转场会让我们去选择一个目标场景，但是我们当前只有一个场景。没关系，我们可以连续串点一个。在我们的左上角有个场景管理的窗口，我们点击加号，新增一个场景， 给这个残疾命名为详情。那么为了方便我们添加点内容，我们可以将字号写大一点， 并且居中显示。好，我们回到刚才的页面，在这个转场底下将这个目标选为详情页，然后底下会有个转场效果，这里大家可以每个都试一。 嗯，看一下，他这底下会有动画，所以还是很直观的。我我们就每一个颜色，我们选择一个从右至左的滑入， 这里有个重置备选场景，这个我建议是勾上。好，那我们整个的闭环就完成了。首先我们对这个按钮 进行点击，他的点击手势是一个，当然你也可以设为两个或者三个，那一般我们是一个手指。那单击完之后我们进行转场，转场的目标是详情页，他的动画效果是滑落。 好，我们可以点击右上角预览窗口演示一下，点击 我们可以看到它很顺滑。 当然你也可以在设备中下载他们的 a p p， 扫码之后可以在手机上去模拟演示。那这里就不演示了，可以看我上一个视频。呃，是可以做到手机跟电脑的无缝对接。 我们可以在详情页同时加一个返回按钮，这里我们复制这个按钮的样式，粘贴到详情页，把它的文本改为 返回。同时我们按照前面同样的操作，给他添加一个登机，然后添加一个转场， 这里你看到我们可以直接选择一个前一个跳转场景，然后将他的动画设为滑入。 刚才我们是从右至左，那我们这边从左至右，让他的视觉有个行接，那从此场景勾上。 好，这里我们再看一下演示效果，下一步返回，下一步返回。 ok， 我们这一个呃跳转的单机按钮闭环就完成了。 那刚才我们介绍了单机实践，那通过学习单机实践，我们可以下去拓展制作一下这个开关灯的效果， 这个交付在智能家居的 app 里面好像是非常常见的，而且也是用的比较管的。那这个案例呢，也比较简单，也比较典型，我可以给大家看一下他的逻辑，这里引入了三个现代概念，嗯，一个是变量，一个是 天，还有的是复制，那主要的加弧形式还是单击那只不过我通过单击这个按钮来给这个变量复制。 同时呢我今天这个变量的变化，今天这个变量值的变化，然后赋予每一个需要变化属性的图层不同的效果。我这里是开关，所以是两个条件，一个是开，一个是关。 这个应该大家都能理解，大家可以下去自己动手做一做。当然如果喜欢的话可以点赞转发关注。