原文链接：https://mp.weixin.qq.com/s/fxY5ZMn3-sVTREJYXKL_kw

视觉设计师作为展示产品最终形态的执行层，产品上线前走查视觉与交互还原是必经环节，而留给设计师走查修改的时间其实非常少，有时候为了配合产品上线时间，通常只能牺牲一些细节，在下一次迭代进行优化，为了每一次上线的产品都能够得到更好的还原，这就需要设计师去了解开发到底是根据哪些规则还原我们的设计稿，以及在每一次制作和交付设计稿的时候，我们应如何设定好每一个细节的规则。

开发：这里已经完全对齐了，

视觉：看起来还没完全对齐，我的图也没有切错吧？

开发：字体大小和间距都是按照视觉稿来的，

视觉：这里间距偏差这么大，为什么不按照视觉稿？

开发：视觉样式好多，每个设计师的间距好像也都不一样，

视觉：……

我们经常会听到身边的设计师与开发哥的一些对话，关于对齐，大小，间距等设计还原问题经常会讨论很久，甚至有时会觉得，几个像素的间距是不是有必要这么纠结？以我较常接触的云产品官网为例，云产品官网体量庞大，单个页面或信息模块的样式复用可高达上百个子产品页面，此时第一个模块设计的规范性，扩展性，复用性则变得尤为重要，所以为了让设计方案更加合理，为了让合作更加高效，这里总结一些设计经验，与大家一起探讨～如有错误，欢迎指正～

本文将从以下三个方面，思考作为视觉设计师，应当如何让设计更加合理有效：

1. 视觉处理（设计）
2. 设计逻辑（方法）
3. 交付走查（合作）

视觉处理_字体结构

网页设计中，我们总避免不了与字体打交道，字体也经常是我们在设计中容易忽视的部分，而经常出错的原因往往是因为我们对文字的理解不够清晰，相比西文字体，中文字体结构复杂，字库庞大，网页的渲染效果会比西文字体艰难很多。

但无论是中文还是西文，我们经常需要用到的无非是字体大小，字重，字色，还有就是经常被我们忽视的行高和行宽，我们从西文字体提取三个最主要的因素，即字高、行高、行宽。基于西文字体的结构转换为中文，我们可以理解为，字高指的就是我们肉眼所能看到的字体的实际高度，而行高指的是字高+上边距和下边距，反过来说，行高减去字高除以 2 就能得到我们的上下边距，行宽指的就是整个文本的宽度。

举一个图文模块的例子，图(1) 中我们肉眼所看到间距，在我们做标注时，看到的其实是 图(2) 中的三个色块，我们实际给到开发的标注，是色块的尺寸和色块之间的间距，以及详细的文本属性。