视觉设师作展示产品终形态的执行层，产品线走查视觉与交互还原必环节，留给设师走查修改的时间其实非常少，时候了配合产品线时间，通常只能牺牲一些细节，下一次迭行优化。了每一次线的产品都能够得到好还原，这就需设师去了解发到底根据哪些规则还原我们的设稿，以及每一次制作交付设稿的时候，我们应如何设好每一细节的规则。
发：这里已完全对齐了。
视觉：看起来没完全齐，我图也没有切吧？
开发：字体大和间距都是按照视觉稿来的。
视：里间距偏差么大，为什么不按照视稿？
开发：视觉样式好多，每个设计师的间距好像都一样。
视觉：……
我们常会听到身的设师与发小哥的一些对话，关于对齐、小、间距设计还原问题经会讨论很久，有时甚至会觉得，几个像素的间距是是没有必要这么纠结。我较接触的产官为例，产官体量庞大，单个页面或信息模的样式复可达上百个子产页面，此时第一个模设计的规范性、扩展性、复性则变得尤为重要，为了设计方案更合，为了合作更效，这里总结一些设计经验，与大一起探讨。
本文将从以下三方面，思考作视觉设师，应当如何让设加合理效：
- 视觉处（设计）
- 设计逻辑（方法）
- 交付走查（合作）
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 客户端来配开发环境进体验，保证最终上线效。
欢迎关注作者微信公众号：「烦蜘蛛侠」
浙公网安备33011002017549号