管理和运行原型
使用ProtoPie制作好原型之后,将原型添加至ProtoPie Connect,就可以在智能设备或浏览器中测试原型了。
在ProtoPie Connect中管理原型
为了在ProtoPie Connect中管理和运行原型,首先要将原型添加至ProtoPie Connect。
- 点击“+”按钮或直接拖拽批量文件,可将文件添加至ProtoPie Connect。
- 如果要删除原型,在列表中选择要删除的文件并点击垃圾桶图标。或选择“···”菜单中的全部删除,一次性删除列表中的所有原型。
- 如果要替换列表中的某个原型,选择原型并点击双向箭头图标。
当已添加至ProtoPie Connect的文件被修改时,ProtoPie Connect会自动感知文件里发生的变更并更新。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/269f1dbe9cbe9b74522b20dff11bfe37f1e91247-1450x981.gif/managing-prototypes.gif)
运行ProtoPie Connect中的原型
这里有三种方法来运行已添加至ProtoPie Connect的原型。
连接ProtoPie Player和ProtoPie Connect
ProtoPie Player不仅可以连接ProtoPie Studio使用,也可以连接ProtoPie Connect一起使用。在iOS, iPad和安卓设备中的ProtoPie Player体验和测试原型。
有三种方法可以将ProtoPie Player连接到ProtoPie Connect。
- 扫描二维码
- 输入IP地址
- 使用USB数据线
扫二维码
- 确保电脑和智能设备连接到了同一个WiFi网络
- 点击要运行的原型的设备图标
- 点ProtoPie Player中的扫描二维码按钮
- 扫描二维码
- 连接成功后,点击ProtoPie Connect中的”Run“按钮,就可以在智能设备上运行原型了。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/9c8c138cf14eb621bd0f5e0d863f137182460307-2968x1896.png/open-player-qr-code.png)
输入 IP 地址
- 确保电脑和智能设备连接到了同一个WiFi网络
- 在ProtoPie Player的下拉菜单中选择输入IP地址
- 输入ProtoPie Connect中显示的IP地址
- 连接成功后,点击ProtoPie Connect中的”Run“按钮,这时智能设备上会运行列表中的第一个原型。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/8a368e520e7c4192299dad0d52056a14b48d3759-2440x740.png/entering-ip-address.png)
在浏览器中运行原型
在任何一款常用的浏览器中都可以运行原型,这里有两种情况。
- 在安装了ProtoPie Connect的同一台设备上运行原型
- 在另一台设备上运行原型,例如:平板电脑或其他电脑
在同一台设备上运行原型
- 点击要预览的原型的浏览器图标
- 网页URL的格式如下:http://localhost:9981/
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/5d1c9145c4234cf0afbdeec6668c05a420d4c016-1450x1067.gif/Open-with-Web-Browser.gif)
在另一台设备上运行原型
- 确保安装了ProtoPie Connect的电脑和另一台设备连接到了同一个WiFi网络
- 在另一台设备中打开浏览器
- 在网页地址栏中输入ProtoPie Connect显示的的IP地址
- 点击要预览的原型的浏览器图标。
- 网页URL的格式如下:http://protopie.connect.ip.address:9981/
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/a9c794220921b9cdbd07c1ad11ea437ad8d9c8af-1280x960.jpg/open-on-a-different-machine.jpeg)
打开所有原型
如果要在一个浏览器页面中同时打开所有的原型,请选择“···”菜单中的查看所有原型。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/6000317154d4eda1021e170afd49c56f8ab605d1-2184x1374.png/view-all-protopie-connect.png)
可自定义页面背景颜色,并调整原型的位置和大小。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/059ae31b9511a3bdf19218875d4e6a48a3f909f9-2184x1374.png/customize-background.png)
管理显示选项
与ProtoPie Cloud中的显示选项类似,在浏览器中可以使用URL参数为原型自定义选项。
- 带有参数的URL具有以下格式:http://localhost:9981/pie?pieid=1¶m1=value1¶m2=value2&...
- pieid是一个必要的参数,表示要打开哪个原型。
- 用**&**将参数连接起来
- 如果在另一台机器上打开浏览器,请使用ProtoPie Connect中显示的IP地址替换localhost。
- 示例:http://192.168.123.101:9981/pie?pieid=23.
pieid: Pie ID
|
fullscreen: 在浏览器中显示全屏按钮
|
bg: 背景颜色
|
hotspotHints: 在原型中显示热点提示
|
cursorHide: 在原型中隐藏光标
|
scaleToFit: 缩放原型以适应屏幕
|
带参数的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