Axure原型如何在手机上预览

现在手机应用越来越多,所以很多小伙伴用axure做了原型之后,需要在手上进行预览或者演示,有下面几种方法:

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

我们在预览页面的时候,点击F12,就可以打开Chrome的调试窗口。

chrome调试窗口

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

手机预览模式

横屏展示

竖屏

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

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

二、发布到AxShare

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

发布到AxShare

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

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

注册或登录

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

生成成功

在浏览器打开这个链接:

pc上打开
在手机上打开

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

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

三、搭建http服务来访问

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

  • 第一种访问速度很快,也方便调试,但是如果要把东西发给你的老板、客户、同事,这种方式就不适合了,毕竟不是所有人都安装了axure。
  • 第二种方式移动性很强,一个链接走天下,但是访问速度堪忧。

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

我推荐使用的软件是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

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

image.png

不要洋洋得意,重点来了,敲黑板。
有点常识的人都知道http://localhost这个地址只能本地访问的,那么如何让别人访问?

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

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

用http://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,那么按照常理来说,http://192.168.1.100:32767/主页.html的效果应该是一样的,我把这个地址发给局域网的朋友,就可以访问了啊。

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

拒绝

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

五、其他

今天我重点介绍了chrome方法、AxShare方法、nginx方法,其他方法还有很多,比如使用其他的web服务器例如IIS、EasyWebSvr、xampp或apache等,还有不走寻常路的Opera代理方式,有兴趣的可以百度一下。

总之好用就好,找出适合你的方式。

Axure从入门到实战,QQ群454069744,欢迎大家找我讨论。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,494评论 18 139
  • 第一章 Nginx简介 Nginx是什么 没有听过Nginx?那么一定听过它的“同行”Apache吧!Ngi...
    JokerW阅读 32,605评论 24 1,002
  • 面试文章合集,持续更新中~~ 2020iOS 开发面试通关指南:67 个必知问题![https://mp.weix...
    goyohol阅读 979评论 0 2
  • 简介 我们都知道苹果手机中的APP都有一个沙盒,APP就是一个信息孤岛,相互是不可以进行通信的。但是iOS的APP...
    哆啦_阅读 27,353评论 3 31
  • 当地平线升起第一缕曙光 循着中国历史凝重的沧桑 走进一九一九的难忘时光 感受那澎湃热血的青春飞扬 凝眸历史的悲怆 ...
    沐雨夕烟阅读 546评论 6 11