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

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

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

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

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

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

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

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

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

圖3 ?高寬為320*548

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

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

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

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

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

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

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

?

end!

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

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

1. 使用axureshare比EasyWebSevr要方便

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

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

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

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