开发页面如何把设计稿100%还原

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

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

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

1. 字体结构

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

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

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

2. 文字行宽

关于行宽，以设计 banner 的标题及描述文字为例，定义行宽是为了让文本在极限宽度的时候进行换行，再固定好配图的尺寸，从而得到文本与配图之间的间距，定义行宽、行数、字数，能够更好地为运营人员规范输出的文案，避免因字数过多或过少所造成的视觉不平衡。

当我们处理无序列表时，四个短句文本，长短不一，同样我们需要限制一行文本宽度，定义一行能承载的最多字数，以及跟产品确认可能出现的最多字数的情况，确认模块设计的可行性，保证后续运营人员在替换文案的时候不会出错。

以上两个例子都是我们设计文字经常出错的地方，正确的定义规范，无论是交付开发或者其他下游，都能保证模块设计的可扩展性及规范化，保证最终上线质量。

3. 图标视错觉

关于图标，这里提到一个几何学错觉的概念，视觉上的大小、长度、面积、方向、角度等几何构成，和实际上测得的数字有明显差别的错觉，称为几何学错觉。人眼所接受的视觉平衡，往往不是设计软件上精准的对齐，我们总是会通过调整间距、大小或角度来补齐一些负空间，让画面保持视觉平衡。

以客户案例的卡片样式为例，客户案例在 to B 产品中是必不可少的模块，我们的客户 logo 有的圆形，有的长方形，有的纯文字，尺寸差距比较悬殊，这种情况下我们需要给他限制一个高度，在这个高度以内，再根据 logo 本身的体量来调整图形的大小，处理好 logo 的视觉平衡，最后红色区域是 logo 的实际尺寸，蓝色区域则是我们实际给到开发的尺寸，从开发的角度来看其实就是占位符，而规范的作图则是把占位符的透明度调整为 0，以占位符为实际有效作图区。

UI 设计中通常以「向右箭头」来表示当前链接可跳转，使用箭头作图时，当我们把箭头和文字右对齐，箭头其实会更加的往外突出，这时候我们会人为的往里边推 1 至 2 像素，最后实际给到开发的也应该是红框的尺寸，也就是 16×16 的占位图尺寸。

「按钮」也是 UI 设计中常用的组件，当我们在按钮里使用图标加文字时，由于文字的体量更大，整体重心会往右偏，所以我们通常会认为让图标和文字整体往左偏移，使整体的视觉更加平衡，实际给到开发的，也是两个不同等的边距。

1. 理性的设计

在 iOS 和 Android 的设计规范中，都有提到过使用「8点栅格」的概念，即建议使用 8×8 的网格系统进行设计，我们都知道 0.5px 的渲染在屏幕上会变模糊，之所以使用 8 的倍数是因为市场上主流的屏幕都能被 8 整除，使用 8 点栅格能够最大程度的让我们所设计的内容样式在屏幕上保持高清显示，而在日常的网页设计中，我其实更加倾向使用 4 点栅格系统。

我们以下图 4 组数列为例，大家可能都曾使用过上面三组蓝色数列中的数值应用到设计中，或以 5 为倍数，或以 10 为倍数、或以偶数为设计逻辑，而实际上以 5 为倍数则会包含奇数，奇数会导致控件文字对不齐，当 5 的倍数和偶数同时使用时，则会出现类似 14、15、16 这种相差为 1 的相邻数，这样会导致我们的尺寸规范不好定义规则，难以形成逻辑，而使用 4 的倍数，他们的公差为 4，不会出现奇数，也不会出现相邻数。

我们再看看一些通用的尺寸定义，例如常见的 icon 设计尺寸都是以 4 为倍数。

常见的网页栅格及其所均分的卡片和间距，也都是 4 的倍数，如果我们的控件尺寸，图标尺寸和间距都使用 4 的倍数来定义，那所有的信息模块自然都能更好的相互适应，层层递进的逻辑关系也会更加明显。

我们把 4 点栅格的设计逻辑套用到卡片设计上，第一眼我们可能比较难去评判两者的好坏，但仔细看，我们就会发现第一个卡片的按钮没有水平对齐，相互之间的间距尺寸也是没什么逻辑性。假如今天调整一个 8px 的间距，明天调一个 10px 的间距，设计师走查起来也很难发现有问题，对接的开发也难以有一个可以参考的规范标准。而相对的，以 4 为倍数，我们会发现所有的信息都会完美对齐，而且倍数为 4 的每个数值之间公差为 4，即使设计稿微调了 1px 我们都能很快发现，开发在还原设计稿时也会有一个衡量标准。

网格设计在报纸、杂志、海报等平面设计领域中也是十分常见的设计手法，通过建立网格，考究每一个信息模块在页面中的摆放位置，大小占比，颜色占比，从而使得页面信息保持秩序、均衡。

使用 4 点栅格系统，通过理性、秩序、逻辑的设计方式赋予画面秩序感以及阅读体验，而以 4 为倍数，每个数字之间都相差为 4，不会太大，也不会太小，同时保持着秩序，让设计更加理性。对于团队合作，设计师与开发也将更有默契，不必再为不清不楚的间距浪费时间。

1. 有效切图

关于切图，切图之前应跟开发确定好输出的格式和尺寸，确定应该用 SVG，一倍图或是两倍图。SVG 体量小渲染质量好，单色使用时还能替换颜色，PNG 则通常用在实景图，一倍图和二倍图则根据实际需要进行输出。

如果要做分层动画，那我们就需要分层切图，如果桌面端和手机端样式差别较大，那我们需要和开发沟通好如何实现，是否需要特殊切图，所有的特殊切图和特殊样式，我们都应该提前跟开发沟通好。

2. 交互细节

如果某个控件或信息模块交互样式较多，那我们可以有一个空白画板来清晰地标注这些状态和样式，很多开发在还原过程中都是一手视觉稿一手交互稿，但视觉设计师作为展示产品最终形态的执行层，很多情况下，视觉阶段依然会有很多需要跟交互和产品沟通修改的地方，所以为了避免遗漏修改点，视觉稿应该呈现最完整的设计细节，这样也会很大程度上节省开发的时间，减少出错的几率。

当页面内容有一定的更新频率，我们则需要标明视觉样式规范，以及后续的运营规则，完整的收尾，可以避免产品经常过来寻求上线素材和规范。有些需要隔三个月或半年才上线的需求，清晰的标注也能帮助我们快速回忆起需求背景，让我们在日常工作中保持头脑清晰，有条不紊，这其实也是在给我们自己节省时间。

3. 重构稿走查

走查还原的时候，在 Chrome 浏览器的空白处右键点击检查，找到里面的 Computed 窗口，我们可以找到具体的文字、间距、投影等属性，有时候一些比较细微的调整，我们可以双击具体的数值进行调整，调整到自己满意之后再把具体的数值给到开发，这样就不用在我们摇摆不定的情况下，造成双方的困扰。

最后，在预发布的时候，我们可以利用 SwitchHosts 的客户端来配置开发环境进行体验，保证最终上线的效果。