随着这几天我的新书《交互思维：详解交互设计师技能树》的发售，找我交流的同事也多了起来。比如前几天就有同事问我，之前我用的那个 Framer 原型工具如何样了，最近有没有更新？
我回答说新版的 Framer X 没想清楚自个要什么，也不知道用户要什么，做成了一台既不能满足低端用户需要，对于高端用户来说又太复杂的鸡肋产品了，比旧版差得太远了，不推荐再去用了。
那有什么好的高保真原型工具推荐吗？
当然是有的，经过我半年多的寻找，中间还尝试过 Flinto，终于在不久之前锁定了新版的 ProtoPie。
Flinto 不是不好，实现一些简单的动画或是挺省事的，但坏处就是一旦稍微复杂一点，操作成本就会呈几何级数提升，而且还会出现性能问题。Principle 也是如此，它的定位更像是给视觉设计师用的微动效软件，而不是用来设计 APP 交互操作的。
而今天要为你们推荐的这款 ProtoPie，它就解决了上述几款软件的所有问题，既简单易上手，能够实现很多动画效果，还具备复杂的条件和参数设置，支持多点触摸手势和手机传感器，可以导入到手机演示，还不用学代码，甚至支持 Windows 和 Mac 双平台（在高保真工具中非常少见），可以说几乎完美了。
接下来，我就接合官网上的用户手册，来为你简单介绍一下这款软件吧。
一、基本概念
ProtoPie 号称自个能让交互原型设计像说话一样简单，你只需要按照说话的顺序将几十种交互模块依次拼接，就可以完成极为逼真的高保真原型设计。
而实现交互动作的方式也很简单，你所需要的就是说清楚：
- 对象：你要让谁动（Who）
- 触发：何时让它动（When）
- 反应：如何动（Action）
比如你画好了一台矩形，想让它动，那接下来你要选择的就是触发动作的方式，以及让它做的动作了，ProtoPie 最强大的地方，就是提供了如下图这茫茫多的触发动作和反应动作，可以说把绝大部分我们想要用到的都包含了，你可以做出各种各样的效果。
二、简单的例子
说完了基本概念，我们来看一下 ProtoPie 的界面和实际做一台简单例子看看吧。软件的界面是很常见的左中右结构，唯一不同的是把交互动作和时间轴也放在了右边，不过实际操作下来，觉得这样确实比放在下方更省事。
软件是目前标配的订阅制，并且有中文版。
选中你要操作的图层后，在右侧可以点开“添加触发”的菜单，无论是手势、鼠标、键盘或是高级点的条件性触发和传感器触发都在这里，很直观很全面。
选择触发条件之后，需要再选择图层将执行的动作，比如移动、缩放、旋转等等，让我们来做一台单击后就会移动的事件。
设置好这两项后，你可以在右侧时间轴直接选择动画所需的时长，然后在最右侧属性面板中设置要让图层移动到的坐标点，以及动画的曲线，还可以精确设置动画时间、延迟开始以及循环。
按照上面参数设置完后，这个点击移动的小方块就做好了，是不是很简单直观？
此外，针对一些需要额外条件才能触发的情况，比如注册登录界面，只有在用户输入了账号密码时，下面的按钮才可点击，这种时候就可以添加一台触发条件。
设定起来也很简单，可以用对应文本图层里是否有内容来判断，这里就不展开说了。
三、便捷的常用组件
在设计 APP 时，经常会需要让页面可以滚动，或者左右滑动的 Banner，在我以前用 Axure RP 的时候总觉得很麻烦，比如滑到底部的回弹效果还要手动去加一些判断，就算做好了或是显得很不顺滑。
目前的高保真原型工具都越来越省事了，像是这类常用组件，只需要简单设置一下所有的效果就都有了。
1. 滚动型页面
这个使用频率非常高了，ProtoPie 还能实现惯性滚动和下拉回弹效果，你所需要做的只有添加一台容器图层，然后选择“滚页”，再设置滚动的方向和反弹效果，搞定。
2.滑动型页面
同理，这种推拉翻页的组件也是先创建容器，放入三个图层，然后选择“滑页”、“方向”和“反弹”效果。
这个组件不仅可以用来实现顶部 Banner，还可以做出像是微信会话列表那种左滑出现更多菜单的效果。
四、特色触发动作
ProtoPie 包含了很全面的触发动作，经常制作高保真原型的同学一定会意识到，这一点是非常重要的，关系到很多动作和设计到底能不能做成高保真。接下来我就选择其中七个比较有特色的来做一台简单介绍吧，一起来看看它的功能有多强大。
1.联动
想不想在某个元素移动的时候，另一台元素做相应的变化？这种场景有很多，比如拖动音乐的播放进度条的时候，上面的碟片会做对应的旋转。
但是这个功能，别的软件要实现起来都不太容易，Principle 可以做但是有局限，Framer 则是需要写代码，http://Proto.io 甚至还要用到前端脚本 JavaScript。（这几款软件包括更多的原型工具的介绍，详见我的新书《交互思维》）
而对于 ProtoPie 来说，你只要给下面这个例子中的绿色方块设置一台普通的拖拽移动动作，然后再给红色方块设置一台联动动作，并设定两个方块之间的动作参数对应关系就好了。
由于绿色方块是在做上下移动，所以只有 Y 坐标有变化，而红色方面要做的是缩放动作——即宽高的变化，所以对应的参数如下。
2.范围
想要下拉一定距离后出现刷新动画？想要上滑一定距离后折叠搜索栏？又或者是想做一台滑动解锁的操作？
这些操作都可以用“范围”这个触发动作来实现。
实现这一效果，你所需要做的参数设置如下，翻译成人话就是：
当图层 A 的 X 坐标大于等于指定数值时，即触发对应操作（比如放大）。
如何样？是不是像说话一样容易？
3.自动加载
自动加载的应用场景就很多了，点开某个界面，对应出现一堆相应的进场动画，无论是即时响应或是想延迟一段时间，都需要用到这个。
而实现这一操作，只需要在下拉菜单里选择对应的方式就好了，勾选“重新加载”的选项后还可以让这个动作不只是第一次才触发。
可能你会疑惑，为啥没有具体的时间参数？别忘了我们开头介绍的基本概念，触发动作只管触发，而具体执行什么动作则是属于反应动作的设置范围，无论你想要做缩放或是旋转，是隐藏或是展开，然后再设置一台很性感的弹性动画曲线，这些都随意。
4.键盘类动作
按下某个按键（比如回车、ESC），然后原型做出对应操作，我想这是很多高保真原型制作者心中永远的痛吧？这回有救了，两个选项帮你搞定。
5. 传感触发-陀螺仪
下面这三个都属于和手机传感器相关的触发动作，很有用也很重要，比如常见的王者荣耀启动画面的视察效果，靠的就是读取手机陀螺仪的实时参数来实现的。看完上面这些例子，你一定会相信用 ProtoPie 来实现它同样是很简单的，这里我就不赘述了。
6.传感触发-罗盘
罗盘不仅可以做指南针，还可以做屏幕旋转时的小动效。
7.传感触发-声音
声音这个真的骚气，从来没见过还有原型软件能做这个的，也很适合把目前流行的语音交互做成 Demo。
最后发一张各种传感触发的设置示意，其实和前面的“联动”很像，只不过把触发源改成了对应的手机传感器罢了。
总结
总的来说，ProtoPie 这款软件是我近期向身边朋友推荐得最多的一款高保真原型工具，功能全面、操作简单、不需要写代码，这三个优点说来简单，但真正能做到的软件很少很少。
包括这款，其实我在前两年就体验过它的早期版本，那时候我很希望能够用它在 Windows 平台做原型，但是简单体验下来，设计虽好，但是功能还不太完善，所以果断放弃了，直到最近再次体验，才发现已非昔年的吴下阿蒙。
当然，它绝不是没有缺点，使用下来，我有一台不太爽的地方就是——它的时间线竟然没办法多选后拖动……经常做原型的同学都会知道，想要一开始就把每个事件的时间设置精确是很难的，往往是先一台个设置好时间，然后再统一调整，这时候我发现它竟然只能一台个地操作……太痛苦了。
不过瑕不掩瑜，这种操作还不算太频繁，希望他们后面能够意识到并作出改进吧。
PS：正准备发文章的时候，我忽然鬼使神差地想着再去验证一下这点，结果——它们竟然已经改了！…………还好我没有直接发，不然开发团队一定觉得很冤枉，哈哈~这波操作我真的只能点赞了！
<hr/>「书斋小笺」
如果看完这篇文章，你还觉得不过瘾，还想学更多交互设计的知识，包括但不限于：产品思维、用户思维、逻辑思维、视觉思维等各种思考方式，如何拓展眼界、积累交互素材库，有哪些交互设计师必须掌握的文档工具、设计工具、原型工具，甚至是设计师求职攻略等等，这本《交互思维：详解交互设计师技能树》都能给你答案。
我还独家全面解析了成为一名优秀的交互设计师应该掌握的技能树，相信一定能对你有帮助。
想问公众号的读者有没有优惠？
快去京东搜索“交互思维”，本书参加这几天超优惠的限时活动“满100减50”，晚了就卖光啦！
（悄悄告诉你，上周首发的时候，当当已经售罄过一次了）
<hr/>如果你看完后，还想看更多的干货，还意犹未尽的话，欢迎关注我的微信公众号：落羽敬斋（wingstudy） |
用Deepseek满血版问问看
