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

所謂的APP原型適配手機(jī)，是指用手機(jī)瀏打開(kāi)原型頁(yè)面的時(shí)候，橫豎都剛好撐滿(mǎn)屏幕。當(dāng)然如果頁(yè)面比較長(zhǎng)，高度超過(guò)一屏是沒(méi)問(wèn)題的。

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

比如你的原型是375×667，手機(jī)是iPhone6/6s/7，那在手機(jī)上查看的時(shí)候無(wú)需縮放，默認(rèn)撐滿(mǎn)屏幕。

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

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

比如你的原型是375×667,而你的手機(jī)是華為p8，1080×1920。理論上來(lái)說(shuō)無(wú)法完美適配APP中所有的頁(yè)面。但是除了有下導(dǎo)航的頁(yè)面一般都沒(méi)問(wèn)題。

設(shè)置生成原型的手機(jī)參數(shù)

你需要在Axure生成HTML的時(shí)候設(shè)置一下手機(jī)上如何展示原型。

請(qǐng)勾選包含視口標(biāo)簽。瀏覽器顯示網(wǎng)頁(yè)，默認(rèn)是按照網(wǎng)頁(yè)自身分辨率來(lái)展示的。勾選了此項(xiàng)之后，里面的區(qū)域按照下方規(guī)則來(lái)處理展示。

寬，使用默認(rèn)的device-width即可。

高，一般不需要填，因?yàn)槭歉鶕?jù)寬度來(lái)決定的。

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

允許用戶(hù)縮放，一般填寫(xiě)no。

初始縮放倍數(shù)怎么填

具體規(guī)則是原型頁(yè)面的橫向分辨率x初始縮放倍數(shù)xDPR參數(shù)=手機(jī)屏幕的橫向分辨率。得出這個(gè)值填到上圖中的對(duì)應(yīng)位置。

而這里的DPR參數(shù)(devicePixelRatio)，代表的是設(shè)備像素和CSS像素的比例，下方的chrome網(wǎng)頁(yè)調(diào)試中也揭示了這一點(diǎn)。

所以上面的華為p8應(yīng)該設(shè)置為0.96，你可以根據(jù)機(jī)型去百度搜索對(duì)應(yīng)的DPR參數(shù)是多少。

查看原型

在電腦上看

通過(guò)chrome-視圖-開(kāi)發(fā)者-開(kāi)發(fā)者工具，切換到你想看的手機(jī)尺寸。同時(shí)也可以用這個(gè)工具去了解在其他機(jī)型上面的效果，以方面了解是不是需要單獨(dú)適配。

當(dāng)然safari的菜單欄-開(kāi)發(fā)-響應(yīng)者模式也可以。

在手機(jī)上看

請(qǐng)用手機(jī)瀏覽器打開(kāi)該網(wǎng)頁(yè)，請(qǐng)用手機(jī)瀏覽器打開(kāi)該網(wǎng)頁(yè)，最好生成到桌面查看效果。比如我設(shè)計(jì)的原型點(diǎn)擊查看。
建議豎向減掉20px，因?yàn)锳xure默認(rèn)不顯示頂部狀態(tài)欄。

總結(jié)

建議你們下次設(shè)計(jì)APP原型的時(shí)候按照通用分辨率375×667來(lái)設(shè)置，次選方法是按照自己手機(jī)的邏輯分辨率來(lái)定尺寸。點(diǎn)擊查看更多。

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

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

相關(guān)閱讀

善用Axure寫(xiě)PRD，移動(dòng)PM需要梳理這些流程圖

善用Axure寫(xiě)PRD，全局規(guī)范一個(gè)都不能少

善用Axure寫(xiě)PRD，徹底丟棄Word和PPT

善用Axure寫(xiě)PRD，APP文本框通用的輸入規(guī)則

善用Axure寫(xiě)PRD，PM應(yīng)該知道的APP授權(quán)知識(shí)

善用Axure寫(xiě)PRD，2種模式7種方法解析頁(yè)面加載邏輯

善用Axure寫(xiě)PRD，產(chǎn)品邏輯的5種呈現(xiàn)方法

PRD1.0分享：全面通用的移動(dòng)端產(chǎn)品需求文檔

#專(zhuān)欄作家#

浪子，公眾號(hào)langzisay，善用Axure寫(xiě)PRD，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。