技术部文化墙DIY

半多个月前,总监给我下达任务,技术部的文化墙要重新翻新。希望我带着大家一起完成此次文化墙的设计和制作。刚接到任务时,第一反应是,OK,好好设计一下,能出彩最好。经过几日的纠结后问自己,为什么要接下这么棘手任务,哈哈。

当然,既然接下任务了,就得好好琢磨琢磨,毕竟文化墙的制作,各部门之间是要评比的。

老规矩,部门的文化墙肯定要包含部门的所有人照片,那么目前我们技术部是包含一下5个组。图1:...


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

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

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

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

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

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

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

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

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

小小字体要闹哪样?

做网页时你的困惑:

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

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

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

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

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

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