起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識善用Axure寫PRD，如何生成適配手機的原型
之前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無需了解這些知識。
至于如何把原型放到手機上面查看，我們下次再講。
相關閱讀
#專欄作家#
浪子，公眾號langzisay，善用Axure寫PRD，人人都是產品經理專欄作家。
本文原創發布于人人都是產品經理。未經許可，禁止轉載。
- 目前還沒評論，等你發揮！
