转载者编：ProtoPie是一款高保真交互原型，之前在我翻译的另一篇"2017年作为设计师的你应该了解的7款工具"中就有提到过，国外的很多企业都开始使用ProtoPie了。如果你是刚刚交互入门的设计师，想做那种能动起来，还能在手机上测试的原型，不妨以这个工具为切入点学学，Meia上有免费教程。
交互原型工具ProtoPie正式上线不过才5个月的时间，已经有32个国家的数以万计的设计师在使用了。
很多用户都把作品上传到了Dribbble，站酷等设计网站，这么多的作品，小编会决定做个大礼包陆续分享给大家。这次礼包主题是‘容易借鉴学习的原型’。
如果你已经在用ProtoPie，那千万别客气，源文件尽管拿去下载。如果还没有听说过ProtoPie...What？！ProtoPie都不知道！那先去补补功课吧，点击这里有中文介绍。
礼包享受的正确姿势告诉大家：
- 扫视感兴趣的交互作品
- 点击该作品下面的链接，在网页上亲手体验交互效果。
- 点击左侧下载按钮，下载源文件，剖析制作方法。
Lily's Diary
原型介绍：
ProtoPie 用户 Lily的个人作品。交互很自然的模仿了实际生活中翻动日记的动作效果。因重复交互较多，利用ProtoPie中的场景复制功能，可以快速完成。
下载链接
https://share.protopie.io/eLWb28tsH2c
交互关键词
页面转换， 3D旋转，卡片交替, 推拉
安卓菜单
原型介绍：
通过‘推拉’这一动作，可以将手机上端隐菜单拉出，之后利用‘抛掷’动作再收回。而两个动作会根据手指滑动的速度和距离，判断菜单是否应保持在原地。
链接：
https://share.protopie.io/HxL5WtXYbot
交互关键词：
抛掷，推拉
汇款
原型介绍：
拖动常用收款人头像,当头像进入指定的范围时，该范围内的图层产生视觉变化。该作品可以帮助大家学会使用‘条件’和‘范围’两个高级功能。
链接
https://share.protopie.io/bwnShi3EPSv
交互关键词
条件, 范围, 3D 旋转
卡片交替 #1
原型介绍：
ProtoPie 用户Yun Seong won的作品。利用‘排序’功能，点击或左右拖动图层可交替卡片。
链接
https://share.protopie.io/bAgkuvhtvpD
交互关键词
排序，卡片交替
卡片交替 #2
原型介绍：
点击卡片可查看具体内容，向下翻动后下一张卡片出现。而这里的立体旋转效果让这个原型添加了不少趣味。
链接：
https://share.protopie.io/Ehmrm3M1S4E
交互关键词
卡片交替，3D旋转，场景，推拉
卡片排序 #1
原型介绍：
用户自定义常用功能时，可以通过点击卡片来添加或删除功能。
链接
https://share.protopie.io/fcMTGqMGwwJ
交互关键词
卡片排序，容器层
卡片排序 #2
原型介绍：
这个使用场景和前面的一样。只是在自定义后，卡片的位置发生了变化，使用场景功能，可以将本是一个画面上的交互，分阶段制作。
链接：
https://share.protopie.io/VvT3vc6efMf
交互关键词：
场景，卡片排序
电商-衣类购物
原型介绍:
线上购物app中经常可以看到的交互方式。该原型作品的交互核心是侧边栏目录打开始的立体旋转，和详情页左右图片翻看。
链接
https://share.protopie.io/LqefopoN2r
交互关键词
页面导航条，3D 旋转，汉堡按钮
Flickr
原型介绍：
引导页中常见的滑动效果，滑动的同时下面的进度条也在跟随移动。整个原型制作时间仅2分钟。
链接：
https://share.protopie.io/EST6pUhGLGv
交互关键词：
页面导航条，联动 , 基本交互
数字输入 #1
原型介绍：
使用放大缩小效果制作的数字输入原型，ProtoPie的‘条件’功能可以提高原型制作效率。
链接：
https://share.protopie.io/cy8QhmiRWuK
交互关键词：
条件
Kakao 游戏
原型介绍:
游戏App中常见的排行榜、关卡、活动通知等交互都在这个原型中有体现。可以说是交互很全的一款作品。
链接
https://share.protopie.io/dsTcLaWHuyF
交互关键词:
游戏交互, 自动加载, 滚页
Keezy
原型介绍:
浮动按钮/开关按钮中常见的交互。点击一个按钮，后面隐藏的按钮弹出，再点击一下按钮收回。
链接:
https://share.protopie.io/HurvMUYwcMC
交互关键词:
开关按钮， 旋转
Material 邮箱
原型介绍：
Material 设计提倡让内容以最自然的方式展现出来。而想要达到这个目的‘遮罩层’功能就会被反复使用。
链接：
https://share.protopie.io/EQmkKwHyLA9
交互关键词
Material设计, 遮罩层
熊猫
原型介绍：
ProtoPie用户David Lee作品。 快看! 可爱的熊猫在看你呢。
链接：
https://share.protopie.io/eN4vfmJffBc
交互关键词:
拖动，联动
导航栏
原型介绍:
某个区域的内容进入一定的视线范围时，导航栏上的颜色和导航条会有相应的变化。
链接：
https://share.protopie.io/3wcDRFmQf4Z
交互关键词:
导航条交互，范围，颜色，页面导航条交互
下来刷新
原型介绍：
向下拉动页面，滑动超过一定距离时，页面在回弹的过程中暂时停顿后归位。
链接：
https://share.protopie.io/gxZ5J7c75xR
交互关键词:
条件，滚页，反复
标签跟随
原型介绍:
像联系人名单这种比较长且有规律的内容前，往往会有一个标签跟随。名单的某个区域进入指定位置时，标签跟随变动。
链接:
https://share.protopie.io/fhhhwrKNc4W
交互关键词:
范围,滚页, 联动,页面导航条交互
开关按钮
原型介绍:
相同的手势，相同的触碰对象，但反应却不同。这类的交互和‘开关按钮’的交互原理都是相似的。ProtoPie中的‘条件’功能可以帮助完成两种以上状态间的开关转化。
链接:
https://share.protopie.io/ZrpYPgKbUjY
交互关键字:
开关按钮, 条件,基本交互
原型介绍:
根据页面滚动的距离，导航条、logo等元素都会发生变化。
链接:
https://share.protopie.io/cQCxzXKdSBx
交互关键词:
滚页,联动, 导航条交互
Uber
原型介绍:
Uber 中选择出发地和到达地的交互。看起来需要是一个页面中发生的一系列动作，但实际上是3个页面连接了起来。
链接:
https://share.protopie.io/8eXJkrLwUuk
交互原型:
场景， 搜索交互
下载完成
原型介绍:
使用ProtoPie中的容器层可以制作一个点绕圆环一圈的交互。
链接:
https://share.protopie.io/7EujXR2MewY
交互关键词:
容器层, 进度条
更多关于ProtoPie的信息：
-微博：http://weibo.com.zcool.cn/protopie
-中文社区：http://protopie.net.zcool.cn/
-ProtoPie作品集：http://www.zcool.com.cn/zteam/ZNDUzODA=.html
网友评论