效率工具 | 零基础入门原型工具 ProtoPie
三分设
共 3405字，需浏览 7分钟
· 2021-12-17
逻辑简单：从 Sketch 导入后，选择需要配置交互的对象，设置触发方式，选择对应效果，即可实现大部分原型功能。
效果真实：ProtoPie 可将制作好的原型同步到云端，业务和开发可以便捷地在浏览器中与原型交互，研究实现方式，大幅降低沟通成本。针对移动端 ProtoPie 可调用键盘，多点触控，相机，震动，陀螺仪等多种原生控件，与最终开发效果接近。
界面友好：界面提供了场景，图层，动效时间轴等管理器，操作和功能与常用设计工具类似，学习成本很低。
先介绍一下 ProtoPie 的工作原理。如图所示，创建一个交互效果分三步：
2. 指定触发器（如点击，滚动等）；
3. 设置触发后，会对哪个图层造成什么效果。（如点击按钮后，跳转到另一个页面）
这即是 ProtoPie 官方指南中多次提到的“图层+触发器+反馈”。可以配置的“触发器”和“反馈”请参见下图的官方的功能表，可见其自由度非常之高，涵盖了大部分常见交互方式。
下面我们通过案例来快速入门。例如需要做一个点击按钮放大图片的交互。首先在 Sketch 中做好页面内容，即一个方形图片和一个按钮。新建 ProtoPie 项目，画板尺寸与 Sketch 中相同。点击右上角的导入，ProtoPie 会自动读取当前打开的 Sketch 文件，并询问导入哪个画板。导入后，我们就可以在 ProtoPie 按照“图层+触发器+反馈”的基本原理，设计图层的交互了。
在按钮的 Tab 触发器下点击加号，增加一个 Condition条件判断，相当于只有达到条件，触发器才能触发相应的反馈。在条件判断的配置区域选择当“图片图层”的“ ScaleX 横向缩放系数”“小于”“ 150 ”，然后将之前配置好的 Scale 缩放 反馈拖到这个条件下面，含义为“点击按钮时-若图片的横向缩放系数-小于- 150 -则-缩放-图片-至 150 %”
实际项目中的动效通常更加复杂，会出现一个触发器触发多种反馈的情况。但万变不离其宗，只需记住“图层+触发器+反馈”的基本原理，便能举一反三。下图的案例复杂化了入门教程中的原型，加入了更多图层和动画。您可尝试分解原型中的每个动画的“图层+触发器+反馈”，制作类似的跳转动画。除下面的视频外，这个原型已上传到了 ProtoPie 的云端，您还可以点击该链接上手尝试交互。
希望以上的讲解增强了您使用 ProtoPie 的信心，它是一款能够让难以言表的交互快速形成高保真原型的工具。当然本文旨在给大家多介绍一种选择，市面上的原型工具多为订阅制且价格高昂，挑选一个适合自己及项目的顺手工具才是重点。如果您由关于 ProtoPie 使用上的问题，欢迎在下方留言，我将尽可能为您解答。感谢您的阅读！
评论
谷歌员工爆料Python基础团队原地解散
机器之心报道编辑：蛋酱什么？谷歌解雇了整个 Python 基础团队？「当与你直接共事的每个人，包括你的主管，都被裁员 —— 哦，是职位被削减，而你被要求安排他们的替代者入职，这些人被告知在不同的国家担任同样的职位，但他们并不为此感到高兴，这是很艰难的一天。」发布这一动态的 Thomas Wouter
机器学习初学者
0
【第129期】程序员的新宠：三款终端工具，让你告别Xshell！
概述 WindTerm：跨平台的SSH利器 首先介绍的是WindTerm，这是一款使用C语言开发的跨平台SSH客户端。它不仅完全免费，而且没有商业使用的限制。WindTerm支持SSH v2、Telnet、Raw Tcp等协议，而且性能出色，甚至超过了FinalShell和Electerm。功能
前端微服务
0
AI论文写作工具和生成器（一）
随着人工智能和大模型的迅猛发展，AI对研究人员和学生提供了极大的写作便利。本文将介绍市面上常用的AI论文写作工具，帮助你提高论文写作效率并遵循学术道德。请仅将AI论文生成器视为辅助参考手段，切勿直接挪用全文。XPaper AlXPaper AI是由点击式创作工具晓语台推出的一款论文写作生成平台，只需
IQ前端
0
【第128期】提升编程效率VSCode变量命名插件推荐
概述 在编程的世界里，一个好的变量名不仅能够提升代码的可读性，还能反映出程序员的专业水平。Visual Studio Code（VSCode）作为一个广受欢迎的代码编辑器，拥有丰富的插件生态系统，其中不乏能够帮助我们高效命名变量的工具。今天，我们就来介绍几款VSCode上能够提升变量命名效率的插件
前端微服务
0
【第126期】效地利用AI辅助编程并提高编程效率
概述 AI可以在编程的多个环节中提供帮助，从而显著提高编程效率。同时，也要注意AI工具的选择和使用，确保它们能够真正提升你的工作效率，而不是成为额外的负担。通过这些工具通过不同的方式辅助编程，包括代码生成、错误检测与修复、代码审查、自动化测试、性能优化等，旨在提高编程效率和代码质量。开发者可以根据
前端微服务
0
分享几个前端中好玩且有用的开源工具,总有一个适合你！
点击上方 前端Q，关注公众号回复加群，加入前端Q技术交流群正所谓差生文具多,作为前端的我们,拥有几个合适的工具和网站可以很有效的提高我们的工具效率,还会有一些很有趣的网站可以在我们敲 bug 累了的时候供我们娱乐,接下来我就和大嘎分析一下我在用的一些工具和网站。聚合API该网站提供了大量的
前端Q
0
.NET 开源工具库，集成超过1000个扩展方法
前言推荐一个.NET 开源项目，集成了超过1000个扩展方法。项目简介Z.ExtensionMethods是由zzzprojects公司开发并维护的一款开源库，为.NET开发人员提供一系列实用的扩展方法，可以减少重复劳动、提高开发效率，支持.NET Framework 和 .NET Core。该项目
dotNET全栈开发
10
4款最新可用的老牌 KMS 工具，亲测完美激活！
对于没有激活的Windows、Office系列产品的电脑，确实有点难用！例如没有激活的Windows电脑，大大的图标水印提示需要激活！例如没有激活的Office产品，根本没有办法编辑。为了解决激活Windows、激活office、还有Windows家庭版升级专业版。这里给大家推荐4款亲测有效的KMS
dotNET全栈开发
10