現(xiàn)在手機(jī)應(yīng)用越來越多,所以很多小伙伴用axure做了原型之后,需要在手上進(jìn)行預(yù)覽或者演示,有下面幾種方法:
一、通過Chrome模擬器模擬手機(jī)預(yù)覽的效果
我們?cè)陬A(yù)覽頁面的時(shí)候,點(diǎn)擊F12,就可以打開Chrome的調(diào)試窗口。

調(diào)試窗口的左上角,與一個(gè)手機(jī)樣式的圖標(biāo),點(diǎn)擊一下,圖標(biāo)變成藍(lán)色,就打開了手機(jī)預(yù)覽模式,如下圖所示。預(yù)覽模式的上面有個(gè)工具條,可以選擇終端(iphone6、iphone6plus等)、預(yù)覽比例、橫屏豎屏等,非常方便。

橫屏展示

上面這種方式相當(dāng)于在pc上實(shí)現(xiàn)了手機(jī)上的預(yù)覽效果。
優(yōu)點(diǎn)顯而易見,就是非常非常方便,點(diǎn)擊就送,還可以適配多種終端。在原型繪制階段,我們一般都采用這種模式,給客戶或者老板演示的時(shí)候,如果這種方式不方便,才真的用手機(jī)去給他們看。
二、發(fā)布到AxShare
這個(gè)是axure官方為我們提供的一個(gè)免費(fèi)服務(wù),點(diǎn)擊【發(fā)布>發(fā)布到AxShare】

在彈出的界面中,有兩個(gè)tab頁面,創(chuàng)建賬號(hào)或已有賬號(hào),沒有賬號(hào)則選擇第一個(gè),有則選擇第二個(gè)。
然后填寫下面的名稱和密碼(密碼可不填),點(diǎn)擊發(fā)布

然后大概會(huì)生成個(gè)幾秒到幾分鐘不等(根據(jù)你原型的體積),生成成功后,彈出下面的提示。其中的http://shpju9.axshare.com就是我們的訪問url。

在瀏覽器打開這個(gè)鏈接:


這個(gè)鏈接對(duì)應(yīng)的服務(wù)器是在外網(wǎng)的,所以有了這個(gè),不管你發(fā)給開發(fā)、你的領(lǐng)導(dǎo)、客戶,他們都可以訪問了,非常方便。
缺點(diǎn)是axshare這個(gè)網(wǎng)站是老外開發(fā)的,所以訪問速度上,還是有點(diǎn)慢的。
三、搭建http服務(wù)來訪問
前面兩種都是不需要任何額外的工具就可以實(shí)現(xiàn)的,也是最方便的。但是局限也很明顯:
- 第一種訪問速度很快,也方便調(diào)試,但是如果要把東西發(fā)給你的老板、客戶、同事,這種方式就不適合了,畢竟不是所有人都安裝了axure。
- 第二種方式移動(dòng)性很強(qiáng),一個(gè)鏈接走天下,但是訪問速度堪憂。
所以我們偶爾也需要第三種方式,搭建一個(gè)http服務(wù),把你生成的html文件放進(jìn)去,然后你的老板、客戶就又可以用一個(gè)鏈接來訪問了,而且速度很快,不好的地方就是你自己麻煩一點(diǎn),赤裸裸的犧牲自己,成全他人。
我推薦使用的軟件是nginx,先下載、解壓nginx,地址是:
http://nginx.org/download/nginx-1.12.1.zip
解壓之后看到一堆文件,不要怕,只需要雙擊nginx.exe,就是那個(gè)綠色的東東。

雙擊之后
- 如果提示你防火墻什么的,請(qǐng)點(diǎn)擊允許。
- 你可能會(huì)看到一個(gè)黑框一閃而過,不要怕。
打開瀏覽器,打開
http://localhost
你會(huì)看到下面的界面

下一步就是把你的axure生成html,這個(gè)就不介紹了,不懂得QQ群454069744找我交流吧,這不是本篇的重點(diǎn)
然后把你生成的html放到這個(gè)目錄下

放好之后是醬紫的(html目錄下默認(rèn)有兩個(gè)文件,勇敢刪掉就行了)

這時(shí)候再打開http://localhost,就再次看到了熟悉的畫面

不要洋洋得意,重點(diǎn)來了,敲黑板。
有點(diǎn)常識(shí)的人都知道http://localhost這個(gè)地址只能本地訪問的,那么如何讓別人訪問?
這里又有兩個(gè)場(chǎng)景,一種是訪問者跟你在一個(gè)局域網(wǎng),第二種是訪問者跟你不在一個(gè)局域網(wǎng)。
1、訪問者跟你在一個(gè)局域網(wǎng)
這種很簡(jiǎn)單,只需要把localhost換成你的ip即可,比如我的ip是192.168.1.100(cmd中輸入ipconfig可以查看自己的ip),那么我用http://192.168.1.100應(yīng)該就可以訪問,這個(gè)地址發(fā)給局域網(wǎng)的朋友,他們就可以訪問了,如果你的手機(jī)也連入了這個(gè)wifi,就也可以訪問了。

2、訪問者跟你不在一個(gè)局域網(wǎng)
這個(gè)就麻煩了,需要你有點(diǎn)網(wǎng)絡(luò)的知識(shí)和服務(wù)器的知識(shí)。我簡(jiǎn)單說一下,有興趣的同學(xué)可以QQ群454069744找我交流。
這種方式在技術(shù)上跟第一種沒有任何區(qū)別,只不過需要你有一個(gè)獨(dú)立的對(duì)外ip,但是我們的ip通常都是局域網(wǎng)的ip,所以有兩種辦法:買一個(gè)虛擬主機(jī)/服務(wù)器,比如阿里云,他就會(huì)給你一個(gè)獨(dú)立ip,你在服務(wù)器上運(yùn)行nginx,html傳上去,就可以在全世界各地訪問了;第二種是使用花生殼,服務(wù)器還在你的內(nèi)網(wǎng),通過ddns的技術(shù),映射出一個(gè)獨(dú)立ip。
四、一種我本來以為可以的方式
我們知道F5直接預(yù)覽,這里的ip是127.0.0.1,也就是本機(jī)ip,既然127.0.0.1可以訪問,說明axure本身就提供了一個(gè)http服務(wù),那么還用nginx干什么?

比如192.168.1.100也是我的ip,那么按照常理來說,http://192.168.1.100:32767/主頁.html的效果應(yīng)該是一樣的,我把這個(gè)地址發(fā)給局域網(wǎng)的朋友,就可以訪問了啊。
然而他卻無情的拒絕了我的連接請(qǐng)求,下圖:

這一點(diǎn)我很費(fèi)解。估計(jì)axure并不是發(fā)布了一個(gè)普通的http服務(wù),但是這種限制有什么意義呢,如果放開來豈不是更好,我們也不用自己去搞什么nginx了,有興趣的小伙伴可以一起探討下。
五、其他
今天我重點(diǎn)介紹了chrome方法、AxShare方法、nginx方法,其他方法還有很多,比如使用其他的web服務(wù)器例如IIS、EasyWebSvr、xampp或apache等,還有不走尋常路的Opera代理方式,有興趣的可以百度一下。
總之好用就好,找出適合你的方式。
Axure從入門到實(shí)戰(zhàn),QQ群454069744,歡迎大家找我討論。