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

2017-6-6 用心设计 移动设备ui及体验

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


由于HTML5和微信内置浏览器的火爆,移动端H5网页越发流行。在设计制作移动端网页的时候,你是否疑惑,这种网站设计稿应该做成的多少屏宽,是否应该跟手机的分辨率一致,还是应该按照iPhone的分辨率来设计(注意H5网页区别于APP,APP的设计稿直接按照手机分辨率来设计)?那么对于现在2K屏幕的手机,应该如何制作设计稿和前端稿呢?


-------------------------------------------------------------------


将解决一些基本概念:像素(pixel)、ppi、分辨率、物理像素(physical pixel)、CSS像素、设备独立像素(deviceindependent pixel)等等。


像素(pixel)(像素维基百科)


为图像显示的基本单位,表示“图像元素”之意。每个这样的信息元素不是一个点或者一个方块,而是一个抽象的采样。仔细处理的话,一幅图像中的像素可以在任何尺度上看起来都不像分离的点或者方块;但是在很多情况下,它们采用点或者方块显示。


这一段是出自维基百科的解释。其实很多会Photoshop的人都有一个误区:认为像素是一个宽高相等的小方块,并且的像素都是“那么大”,但是不知道这个宽高的具体数字。


像素是一个抽象概念,它是一个相对单位。


像素描述的是图像在某一点的颜色值。一般来说,一个像素只能描述一种颜色值。


先可以跳过这个话题,介绍ppi概念,像素没有大小就好理解了。


PPI


PPI的复杂之处在于如果他所属的上下文环境不同,意义也会完全不一样。 当我们在谈论显示设备的PPI时,它代指的屏幕的像素密度;当我们在谈论和图片相关时,我们谈论的是打印时的分辨率或者打印机的打印精度。这里我们主要描述的前一种情况。


PPI全称为Pixel Per Inch,译为每英寸像素取值,更确切的说法应该是像素密度,也就是衡量单位物理面积内拥有像素值的情况。


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

举例1:


中的七张图,假设图片尺寸都为1x1寸,那么 PPI 分别为 1、2、5、10、20、50、100 。在同一物理尺寸内,随着像素数的增大,图像细节越多, PPI 增大,图像越清晰,像素所占空间相对越小。


因此,从讨论像素大小的角度来说,图①中各个方框像素的宽度(单位为英寸)分别为:1、1/2、1/5、1/10、1/20、1/50、1/100。像素在每个不同ppi下大小都不同,因此讨论像素的大小也就变得无意义了。像素是没有大小的。像素是一个抽象概念,它是一个相对单位。


像素描述的是图像在某一点的颜色值。一般来说,一个像素只能描述一种颜色值。


举例②:


在photoshop中分别建立两个文档:①800x600px,72ppi,②800x600px,300ppi。那么这两个文档在PS或者生成图片时,显示的视觉效果是完全一样的,因为宽高的像素点数是完全一样的,在设备上渲染出来的效果图是一致的。当你把文档②中的任意图层复制到文档①中,从视觉上发现图层不会变大或者缩小。只有把这两个文档作为图片1:1打印出来时,才会发现72ppi的图片要大于300ppi的图片(注意ppi的含义),前者宽(高)大约是后者的4.16(300/72)倍。


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


分辨率


分辨率泛指显示系统对细节的分辨能力。能显示图像都能叫显示系统,比如显示器,投影仪,照片。


分辨率常用的单位有:dpi(点每英寸)、lpi(线每英寸)和ppi(像素每英寸)。从单位来看,分辨率是一个比值,与物理单位的比值。


日常所说的“这张图片的尺寸(或分辨率)是100x100像素”,一般都是在描述数字图片,这样的描述只是说明了图片文件包含多少个像素。比如图1中的七张图,我们习惯于说,第1张图的分辨率是1x1像素,第5张图的分辨率是20x20像素,其实只是说明了图片的像素数而已。


Retina显示屏


这是一种显示技术,可以将把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度,这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。


最先使用retina屏幕是iphone 4,屏幕分辨率为960 * 640(326ppi)。


对比如下两幅图,可以清晰地看出是否 Retina 屏的显示差异: 


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

iPhone 3GS


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

iPhone 4


两代iPhone 的物理尺寸(屏幕宽高有多少英寸)是一样的,从上图可以看出,iphone 4的显示效果要明显好于iphone 3GS,虽然 iPhone 4 分辨率提高了,但它不同于普通的电脑显示器那样为了显示更多的内容,而是提升显示相同内容时的画面精细程度。这种提升方式是靠提升单位面积屏幕的像素数量,即像素密度来提升分辨率,这样做的主要目的是为了提高屏幕显示画面的精细程度。以第三代 MacBook Pro with Retina Display为例, 工作时显卡渲染出的2880x1880个像素每四个一组,输出原来屏幕的一个像素显示的大小区域内的图像。这样一来,用户所看到的图标与文字的大小与原来的1440x900分辨率显示屏相同,但精细度是原来的4倍。


注意:在桌面显示器中,我们调整了显示分辨率,比如从 800 * 600 调整到 1024 * 768 时,屏幕的文字图标会变小,显示的内容更多了。但 Retina 显示方式不会产生这样的问题,或者说, Retina 显示技术解决的是显示画面精细程度的问题,而不是解决显示内容容量的问题。


设备独立像素


为什么是“每四个一组”?而且要让这四个一组来显示“原来屏幕的一个像素”?这大概就是 Retina 显示技术的一种表现吧。而这“每四个一组”的“大像素”,可以被称作“设备独立像素”, device independent pixel ,或者 density-independentpixel ,它可以是系统中的一个点,这个点代表一个可以由程序使用的虚拟像素,然后由相关系统转换为物理像素。


“设备独立像素”也有人称为“CSS像素”,一种形象的说法,更倾向于表明与 CSS 中尺寸的对应。


设备独立像素与物理像素的对应关系,可以这样看:



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

                                                     图4


类似的每四个一组的对应关系,也许正是 Retina 显示技术所做的。


CSS像素


作为Web开发者,我们接触的更多的是用于控制元素样式的样式单位像素。这里的像素我们称之为CSS像素。


CSS像素有什么特别的地方?我们可以借用quirksmode中的这个例子:


假设我们用PC浏览器打开一个页面,浏览器此时的宽度为800px,页面上同时有一个400px宽的块级元素容器。很明显此时块状容器应该占页面的一半。


但如果我们把页面放大(通过“Ctrl键”加上“+号键”),放大为200%,也就是原来的两倍。此时块状容器则横向占满了整个浏览器。


吊诡的是此时我们既没有调整浏览器窗口大小,也没有改变块状元素的css宽度,但是它看上去却变大了一倍——这是因为我们把CSS像素放大为了原来的两倍。


CSS像素与屏幕像素1:1同样大小时:



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

                图5


CSS像素(黑色边框)开始被拉伸,此时1个CSS像素大于1个屏幕像素



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

                图6


也就是说默认情况下一个CSS像素应该是等于一个物理像素的宽度的,但是浏览器的放大操作让一个CSS像素等于了两个设备像素宽度。在后面你会看到更复杂的情况,在高PPI的设备上,CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。


从上面的例子可以看出,CSS像素从来都只是一个相对值。


设备像素比(DevicePixelRatio)


设备像素比=设备物理像素/设备独立像素


设备像素比在 js 中可以通过 devicePixelRatio 的参数取得(需要页面的 viewport 设置为 content=”width=device-width” 此处为前端布局知识,较为专业,笔者也只是意会,无法说清楚,请自行百度)


iPhone 4 的设备像素比为2,线长(横向、纵向、对角线)上的物理像素数与设备独立像素数的对应关系即为2。


根据这个对应关系,一般可以通过屏幕的物理分辨率和设备像素比确定设备独立像素数。


那么在我们做移动端网站时,将viewport设置了content=”width=device-width”,设备独立像素也就等于CSS像素。


历史问题屏宽320px


经常在做移动端网站时,我们会听到一些人说原型稿屏宽做成320px,设计稿做2倍640px,网上也有很多文章说这样说,H5网页的设计稿做成2倍普通屏分辨率就行了。


这是一个历史遗留问题,这里提到的屏宽,更确切的说,是将viewport设置为width=device-width时的宽度,习惯称这个宽度为屏宽,也就是设备独立像素的宽度。笔者从其他文章中找到了一些答案。(原型图屏宽是320px是为了满足原型软件在1:1比例显示上适当,二是为了保证早期iphone320px屏宽的显示需求)


“其实这个属性值很有意思,字面意应该是 viewport 宽度等于设备宽度,但在实际中不同的浏览器都给出了个定值:320px;这个值还是源于 Apple ,因为早期 iPhone 的分辨率为 320px*480px ,大量为 iPhone 量身定制的网站都设置了 viewport:width=device-width ,并且按照宽度 320px 来设计制作,所以其他浏览器加入 viewport 支持时为了兼容性也将 device-width 定义为了 320px 。”


那么到了后来的iPhone4的屏幕是960x640px,几乎所有人都知道Retina显示屏,所有方向上的像素都成了原来的2倍。而设备独立像素的屏宽还是保持着320px。其它智能手机早期的分辨率基本上也使用了大致相同的屏幕尺寸与分辨率,因此才有了 320px 这个不约而同的约定。


当然,如果把 viewport 的 width 属性设置为一个定值,比如 320、 480、 700 等等,那 viewport 的宽度即为设定的宽度。此时,设备独立像素宽度,也即所设定的宽度,而物理像素与设备独立像素的比值,则不再是最初始的设备像素比值了(比如 iPhone 4 中的2)。


现在的智能手机屏幕尺吋多样,分辨率有很多种,相应地,设备像素比也不一致,有1、1.5、2、2.25、3等等,而在一般情况下(指 viewport 设置为>


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

                                                    表1


若设备像素比是N,就表示该手机屏幕上的N个物理像素来显示一个CSS像素。


-------------------------------------------------------------------


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


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


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


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


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


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


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

                                                     表1


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


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


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



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

                  图1


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


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


A.图①为什么会模糊?


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


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


解答问题A


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


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

                                                      图2


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


解答问题B


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


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

                                                 图3


解答问题C


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


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


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


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


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

                                           图4


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


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


通过对比可得:


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


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

                                    图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处,个人认为不太准确)。既保证了在移动设备上显示清晰,也保证了素材的最小尺寸。推荐前端攻城狮使用腾讯智图(http://zhitu.tencent.com/),这里的图片压缩还是相当好用,可以节省用户不少带宽。


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

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


标签: 交互设计 蓝蓝设计 设计规范 UE H5设计


Powered by emlog 京ICP备12006971号-1 sitemap