MenuToggle Menu

自定义层集成

ProtoPie Connect 展台视图能够将 ProtoPie 原型与各种自定义层集成，包括 Web 嵌入和实时摄像头。这种集成增强了用户测试体验，使设计更生动。

创建展示台

按照以下步骤创建展示台：

  1. 打开 ProtoPie Connect。
  2. 点击「Group」创建一个组，并将Pie 文件拖入。
  3. 选择该组。
  4. 单击 查看 图标在展示台打开原型。

嵌入自定义层

创建展示台后，右键单击访问展示台选项菜单。如需编辑，请单击编辑按钮。确认已启用编辑模式会有提示。

添加新原型或自定义层：

  • 左上角单击「Add」 添加。
  • 在展台中包括以下层：
    • Pie 文件
    • Web 嵌入（通过 URL 或 iframe 代码）（支持 Maps、Spline、Rive、Bezi 等）
    • 实时摄像头（从可用摄像头或实时流选项中选择）
[object Object]

配置 Web 嵌入层

在将新的 Web 嵌入层添加到展示台后，可以通过属性面板设置其 URL。

你可以提供完整的 URL 或 iframe 代码。Web 嵌入支持各种格式，如 Maps、Spline、Rive 和 Bezi。请确保 URL 有效及其访问权限。

[object Object]

配置实时摄像头层

如需将摄像头视频添加到项目中，请使用实时摄像头层。此功能支持：

  • USB 连接的摄像头，如网络摄像头
  • 笔记本电脑的摄像头
  • 实时流 URL（HLS）

在使用摄像头层之前，请确保浏览器权限。添加摄像头层后，通过摄像头属性面板配置其属性。

[object Object]

展示台预览

添加和配置层后，通过拖放在展示台中将其重新排列。右键单击图层以访问定位选项。在准备就绪时通过单击 查看 预览展示台。

常见问题解答

  • Web 嵌入源支持的 URL 类型有哪些？

    完整的 URL 或 iframe 代码。其中Web 嵌入功能支持各种格式，如 Maps、Spline、Rive、Bezi 等。必须确保 URL 有效，并且使用者具有访问它的权限。

    以下是一些需要考虑的额外细节：

    1. 完整 URL 嵌入：如果选择使用完整 URL 进行嵌入，请确保提供 URL 的服务器具有适当的 CORS（跨域资源共享）设置。特别是当需要嵌入在本地运行或在线托管的编码原型时，这一细节非常关键。
    2. iframe 代码嵌入：当从 Spline、Rive、Mapbox 等服务中嵌入 iframe 代码时，请确保使用直接从各自服务生成的 iframe 代码。你可以插入整个 iframe 代码，或者仅提取 src 部分。例如：

    <iframe

    src="https://my.spline.design/miniroomartcopy-51fb8d8402219e5b621015be7fae806d/"

    frameborder="0"

    width="100%"

    height="100%"

    ></iframe>

Back To Top