解决这13个问题，可以实现99.9%的设计稿还原

  首先从题目来说，为什么不是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等，假如设计死活不同意，讲道理！再不同意，叫上产品经理一起讲这个问题。

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

  更多设计资讯，培训课程，开班时间，学校地址等学校信息，请进入长沙天琥设计培训学校：http://cstianhu.5zix.com/网站详细了解，咨询电话：18670081751，咨询QQ：1434119060

尊重原创文章，转载请注明出处与链接：http://cstianhu.5zix.com/news/38855/ 违者必究！ 以上就是长沙天琥设计培训学校 小编为您整理解决这13个问题，可以实现99.9%的设计稿还原的全部内容。

---

• ← 为什么UI设计中，用户的个人头像大多是圆形的？
• 别靠感觉做设计！聊聊四个基础的UI设计原则 →