联系电话136 8812 4668(业务咨询) / 158 8206 4880(服务投诉)
赛门仕博官网

1

2018年07月25日

移动网站设计标准

当在做移动端手机网站设计时(包含微信H5网页设计),如果没有做过类似的移动端网站的设计,UI设计师和前端工程师肯定会纠结的,那么多手机屏幕尺寸,移动端网页设计应该按照哪一个尺寸作为标准尺寸规范?有最新的2k分辨率的手机屏幕也有很古老的480分辨率的手机显示屏幕,移动端网站设计标准是不是也要把宽高跟着最大分辨率来设计,显然不是!在设计移动端页面时,样式尺寸可以用设备独立像素的尺寸范围来进行设定各个元素的大小,根据目前市场流行的手机移动端屏幕像素,统计出设备独立像素。

如下是大部分手机移动端屏幕像素数据:

手机移动端网站设计标准像素规范

可以看出智能手机端独立像素最大的就是iPhone6+的414x736,那么简单来说,将设计稿做成414x736(9:16)独立像素,就可以在所有移动端浏览器上显示完全,不会出现底部空白的情况。像素的话一般采用640x1136px来设计移动端页面,既能满足用户需求还能降低图片加载时间。


移动网站设计标准如下(仅供参考):

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

2、任何图片作为数据信息被保存在存储盘中时,只有宽高像素数是有意义的,此时的ppi对于图片来说时没有任何意义,也并不能描述这个图片有多少英寸的宽度或者高度,而只有在被打印出来后才有ppi的意义,被打印出来才可以描述这张图片有多高多宽。

3、平时制作移动端网站页面(或者h5页面)时,页面原型稿建议屏宽为320px,用这个尺寸一是为了浏览方便(现在很多手机的屏宽达到1440px,用这个尺寸去模拟显然不现实),二是以iPhone5s为标准的手机屏宽较小,进行内容排版布局时屏宽应该向下兼容。

4、制作设计稿时,设计师应该把原型稿上的所有尺寸进行2倍处理。这样设计稿在移动设备上预览便可保证清晰。而前端切片时,按照现在流行的做法,可以直接使用原型稿上的尺寸,也就是设计稿上的二分之一。

5、一般情况下,移动网站页面设计稿做成640x1136px是最为稳妥的尺寸(没有绝对的规范),在812px高度处增加一条安全线,重要内容在此线之上(网上有些文章说安全线是960px处,个人认为不太准确)。既保证了在移动设备上显示清晰,也保证了素材的最小尺寸。