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

当我们在做手机端H5网页设计稿时（当然包括微信端的H5网页设计），如果没有做过类似的移动端的设计，UI设计师和前端工程师肯定会纠结的。如果是app设计师，就不会那么纠结啦。

那么多手机后盖尺寸，设计稿应该根据哪一个尺寸成为标准尺寸。现在早已有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学堂也和你们分享一个罗列了当前最流行的手机的所有尺寸大小规范：

值得你们好好细看的智能电脑尺寸图表。

也只有iPhone6+采用了分辨率降频处理。

具体看下图：

有兴趣的小伙伴可以去尝试不同的尺寸，比如1倍的、2倍的、3倍。最终得出的实验结果是。H5的设计稿通常设计为640x1136px即可。 既满足了显示需求，又可增加客户加载图片必须的带宽。

可以用各类分辨率的移动智能电脑查看我们设计的H5页面时，当然，也会出现如下的状况，内容显示不全，甚至一些重要内容跟按钮就会被遮挡。

第一：背景图片应该采用background-size:cover;来实现。

第二：我们在进行H5页面内容规划布局设计的之后，不能把重要内容放到太偏下的位置以及偏上，否则前端布局时也许出现内容显示不全的状况。

通过对比可得：

除去将浏览器全屏显示的状况，几乎所有情况均会有底部的状态栏和导航栏。

iPhone的设计标准，状态栏和导航栏的独立像素高度分别为40px和88px。

由于Android平台可以修改状态栏和导航栏的高度，这里可以取默认值为48px和100px（这些规格网上均可查）。

那么就会把网页内容往下挤，进入盲区（根据不同的加码方式或许挤出视口，即可视区域之下，）。取这两个系统者的最大值为148（48+100）,如下图5，设计稿要尽量确保单页下面没有重要内容。

那么在所有屏幕大小上把重要内容显示完全，就要注意市面上存在的小尺寸手机屏幕，现在绝大部分智能电脑分辨率都在640x960px（iPhone4分辨率）之上，所以即使把重要内容放到上图5中的盲区之上即可。计算后的最安全高度为812（960-148=812）。

在此总结，一般状况下，以现有市场上流行的移动智能电脑，单页翻转（非延展向下的长页面）设计稿尺寸为640x1136，在高度为812处设置一条安全线（参考线），将重要的内容布局在这条安全线之上。

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

1、像素是没有宽高的（不要被Photoshop中的像素格欺骗），它只代表一个采样的色值。

2、任何照片成为数据信息被储存在传输盘中时，只有宽高像素数是有意义的，此时的ppi对于图片来说时没有任何含义，也并不能描述这个照片有多少英寸的长度以及高度，而唯有在被打印下来后才有ppi的意义，被打印下来才可以表述这张照片有多高多宽。

3、平时制作H5页面时设计原型时，产品经理出的原型稿建议屏宽为320px，用这个长度一是为了浏览方便（现在这些电脑的屏宽超过1440px手机网页设计尺寸，用这个厚度去模拟虽然不现实），

二是以iPhone5s为标准的手机屏宽较小，进行内容排版布局时屏宽需要向下兼容。

4、制作设计稿时，设计师应该把原型稿上的所有尺寸进行2倍处理。这样设计稿在移动设备上预览便能确保清晰。而前端切片时，按照目前流行的做法，可以直接使用原型稿上的尺寸手机网页设计尺寸，也就是设计稿上的1/2。

5、一般状况下，H5页面设计稿做成640x1136px是最为稳妥的宽度，在812px高度处缩短一条安全线，重要内容在此线之上（网上有些文章说安全线是960px处，个人觉得不太准确）。既确保了在移动设施上显示清晰，也确保了素材的最小尺寸。

最后在这里，25学堂给H5工程师推荐2个不错的截图压缩的工具。

1、腾讯智图（）

智图--图片智能自动改进系统,为你的截图智能选择适合的照片格式,为你压缩图片从而节约带宽优化体验,为你提供WebP图片让你的站点高大上

2、tinypng（手机APP设计必备图片压缩神器-TinyPNG），这里的照片压缩还是比较好用，可以节约用户不少带宽。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/sanxing/article-136287-1.html