眾所周知，在進(jìn)行移動(dòng)APP開(kāi)發(fā)工作之前，也就是移動(dòng)產(chǎn)品經(jīng)理需要跟大伙或者是團(tuán)隊(duì)成員講解項(xiàng)目的需求的時(shí)候， 我們通常會(huì)設(shè)計(jì)出產(chǎn)品的移動(dòng)app原型，

目前很多公司基本都是采用axure繪制的線(xiàn)框圖作為產(chǎn)品的PRD文檔，供UI和開(kāi)發(fā)進(jìn)行前期工作等。當(dāng)然也有一些專(zhuān)門(mén)的移動(dòng)APP產(chǎn)品原型工具。比如墨刀、mockplus、乎之原型等。

但是，也有的時(shí)候客戶(hù)、領(lǐng)導(dǎo)想在開(kāi)發(fā)之前，看到產(chǎn)品的概貌，就必須做產(chǎn)品的高保真原型進(jìn)行模擬，這時(shí)如果做出來(lái)的原型能運(yùn)行在手機(jī)端，那是最好的演示方式。

今天，25學(xué)堂手把手教你怎么樣把我們弄好的axure?產(chǎn)品原型在手機(jī)上預(yù)覽呢？

6步輕松搞定哦！信不信由你！

1、首選是制作高保真原型，如圖2：

（注：高保真原型最好不要用太多內(nèi)部框架嵌套，加載速度有點(diǎn)慢，還是用動(dòng)態(tài)面板慢慢做，層級(jí)多了要有耐心）

iOS的屏幕尺寸目前是有限的幾種，原型尺寸要和其一致。

比如iphone5s視網(wǎng)膜下像素為640*1136（The default full screen size of the iPhone 5 is 320 x 568 px (w x h).就是說(shuō)320*568已經(jīng)可以鋪滿(mǎn)全屏，不過(guò)，由于Axure導(dǎo)出的原型在iOS上處理status bar時(shí)有問(wèn)題，需要在高度上減去status bar的高度20，就為320*548，所以保證原型的高寬為320和548,如圖3整體高度為548px：

圖3 ?高寬為320*548

2、F8進(jìn)行生成設(shè)置，設(shè)置如下圖4：

按照上圖，設(shè)置參數(shù)（注：不過(guò)閃屏頁(yè)面一直無(wú)法出現(xiàn)，這個(gè)問(wèn)題我也沒(méi)得到解決，有解決的可以回復(fù)我）

3、生成原型文件，上傳到axureshare或者放置在本地服務(wù)器的根目錄下，用本機(jī)IP替代電腦名稱(chēng)，獲得完整路徑。 這里就是需要構(gòu)建一個(gè)可以訪(fǎng)問(wèn)的目錄。

并且在同一個(gè)網(wǎng)絡(luò)當(dāng)中訪(fǎng)問(wèn)，如果你已經(jīng)上傳到外網(wǎng)上面，那就可以隨時(shí)隨地的訪(fǎng)問(wèn)了。

4、復(fù)制生成的html中原型鏈接，選擇without Sitemap,如圖5：

5、在safari中粘貼鏈接，并打開(kāi)，已經(jīng)可以看到和屏幕寬度的界面，并添加到主屏幕，如圖6：。

6、可以通過(guò)桌面的快捷icon，進(jìn)入原型，這個(gè)時(shí)候已經(jīng)適配了手機(jī)，躺著桌面的icon,絲毫不會(huì)讓人看得出是原型，下圖7：

?

end!

我在分享一個(gè)PS里面的動(dòng)作，將你iphone5s截的圖裁掉上面狀態(tài)欄，并改成一半大小，直接在axure中用?ps裁剪動(dòng)作，大家導(dǎo)入到自己的動(dòng)作中，以后要模擬哪一個(gè)產(chǎn)品，需要截圖的時(shí)候，就可以進(jìn)行批處理，簡(jiǎn)單粗暴.

小編給大家把細(xì)節(jié)補(bǔ)充一下：

1. 使用axureshare比EasyWebSevr要方便

2. 在得到鏈接后，需要使用iphone手機(jī)上的safari瀏覽器

3. 一定要記住你設(shè)置的文件密碼喲！訪(fǎng)問(wèn)鏈接時(shí)需要輸入的。

如果大家還有不明白的地方，可以加我們25學(xué)堂的官方群，在群里咨詢(xún)即可，我們會(huì)一一給大家做解答。

文章內(nèi)容來(lái)源：http://www.jianshu.com/p/3dc243cd2b6c#