腾讯ISUX
isux.tencent.com
社交用户体验设计
我们在日常的工作当中，经常需要向Leader，业务方、Boss或者甲方提交设计方案，而你的方案是否能够打动他们，从而获得宝贵的开发资源和排期，取决于很多情况，其中之一，很重要的就是你的DEMO是否能够给人一种身临其境的体验感受。
而作为视觉设计师、交互设计师、产品经理，限于我们的专业能力并非开发，所以怎样在节约团队开发资源的情况下，独立完成创意的展示，成为了一项核心诉求。
过去我们会使用AE（Adobe After Effects）进行动效的设计与展示，但它是不可交互的，所以查看者只能静静看着你精心设计的一系列动效，无法参与到整个行为流程中。
macOS中提供的Keynote可以实现简单的交互动效，但那相比我们目前形成习惯的诸多各式各样的动效中呢，简直不值一提。
所以近年来涌现诸多专门用来设计制作交互动效的工具，早一些的有Axure、Pixate，后来的Origami、Hype、Flinto、Principle等等。这些软件相互之间各有优劣，不相伯仲。它们都有一个共同的特性，那就是为了解决创意的设计与展示。笔者作为一名视觉设计师，尝试过Pixate、Flinto、Principle 这几款工具，但都不尽如人意。比如很多想要的效果实现不了，或者编辑起来很麻烦，抑或DEMO体验效果差强人意。
2017年初，由曾经供职过Naver、Google的Tony Kim担任CEO进行开发的交互动效软件 ProtoPie 正式发布，它从开发之初，就明确了自身的交互逻辑思想。
作为一款可交互式的原型动效设计软件，相比于其他软件，ProtoPie有着自身的几个优势：支持更多触发条件，诸如 3D、陀螺仪、声音、震动、设备间交互、变量等等。同时，自带原生中文，支持 macOS、Windows 双平台，这些都是不可多得的。
从界面中我们可以看到，ProtoPie的界面相对还比较简单明了，包括对象+触发+反应（行为）都可以在界面中一目了然。
我们推出了一门课程：《ProtoPie动效原型进阶之路》，全课共12节，总课时1小时40分。通过完整的案例由浅入深，循序渐进地学习ProtoPie，无论你是视觉设计师、交互设计师、产品经理，通过以下课程，都可以完成ProtoPie动效设计的入门学习（点击可观看）：
1.ProtoPie 介绍、界面与基本操作
通过上面4节入门课程，你已经掌握了ProtoPie的基本操作、与Sketch协作时一些注意事项、可以动手创建滚动区域或滑动等简单的交互动效、以及理解了对象坐标与热区范围这一ProtoPie中特有的功能。
在完成了上面的入门课程之后，即可进行接下来的进阶课程：
5. 条件判断
7. 播放器与变量
通过条件判断，制作一个可切换的Switch开关。
通过自动加载，制作元素的自动展示。
通过变量的设置，制作跟随时间变化的播放秒数。
甚至可以调用你的真实相机进行设计。
在完成了入门与进阶的学习后，相信你已经可以将脑海中天马行空的创意制作成真实可体验的DEMO了，还等什么，快动手吧。
为了方便同学们练习，我们将教程中用到的Sketch源文件和ProtoPie源文件上传到了腾讯微云，地址是：
Sketch源文件
https://share.weiyun.com/5S556ll
ProtoPie源文件
https://share.weiyun.com/5EkkbpW
本次课程视频和Sketch源文件、ProtoPie源文件都可通过后台回复“动效”直接获取。
在学习的过程中，如果大家有什么问题或者想法，欢迎在下方留言让我们知道，最后，预祝大家工作顺利，诸事如意 ：）
PS：ISUX 开通粉丝QQ群啦！
欢迎各大设计师加入和我们一起聊设计~
添加QQ群：764345161
或长按以下二维码
以下ISUX文章，你可能也感兴趣
▽
QQ20周年 | 玩转像素复古
社交垂直探索 | QQ截图全新设计
社交互动创新 | 从点赞到击掌
2019 – 2020 设计趋势 · IP形象篇
2019-2020 设计趋势·图形篇
感谢阅读，以上内容均由腾讯ISUX团队原创设计，以及腾讯ISUX版权所有，转载请注明出处，违者必究，谢谢您的合作。注明出处格式：
文章来自公众号：
腾讯ISUX
( https://isux.tencent.com/articles/ProtoPie-teach）
↓点击前往 ISUX 官网
原文始发于微信公众号（腾讯ISUX）：ProtoPie 动效原型进阶之路
评论0