之前2篇文章講了《為什么375×667是移動端原型設計的最佳分辨率》和《如何設置手機APP原型尺寸》，這一篇講解如何設置Axure來生成可以在手機上完美查看的APP原型。邏輯上有點復雜，但是按照我的方法操作起來并不難。

所謂的APP原型適配手機，是指用手機瀏打開原型頁面的時候，橫豎都剛好撐滿屏幕。當然如果頁面比較長，高度超過一屏是沒問題的。

如果你的原型是你手機屏幕的邏輯分辨率

比如你的原型是375×667，手機是iPhone6/6s/7，那在手機上查看的時候無需縮放，默認撐滿屏幕。

如果你的原型是360×640，而手機是Android的小米4、小米note、華為p7、p8榮耀6、7這些主流機型，也是一樣的。

如果你的原型不是你手機屏幕的邏輯分辨率

比如你的原型是375×667,而你的手機是華為p8，1080×1920。理論上來說無法完美適配APP中所有的頁面。但是除了有下導航的頁面一般都沒問題。

設置生成原型的手機參數

你需要在Axure生成HTML的時候設置一下手機上如何展示原型。

請勾選包含視口標簽。瀏覽器顯示網頁，默認是按照網頁自身分辨率來展示的。勾選了此項之后，里面的區域按照下方規則來處理展示。

寬，使用默認的device-width即可。

高，一般不需要填，因為是根據寬度來決定的。

最小縮放倍數和最大縮放倍數，一般不需要填。

允許用戶縮放，一般填寫no。

初始縮放倍數怎么填

具體規則是原型頁面的橫向分辨率x初始縮放倍數xDPR參數=手機屏幕的橫向分辨率。得出這個值填到上圖中的對應位置。

而這里的DPR參數(devicePixelRatio)，代表的是設備像素和CSS像素的比例，下方的chrome網頁調試中也揭示了這一點。

所以上面的華為p8應該設置為0.96，你可以根據機型去百度搜索對應的DPR參數是多少。

查看原型

在電腦上看

通過chrome-視圖-開發者-開發者工具，切換到你想看的手機尺寸。同時也可以用這個工具去了解在其他機型上面的效果，以方面了解是不是需要單獨適配。

當然safari的菜單欄-開發-響應者模式也可以。

在手機上看

請用手機瀏覽器打開該網頁，請用手機瀏覽器打開該網頁，最好生成到桌面查看效果。比如我設計的原型點擊查看。
建議豎向減掉20px，因為Axure默認不顯示頂部狀態欄。

總結

建議你們下次設計APP原型的時候按照通用分辨率375×667來設置，次選方法是按照自己手機的邏輯分辨率來定尺寸。點擊查看更多。

如果想明白為什么要這樣設置，可以去搜索viewport和邏輯分辨率等概念。當然就使用而言，PM無需了解這些知識。

至于如何把原型放到手機上面查看，我們下次再講。

相關閱讀

善用Axure寫PRD，移動PM需要梳理這些流程圖

善用Axure寫PRD，全局規范一個都不能少

善用Axure寫PRD，徹底丟棄Word和PPT

善用Axure寫PRD，APP文本框通用的輸入規則

善用Axure寫PRD，PM應該知道的APP授權知識

善用Axure寫PRD，2種模式7種方法解析頁面加載邏輯

善用Axure寫PRD，產品邏輯的5種呈現方法

PRD1.0分享：全面通用的移動端產品需求文檔

#專欄作家#

浪子，公眾號langzisay，善用Axure寫PRD，人人都是產品經理專欄作家。

本文原創發布于人人都是產品經理。未經許可，禁止轉載。