小众软件，ProtoPie - 高保真交互原型设计工具！

只需针对图层配置“图层+触发器+反馈”，ProtoPie 可以实现很多常见动效和页面交互，原型效果逼真。无论是与上游环节沟通方案，还是与研发团队同步动效逻辑都能显著降低沟通成本。

作为一款可交互式的原型动效设计软件，相比于其他软件，ProtoPie有着自身的几个优势：支持更多触发条件，诸如 3D、陀螺仪、声音、震动、设备间交互、变量等等。同时，自带原生中文，支持 macOS、Windows 双平台，这些都是不可多得的。

​

​

1. 写在前面

原型设计工具大家都不陌生，复杂动效可用 After Effects 处理，小型动效可以使用 Principle 或 Flinto，而简单的场景跳转现在 Sketch Link 就可以处理。而 ProtoPie 能够在原型领域一枝独秀的优势在于：

逻辑简单：从 Sketch 导入后，选择需要配置交互的对象，设置触发方式，选择对应效果，即可实现大部分原型功能。
效果真实：ProtoPie 可将制作好的原型同步到云端，业务和开发可以便捷地在浏览器中与原型交互，研究实现方式，大幅降低沟通成本。针对移动端 ProtoPie 可调用键盘，多点触控，相机，震动，陀螺仪等多种原生控件，与最终开发效果接近。
界面友好：界面提供了场景，图层，动效时间轴等管理器，操作和功能与常用设计工具类似，学习成本很低。

2. 基本知识

先介绍一下 ProtoPie 的工作原理。如图所示，创建一个交互效果分三步：

1. 选定需要交互的图层（如一个按钮）；
2. 指定触发器（如点击，滚动等）；
3. 设置触发后，会对哪个图层造成什么效果。（如点击按钮后，跳转到另一个页面）

这即是 ProtoPie 官方指南中多次提到的“图层+触发器+反馈”。可以配置的“触发器”和“反馈”请参见下图的官方的功能表，可见其自由度非常之高，涵盖了大部分常见交互方式。

3. 入门案例

下面我们通过案例来快速入门。例如需要做一个点击按钮放大图片的交互。首先在 Sketch 中做好页面内容，即一个方形图片和一个按钮。新建 ProtoPie 项目，画板尺寸与 Sketch 中相同。点击右上角的导入，ProtoPie 会自动读取当前打开的 Sketch 文件，并询问导入哪个画板。导入后，我们就可以在 ProtoPie 按照“图层+触发器+反馈”的基本原理，设计图层的交互了。

制作简单的 Sketch 文件后，在 ProtoPie 的左上角点击导入

新建一个“Tap点击”触发器，在属性面板中选择按钮图层。由此便完成了触发器的配置，含义是“点击-按钮”。在这个触发器的下面点击加号新建反馈，这里我们选择“Scale缩放”反馈，在属性面板中选择图片图层，配置为按倍率缩放至150%. 由此便完成了反馈的配置，含义是“点击-按钮-缩放-图片-至150%倍”。小提示：如果触发器或反馈在列表中显示为黄色，代表它没有被指定到某个图层，一定记得点进去选择好对应的图层，否则可是用不了的。

将按钮图层设置为触发器，将方形图层设置为触发的反馈

点击顶栏的 Preview预览，即可预览效果。一切顺利的话，点击设计图中的按钮，图片便会放大。恭喜，您已经完成了您的第一个 ProtoPie 原型。不过我们可以发现该原型存在三个问题：动画比较生硬；图片不是从中心缩放而是从左上角；只能点击一次，无法返回之前的状态。
3.1 调整图层的变换中心

在画布上选中图片图层，在最右侧的属性面板中将它的原点改为中心。这个原点是图层变换的中心点，默认在图层的左上角，我们可以根据动画的需要酌情选择。

调整图形变换原点

3.2 编辑交互效果的动画
我们重新回到 ProtoPie 的编辑器，选中图片图层对应的 Scale缩放 反馈。在属性面板的下半部分可以看到 Easing动效 配置区域。将 Linear匀速运动 改为 Spring弹性，再次预览，便可看到动画不再那么生硬。

调整反馈的动画效果

3.3 通过条件判断让触发操作产生不同的反馈
在按钮的 Tab 触发器下点击加号，增加一个 Condition条件判断，相当于只有达到条件，触发器才能触发相应的反馈。在条件判断的配置区域选择当“图片图层”的“ScaleX横向缩放系数”“小于”“150”，然后将之前配置好的 Scale缩放 反馈拖到这个条件下面，含义为“点击按钮时-若图片的横向缩放系数-小于-150-则-缩放-图片-至150%”

通过判断决定点击按钮时，放大还是缩小方形图层

在刚才配置好的条件判断上右键，Duplicate克隆。此时我们只需按照如下含义修改参数即可：“点击按钮时-若图片的横向缩放系数-大于-100-则-缩放-图片-至100%”

配置第二个条件，让操作可逆

再次预览，我们便实现了通过一个按钮控制图片缩放的交互方式。回头看来，通过短暂的接触，您便已通过案例从零学习了在 ProtoPie 创建交互效果的流程和界面基本操作，并且掌握了动效配置，条件判断，参数变量等进阶技巧。

​官方网站：http://www.protopie.cn/​

​

​以上就是今天要分享的技巧，你学会了吗？若有什么问题，欢迎在下方留言。

学习资料见知识星球。

以上就是今天要分享的技巧，你学会了吗？若有什么问题，欢迎在下方留言。

快来试试吧，小琥 my21ke007。获取 1000个免费 Excel模板福利​​​​！

更多技巧， www.excelbook.cn

欢迎 加入 零售创新 知识星球，知识星球主要以数据分析、报告分享、数据工具讨论为主；