现在手机应用越来越多,所以很多小伙伴用axure做了原型之后,需要在手上进行预览或者演示,有下面几种方法:
一、通过Chrome模拟器模拟手机预览的效果
我们在预览页面的时候,点击F12,就可以打开Chrome的调试窗口。
chrome调试窗口调试窗口的左上角,与一个手机样式的图标,点击一下,图标变成蓝色,就打开了手机预览模式,如下图所示。预览模式的上面有个工具条,可以选择终端(iphone6、iphone6plus等)、预览比例、横屏竖屏等,非常方便。
手机预览模式横屏展示
竖屏上面这种方式相当于在pc上实现了手机上的预览效果。
优点显而易见,就是非常非常方便,点击就送,还可以适配多种终端。在原型绘制阶段,我们一般都采用这种模式,给客户或者老板演示的时候,如果这种方式不方便,才真的用手机去给他们看。
二、发布到AxShare
这个是axure官方为我们提供的一个免费服务,点击【发布>发布到AxShare】
发布到AxShare在弹出的界面中,有两个tab页面,创建账号或已有账号,没有账号则选择第一个,有则选择第二个。
然后填写下面的名称和密码(密码可不填),点击发布
注册或登录 生成成功在浏览器打开这个链接:
pc上打开 在手机上打开这个链接对应的服务器是在外网的,所以有了这个,不管你发给开发、你的领导、客户,他们都可以访问了,非常方便。
缺点是axshare这个网站是老外开发的,所以访问速度上,还是有点慢的。
前面两种都是不需要任何额外的工具就可以实现的,也是最方便的。但是局限也很明显:
- 第一种访问速度很快,也方便调试,但是如果要把东西发给你的老板、客户、同事,这种方式就不适合了,毕竟不是所有人都安装了axure。
- 第二种方式移动性很强,一个链接走天下,但是访问速度堪忧。
我推荐使用的软件是nginx,先下载、解压nginx,地址是:
http://nginx.org/download/nginx-1.12.1.zip
解压之后看到一堆文件,不要怕,只需要双击nginx.exe,就是那个绿色的东东。
双击nginx.exe双击之后
- 如果提示你防火墙什么的,请点击允许。
- 你可能会看到一个黑框一闪而过,不要怕。
打开浏览器,打开
http://localhost
你会看到下面的界面
看到这个界面就说明启动成功了下一步就是把你的axure生成html,这个就不介绍了,不懂得QQ群454069744找我交流吧,这不是本篇的重点
然后把你生成的html放到这个目录下
html文件放在这个目录下放好之后是酱紫的(html目录下默认有两个文件,勇敢删掉就行了)
image.png image.png这里又有两个场景,一种是访问者跟你在一个局域网,第二种是访问者跟你不在一个局域网。
用http://192.168.1.100访问2、访问者跟你不在一个局域网
这个就麻烦了,需要你有点网络的知识和服务器的知识。我简单说一下,有兴趣的同学可以QQ群454069744找我交流。
这种方式在技术上跟第一种没有任何区别,只不过需要你有一个独立的对外ip,但是我们的ip通常都是局域网的ip,所以有两种办法:买一个虚拟主机/服务器,比如阿里云,他就会给你一个独立ip,你在服务器上运行nginx,html传上去,就可以在全世界各地访问了;第二种是使用花生壳,服务器还在你的内网,通过ddns的技术,映射出一个独立ip。
预览四、一种我本来以为可以的方式
然而他却无情的拒绝了我的连接请求,下图:
拒绝五、其他
今天我重点介绍了chrome方法、AxShare方法、nginx方法,其他方法还有很多,比如使用其他的web服务器例如IIS、EasyWebSvr、xampp或apache等,还有不走寻常路的Opera代理方式,有兴趣的可以百度一下。
总之好用就好,找出适合你的方式。
Axure从入门到实战,QQ群454069744,欢迎大家找我讨论。