ProtoPie使用指南!无代码高保真交互原型工具

时间:2023-05-18
类别:UI设计
水平:入门
观众:7217
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

ProtoPie使用指南!无代码高保真交互原型工具

ProtoPie官方地址:https://www.protopie.cn/

ProtoPie用户指导手册:点击这里

ProtoPie 是一款交互原型制作软件。早期主打“无代码”、“高保真”,最近两年开始向车载、IoT、VR、智能手表领域发力,相继推出了传感交互、多屏幕交互、软硬件交互等应用场景。

在谷歌、微软、Meta、奔驰等国际企业的设计团队均被广泛使用。抖音UED经过与其他工具的比较分析,最终也选择将动效组件库搭在了ProtoPie上。这篇文章我们就来聊聊这款工具。

ProtoPie使用指南!无代码高保真交互原型工具

来自ProtoPie官方文档

一、素材导入

ProtoPie官方支持 Sketch,Figma,Adobe XD 导入。以 Figma 为例,在 Figma 上安装好 ProtoPie 插件后,就可以选择任意页面导入。导入后的视觉效果和原设计文档完全一样,如此一来, 在 ProtoPie 就只需要专注交互制作的部分。

如果交互制作了一半,但 Figma 的设计被修改了也不用担心。再从新导入即可,ProtoPie里的 UI 会自动被更新,且还不会影响到已有的交互效果。

ProtoPie使用指南!无代码高保真交互原型工具

二、交互制作

2.1 基本原理:交互=触发+反应+对象

ProtoPie 的交互制作原理和微交互原理类似:通过拼接有限的触发动作和反应动作,并指定动作对象即可组合出多种交互。下面这张表就是目前 ProtoPie 支持的所有触发和反应动作。对象支持图片、视频、音频、Lottie、文本等。

ProtoPie使用指南!无代码高保真交互原型工具

2.2 传感交互:相机扫码、语音交互、陀螺仪、震动反馈等

无代码调用移动设备内的传感器算是 ProtoPie 的一大特色。调取的方式就是选择相应的反应模块即可。比如摄像头相关的操作都在“相机”反应模块里,语音交互根据是 TTS 还是 STT 选择“语音朗读”或者“语音识别” 。

2.3 高阶知识:条件判断与表达式

除了这些触发和反应模块,ProtoPie 还支持变量和表达式。如 $touchX , length() , `video`.currentTime 等(完整列表在 指导手册 上可以看到)。结合全局变量和条件判断等高级功能,就可以让交互的保真度又高了一个台阶。

2.4 交互组件库

对于常用的交互,你也可以通过点击这个组件按钮,将其打组为动效组件。然后再通过拖拽完成交互和UI的快速复现。

ProtoPie使用指南!无代码高保真交互原型工具

对于平台的同学来说,你也可以将组件编组成组件库,为终端建立统一的动效标注:动效曲线、统一触发条件、交互分级等。

ProtoPie使用指南!无代码高保真交互原型工具

2.5 软硬件等更多交互场景

如果你的产品涉及到多个屏幕交互或者与硬件的交互,ProtoPie 也可以支持。比如汽车台架、VR、智能手表等。这些属于企业版功能,需要加 ProtoPie 官方客服微信(protopieying)单独咨询。

三、云端分享

制作好的原型可以选择保存在云端,获取分享链接。拿到你的原型链接的小伙伴就可以在浏览器上随时查看你的原型作品。预览和下载权限也可以分别设置。

ProtoPie使用指南!无代码高保真交互原型工具

当然,如果你还是倾向录制交互,在预览窗上也可以做到。不过这里推荐一下 ProtoPie 的“交互开发文档”中的录制功能。

四、开发对接

在云端点击 Handoff 按钮,录取原型中需要和开发对接的部分后,ProtoPie 会自动生成“交互开发文档”页面。开发除了可以回看你的录像,还能查看每一个交互动作的数值。如移动前后的坐标变化、图层的透明度变化速度、动效的运动曲线等等。大大节省了和开发的沟通成本。

ProtoPie使用指南!无代码高保真交互原型工具

五、可用性测试

目前可以将原型储存到移动端 app - ProtoPie Player 上进行用户测试。不过该功能仅限于近距离的观测。远程线上的用户测试功能,ProtoPie 已经开始在内测。

该功能可以创建测试房间-邀请被测人-实时线上观察被测人的操作路径。后期开发计划中还有收集行为数据等功能。

ProtoPie使用指南!无代码高保真交互原型工具

六、学习资源

以上是对 ProtoPie 的简单介绍,感兴趣的同学还可以先跟着 ProtoPie中文101入门教程 制作几个效果试试。

企业级客户咨询和订阅,可以联系以下 ProtoPie 官方企业微信:

ProtoPie使用指南!无代码高保真交互原型工具

4 收藏 4

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 快来秀出你的观点

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了

优优教程网 365 天打卡计划

点击 #优设每日作业# 进入微博超话页面,上传并发布你的练习作业,话题微博格式【 优优教程网365打卡计划 – DAY 01 】,优秀作业将有机会被 @优优教程网 官方微博转发点评。

/

支持键盘 ← → 键翻阅图片