行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

提示

3

阅读时间

如何在您的原型中使用二维码交互

通过添加支持二维码的交互,让你的原型更具表现力。

丹妮丝·威尔豪斯, 增长营销经理
connect ai agents like claude, cursor and more to protopie via mcp

你知道吗?你可以使用 ProtoPie 的 Camera 功能扫描真实二维码,并解锁丰富的智能交互!例如,你可以扫描二维码来打开网页,或在原型中触发各种其他操作。

借助全新的二维码扫描器,你可以释放创意,让你的 ProtoPie 原型更加生动、真实!

二维码扫描器功能面向所有 ProtoPie 用户开放,不受套餐限制。

概览

  • 如何为你的原型生成二维码

  • 如何在 ProtoPie 中启用二维码扫描器

  • 如何使用“立即打开 URL”

  • 如何使用“持续跟踪”选项

  • 在你的原型中释放二维码的力量

如何为你的原型生成二维码

你可以在 QR Code Generator 上免费创建自己的二维码,并在 ProtoPie 中进行扫描。


How to generate QR codes on QR Code Generator


如何在 QR Code Generator 上生成二维码

如何在 ProtoPie 中启用二维码扫描器

在以下任一位置启用二维码扫描器选项:

  • Camera 图层(启用 Auto Start 时)

  • Camera 响应

你可以将图片放置在 Camera 图层上方,从而覆盖在二维码上。


enabling qr code scanner in ProtoPie


*如何启用二维码扫描器*

二维码扫描器有两项能力:

  • 立即打开 URL

  • 持续跟踪

下面我们详细看看每个选项可以实现什么。

如何使用“立即打开 URL”

ProtoPie 中的“立即打开 URL”选项可让你扫描二维码,并在网页浏览器中直接打开链接。

你可以创造性地使用此功能来制作常见的移动端交互原型,例如扫描二维码打开视频或发起支付交易。


Open URL Immediately


立即打开 URL

如何使用“持续跟踪”选项

“持续跟踪”选项可让你监测存储在二维码中的值。

ProtoPie 支持将二维码的值存储到预定义变量中,并在公式中动态使用。

以下是我们目前支持的二维码预定义变量列表:

  • $qrValue

  • $qrHeight

  • $qrWidth

  • $qrX

  • $qrY

将二维码值存储在预定义变量中可开启许多交互设计可能性!例如,你可以保存二维码值,并在另一个场景中显示其包含的信息。或者你可以根据二维码的位置和大小为图层制作动画,就像下面这个原型示例一样。


using the keep tracking option in ProtoPie's QR code scanner


*持续跟踪*

在这个原型中,覆盖图标会根据二维码的 X/Y 坐标和宽度/高度进行缩放和移动。想了解如何利用新的二维码预定义变量创建此效果,请下载这里的原型并在 ProtoPie Studio 中打开!

在你的原型中释放二维码的力量

准备好让你的原型更上一层楼了吗?开始探索 ProtoPie 二维码扫描器的无限可能,让你的交互比以往更智能、更吸引人。无论是通过扫描来触发操作,还是跳转到网页,主动权都在你手中。

立即下载 ProtoPie,轻松将你的创意变为现实!

[免费下载 ProtoPie]