整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

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

          前2篇文章講了《為什么375×667是移動端原型設計的最佳分辨率如何設置手機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無需了解這些知識。

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

          站適配技術很好解決了pc時代向移動互聯網時代的過渡下,網站的跨移動設備面臨的問題,通過網站適配技術,可以讓傳統網站適應手機小屏幕,也就是傳統pc網站在手機下能夠自動調整其不僅以適應小屏幕,行業術語管他叫網站適配或者響應式布局,其實網站適配并沒有那么復雜,添加下面這句代碼可以強制網頁適配手機屏幕 。

          <meta http-equiv=”Content-type” name=”viewport” content=”initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width”>

          第一個meta標簽表示:

          強制讓文檔與設備的寬度保持1:1;

          文檔最大的寬度比列是1.0(initial-scale初始刻度值和maximum-scale最大刻度值);

          user-scalable定義是否可縮放(0為不縮放),使頁面固定設備上面的大小。

          當然要真正的適配網站,還需要進行css3 media query多媒體查詢技術,經過職業web前端工程師來開發完成的。切圖網推出永久、不依賴第三方的網站適配服務,每個項目均有專業工程師分析,編碼,確保每個項目的品質,歡迎垂詢。

          網址:http://shipei.qietu.com

          的形勢下,移動網站的使用率越來越高。移動網站的優化如何做被更多的人所關注。這里切圖移動就從目前三種比較常用的pc站點移動配置方式,并從性能,需求,成本方面對三者進行了分析,并給出相應的優化建議。pc站與移動站配置方式中有三種較為主流,分別是跳轉適配,代碼適配和自適應。下面分別對這三種給予詳細的介紹和對比,希望能對大家的建站提供幫助。

          1、跳轉適配

          利用單獨的網址向每種設備提供不同的代碼,這種配置會嘗試檢測用戶所使用的設備或ua,然后使用http重定向和varyhttp標頭重定向到相應的頁面上。

          2、代碼適配

          使用相同的網址,不考慮用戶使用的設備,但會根據服務器對用戶使用瀏覽器的了解,針對不同的設備類型生成不同版本的html。

          3、自適應

          通過同一網址提供相同的html代碼的網站設計方法,不考慮用戶使用的設備,但可以根據屏幕尺寸以不同的方式呈現適應屏幕。通過這些方面,讓手機端的網頁越來越美觀,并適應著我們的瀏覽需要。

          切圖網(qietu.com)推出永久、不依賴第三方的網站適配服務,每個項目均有專業工程師分析,編碼,確保每個項目的品質,歡迎垂詢。


          主站蜘蛛池模板: 亚洲AV成人一区二区三区观看| 久久中文字幕一区二区| 国产一区二区三区不卡在线看| 蜜臀AV无码一区二区三区| 精品乱码一区内射人妻无码| 精品一区二区三区免费毛片| 性无码一区二区三区在线观看| 亚洲欧美国产国产综合一区 | 精品一区二区三区无码视频| 风流老熟女一区二区三区| 看电影来5566一区.二区| 波多野结衣中文字幕一区| 国产精品香蕉在线一区| 亚洲av综合av一区| 国产激情一区二区三区在线观看 | 无码国产精品一区二区免费式直播 | 国产日本亚洲一区二区三区| 丰满人妻一区二区三区视频53| 日本一区二区三区免费高清| 日韩人妻不卡一区二区三区| 日本一区二区三区在线观看| 国模丽丽啪啪一区二区| 亚洲av午夜福利精品一区 | 精品乱码一区内射人妻无码| 一区二区三区在线看| 久久精品动漫一区二区三区| 中文无码一区二区不卡αv | 无码毛片一区二区三区中文字幕 | 亚洲av乱码一区二区三区| 亚洲综合国产一区二区三区| 不卡一区二区在线| 曰韩精品无码一区二区三区| 变态拳头交视频一区二区| 日本高清不卡一区| 亚洲av无码一区二区三区天堂| 中文字幕AV无码一区二区三区| 国产视频一区二区| 夜夜嗨AV一区二区三区| 乱色精品无码一区二区国产盗| 亚洲AV无码片一区二区三区 | 亚洲综合无码一区二区|