教程 > 基础教程 > 演示与分享

演示与分享

手机预览

在Mockplus中,有以下几种方式在手机上查看原型,你可以选择最适合你的方式。(注:网页项目不支持手机/平板上查看)

1. 发布项目,然后在手机浏览器中打开获得的网页链接地址,查看项目。

2. 发布项目,打开微信搜索小程序“Mockplus”或安装Mockplus移动客户端MKPlayer,在手机端输入获得的原型码,查看项目。(点击这里下载并安装MKPlayer

原型码查看2副本2

3. 使用微信小程序“Mockplus”或手机客户端扫描二维码,在手机中查看项目。

原型二维码演示副本2 

4、本地查看项目演示 

通过点击右上方的“快速扫码预览”生成的二维码,用手机客户端扫码查看演示

8.png 9.png

注意:上图中的二维码只能使用客户端扫码查看。

在线发布并分享

当把项目同步到云后,你可以将原型分享给你的同事或客户,以获得及时的沟通。

发布项目

在工具栏上点击“发布并分享”按钮,如图所示,开始发布。

发布分享.png

发布完成后,如图所示:

链接.png

发布后将生成一个在线演示地址,你可以复制该链接发送给你的领导、同事或客户,或直接在浏览器打开项目进行演示。

在移动设备上查看原型

对于移动项目,还可以在移动设备上直接查看原型。

发布项目后,你就可以在手机上查看原型了。有以下几种方式供你选择:

在手机浏览器中,直接打开发布的链接地址;

在桌面浏览器中,打开发布的链接地址,然后用手机扫描演示界面中左下角的二维码;

3.png

打开微信搜索小程序“Mockplus”或安装Mockplus手机App(点此下载),打开后输入发布的原型码。 

原型码.png

如何将Mockplus原型演示地址添加到手机桌面?

Android:复制Mockplus的演示链接,在浏览器中打开。选择“添加书签” -> 选择“桌面”,手机桌面上便会出现Mockplus的快捷方式了。

iOS:复制Mockplus的演示链接,在Safari中打开。按照屏幕中的提示,找到“添加到主屏幕”并点击,手机桌面上便会出现Mockplus的快捷方式了。

什么是Mockplus演示包?

Mockplus 2.1可以导出演示包。

你可以同时导出针对Windows和针对Mac OS的演示包,也可以导出其中之一。

针对windows的演示包,是一个exe文件;针对Mac OS的演示包,是一个app文件。

对方收到演示包后,可以在他们的Windows或Mac OS 下直接独立运行。不需要对方安装Mockplus,更不需要其它软件支持。

演示时,看到的演示内容(包括交互)和你设计时预览看到的完全一致。 此外,如果对方在Mac下运行演示遇到问题,请看这里: Mockplus导出的Mac演示包在Mac机上无法打开?

发布离线HTML

当我们在Mockplus中完成原型设计后,可以将原型导出为HTML5的离线包,在离线的情况下,也可以通过网页方式查看原型。还可以通过这个功能,把网页部署到你自己的服务器上,便于团队内部分享。 

1.导出HTML演示 主工具栏 > 导出 > 导出HTML演示

2. 将压缩包内所有文件、文件夹(如下图),上传到服务器。 

3.png

3. 删除index.html, 将remote.html重命名为index.html,然后使用远程地址访问。

Mockplus演示和分享原型设计的方式

在演示原型方面,Mockplus提供了多达8种方式,丰富且实用。下面给大家具体介绍。

直接演示

适用场合:设计时,便于设计者非常快速地查看自己设计原型的效果。

操作方式:在设计时,按下快捷键F5,或点击顶部工具栏中的“演示”。

演示支持环境:Mockplus软件。

1.png

在线发布为HTML网页

适用场合:通过发送一个网页链接就可以查看原型。

操作方式:在主工具栏,点击“发布并分享”。发布完成后,即可获得一个网页链接地址,复制这个地址,将它发送给同事或客户。分享实例:http://run.mockplus.cn/demo/index.html

演示支持环境:浏览器。 

2.png

导出HTML的离线包

适用场合:在离线的情况下,也可以通过网页方式查看原型。还可以通过这个功能,把网页部署到你自己的服务器上,便于团队内部分享。

操作方式:主工具栏->导出->导出HTML演示。 

演示支持环境:浏览器。

3.png

4.png

导出可独立运行的演示包

适用场合:在离线的情况下查看原型。由于演示包内含了Mockplus的支持环境,因此,演示时可以最大程度保证演示效果和设计效果完全一致,不受各种浏览器的兼容问题影响。 

操作方式:主工具栏->导出->导出演示包。 

演示支持环境:不需要其它软件支持。

5.png

6.png

输入原型码,在手机中查看原型

适用场合:在线发布项目后,把获得的原型码告诉同事或者客户,扫描后在线查看原型。 

操作方式:在主工具栏,点击“发布并分享”。发布完成后,即可获得一个原型码,将这个原型码发送给同事或客户。 

演示支持环境:Mockplus手机App。下载地址:https://www.mockplus.cn/download

7.png

扫描二维码在手机中查看原型

适用场合:设计时,离线扫码后即时查看原型;在线发布项目后,也可以在浏览器中扫码查看。

 操作方式:设计时,直接扫码。发布项目后,用手机在浏览器中扫码,或者把二维码截图发给同事或客户。 

演示支持环境:手机浏览器(设计时离线扫描需要Mockplus手机App)。

8.png

9.png

导出图片

适用场合:演示和分享静态的线框图。

操作方式:主工具栏->导出->导出图片。支持JPG和PNG两种格式。

演示支持环境:图片播放软件或幻灯片播放软件。

10.png

11.png

导出项目树

适用场合:把整个项目的树形结构,导出为图片等多种形式,包括脑图、树图、HTML、MarkDown、XML、文本等形式。适合插入到PRD文档中,辅助演示和分享。

操作方式:主工具栏->导出->导出项目树。 

演示支持环境:图片播放软件、文本编辑软件或幻灯片播放软件。

12.png

13.png

以上,就是Mockplus演示分享原型的几种方式,在使用中,你可以根据需要选择适合自己的方式。

将 Mockplus 交互原型分享到 UI 中国

摹客 iDoc 与 Mockplus 制作的可交互原型可以分享到 UI中国 快速预览啦,我们一起来看看怎么做吧。

1.首先进入UI中国,点击右上方 [上传作品] ,即可进入作品上传页。

1.png

2.在作品上传时将 Mockplus 原型分享链接粘贴在此处即可。

2.png

3.在 Mockplus 打开已经制作好的原型,点击右上角的发布并分享图标。01.png

如果该文件还未上传至云端请点击上传。

02.png

上传成功后会进入如下页面,点击复制链接,并将链接复制到步骤2 UI中国作品发布框内即可。

03.png

上一章节 导入与导出
下一章节 团队协作