ZIKO

互联网从业者一名。

© ZIKO | Powered by LOFTER

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

[图片]

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

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

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

2、任何图片作为数据信息被保存在存储盘中时,只有宽高像素数是有意义的,此时的ppi对于图片来说时没有任何意义,也并不能描述这个图片...

小小字体要闹哪样?

[图片]

做网页时你的困惑:

1、你看到设计稿后,再到前端稿,发现文字跟设计稿的有差异了。仔细核对发现字体、大小都一样,为什么视觉差那么大。你可能会归结为PS与html代码的“不兼容性”。

2、你是否觉得有时候看设计稿,整体真的很好,不管排版,设计,颜色,但是就是觉得哪里怪怪的。

3、是否感觉某些网页某些地方的文字不好看,甚至觉得丑陋?想去改,又不知怎么改?

4、高富帅们,白富美们,当你们手拿mac本,浏览一些网站时,是否发现网站上的字体跟win系统不一样了?

篇幅原因,结论先行(字体研究对象为新闻类门户网站新闻标题):

A为了改变设计稿字体显示和前端稿差异性,请设计人员安装photoshop...