如何让你的设计稿做到95还原？

　　视觉设计师作为展示产品最终形态的执行层，产品上线前走查视觉与交互还原是必经环节，而留给设计师走查修改的时间其实非常少。有时候为了配合产品上线时间，通常只能牺牲一些细节，在下一次迭代进行优化。
　　为了每一次上线的产品都能够得到更好的还原，这就需要设计师去了解开发到底是根据哪些规则还原我们的设计稿，以及在每一次制作和交付设计稿的时候，我们应如何设定好每一个细节的规则。
　　开发：这里已经完全对齐了。
　　视觉：看起来还没完全对齐，我的图也没有切错吧？
　　开发：字体大小和间距都是按照视觉稿来的。
　　视觉：这里间距偏差这么大，为什么不按照视觉稿？
　　开发：视觉样式好多，每个设计师的间距好像也都不一样。
　　视觉：
　　我们经常会听到身边的设计师与开发哥的一些对话，关于对齐，大小，间距等设计还原问题经常会讨论很久。甚至有时会觉得，几个像素的间距是不是有必要这么纠结？
　　以我较常接触的云产品官网为例，云产品官网体量庞大，单个页面或信息模块的样式复用可高达上百个子产品页面，此时第一个模块设计的规范性，扩展性，复用性则变得尤为重要。
　　所以为了让设计方案更加合理，为了让合作更加高效，这里总结一些设计经验，与大家一起探讨～如有错误，欢迎指正～
　　本文将从以下三个方面，思考作为视觉设计师，应当如何让设计更加合理有效：
　　视觉处理（设计）
　　设计逻辑（方法）
　　交付走查（合作）
　　一、视觉处理
　　1。字体结构
　　网页设计中，我们总避免不了与字体打交道，字体也经常是我们在设计中容易忽视的部分，而经常出错的原因往往是因为我们对文字的理解不够清晰。相比西文字体，中文字体结构复杂，字库庞大，网页的渲染效果会比西文字体艰难很多。
　　但无论是中文还是西文，我们经常需要用到的无非是字体大小，字重，字色，还有就是经常被我们忽视的行高和行宽，我们从西文字体提取三个最主要的因素，即字高、行高、行宽。
　　基于西文字体的结构转换为中文，我们可以理解为，字高指的就是我们肉眼所能看到的字体的实际高度，而行高指的是字高上边距和下边距。反过来说，行高减去字高除以2就能得到我们的上下边距，行宽指的就是整个文本的宽度。
　　举一个图文模块的例子，图（1）中我们肉眼所看到间距，在我们做标注时，看到的其实是图（2）中的三个色块，我们实际给到开发的标注，是色块的尺寸和色块之间的间距，以及详细的文本属性。
　　2。文字行宽
　　关于行宽，以设计banner的标题及描述文字为例，定义行宽是为了让文本在极限宽度的时候进行换行，再固定好配图的尺寸，从而得到文本与配图之间的间距，定义行宽、行数、字数，能够更好的为运营人员规范输出的文案，避免因字数过多或过少所造成的视觉不平衡。
　　当我们处理无序列表时，四个短句文本，长短不一，同样我们需要限制一行文本宽度，定义一行能承载的最多字数，以及跟产品确认可能出现的最多字数的情况，确认模块设计的可行性，保证后续运营人员在替换文案的时候不会出错。
　　以上两个例子都是我们设计文字经常出错的地方，正确的定义规范，无论是交付开发或者其他下游，都能保证模块设计的可扩展性及规范化，保证最终上线质量。
　　3。图标视错觉
　　关于图标，这里提到一个几何学错觉的概念，视觉上的大小、长度、面积、方向、角度等几何构成，和实际上测得的数字有明显差别的错觉，称为几何学错觉。人眼所接受的视觉平衡，往往不是设计软件上精准的对齐，我们总是会通过调整间距、大小或角度来补齐一些负空间，让画面保持视觉平衡。
　　以客户案例的卡片样式，客户案例在toB产品中是必不可少的模块，我们的客户logo有的圆形，有的长方形，有的纯文字，尺寸差距比较悬殊。这种情况下，我们需要给他限制一个高度，在这个高度以内，再根据logo本身的体量来调整图形的大小，处理好logo的视觉平衡。
　　最后红色区域是logo的实际尺寸，蓝色区域则是我们实际给到开发的尺寸，从开发的角度来看其实就是占位符，而规范的作图则是把占位符的透明度调整为0，以占位符为实际有效作图区。
　　UI设计中通常以“向右箭头”来表示当前链接可跳转，使用箭头作图时，当我们把箭头和文字右对齐，箭头其实会更加的往外突出，这时候我们会人为的往里边推1至2像素，最后实际给到开发的也应该是红框的尺寸，也就是1616的占位图尺寸。
　　“按钮”也是UI设计中常用的组件，当我们在按钮里使用图标加文字时，由于文字的体量更大，整体重心会往右偏。所以我们通常会认为让图标和文字整体往左偏移，使整体的视觉更加平衡，实际给到开发的，也是两个不同等的边距。
　　二、设计逻辑
　　1。理性的设计
　　在IOS和Android的设计规范中，都有提到过使用“8点栅格”的概念，即建议使用88的网格系统进行设计。我们都知道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，不会太大，也不会太小，同时保持着秩序，让设计更加理性。对于团队合作，设计师与开发也将更有默契，不必再为不清不楚的间距浪费时间。
　　2。有效切图
　　关于切图，切图之前应跟开发确定好输出的格式和尺寸，确定应该用SVG，一倍图或是两倍图，SVG体量小渲染质量好，单色使时还能替换颜色，PNG则通常用在实景图，一倍图和二倍图则根据实际需要进行输出。
　　如果要做分层动画，那我们就需要分层切图，如果桌面端和手机端样式差别较大，那我们需要和开发沟通好如何实现，是否需要特殊切图，所有的特殊切图合特殊样式，我们都应该提前跟开发沟通好。
　　交付走查
　　1。交互细节
　　如果某个控件或信息模块交互样式较多，那我们可以有一个空白画板来清晰的标注这些状态和样式。很多开发在还原过程中都是一手视觉稿一手交互稿，但视觉设计师作为展示产品最终形态的执行层。
　　很多情况下，视觉阶段依然会有很多需要跟交互和产品沟通修改的地方。所以为了避免遗漏修改点，视觉稿应该呈现最完整的设计细节，这样也会很大程度上节省开发的时间，减少出错的几率。
　　当页面内容有一定的更新频率，我们则需要标明视觉样式规范，以及后续的运营规则，完整的收尾，可以避免产品经常过来寻求上线素材和规范。有些需要隔三个月或半年才上线的需求，清晰的标注也能帮助我们快速回忆起需求背景，让我们在日常工作中保持头脑清晰，有条不紊，这其实也是在给我们自己节省时间。
　　2。重构稿走查
　　走查还原的时候，在Chrome浏览器的空白处右键点击检查，找到里面的Computed窗口，我们可以找到具体的文字、间距、投影等属性。有时候一些比较细微的调整，我们可以双击具体的数值进行调整，调整到自己满意之后再给到具体的数值给开发，这样就不用在我们摇摆不定的情况下，造成双方的困扰。
　　最后，在预发布的时候，我们可以利用SwitchHosts的客户端来配置开发环境进行体验，保证最终上线的效果。