MenuToggle Menu

管理和运行原型

使用ProtoPie制作好原型之后，将原型添加至ProtoPie Connect，就可以在智能设备或浏览器中测试原型了。

在ProtoPie Connect中管理原型

为了在ProtoPie Connect中管理和运行原型，首先要将原型添加至ProtoPie Connect。

  • 点击“+”按钮或直接拖拽批量文件，可将文件添加至ProtoPie Connect。
  • 如果要删除原型，在列表中选择要删除的文件并点击垃圾桶图标。或选择“···”菜单中的全部删除，一次性删除列表中的所有原型。
  • 如果要替换列表中的某个原型，选择原型并点击双向箭头图标。

当已添加至ProtoPie Connect的文件被修改时，ProtoPie Connect会自动感知文件里发生的变更并更新。

[object Object]

运行ProtoPie Connect中的原型

这里有三种方法来运行已添加至ProtoPie Connect的原型。

连接ProtoPie Player和ProtoPie Connect

ProtoPie Player不仅可以连接ProtoPie Studio使用，也可以连接ProtoPie Connect一起使用。在iOS, iPad和安卓设备中的ProtoPie Player体验和测试原型。

有三种方法可以将ProtoPie Player连接到ProtoPie Connect。

  • 扫描二维码
  • 输入IP地址
  • 使用USB数据线

扫二维码

  1. 确保电脑和智能设备连接到了同一个WiFi网络
  2. 点击要运行的原型的设备图标
  3. 点ProtoPie Player中的扫描二维码按钮
  4. 扫描二维码
  5. 连接成功后，点击ProtoPie Connect中的”Run“按钮，就可以在智能设备上运行原型了。
[object Object]

输入 IP 地址

  1. 确保电脑和智能设备连接到了同一个WiFi网络
  2. 在ProtoPie Player的下拉菜单中选择输入IP地址
  3. 输入ProtoPie Connect中显示的IP地址
  4. 连接成功后，点击ProtoPie Connect中的”Run“按钮，这时智能设备上会运行列表中的第一个原型。
[object Object]

在浏览器中运行原型

在任何一款常用的浏览器中都可以运行原型，这里有两种情况。

  • 在安装了ProtoPie Connect的同一台设备上运行原型
  • 在另一台设备上运行原型，例如：平板电脑或其他电脑

在同一台设备上运行原型

  1. 点击要预览的原型的浏览器图标
  2. 网页URL的格式如下：http://localhost:9981/
[object Object]

在另一台设备上运行原型

  1. 确保安装了ProtoPie Connect的电脑和另一台设备连接到了同一个WiFi网络
  2. 在另一台设备中打开浏览器
  3. 在网页地址栏中输入ProtoPie Connect显示的的IP地址
  4. 点击要预览的原型的浏览器图标。
  5. 网页URL的格式如下：http://protopie.connect.ip.address:9981/
[object Object]

打开所有原型

如果要在一个浏览器页面中同时打开所有的原型，请选择“···”菜单中的查看所有原型。

[object Object]

可自定义页面背景颜色，并调整原型的位置和大小。

[object Object]

管理显示选项

与ProtoPie Cloud中的显示选项类似，在浏览器中可以使用URL参数为原型自定义选项。

  • 带有参数的URL具有以下格式：http://localhost:9981/pie?pieid=1&param1=value1&param2=value2&...
  • pieid是一个必要的参数，表示要打开哪个原型。
  • 用**&**将参数连接起来
  • 如果在另一台机器上打开浏览器，请使用ProtoPie Connect中显示的IP地址替换localhost。
    • 示例：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=black&touchHint=true&scaleToFit=true
  • 将背景颜色设为黄色，并隐藏光标。
    • http://localhost:9981/pie?pieid=1&bg=yellow&cursorHide=true
Back To Top