浅析百分百还原网站效果图的可行性分析

最近和朋友交流，说到作好的页面和美工效果图的偏差问题，看能不能百分百还原。根据哲学的角度来讲，偏差只能缩小不能消灭。

就一些问题附上个人说明：

1、文字方面

PS文字 字体大小：144px；行高：204px。（黄色是是html的截图，红色的是ps的截图，）

区别：

（1）字体这边基本是吻合的，底部和右侧偏差1像素左右

（2）区域相差比较大，两个黑色框表明各自的区域，html行高第一行和最后一行的字体上下都有很大的距离

html是上边37像素，下边29像素，中间两个文字的距离是66像素，文字高137像素。

效果图是上边5像素，下边19.5像素，中间两个文字的距离是66像素，文字高137像素。

彷佛无章可循。不知道之间的转换关系是什么样的，欢迎你们留言，一块儿探讨。

2、图标，建议用阿里巴巴图标，网址http://www.iconfont.cn/，美工制做的时候本身在用的同时，加入购物车中，每一个项目能够新建一个文件夹，方便管理。

Iconfont 就是指用字体文件取代图片文件，来展现图标、特殊字体等元素的一种方法。

阿里巴巴图标的好处：

（1）资源丰富，涵盖了大部分须要的图标，能够节省美工时间，提升效率。

（2）美工若是有本身的首创的图形，也能够进行上传，一次设计，终身使用。

（3）对于前端来讲，加载文件体积小，矢量图，不变形，兼容性好，支持css能够直接经过代码改变大小和颜色。

 

 

 

3、统一，组建化

美工设计的时候，不妨先和前端制定一些规则，好比一级标题，二级标题的字体颜色，样式的标准化，可使代码重复使用，而不会出现无章可循，生无可恋的现象。

 

3、标注文件，好比SKETCH设计生成的页面会有一个Marketch，辅助衡量尺寸，对于前端的制做大有裨益。

 4、极端状况的处理

在制做效果图的时候，对于文字、图片的展示方式，总会有极端状况产生，好比，效果图图片展现是一行，若是出现多张图片怎么处理，省略仍是换行展现；文字的展现是铺开展现，仍是超出必定的宽度进行隐藏或者添加省略号。开始设计效果图时候就思考的多一点，对于后来的页面制做和数据交互会有很大的好处。

 好比这个标题就是超出多少文字后出现省略号。

5、详情的文档或图片说明，以及用到的小图片。

（1）涉及一些交互，好比，鼠标点击的范围，是文字上，仍是一块区域，这就须要详尽的图来展现，或者文档来讲明，毕竟按照常规作完，出现不符合您心理想象的，返工会须要不少的时间，不如一步到位来的好。

（2）文字间距，大小，颜色标明。

（3）对于PS中用的图标，能够按页面放到不一样的文件夹中，若是页面比较少，则放到一个文件夹中也是能够的。命名尽可能用英文或者阿拉伯数字，尽可能不出现中文。大小能够经过 @2x来区分。图片要尽可能压缩在200k如下。