织梦CMS - 轻松建站从此开始!

日博官网备用网址

当前位置: 主页 > 日博官方网址 >

ZIKO

时间:2020-06-02 06:00来源:原创 作者:admin 点击:
由于HTML5和微信内置浏览器的火爆,移动端H5网页越发流行。在设计制作移动端网页的时候,你是否疑惑,这种网站设计稿应该做成的多少屏宽,是否应该跟手机的分辨率一致,还是应该

  

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

  由于文章篇幅原因,结论先行:

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

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

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

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

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

  -------------------------------------------------------------------分割线---------------------------------------------------------------------

  作为本次文章系列的“上”部,将解决一些基本概念:像素(pixel)、ppi、分辨率、物理像素(physical pixel)、CSS像素、设备独立像素(deviceindependent pixel)等等。

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

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

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
推荐内容