如何通过实例技巧学习实现设计稿还原

首先从题目来说，为什么不是100%设计稿还原?其实100%是一个理想的状态，有很大一部分设计师是不懂“页面重构”的，很多时候设计师在做设计的时候，会着重考虑视觉因素，实现成本考虑的不会特别仔细。面对这些设计细节，浏览器兼容、开发周期、后台数据循环因素等等都会影响到设计稿的还原效果，我们能做的就是尽可能的还原设计稿，无限接近100%还原，而不是追求100%的还原效果。可能有些人会不服，我就要100%还原，那么OK，ps中和浏览器中相同字体显示效果不一样，你怎么办?难道文字也全切成图吗?所以在大部分“页面重构”的时候，最负责任的做法是，在考虑易用性、合理性的前提下尽可能的实现设计稿99.9%的还原。

重构的工作并不是前端工程师一个人的工作，还要包含与设计师、后台工程师(php等)以及产品之间的沟通，中间很可能会涉及到设计图的修改。

下边从几个方面聊聊页面重构中的一些问题：

1，页面宽度问题

主要内容部分，目前主要的分辨率一般都在960以上：960、1000、1200等，这些都属于正常的尺寸，但也有设计师做出类似973、1011等奇葩尺寸… 这个问题我不太好意思拿出来聊，太低级了。当然，奇葩的单数行高、相同元素不同大小等等这都是属于相似问题。

2，毛边问题

一个方方正正的按钮，带着一圈毛边。这个问题也是在重构中经常看到的事情，虽然这个在写页面的时候可以很轻易的避开这个问题，但是不是看着很不爽?看下图：

正常边给人的感觉整齐干净，毛边显得边缘模糊不清，并且容易造成按钮高度不明确。假如是半透明按钮需要切图的时候，还会造成图片体积变大，所以这个问题应当避免。

3，图层模式

有些设计图中，某个元素例如某个按钮，需要切png半透明图片，但是这个按钮居然跟背景图是正片叠底或者颜色叠加。每当我遇到这个问题的时候会有一股想自杀的冲动，所以为了世界和平，这个问题一定要避免。

4，图层链接

页面重构的某些时候需要选择某些图层进行移动，结果一动发现坏了，好多其它的元素跟着刷刷移动，瞬间感觉无力，默默的一个个取消图层链接。不需要的图层链接，能取消就取消吧。

5，某些图片的尺寸

例如在某些列表中，缩略图的尺寸，经常会遇到119*73等等奇怪的尺寸。其实这种最好是用整数：120*80等，对页面的栅格化、响应式以及后台裁图存图等都有很大的好处。

6，图层命名和文件夹

这个其实跟题目关系不大，但这里要提一下。举个例子：

你喜欢哪个?不用说了吧…

7，奇葩的边距和填充

同等级的模块，从视觉及内容上都属于同一类型，但上下边距一个20px一个27px，左右填充一个10px一个7px，这种问题跟“1.页面宽度问题”类似，都属于低等级问题。

8，需要运营的文字内容使用特殊字体

这个请google一下网络安全字体，中文的安全字体少的可怜，放过非设计师的页面使用者吧。

9，不做极限设计

假如要设计一个按钮，放在某个比较小的模块里，那么请考虑一下按钮包含的字数最长的情况下是怎样的。再比如一个类似微博名片的东西的简介，设计图中做了30个字，那么请考虑下100个字的情况。假如需要做截字，请规定多少字或者几行字开始截，不要让前端去猜。

以上问题都是设计师经常遇到的一部分问题，并不是全部，下边说说前端这边的。

1，用辅助线说话而不是自己猜测

很多前端自诩像素眼，一眼就知道某个模块的边距是多少，字体有多大。这个一般问题不大，但有些时候差一两个像素你不一定看的出来。凡是涉及到尺寸问题，一律辅助线。

2，css3圆角还是切图圆角？css3投影还是切图投影？

在遇到这种纠结的时候，请联系设计师以及产品经理，讲明两种方式的优劣，这个问题可延展到其它类似css3实现效果的问题。

3，各种宽度写死，各种切大图啪啪啪

前者会导致，只要编辑或者数据与设计图中的不一样，你的页面效果就完全“不一样”了，做页面重构怎么算优秀?最大程度的模块化、最大程度的模块可移植性、最大程度的自适应性、各种极限情况的考虑。也就是你考虑的情况越多，自适应性越强，你的代码越健壮。

后者会导致啥?后台或者编辑拿着刀子捅你…

4，字体问题

假如一段需要后期编辑或者拿数据的文字内容，设计图里是一个特殊字体，例如：“方正兰亭西黑”，你自己电脑上也有，然后你直接在css样式里用了这个字体… 会有啥结果不用多说了。遇到这种情况最重要的是需要跟设计商议，替换成安全字体，例如：微软雅黑、宋体、黑体、Arial等，假如设计死活不同意，讲道理!再不同意，叫上产品经理一起讲这个问题。

同样，以上问题也只是众多问题中的一小部分，以后想到的话也会逐渐补充进去。解决各种问题最好的办法是：多沟通。