MenuToggle Menu

管理和运行原型

在ProtoPie Studio中制作原型后，就可以通过ProtoPie Connect在智能设备或桌面浏览器中运行原型。点此下载ProtoPie Connect。

在ProtoPie Connect中运行原型

在ProtoPie Connect中运行原型需要进行两个步骤：

  • 步骤1. 将原型添加至ProtoPie Connect
  • 步骤2. 运行已添加的原型

1. 加载原型

首先，需要将原型添加到ProtoPie Connect中。ProtoPie Connect支持同时运行一个或多个Pie文件。

  • 要添加原型，请点击新建图标（+）并选择要添加的原型，或将原型文件直接拖拽到ProtoPie Connect的界面。
  • 要从列表中移除原型，只需选择相应的Pie文件并点击垃圾桶图标。
  • 要使用另一个原型来替换当前原型，可以将鼠标移到原型上并点击双向箭头图标。

每添加一个新的Pie文件将会创建一个新的Pie ID，当使用其它Pie文件替换原来的Pie文件时，新的Pie文件将会沿用先前Pie文件所使用的Pie ID。

对于已经加载到ProtoPie Connect中的原型，在ProtoPie Studio中进行修改时，会自动同步到ProtoPie Connect中。

[object Object]

将Pie进行分组，可以更高效地进行排序。单击Group图标，可以创建新的Pie群组。如果要把Pie添加到群组，将Pie拖放到群组中即可。这时，群组必须是展开状态。

[object Object]
  • 如果要把Pie从一个群组移动到其他群组，将其拖放到相应群组即可。
  • 如果要展开或折叠群组，该群组至少需要包含一个Pie。
  • 如果要选择或取消选择群组，该群组至少需要包含一个Pie。
  • 新创建的群组将被至于群组目录的顶部。
  • 新导入的Pie将被添加到群组下方。
  • 如果要重命名组，须双击群组名称并输入新组名。
  • 如果要删除群组，须将鼠标箭头移动到群组上方，点击垃圾桶图标。

2. 运行原型

有三种方式通过ProtoPie Connect来运行原型。

使用ProtoPie Connect和ProtoPie Player运行原型

ProtoPie Player是ProtoPie Studio和ProtoPie Connect的免费配套应用程序。在iOS、iPadOS以及安卓设备上均可以查看、体验和运行已添加到ProtoPie Connect中的任意原型。

通过以下三种方法均可将ProtoPie Player连接到ProtoPie Connect：

  1. 扫描二维码
  2. 输入IP地址
  3. 使用USB数据线

了解更多ProtoPie Player应用程序的相关知识。

扫描二维码

  1. 确保电脑和智能设备均连接到同一Wifi。
  2. 在ProtoPie Connect中，点击要打开的原型所对应的二维码图标，屏幕会显示一个二维码。
  3. 在列表中选择二维码。
  4. 扫描屏幕上显示的二维码，即可在Player中运行相应的原型。
[object Object]

输入IP地址

  1. 确保电脑和智能设备均连接到同一Wifi。
  2. 在ProtoPie Player的下拉菜单中点击“输入IP地址”选项。
  3. 输入ProtoPie Connect中显示的IP地址。
  4. 点击“连接”按钮即可在智能设备上运行相应原型。
[object Object]

在ProtoPie Connect和ProtoPie Player for Wear OS中运行原型

与常规的 ProtoPie Player 不同，ProtoPie Player for Wear OS 只能与 Connect 企业版搭配使用。

  1. 确保ProtoPie Player for Wear OS和ProtoPie Connect均连接到同一个网络中。
  2. 将它们都打开—ProtoPie Player for Wear OS和ProtoPie Connect将会自动搜寻到彼此。
  3. 在ProtoPie Player for Wear OS中点击Tap以便与ProtoPie Connect进行配对。
  4. 在ProtoPie Connect中添加一个智能手表原型。
  5. 在ProtoPie Connect操作界面的顶部点击Run按钮使原型得以在Player for Wear OS中打开。
  6. 如需重启或退出原型，请双击智能手表屏幕。

使用ProtoPie Connect在网页浏览器上运行原型

如要在浏览器上查看原型，建议使用 Chromium 浏览器以获得最佳性能。以下两种方法均可从 ProtoPie Connect 中打开原型并呈现在桌面端浏览器上。

  • 在运行ProtoPie Connect的同一台电脑上打开原型
  • 在不同的电脑上打开原型

在同一台电脑上打开原型

  1. 点击要打开原型的浏览器图标。
  2. 原型在浏览器中打开，其URL格式为：http://localhost:9981/
[object Object]

在不同的电脑上打开原型

  1. 确保运行ProtoPie Connect的电脑和要打开原型的电脑在同一Wifi中。
  2. 在要打开原型的电脑上开启任一浏览器。
  3. 在浏览器地址栏输入ProtoPie Connect的IP地址，将可看到ProtoPie Connect的界面。
  4. 点击要打开原型的浏览器图标。
  5. 原型在浏览器中打开，其URL格式为：http://protopie.connect.ip.address:9981/

在同一个浏览器选项卡中打开不同的原型

  1. 把原型添加到同一群组。
  2. 选择原型。（点击群组名称旁边的复选框，即可选择群组中的所有原型。）
  3. 点击MultiView图标，在同一浏览器中同时打开多个原型。
[object Object]

右击屏幕，打开控制菜单。点击Settings，可以自定义背景色、变更原型的大小或重新排列原型。

[object Object]

下次在MultiView中重新打开原型时，将以新的布局设置显示原型。如果删除或重新排列群组中的Pie，布局设置将被重置。

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

从 ProtoPie Connect 1.8.0 版本起，支持在网页浏览器中使用语音功能，就像在iOS/安卓的ProtoPie Player和ProtoPie Studio的预览窗里使用语音功能一样。目前，支持的功能有：

兼容网页浏览器

在处理麦克风权限时，每个浏览器的行为都不同。为了使用语音识别和语音听取功能，浏览器需获取麦克风权限。当需要在原型中启用麦克风时，浏览器将请求麦克风权限，如下图所示。要开启麦克风权限，只需点击“允许”。

[object Object]

在ProtoPie Connect在网页播放器中使用语音功能时，基于Chromium内核的浏览器中效果最好，例如谷歌Chrome浏览器和微软Edge浏览器。根据使用的浏览器和原型的加载方式，或需在浏览器上进行以下设置后才能正常使用语音功能。

设置网页浏览器

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

  1. 基于IP地址
  2. 基于http://localhost:9981/

在http://localhost:9981/上播放原型不需要进行任何设置，并可以跨浏览器使用。

在IP地址上播放原型（例如，http://192.168.0.40:9981/）需进行单次的浏览器设置以开启麦克风权限，并且适用于谷歌Chrome浏览器和微软Edge浏览器。

基于Chromium内核的浏览器仅在网站具有安全源时才会允许设备的麦克风权限 — 即从https或localhost提供服务。

在ProtoPie Connect的网页播放器上使用麦克风，需要进行以下单次设置。

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

[object Object]

3. 添加端口号为9981的ProtoPie Connect服务器地址

注意：服务器地址可以在ProtoPie Connect界面的左下角找到

[object Object]

4. 重启Chrome/Edge浏览器

[object Object]

自定义视图选项

如同在ProtoPie Cloud中一样，可以通过调整URL参数来自定义原型在浏览器中的显示效果。

  • 具有此类参数的URL呈现类似这样的格式：http://localhost:9981/pie?pieid=[数字]&name=[pie名称]…
  • 在URL中使用“&”符号来分隔参数。
  • 如使用另一台电脑上的浏览器，应将localhost替换为ProtoPie Connect所显示的IP地址。例如：http://192.168.123.101:9981/pie?pieid=23。

pieid: Pie ID

  • 值: number
  • 默认值: (required)
  • 示例: http://localhost:9981/pie?pieid=1

fullscreen: 在浏览器中显示全屏按钮

  • 值: true | false
  • 默认值: false
  • 示例: http://localhost:9981/pie?pieid=1&fullscreen=true

bg: 背景颜色

  • 值:
    - CSS color, e.g., red, black, transparent
    - HEX, e.g., #ffffff
    - rgb, e.g., rgb(255,255,0)
    - rgba, e.g., rgba(200,100,20,0.4)
  • 默认值: transparent
  • 示例: http://localhost:9981/pie?pieid=1&bg=#000000

hotspotHints: 在原型中显示热点提示

  • 值: true | false
  • 默认值: 在ProtoPie Connect中默认设置
  • 示例: http://localhost:9981/pie?pieid=1&hotspotHints=true

cursorHide: 在原型中隐藏光标

  • 值: true | false
  • 默认值: false
  • 示例: http://localhost:9981/pie?pieid=1&cursorHide=true

scaleToFit: 缩放原型以适应屏幕

  • 值: true | false
  • 默认值: true
  • 示例: http://localhost:9981/pie?pieid=1&scaleToFit=false

带参数URL的一些范例：

  • 以全屏模式显示，背景色更改为rgba(0,0,255,0.8)，显示可操作区域提示，不对屏幕尺寸进行适配拉伸。
    • http://localhost:9981/pie?pieid=1&fullscreen=true&bg=rgba(0,0,255,0.8)&touchHint=true&scaleToFit=false
  • 更改背景色为白色，显示可操作区域提示，拉伸原型以适配屏幕尺寸。
    • http://localhost:9981/pie?pieid=1&bg=white&touchHint=true&scaleToFit=true
  • 更改背景色为黄色，并隐藏鼠标指针。
    • http://localhost:9981/pie?pieid=1&bg=yellow&cursorHide=true

常见问题

Back To Top