增哥導讀：在一般的開發工作之前，我們通常會設計產品原型，大部分為axure繪制的線框圖作為產品的PRD文檔，供UI和開發進行前期工作，但是有的時候客戶、領導想在開發之前，看到產品的概貌，就必須做產品的高保真原型進行模擬，這時如果做出來的原型能運行在手機端，那再好不過。下面看看方法吧。

點擊圖片看大圖
圖1 模擬丁香園的高保真原型

在一般的開發工作之前，我們通常會設計產品原型，大部分為axure繪制的線框圖作為產品的PRD文檔，供UI和開發進行前期工作，但是有的時候客戶、領導想在開發之前，看到產品的概貌，就必須做產品的高保真原型進行模擬，這時如果做出來的原型能運行在手機端，那再好不過，如圖1（注：上圖是仿照丁香園的家庭用藥，做的一個高保真原型，算是免費給丁香園打廣告，是不是考慮給我點廣告費？哈哈）。

原型制作軟件有挺多，不過個人使用之后，最后還是依然堅持使用Axure,優點頗多，也可能是先入為主，這個教程Axure也是必須軟件之一，適配為iphone5s

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

點擊圖片看大圖
圖2 高保真的原型圖
（注：高保真原型最好不要用太多內部框架嵌套，加載速度有點慢，還是用動態面板慢慢做，層級多了要有耐心）

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

點擊圖片看大圖
圖3 高寬為320*548

2、F8進行生成設置，設置如下圖4：

點擊圖片看大圖
圖4 配置設置
按照上圖，設置參數（注：不過閃屏頁面一直無法出現，這個問題我也沒得到解決，有解決的可以回復我）

3、生成原型文件，上傳到axureshare或者放置在EasyWebSevr的根目錄下，用本機IP替代電腦名稱，獲得完整路徑。(不清楚的點擊上期內容如何用EasyWebSvr搭建axure本地環境）

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

點擊圖片看大圖

圖5 復制鏈接

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

點擊圖片看大圖
圖6 添加到主屏幕

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

點擊圖片看大圖
圖7 test桌面icon快捷啟動

本文作者：某人某年； 轉載自：簡書