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

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

就一些问题附上个人说明:html

1、文字方面前端

PS文字 字体大小:144px;行高:204px。(黄色是是html的截图,红色的是ps的截图,)字体

区别:设计

(1)字体这边基本是吻合的,底部和右侧偏差1像素左右3d

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

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

效果图是上边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如下。

 

相关文章
相关标签/搜索