移动端H5页面的设计稿尺寸大小规范

  • 时间:
  • 浏览:26
  • 来源:5分6合_5分6合平台_5分6合网投平台

当亲戚亲戚朋友在做手机端H5网页设计稿时(当然富含微信端的H5网页设计),可能这么做过类式的移动端的设计,UI设计师和前端工程师肯定会纠结的。可能是app设计师,就不想这么纠结啦。

这么多手机屏幕尺寸,设计稿应该按照哪1个多 尺寸作为标准尺寸。现在可能有2K分辨率的手机屏幕了,设计稿是都会也要把宽高跟着最大分辨率来设计。显然都会。

请注意:(以下所有讨论内容和规范均将viewport设定为content=”width=device-width”的情況下) 也好多好多 亲戚亲戚朋友的H5页手中端代码后面 时需富含

<meta content=”initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width” name=”viewport” />

<meta content=”telephone=no” name=”format-detection” />

根据目前市场流行的手机移动终端,统计亲戚亲戚朋友的设备独立像素。

在这里,25学堂也跟亲戚亲戚朋友分享1个多 罗列了当前最流行的手机的所有尺寸大小规范: http://screensiz.es/phone     值得亲戚亲戚朋友好好细看的智能手机尺寸图表。

也只有iponeiponeipone +采用了分辨率降频处里。

具体看下图:

有兴趣的小伙伴能不可不都能不能 去尝试不同的尺寸,比如1倍的、2倍的、3倍。最终得出的试验结果是。H5的设计稿一般设计为640x1136px即可。 既满足了显示需求,又能降低用户加载图片时需的带宽。

能不可不都能不能 用各种分辨率的移动智能手机查看亲戚亲戚朋友设计的H5页面时,当然,也会跳出如下的情況,内容显示不全,甚至好多好多 重要内容和按钮都会被遮挡。

第一:背景图片时需采用background-size:cover;来实现。

第二:亲戚亲戚朋友在进行H5页面内容规划布局设计的完后 ,只有把重要内容中放太偏下的位置可能偏上,而且前端布局时可能跳出内容显示不全的情況。

通过对比可得:

除去将浏览器全屏显示的情況,几乎所有情況均会有顶部的情況栏和导航栏。

iponeiponeipone 的设计标准,情況栏和导航栏的独立像素深度分别为40px和88px。

可能Android系统能不可不都能不能 更改情況栏和导航栏的深度,这可不都能不能不可不都能不能 取默认值为48px和100px(你你这个 尺寸网上均可查)。

这么就会把网页内容往下挤,进入盲区(根据不同的布局方式可能挤出视口,即可视区域之下,)。取你你这个 个多 系统者的最大值为148(48+100),如下图5,设计稿要尽量保证单页下面这么重要内容。

图5

这么在所有屏幕大小上把重要内容显示完整篇 ,就要注意市面上趋于稳定的小尺寸手机屏幕,现在绝大每项智能手机分辨率都会640x9100px(iponeiponeipone 分辨率)之上,好多好多 假如有一天把重要内容中放上图5中的盲区之上即可。计算后的最安全深度为812(9100-148=812)。

在此总结,一般情況下,以现有市场上流行的移动智能手机,单页翻转(非延伸向下的长页面)设计稿尺寸为640×1136,在深度为812处设置每根安全线(参考线),将重要的内容布局在这条安全线之上。

移动端H5页面的设计稿尺寸大小规范内容如下:

1、像素是这么宽高的(何必 被Photoshop中的像素格欺骗),它只代表1个多 采样的色值。

2、任何图片作为数据信息被保趋于稳定存储盘中时,只有宽高像素数是有意义的,此时的ppi对于图片来说时这么任何意义,也何必 能描述你你这个 图片有几块英寸的深度可能深度,而只有在被打印出来后才有ppi的意义,被打印出来不可不都能不能不可不都能不能 描述这张图片有多高多宽。

3、平时制作H5页面时设计原型时,产品经理出的原型稿建议屏宽为320px,用你你这个 尺寸一是为了浏览方便(现在好多好多 手机的屏宽达到1440px,用你你这个 尺寸去模拟显然不现实),

二是以iponeiponeipone s为标准的手机屏宽较小,进行内容排版布局时屏宽应该向下兼容。

4、制作设计稿时,设计师应该把原型稿上的所有尺寸进行2倍处里。原先设计稿在移动设备上预览便可保证清晰。而前端切片时,按照现在流行的做法,能不可不都能不能 直接使用原型稿上的尺寸,也好多好多 设计稿上的1/2。

5、一般情況下,H5页面设计稿做成640x1136px是最为稳妥的尺寸,在812px深度处增加每根安全线,重要内容在此线之上(网上好多好多 文章说安全线是9100px处,每人个认为不太准确)。既保证了在移动设备上显示清晰,也保证了素材的最小尺寸。

最后在这里,25学堂给H5工程师推荐1个多 不错的图片压缩的工具。

1、腾讯智图(http://zhitu.isux.us/)

智图–图片智能自动优化平台,为你的图片智能选者最少的图片格式,为你压缩图片以便节省带宽优化体验,为你提供WebP图片而且你的站点高大上

2、tinypng(手机APP设计必备图片压缩神器-TinyPNG),这里的图片压缩还是相当好用,能不可不都能不能 节省用户不少带宽。

以上每项内容来源:zikoman.lofter.com  感谢ZIKO的分享和实践。