移动端H5页面的设计稿尺寸(下)


在平时做手机端H5网页设计稿时,UI设计师和前端工程师肯定会纠结过:那么多手机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计。显然不是。

在上篇文章中,我介绍了设备独立像像素、CSS像素和屏幕物理像素之间的关系。那么在前端布局(viewport设定content=”width=device-width”)时,样式尺寸就可以用设备独立像素(设备独立像素从数字上等同于CSS像素)的尺寸范围来进行设定各个元素的大小。

那么从上面所得出的结论,是否就可以断定设计稿直接按照设备独立像素来定就行了呢?且看下面的分析。

(以下所有讨论均将viewport设定为content=”width=device-width”的情况下)

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

从 http://screensiz.es/phone统计的大部分手机独立像素数据(iPhone6+采用了分辨率降频处理)。 


                                                     表1

从表1可以看出,目前已知智能手机设备独立像素最大的就是iPhone6+的414x736,那么简单来说,将设计稿做成414x736(9:16),就可以在所有手机浏览器上显示完全,不会出现底部空白的情况。

(tips:屏宽414px是为了图片在手机浏览器中显示时,能够向下兼容,在独立像素低于414px的设备上,图片是被压缩的肯定能显示清楚,如果图片宽度为320px,那么在iPhone6+上,图片便会被拉伸,肯定会模糊。高度用736px,是因为9:16的屏幕在相同宽度下,能够显示更多的内容,如果使用480px,只能铺满iPhone4这种2:3的手机,在9:16的屏幕底部,必定出现空白。)

笔者按照这个思路设计了一个简单的测试网页(点击此处),或者扫下面的二维码。


                  图1

两张图的尺寸分别为①414*736px,②640x1136px,③1080*1920px,图④1440x2560,测试字号和矩形,均等比例放大,上一行文字是代码控制的,下一行的文字是图片。在手机上浏览可以明显的看出,第一张图的文字和圆角矩形边缘有锯齿感;而图①中的上一行文字、图②、图③、图④中几乎看不到锯齿。

这里有三个问题需要解释,

A.图①为什么会模糊?

B.图②③④为什么不模糊?

C.图①上一行文字不模糊,而下一行文字模糊?

解答问题A

简单来说,图片是像素图(位图),小尺寸图片能够在高ppi上显示,是系统程序把图片进行了放大,例如,用iPhone6+看这些网页图时,程序把414px宽度的图片拉伸到了1080px。那么多出来的像素如何凭空生成?计算机只有猜测了,通过线性插值算法(不需要理解,意会即可)。所以图片便会出现模糊。 


                                                      图2

那么图片可能被拉伸的问题并非是绝对的,例如测试网页中,图④图片的大小明显要高于iPhone6+的分辨率,此时图片是被压缩的。

解答问题B

图③④的图片没有模糊,这个很好理解,图片分辨率比≥设备物理分辨率。图②的分辨率是低于屏幕物理分辨率,是否被拉伸了?答案是肯定的,但是为什么视觉上没有模糊的感觉?我们先回忆苹果的retina屏幕,手机ppi达到326时,正常视觉上已经无法分辨单个像素,而iPhone6+的ppi达到了401,不借助设备放大的情况下已经远超过视觉能够分辨的程度,640x1136的图②被拉伸时,系统会给图片进行像素补充,边缘出现了一些亚像素(像素点的颜色进行一定的偏移),此时在401的ppi下人的肉眼仍然无法分辨边缘模糊的图②(一般情况下,人眼极限临界值就是326ppi)。不信看下图3,我将图②和图③截图保存后放大,观察边缘,图②的边缘要模糊于图③的边缘。


                                                 图3

解答问题C

图①中下一行文字模糊是因为这些文字是像素图,被拉伸所以边缘模糊,很好理解,而上一行文字是通过代码样式来写的,在本系列文章的上部中,我们说到了css像素,当dpi(设备像素比)为N时,一个css像素就等于N个设备物理像素,这里可以简单的理解为,一个css像素被程序用N个物理像素代替了,这和上文说到的线性插值算法不同。

而设备独立像素又等同于css像素,所以在前端布局时,不用把css像素值乘以设备像素比。这也就是解释了为什么设计稿图片的尺寸是Y时,前端样式只要限制为Y/N的大小即可。也就是在320px屏宽的原型稿上标注的尺寸

综上所述,设计稿一般设计为640x1136px即可。既满足了显示需求,又能降低用户加载图片需要的带宽。

其实写到这里,所有的问题基本算是解决了,但是我们在用各种分辨率的智能手机查看H5页面时,会出现如下的情况,内容显示不全,甚至一些重要内容和按钮都会被遮挡。 


                                           图4

图4是一个H5单屏翻页的页面在不同环境,不同APP下所显示的内容。我们知道,移动端网页一般都是在手机浏览器或者有内置浏览器功能的应用中打开:UC(百度、QQ)浏览器、安卓原生浏览器、Safari、QQ内置浏览器、微信内置浏览器、支付宝内置浏览器等等(可能还有人会令人发指的使用浏览器的全屏模式)。

所以我们在页面内容规划布局时,不能把重要内容放在太偏下的位置,否则前端布局时可能出现内容显示不全的情况。

通过对比可得:

除去将浏览器全屏显示的情况,几乎所有情况均会有顶部的状态栏和导航栏。iPhone的设计标准,状态栏和导航栏的独立像素高度分别为40px和88px。由于Android系统可以更改状态栏和导航栏的高度,这里可以取默认值为48px和100px(这些尺寸网上均可查)。那么就会把网页内容往下挤,进入盲区(根据不同的布局方式可能挤出视口,即可视区域之下,)。取这两个系统者的最大值为148(48+100),如下图5,设计稿要尽量保证单页下面没有重要内容。


                                    图5

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

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

结论:

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

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

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

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

5、一般情况下,H5页面设计稿做成640x1136px是最为稳妥的尺寸,在812px高度处增加一条安全线,重要内容在此线之上(网上有些文章说安全线是960px处,个人认为不太准确)。既保证了在移动设备上显示清晰,也保证了素材的最小尺寸。推荐前端攻城狮使用腾讯智图(http://zhitu.tencent.com/),这里的图片压缩还是相当好用,可以节省用户不少带宽。


嗯,问题解决了真的很爽,这个问题和这篇文章断断续续用了我大约2个月时间。文章篇幅可能有点长,但是很多东西感觉有必要交代,希望对有同样困惑的产品经理,平面设计师,前端攻城狮有一点帮助。


评论 ( 3 )
热度 ( 46 )
  1. 61ZIKO 转载了此文字
  2. 夭神丸·JZIKO 转载了此文字