Axure教程 Axure原型如何在手机上预览
关关 2018-07-05 来源 : 阅读 1826 评论 0

摘要:本篇Axure教程探讨了Axure原型如何在手机上预览,希望阅读本篇文章以后大家有所收获,帮助大家对Axure的掌握更加深入。

背景就不多说了,现在手机应用越来越多,早已超出PC应用,所以很多小伙伴用axure做了原型之后,需要在手上进行预览或者演示。

但是axure本身并没有提供这样的功能,所以,我们就需要使用一些手段,方法有很多,我们现在介绍一下,同时也会说一说这些方法的优缺点,以及适用的场景。

一、通过Chrome模拟器模拟手机预览的效果

Chrome应该大家都过了,我们在预览页面的时候,点击F12,就可以打开Chrome的调试窗口。

chrome调试窗口

调试窗口的左上角,与一个手机样式的图标,点击一下,图标变成蓝色,就打开了手机预览模式,如下图所示。预览模式的上面有个工具条,可以选择终端(iphone6、iphone6plus等)、预览比例、横屏竖屏等,非常方便。

手机预览模式

横屏展示

竖屏

上面这种方式相当于在pc上实现了手机上的预览效果。

优点显而易见,就是非常非常方便,点击就送,还可以适配多种终端。在原型绘制阶段,我们一般都采用这种模式,给客户或者老板演示的时候,如果这种方式不方便,才真的用手机去给他们看。

二、发布到AxShare

这个是axure官方为我们提供的一个免费服务,点击【发布>发布到AxShare】

发布到AxShare

在弹出的界面中,有两个tab页面,创建账号或已有账号,没有账号则选择第一个,有则选择第二个。

然后填写下面的名称和密码(密码可不填),点击发布

注册或登录

然后大概会生成个几秒到几分钟不等(根据你原型的体积),生成成功后,弹出下面的提示。其中的//shpju9.axshare.com就是我们的访问url。

生成成功

在浏览器打开这个链接:

pc上打开

在手机上打开

这个链接对应的服务器是在外网的,所以有了这个,不管你发给开发、你的领导、客户,他们都可以访问了,非常方便。

缺点是axshare这个网站是老外开发的,所以访问速度上,还是有点慢的。

三、搭建http服务来访问

前面两种都是不需要任何额外的工具就可以实现的,也是最方便的。但是局限也很明显:

· 第一种访问速度很快,也方便调试,但是如果要把东西发给你的老板、客户、同事,这种方式就不适合了,毕竟不是所有人都安装了axure。

· 第二种方式移动性很强,一个链接走天下,但是访问速度堪忧。

所以我们偶尔也需要第三种方式,搭建一个http服务,把你生成的html文件放进去,然后你的老板、客户就又可以用一个链接来访问了,而且速度很快,不好的地方就是你自己麻烦一点,赤裸裸的牺牲自己,成全他人。

我推荐使用的软件是nginx,先下载、解压nginx,地址是:

//nginx.org/download/nginx-1.12.1.zip

解压之后看到一堆文件,不要怕,只需要双击nginx.exe,就是那个绿色的东东。

双击nginx.exe

双击之后

· 如果提示你防火墙什么的,请点击允许。

· 你可能会看到一个黑框一闪而过,不要怕。

打开浏览器,打开

//localhost

你会看到下面的界面

看到这个界面就说明启动成功了

下一步就是把你的axure生成html,这个就不介绍了,不懂得QQ群454069744找我交流吧,这不是本篇的重点

然后把你生成的html放到这个目录下

html文件放在这个目录下

放好之后是酱紫的(html目录下默认有两个文件,勇敢删掉就行了)

image.png

这时候再打开//localhost,就再次看到了熟悉的画面

image.png

不要洋洋得意,重点来了,敲黑板。

有点常识的人都知道//localhost这个地址只能本地访问的,那么如何让别人访问?

这里又有两个场景,一种是访问者跟你在一个局域网,第二种是访问者跟你不在一个局域网。

1、访问者跟你在一个局域网

这种很简单,只需要把localhost换成你的ip即可,比如我的ip是192.168.1.100(cmd中输入ipconfig可以查看自己的ip),那么我用//192.168.1.100应该就可以访问,这个地址发给局域网的朋友,他们就可以访问了,如果你的手机也连入了这个wifi,就也可以访问了。

用//192.168.1.100访问

2、访问者跟你不在一个局域网

这个就麻烦了,需要你有点网络的知识和服务器的知识。我简单说一下,有兴趣的同学可以QQ群454069744找我交流。

这种方式在技术上跟第一种没有任何区别,只不过需要你有一个独立的对外ip,但是我们的ip通常都是局域网的ip,所以有两种办法:买一个虚拟主机/服务器,比如阿里云,他就会给你一个独立ip,你在服务器上运行nginx,html传上去,就可以在全世界各地访问了;第二种是使用花生壳,服务器还在你的内网,通过ddns的技术,映射出一个独立ip。

四、一种我本来以为可以的方式

我们知道F5直接预览,这里的ip是127.0.0.1,也就是本机ip,既然127.0.0.1可以访问,说明axure本身就提供了一个http服务,那么还用nginx干什么?

预览

比如192.168.1.100也是我的ip,那么按照常理来说,//192.168.1.100:32767/主页.html的效果应该是一样的,我把这个地址发给局域网的朋友,就可以访问了啊。

然而他却无情的拒绝了我的连接请求,下图:

拒绝

这一点我很费解。估计axure并不是发布了一个普通的http服务,但是这种限制有什么意义呢,如果放开来岂不是更好,我们也不用自己去搞什么nginx了,有兴趣的小伙伴可以一起探讨下。


本文由职坐标整理发布,欢迎关注职坐标常用软件Axure频道,获取更多Axure知识!

本文由 @关关 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程