在 ProtoPie Connect 中测试原型

ProtoPie Connect 允许你在各种智能设备和桌面浏览器上测试原型。你可以通过以下方式使用 ProtoPie Connect：

• 使用 ProtoPie Connect 和 ProtoPie Player 测试原型

• 使用 ProtoPie Connect 和 ProtoPie Player for Wear OS 测试原型

• 在网页浏览器上测试原型

• 在 Stage View 中测试原型。

点击此处下载 ProtoPie Connect。

将原型添加到 ProtoPie Connect

在开始测试前，请按照以下简单步骤将你的原型加载到 ProtoPie Connect 中：

• 点击 + New 按钮并选择你要添加的原型。或者将原型拖放到 ProtoPie Connect 界面中。

• 企业用户可通过选择 Cloud Pie 直接从 ProtoPie Cloud 打开原型。要获取 Cloud Pie 的最新版本，请点击圆形箭头图标（Reload）。

• 选择 Pie 文件并点击垃圾桶图标，可将原型从列表中移除。

• 要替换原型，将光标移到该原型上并点击双向箭头图标。

• 技术说明：添加新的 Pie 文件会创建新的 pieid。替换 Pie 文件会复用之前原型的同一个 pieId。

将 Pies 整理为分组

为了让你的 Pies 更有条理且易于管理，你可以将它们分组。要创建新的Pie 分组，点击 Group 图标。要将 Pie 添加到分组中，将其拖放到该分组里。操作前请先展开该分组。

• 要将 Pie 从一个分组移动到另一个分组，请将其拖放到另一个分组中。

• 只有至少包含一个 Pie 的分组才能展开/折叠。

• 只有至少包含一个 Pie 的分组才能被选中/取消选中。

• 要重命名分组，双击分组名称并输入新名称。

• 要删除分组，将光标悬停在其上并点击 Trash 图标。

使用 ProtoPie Connect 和 ProtoPie Player 测试原型

ProtoPie Player 是 ProtoPie Studio 和 ProtoPie Connect 的免费配套应用。你可以在 iOS、iPadOS 和 Android 设备上查看、体验并测试任何已添加到 ProtoPie Connect 的原型。

将 ProtoPie Player 连接到 ProtoPie Connect 有三种方式：

1. 扫描二维码

2. 输入 IP 地址

3. 使用 USB 数据线

通过扫描二维码将 ProtoPie Player 连接到 ProtoPie Connect

1. 确保你的电脑和智能设备连接到同一 WiFi 网络。

2. 在 ProtoPie Connect 中，点击你想打开的原型对应的 Connect。

3. 从列表中选择 QR Code。

4. 在 ProtoPie Player 中点击 Scan QR Code 按钮。

5. 扫描二维码以在 Player 中运行该原型。

通过输入 IP 地址将 ProtoPie Player 连接到 ProtoPie Connect

1. 确保你的电脑和智能设备连接到同一 WiFi 网络。

2. 在 ProtoPie Player 的下拉菜单中点击 Type IP Address 。

3. 输入 ProtoPie Connect 中显示的 IP 地址。

4. 点击 Connect 按钮，在你的智能设备上运行该原型。

使用 ProtoPie Connect 和 ProtoPie Player for Wear OS 测试原型

ProtoPie Player for Wear OS 与常规 ProtoPie Player 不同，它仅可与 Connect Enterprise 配合使用。

1. 确保 ProtoPie Player for Wear OS 和 ProtoPie Connect 都连接到同一互联网网络。

2. 打开它们——ProtoPie Player for Wear OS 和 ProtoPie Connect 会自动互相检测

3. 在 ProtoPie Player for Wear OS 中点击 Tap to connect，与 ProtoPie Connect 配对。

4. 向 ProtoPie Connect 添加一个智能手表原型。

5. 点击 ProtoPie Connect 界面顶部的 Run 按钮，在 Player for Wear OS 中打开该原型。

6. 要重启或退出原型，请双击智能手表屏幕。

在网页浏览器上测试原型

要在浏览器中查看原型，建议使用 Chromium 浏览器以获得最佳性能。你可以通过两种方式从 ProtoPie Connect 在桌面网页浏览器中打开原型。

• 在运行 ProtoPie Connect 的同一台机器上

• 在另一台机器上

在同一台机器上测试原型

1. 点击你想打开的原型旁边的 Web Browser 图标。

2. 在浏览器中，URL 格式如下：http://localhost:9981/。

在另一台机器上测试原型

1. 确保你的电脑与另一台机器连接到与 ProtoPie Connect 相同的 WiFi 网络。

2. 在另一台机器上打开任意网页浏览器。

3. 在地址栏中输入你的 ProtoPie Connect IP 地址。将显示 ProtoPie Connect 界面。

4. 点击你想打开的原型旁边的 Web Browser 图标。

5. 在浏览器中，URL 格式如下：http://protopie.connect.ip.address:9981/。

在网页浏览器中使用语音原型功能

从 ProtoPie Connect 1.8.0 开始，Web Player 已支持语音原型功能，和 iOS/Android 的 ProtoPie Player 应用以及 ProtoPie Studio 的 Preview 窗口一样。目前支持的功能有：

• Voice Command Trigger

• Speak Response

• Listen Response

兼容的网页浏览器

各浏览器在处理麦克风权限时的行为不同。要使用 Voice Command Trigger 和 Listen Response，浏览器需要用户授予麦克风权限。当原型中需要启用麦克风时（如下图所示），浏览器会请求麦克风权限。要启用麦克风访问，请点击 Allow。

ProtoPie Connect 的 Web Player 语音原型功能在 Chromium 浏览器（如 Google Chrome 和 Microsoft Edge）中效果最佳。根据所使用的浏览器以及原型加载方式，为了正确播放语音交互，可能需要在浏览器侧进行一些设置。

网页浏览器设置

在网页浏览器中播放原型有两种方式：

1. 通过 IP 地址

2. 通过 http://localhost:9981/

在 http://localhost:9981/ 上播放原型无需设置，并且可跨浏览器工作。

通过 IP 地址（例如 http://192.168.0.40:9981/）播放原型，需要进行一次性浏览器设置以启用麦克风使用，并且仅支持 Google Chrome 和 Microsoft Edge。

Chromium 浏览器仅在站点具有安全来源时允许设备麦克风权限——即通过 https 或 localhost 提供服务。

要在 ProtoPie Connect 的 Web Player 中使用麦克风，需要进行以下一次性设置。

1. 在 Chrome/Edge 浏览器中，访问 flags。

chrome://flags/#unsafely-treat-insecure-origin-as-secure

edge://flags/#unsafely-treat-insecure-origin-as-secure

2. 启用 Insecure origins treated as secure。

3. 添加 ProtoPie Connect 服务器地址和端口号 9981。

注意：服务器地址可在 ProtoPie Connect 左下角找到。

4. 重新启动（Restart）Chrome/Edge 浏览器。

自定义视图选项

与ProtoPie Cloud上一样，你可以使用URL 参数自定义原型在网页浏览器中的显示方式。

• 带有此类参数的 URL 格式如下：http://localhost:9981/pie?pieid=[ number]&name=[pie name]…

• 使用“&”符号分隔 URL 中的参数。

• 如果你在另一台机器上使用浏览器，请将 localhost 替换为 ProtoPie Connect 中显示的 IP 地址。例如：http://192.168.123.101:9981/pie?pieid=23。

带参数 URL 的一些示例：

• 将背景颜色改为白色，显示热点提示，并将原型缩放以适配屏幕。

• http://localhost:9981/pie?pieid=1&bg=white&touchHint=true&scaleToFit=true

• 将背景颜色改为黄色，并隐藏光标

• http://localhost:9981/pie?pieid=1&bg=yellow&cursorHide=true

常见问题