善用Axure寫PRD，如何生成適配手機的原型.doc

《善用Axure寫PRD，如何生成適配手機的原型.doc》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在學術(shù)論文-天天文庫。

1、善用Axure寫PRD，如何生成適配手機的原型　　之前2篇文章講了《為什么375×667是移動端原型設(shè)計的最佳分辨率》和《如何設(shè)置手機APP原型尺寸》，這一篇講解如何設(shè)置Axure來生成可以在手機上完美查看的APP原型。邏輯上有點復雜，但是按照我的方法操作起來并不難?！　　　∷^的APP原型適配手機，是指用手機瀏打開原型頁面的時候，橫豎都剛好撐滿屏幕。當然如果頁面比較長，高度超過一屏是沒問題的?！　∪绻愕脑褪悄闶謾C屏幕的邏輯分辨率　　比如你的原型是375×667，手機是iPhone6/6s/7，那在手機上查看的時候無需縮放，默認撐滿屏

2、幕。　　如果你的原型是360×640，而手機是Android的小米4、小米note、華為p7、p8榮耀6、7這些主流機型，也是一樣的?！　∪绻愕脑筒皇悄闶謾C屏幕的邏輯分辨率　　比如你的原型是375×667,而你的手機是華為p8，1080×1920。理論上來說無法完美適配APP中所有的頁面。但是除了有下導航的頁面一般都沒問題?！　≡O(shè)置生成原型的手機參數(shù)　　你需要在Axure生成HTML的時候設(shè)置一下手機上如何展示原型?！　≌埞催x包含視口標簽。瀏覽器顯示網(wǎng)頁，默認是按照網(wǎng)頁自身分辨率來展示的。勾選了此項之后，里面的區(qū)域按照下方規(guī)則來處理展

3、示?！　　　挘褂媚J的device-width即可?！　「?，一般不需要填，因為是根據(jù)寬度來決定的?！　∽钚】s放倍數(shù)和最大縮放倍數(shù)，一般不需要填?！　≡试S用戶縮放，一般填寫no?！　〕跏伎s放倍數(shù)怎么填　　具體規(guī)則是原型頁面的橫向分辨率x初始縮放倍數(shù)xDPR參數(shù)=手機屏幕的橫向分辨率。得出這個值填到上圖中的對應位置?！　《@里的DPR參數(shù)(devicePixelRatio)，代表的是設(shè)備像素和CSS像素的比例，下方的chrome網(wǎng)頁調(diào)試中也揭示了這一點?！　∷陨厦娴娜A為p8應該設(shè)置為0.96，你可以根據(jù)機型去百度搜索對應的DPR參數(shù)是多

4、少。　　查看原型　　在電腦上看　　通過chrome-視圖-開發(fā)者-開發(fā)者工具，切換到你想看的手機尺寸。同時也可以用這個工具去了解在其他機型上面的效果，以方面了解是不是需要單獨適配?！　　　‘斎籹afari的菜單欄-開發(fā)-響應者模式也可以。　　　　在手機上看　　請用手機瀏覽器打開該網(wǎng)頁，請用手機瀏覽器打開該網(wǎng)頁，最好生成到桌面查看效果。比如我設(shè)計的原型點擊查看。建議豎向減掉20px，因為Axure默認不顯示頂部狀態(tài)欄?！　】偨Y(jié)　　建議你們下次設(shè)計APP原型的時候按照通用分辨率375×667來設(shè)置，次選方法是按照自己手機的邏輯分辨率來定尺寸。

5、點擊查看更多?！　　　∪绻朊靼诪槭裁匆@樣設(shè)置，可以去搜索viewport和邏輯分辨率等概念。當然就使用而言，PM無需了解這些知識?！　≈劣谌绾伟言头诺绞謾C上面查看，我們下次再講。