Axure 原型如何在手机上演示

最近遇到一个问题,准备把 Axure 做的原型在手机上演示。研究了一下发现目前有两个比较简单的方法,一个就是使用自带的 Axshare ,另一个就是通过 EasyWebSvr 来运行。如果是通过 Axshare 的话,只需在手机上安装 Axshare 这个 APP,然后将原型上传到 Axshare ,然后在手机上载入就可以查看了。这个方式是最简单的,但是由于 Axshare 的服务器在国外,连接速度偶尔会有慢。另一个通过 EasyWebSvr 来运行的方式在速度方面就要好很多,它是通过在本地建立一个服务器来实现的,接下来就着重讲下这个方法。

首先在制作原型的时候,要先确定好原型的尺寸,比如我手机是 iPhone6,那么在制作原型时,就把尺寸设置为375*667。如果是其他的设备,一般可以直接按照设备的实际分辨率除以 2 就行了,这样一般就够。

然后在导出原型的时候,需要在生成HTML文件配置中修改选项「手机/移动设备」中一些设置设置成如图所示。

设置好了以后,就可以直接生成原型了。

接下来就是设置 EasyWebSvr 了,首先将生成的原型放置在demo文件夹里。

然后在设置里将选项服务器的主目录设置成原型的文件夹,其他设置可以不用修改。

接下来就比较关键了,先在电脑上打开这个本地服务器,在sitemap里选择without sitemap ,这一步比较关键,一定要设置,同时地址栏里就会有相应的链接生成。然后就是将这个链接里的电脑地址(打码部分)换成电脑的 IP 地址。然后将手机也接入局域网,保持手机和电脑在同一局域网即可。将修改好的地址,例如http://192.168.1.100/home.html,发送到手机上用浏览器打开就可以了。

这里推荐一个 iOS 上的浏览器 Frameless ,这个浏览器可以将网页全屏显示,即便是 iOS 的状态栏也不会显示,用来演示原型非常好。

在手机上演示原型的时候,一些交互比较复杂效果可能在浏览器里不能正常显示。