前言

优秀的设计能够有效传达产品价值，但也离不开技术实现支持。随着市场环境的变化和行业水平的提高，越来越多的设计师开始认识到设计稿修复的重要性。

但在合作过程中，设计与研发思维的偏差逐渐显现：“这个要求达不到，间距也调不好”……设计稿落地后，往往需要经过多重审核多轮测试和“小板凳”对接才达到目的。预期效果。

可以说，在每个UI设计师的成长过程中，设计稿修复是一个必须经历且难以解决的问题。

如何更好地实现设计还原，减少重复工作？你不妨尝试换个角度，学会用开发思维来设计。

目录：

1. 地点

“元素位置”的标注是设计验收时与开发人员的战场。

面对它时，设计者应该站在开发的角度，运用动态透视思维，对界面中的元素位置进行合理的动态布局，输出正确的位置标注，减少开发者多次返工的困境。

1.1.绝对位置和相对位置

我们常说的“位置”代表的是界面中元素的X轴和Y轴坐标。同一个元素在不同的模型中会表现出不同的位置，大致可以分为两种： 1. 绝对位置； 2..相对位置。

就像初中物理学过的“动与静的相对论”一样，当船在海上航行时，海岸是参照物，船相对于海岸处于相对位置，海上的灯塔就是绝对位置。

1.1.1.绝对位置

绝对位置：以屏幕为参考对象，元素的位置相对于屏幕是固定的，不会受到其他元素的影响。

例如：普通导航栏、底部标签栏、底部按钮、浮动按钮。

1.1.2.相对位置

相对位置：元素的位置并不固定，会随着页面大小或其他元素的影响而变化。

例如：支付宝的列表流程。列表的间距是固定的。当删除一个列表时，后面的列表的位置会自动上移。 （如下图）

1.2.位置标注的注意点

标记位置时，您必须有建造建筑的心态。什么是建筑思维？

设计具有平行关系的模块，即相似的“楼层”，元素以模块的形式叠加，形成建筑物。

进行标注时，通过分析元素之间的相关性进行标注，标注元素在地板上的位置。可同时应用于整个设计稿制作流程。

例如：列表流、多卡或多行菱形区域sketch视觉设计教程，只需要标记某一层元素的位置关系即可。 （如下图）

1.3.绝对位置和相对位置的标注方法

对于位置标注，不标注元素的坐标点、上下左右间距。而是根据元素之间的关系，决定标记为绝对位置还是相对位置，并标记清楚，以便开发者更好更快地还原。

绝对位置打标采用百分比打标或固定位置打标。

相对位置可以用普通像素来标记。 （如下图）

2、元件间距

常见的设计注释文件中，元件间距大致可分为两种：

边距

内容块之间的间距

2.1.页边距

指内容到屏幕边缘的距离，也称为安全距离。

同时，36氪界面中可以发现一个小细节：右侧图标没有附着在安全区域。这是因为当图标尺寸较小时，为了保证其易于点击，周围会填充空白像素，使得可点击的热区面积大于图标的视觉尺寸。 （如下图）

在设计过程中，我们应该使用常用的页边距，例如32px、30px、24px、20px。

同时，需要保持所有界面页边距的一致性，以减少与开发人员的沟通成本。

2.2.内容块间距

主要有两种类型：块外间距和块内间距。

通常，根据格式塔中的“邻近原则”，块内的距离小于块外的距离，以保证内容块的亲密感和块与块之间的分离感。 （如下图）

让我们首先关注外部间距。

在开发过程中，开发者经常需要使用模块开发，这种情况下就需要使用额外的块间距。在标记块外间距时，设计者和开发者需要保持思维统一，这样才能保证页面的还原性。

如何使用额外的块间距来构建页面？一般来说，常见的方法有四种：

1.给定间距，从上到下适应。这种方法很容易造成下面布局拥挤，不常用。

2.给定间距，从上到下到中间适应。一般来说，基本上可以适应各种尺寸，但很容易出现布局不协调的情况。

（以上两种方法用处不大，基本已被淘汰）

3、确定画板上各元素中心点的比例位置，根据比例确定位置。这种方法可以完美适应美观的布局。 （如下图）

4. 将画板分为几个区域，并将每个区域中的所有元素居中。

这是最符合开发思路的适配方案，也具有较好的修复效果。

具体做法是固定上下区域，适配中间间隔区域。单独划分的区域可以直接给出高度值，或者比例。 （如下图）

3和4是比较常用的高度适配方法，尤其是第4种方法。酷狗和QQ音乐均采用第4种方式进行适配。 （如下图）

涉及文本、图标等的块内间距标记将在后面的章节中进行说明，此处不再赘述。

总而言之，为了避免设计者和开发者出现间距问题，一方面我们在设计过程中保持统一性，减少大量不同间距值的出现，让开发者更顺畅、更高效写页面。高的。

另一方面，我们在注释时需要关注开发者需要什么，了解开发思维，并与他们统一思想。

2.3.标记元件间距时的注意事项

在设计过程中，我们经常采用以下方法来规范间距：

2.3.1.定义最小单位网格，如4px、6px、8px等；

2.3.2.设置常用间距：例如最小单位为4px，则常用间距设置为：8、16、24等4的倍数。

在适配第一稿的时候，面对不同尺寸的模型时，我们使用4px网格将其转换为整数倍，这样我们的视觉元素就不会因为适配而变形、模糊。常用的间距由最小单位网格的倍数来设置，这样可以保证视觉元素的准确性，使设计合理，也更容易让开发者还原并降低沟通成本。

例如：当可以使用16时，避免使用18或20，但也应该根据实际情况进行动态调整。尽量做到“克制”，避免间距过大，在修复过程中给开发者带来不必要的麻烦。

1.4.元件间距的标记方法

关于内容间距的标注，目前在与开发者对接的过程中有两种主流的方式：

2.4.1.对于手动标注，需要与开发者沟通，标注关注重点；

2.4.2.设计师利用插件工具一键导出所有标注，如：Blue Lake；

3.图标分割线

3.1 图标

图标是设计中最常用的基本元素。我们会在金刚区、标签栏、个人中心、导航栏等不同位置使用它们。分析图标的间距标注，我们将所有图标简化为两类：

规则（带底板）图标

不规则图标

底部有一个图标

这些图标大多出现在金刚区，比如淘宝、唯品会等。

金刚区域图标常用的布局有两种，一种是等间距，一种是等分屏。

淘宝采用等距布局，唯品会采用等距布局。首先标记图标的大小，然后针对不同的布局方式标记间距。这样我们就完成了基础图标标注，在与开发者对接时可以解释清楚，减少不必要的沟通成本。

不规则图标

此类图标会出现在金刚区、列表流、导航栏、标签栏等处，如：get、马蜂窝等。

对于不规则的图标，我们需要根据图标框的面积进行裁剪。在标注的时候，我们也是利用图标框的面积来进行标注。

同时，还需要标记图标框的最小可点击区域。一般来说，最小可点击区域是48px*48px，应该写入规范文档。这样，在整个项目过程中，方便开发人员检查，节省时间。

3.2.分向線

分割线作为页面中的一个小元素，在设计中很容易被忽视。因此，划好分割线非常重要。下面主要根据三种主要场景来讲解分割线的标注：

列表流

馈送流

内容块之间

3.2.1 列表流

大多数列表流都会使用分割线，例如支付宝和微信。

这种分割线称为等屏分割线，用于分割列表中的每个数据项。我们标记列表流的高度，然后以图标为参考标记分界线到图标的距离。

当我们自己绘制分割线时，建议分割线的高度为1px。在与开发者联系时，我们说明@1、@2、@3的情况下，分割线都是1px。

3.2.2 馈送流

Feed流也是分割线的常见用户，例如澎湃新闻和简书。

我们需要标记分割线和内容之间的间距，然后标记分割线和文字之间的间距。在标记文本时我们需要注意的一件事是文本本身具有默认的行高。因此，我们不能完全标记文本本身，而是留下几个像素作为文本本身的行高。

3.3.内容块之间

内容块之间有时会使用分割线，例如凯岩和哔哩哔哩。

我们需要标记分割线到内容的距离，然后标记上下间距。

但这里需要注意的一点是，在绘制分割线时会出现遗漏的问题。我们经常用它来绘制，但是由于 的默认属性，线条的线条样式是()，这会导致我们绘制的线条在视觉上与像素对齐，但是数据中会显示0.5个像素。

在计算多个元素之间的间距时sketch视觉设计教程，数据上显示的图形与实际屏幕会不一致。这时，我们需要使用矩形工具绘制一条1像素宽的线，以保证视觉上的对齐和数据中的整数。

4. 文字适配

4.1.文本行高自适应

有的设计者采用独创的方法来标记文字：如下图所示，标记从上方文字“Ke”的末端开始，到下方灰色文字的最高点“2”结束。这种情况下，开发者还原的效果与设计稿存在一定的差距，需要多次调试才能达到理想的效果。

后来设计者逐渐使用文本的默认行高来导出注释文件。但在检查开发版本的还原时，仍然发现设计稿中的注释间距不一样。

这是为什么呢？因为不同的字体在高度上会有细微的差异，无论是使用原来的方法还是使用默认行高来标记文本，都与前端文本编辑软件中字体的默认行高不一致。

比如iOS的Xcode和文本编辑器对应的行高效果。

从上图我们可以看到，开发者在编写字体时，都会使用类似的文本框。我们可以把它理解为一个文本框。这些文字实际上并没有填满盒子，而是有一定量的空白。

因此，我们可以将行高理解为包裹在字体周围的一个看不见的盒子。在标记文本的行高时，我们必须包含空白，并以文本框的形式标记（即默认行高）。

配合开发者恢复文字间距的具体标注方法大致可以分为三种：

1.安装插件；

2.手动修改文本行高；

3、文本组件化；

4.1.1.安装插件

一个懒惰的方法：安装一个“nugin”。插件。

此插件适用于平房和SF字体。点击fix，一键修复xcode原生行高。虽然这类插件看似能够一劳永逸地解决问题，但目前市面上的应用很少，而且bug也不少。单行文本基本可以恢复，但多行文本基本不适用。 （插件可在附件中下载）

4.1.2.手动修改文本行高

最准确的方法：根据前端编辑器默认的行高自行完美还原。

手动更改文本行高，使其与前端默认行高一致，以提供准确的文本间距。这种方法虽然花费很多时间，但也是最准确的。您可以据此设置最美观、最合理的间距，而不必担心线稿的还原。

4.2.文字样式

最方便的方法：手动调整字体的默认行高，形成样式。这样标准化的设计可以更好的让开发者还原设计稿，也方便我们后期的页面校对和调整。

这时候，眼尖的朋友可能会发现，针对iOS开发的文本编辑器的默认行高是不一​​样的。我们需要生成两套设计注释文件吗？

虽然不可否认，理想的状态是设计师出两套设计稿，但在职场工作过的设计师都会知道，大多数产品都处于快速迭代过程中，出两套需要花费太多的时间和成本。的设计稿。高，与实际情况不符。

关于这一点，建议您尝试将iOS和的行高设置为相同，然后针对特殊页面进行单独的标签调整。

总而言之，具体采用何种方式进行文本标注，一定要根据自己项目的具体情况进行分析。

4.3.灵活的文本适配

文本弹性适配一般涉及到宽度适配。

宽度适配一般采用间距适配，即设置左右边距，弹性拉伸中间。这种方法可以实现更好的适应，也是常用的快速适应方法。

5. 投影

阴影作为重要的视觉元素，允许主要元素和其他元素从背景中“弹出”并具有深度，更好地向用户呈现信息层次结构。 （当然，我们今天的主要目标不是教大家如何制作阴影，而是关于漫射阴影如何更好地与开发者联系，为用户恢复更好的体验）

您在与开发者沟通创建漫反射阴影时是否遇到过上述痛点？

是否存在卡位偏移、文案错位、错位、漫射投影颜色太浅或太暗等一系列问题？

面对这些实施痛点以及与开发者沟通时出现的各种问题，我们应该如何解决呢？

结合我的实际工作经历以及与开发者沟通的经验，实现漫射投影的方法可以通过两种方法来实现：

剪图以与开发人员联系

CSS代码实现

5.1.使用切割图与开发人员联系

设计师和开发者此时需要更加小心，因为剪切图片也有一些缺点，因为对每张卡使用剪切图片会使开发的包变大，并且可能会导致加载缓慢、崩溃等，这些体验也很糟糕。

因此，这个过程中的一些问题必须提前与开发人员和项目人员进行沟通。

5.2.前端会首先使用css代码来实现漫反射阴影效果。

一般情况下效果是比较好的，但也有一些异常的情况，比如形状不规则，代码通常也比较复杂。这时候就需要提前和开发商沟通一下切割情况，避免后期出现一些问题。

漫反射阴影教程链接：

代码实现教程链接：

总而言之，在设计过程中，我们需要更好地了解下游工作，实现高效沟通。无论使用哪种方法，都没有对错之分。关键是要懂得“权衡利弊”，提前与开发商沟通。只要适合自己公司的项目，能够高效还原设计稿，就值得使用。

六、总结

为了更好地解决设计还原问题，需要注意以下几点：

6.1.元件位置

用建筑思维对设计稿进行设计和模块化。在输出清晰明了注释的同时，对容易产生歧义的元素进行单独注释，减少约简错误；

6.2.元件间距

开始设计前确定最小单元网格，利用倍数原则确定常用间距，保证适配时各单元的准确性，降低开发复杂度；

6.3.图标

根据图标框大小进行裁剪和标记，方便后期开发；

6.4、分割线

注释中需要说明的是，不同模型下分割线始终保持1像素的高度；

6.5.文本

由于开发环境中的文字有上下高度，所以设计时需要手动将行高修改为开发环境中的默认行高；适配多行文本时，确定文本左右页间距，对内容部分进行弹性拉伸；

6.6。投影

建议规则阴影和漫反射阴影使用CSS代码完美实现；特殊情况下，需要提前与开发者沟通，权衡各种方法的利弊，选择适合项目产品的实现方法。

优秀的设计离不开开发者的实现支持。作为设计师，与开发人员协作完成设计实现也是工作的重要组成部分。把以上几点做好，站在开发者的角度为他们“多想一步”，高品质的设计还原指日可待。

如有侵权请联系删除！