Axure原型如何在手機(jī)上預(yù)覽

現(xiàn)在手機(jī)應(yīng)用越來越多,所以很多小伙伴用axure做了原型之后,需要在手上進(jìn)行預(yù)覽或者演示,有下面幾種方法:

一、通過Chrome模擬器模擬手機(jī)預(yù)覽的效果

我們?cè)陬A(yù)覽頁面的時(shí)候,點(diǎn)擊F12,就可以打開Chrome的調(diào)試窗口。

chrome調(diào)試窗口

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

手機(jī)預(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】

發(fā)布到AxShare

在彈出的界面中,有兩個(gè)tab頁面,創(chuàng)建賬號(hào)或已有賬號(hào),沒有賬號(hào)則選擇第一個(gè),有則選擇第二個(gè)。

然后填寫下面的名稱和密碼(密碼可不填),點(diǎn)擊發(fā)布

注冊(cè)或登錄

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

生成成功

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

pc上打開
在手機(jī)上打開

這個(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è)綠色的東東。

雙擊nginx.exe

雙擊之后

  • 如果提示你防火墻什么的,請(qǐng)點(diǎn)擊允許。
  • 你可能會(huì)看到一個(gè)黑框一閃而過,不要怕。

打開瀏覽器,打開

http://localhost

你會(huì)看到下面的界面

看到這個(gè)界面就說明啟動(dòng)成功了

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

然后把你生成的html放到這個(gè)目錄下

html文件放在這個(gè)目錄下

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

image.png

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

image.png

不要洋洋得意,重點(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,就也可以訪問了。

用http://192.168.1.100訪問

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干什么?

預(yù)覽

比如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,歡迎大家找我討論。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,525評(píng)論 19 139
  • 第一章 Nginx簡(jiǎn)介 Nginx是什么 沒有聽過Nginx?那么一定聽過它的“同行”Apache吧!Ngi...
    JokerW閱讀 33,017評(píng)論 24 1,002
  • 面試文章合集,持續(xù)更新中~~ 2020iOS 開發(fā)面試通關(guān)指南:67 個(gè)必知問題![https://mp.weix...
    goyohol閱讀 1,176評(píng)論 0 2
  • 簡(jiǎn)介 我們都知道蘋果手機(jī)中的APP都有一個(gè)沙盒,APP就是一個(gè)信息孤島,相互是不可以進(jìn)行通信的。但是iOS的APP...
    哆啦_閱讀 27,952評(píng)論 3 32
  • 當(dāng)?shù)仄骄€升起第一縷曙光 循著中國歷史凝重的滄桑 走進(jìn)一九一九的難忘時(shí)光 感受那澎湃熱血的青春飛揚(yáng) 凝眸歷史的悲愴 ...
    沐雨夕煙閱讀 729評(píng)論 6 11

友情鏈接更多精彩內(nèi)容