Axure如何生成適配手機屏幕的APP原型

上2篇文章講了為什麼375×667是移動端原型設計的最佳解析度和如何設置手機APP原型尺寸，這一篇講解如何設置Axure來生成可以在手機上完美查看的APP原型。

邏輯上有點複雜，但是按照我的方法操作起來並不難。

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

一、如果你的原型是你手機屏幕的邏輯解析度

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

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

1.1、如果你的原型不是你手機屏幕的邏輯解析度

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

二、設置生成原型的手機參數

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

請勾選包含視口標籤。瀏覽器顯示網頁，默認是按照網頁自身解析度來展示的。勾選了此項之後，裡面的區域按照下方規則來處理展示。

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

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

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

2.1、初始縮放倍數怎麼填寫

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

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

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

三、查看原型

3.1、在電腦上看

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

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

請用手機瀏覽器打開該網頁，請用手機瀏覽器打開該網頁，最好生成到桌面查看效果。比如我設計的原型 點擊查看

建議豎向減掉20px，因為Axure默認不顯示頂部狀態欄。

四、總結

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

作者：浪子，關注公眾號langzisay查看全部文章，浪子PRD系列http://51prd.com。