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

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

就一些问题附上我的说明：

一、文字方面

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

区别：

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

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

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

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

似乎无章可循。不知道之间的转换关系是什么样的，欢迎大家留言，一起探讨。

二、图标，建议用阿里巴巴图标，网址http://www.iconfont.cn/，美工制作的时候自己在用的同时，加入购物车中，每个项目可以新建一个文件夹，方便管理。

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

阿里巴巴图标的好处：

（1）资源丰富，涵盖了大部分需要的图标，可以节省美工时间，提高效率。

（2）美工如果有自己的独创的图形，也可以进行上传，一次设计，终身使用。

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

三、统一，组建化

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

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

四、极端情况的处理

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

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

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

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

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

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

转载于:https://www.cnblogs.com/chengmingxiaowu/p/8432614.html

浅析百分百还原网站效果图的可行性分析相关推荐

企业网络推广专员浅析如何完善网站维护企业网络推广吸引用户浏览
许多网站在完成网站基本建设开发后已经开始着手规划网站运营优化策略,以满足网站上线前的运营优化需求.在不间断的网站运营与优化过程中,企业网络推广若想长久性拥有不错的网站排名和权重,建议站长从网站基本维护 ...
网站推广专员浅析如何做好网站推广与运营？
当前网站建设的市场浪潮随着互联网技术的更新迭代也在不断发展当中,企业作为开拓互联网市场的成员之一想要通过互联网的帮助下实现线上营销必然逃不脱网站推广与运营的执行,而想要做好企业网站自然要学会挖掘互联网 ...
网络营销外包专员浅析响应式网站建设应注意哪些网络营销外包细节
现如今很多网络营销外包站长都建议企业网站采用响应式网站建设能够在搜索引擎中获取更好的收录优化效果,在部分搜索引擎中已经开始要求网站必须配备响应式网站满足容纳用户PC端和移动端的多终端访问需求,那么在 ...
SharePoint 跨域还原网站一则
博客地址:http://blog.csdn.net/foxdave 源端:执行PowerShell命令备份网站集 Backup-SPSite http://server_name/sites/site ...
PT短网址缩短还原网站源码,php版+html版
简介: PT短网址缩短还原网站源码,无需数据库,调用第三方API接口,php版+html版双版本源码源码使用方法: 直接上传到你的站点即可,接口在api.php内部,可以添加,记得在index.ht ...
PDF转word并去除水印以及处理的页数限制【pdf转word可编辑百分百还原文件亲测可用】
提示:操作aspose-pdf-22.10-jdk16.jar 对其重编译修改校验权限使用javassist 重编译(学习测试使用,aspose所有的包都可以用该教程.亲自测试过的) 文章目录前言 ...
SharePoint 2010 在多台前端环境还原网站集问题解析
开发环境:自己搭建,用Server1表示(中文) 测试环境:客户提供,管理中心一台服务器 Server2,还有另个两台映射管理中心分别叫Server3,Server4(英文环境),Server2.3. ...
织梦网站如何上传服务器还原,网站转移教程：织梦系统数据库备份和还原的方法步骤...
网站在运行的过程中,难免会遇到各种问题,比如:网站被攻击导致数据丢失,网站需要更换空间或服务器等等.所以,如何完完整整的把网站数据进行备份和还原,并转移到新的空间上,已是作为一个站长必须掌握的技能之一 ...
长沙网络推广浅析如何增加网站的蜘蛛爬取频次？
网站的收录越高,网站排名高的机会也就越大,对于收录的问题,对于蜘蛛爬取网站也是有很大的关系的,通常情况下,蜘蛛爬取的越多,也就代表该网站很受用户喜爱,网站的被抓取率也会高点,那么对于有些网站优化来说, ...

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

浅析百分百还原网站效果图的可行性分析相关推荐

最新文章

热门文章