一个高质量的产品设计往往需要多个部门的合作

 

 

一个高质量的产品往往需要多个部门的合作来完成。作者根据自己的工作经验，从三个方面介绍了设计师如何协助产品落地稿实现“像素级还原”，希望对您有所帮助。

每个认真对待自己产品的项目工作者都应该有一个梦想，那就是前端能够在像素级“恢复”设计草图。然而，准确地恢复设计草图对于前端来说并不是一件美好的事情，它还需要早期用户界面的配合。

不管前端开发过程中的疏忽(每个人在工作中都会感到困惑)，因为至少有一个设计直通链接可以填补一些缺失的细节(关键是在设计直通过程中增强相互的感觉)。

因此，如果您想在像素级“恢复”设计草案，那么在早期发布草案时，设计者应该注意什么，以便帮助前端更好地设计着陆？

近年来，我在工作中总结了一些经验。

首先，可重用控件的标准化

从设计者的角度来看，我们为什么要输出设计规范、控制规范和交互规范？

因为只有在可重用控件被标准化之后，在与其他设计者的协作过程中才会有太多的设计偏差。即使您不需要与其他设计者协作，规范也可以帮助您避免在发布过程中忘记可重用控件的各种参数，从而导致多个页面上相同控件的样式或交互不一致。

事实上，前端也面临着和设计师一样的问题。在用户界面标准化可重用控件之后，前端可以在样式库中编写一个标准控件样式，然后在不同的页面中调用它。原理类似于我们在草图中建立的符号。

如果用户界面忽略了规范，前端可能每次都手动编写控制代码，而不知道有可重用的组件。你写的代码越多，你就越有可能错过细节，犯错误，导致效率降低。

最重要的是，对于未来的迭代，前端将不得不一页接一页地修改。因此，建议设计人员必须标准化可重用控件，并将输出文档交付给前端开发人员，这也将有助于我们提高演练的效率。

二、色彩控制和间距问题

在我有了更多的经验之后，我发现颜色和间距最有可能造成登陆页面和设计草稿之间的视觉差异。不要低估这两个细节元素。如果你不能很好地控制它们，它们会大大降低登陆页面的效果。1.颜色

首先，颜色也是需要标准化的组成部分之一。主色、辅助色和普通渐变色应具有统一的颜色值，以及中性色的使用规范(如分隔线、页面背景等)。)也应该标准化。

原因和上面提到的一样。前端可以将颜色值写入样式数据库，可以有效避免不同页面的颜色值偏差。

除了规范之外，用户界面设计者还必须注意前一个稿件的颜色模式，否则很可能会出现登陆界面和设计稿件之间的颜色偏差。

我相信许多设计师应该知道，当设计在线(自发光设备)的作品在PS，颜色模式应该调整到RGB。

然而，在我的工作经验中，我发现许多设计师并不知道素描也有色彩配置。通常，当我们在草图中创建新文档时，草图将默认颜色模式为“非托管”，并且“非托管”模式下的颜色显示将比自发光设备的颜色显示更亮。

因此，请记住在草图中将颜色配置更改为sRGB，否则着陆界面将比设计更暗更脏。

2.间隔

间距也是影响着陆效果的关键因素之一。我主要将间距分为文本间距和控制间距。

文本间距是指纯文本和其他元素之间的间距。发布用户界面时，应注意文本的行高造成的前端测量误差。

这个句子是什么意思？首先，我们需要了解什么是线高。我将以素描为例。当我们设置一个28px的文本时，默认情况下Sketch会将文本设置为40px的行高，文本的上下部分会包含一些空白像素。

如果用户界面没有设置行高规格，着陆时会出现以下问题：

因此，在设计过程中，我通常会将单行文本的行高调整回28px。不要在行高中使用空白像素来阻止前端写入正确的间距值。】

但是，我将输出标准行高(可以是行高的x倍，也可以是特定行高值的x倍，例如，对于28px的多行，输出40px)，控制间距就是我接下来要讨论的“方框模型”。

三、标图时也应遵守“盒子模型”

没有前端用户界面设计者的知识库，您不需要完全理解前端如何使用代码来实现您的设计，但是您必须知道什么是“盒子模型”。

“盒子模型”是前端的基础知识。一般来说，这意味着我们把界面中的每个元素都看作一个矩形的“盒子”。每个“框”都有自己的样式属性(包括但不限于边间距、笔画、填充等)。)，并与其他“框”保持相对位置关系(包括但不限于上、下、左、右和包含关系)。为了给出一个真实界面的例子，我们可以在浏览器中打开“开发者模式”来查看网页的样式代码以及当前界面是如何通过“盒子模型”来布局的。

前端不能像绘制用户界面那样简单地将可见元素拖放到某个位置。他们需要将每个元素放入一个“盒子”中，然后在界面中定位它。

那么知道用户界面发布的“盒子模型”有什么用呢？

当你发现前端布局如何实现你的设计草图时，你将开始理解如何从着陆的角度思考，充分利用界面中的“盒子”和“盒子”每个布局。

让我举个例子。如果我们不使用“盒子”，当我们制作表单时，前端不知道用户界面如何定义每个标签之间的间距。

例如，用户界面确定它们从一个标签的图标到下一个标签的图标的相对位置，但是前端可以在测量期间测量前一个标签的文本和下一个标签的文本之间的距离，然后将该距离应用到他不知道应该设置多高的“框”。

“盒子”的使用在页面上几乎无处不在，因此用户界面将“盒子模型”的思想引入到手稿中，以合理地构思每个元素的布局。一方面，它可以帮助你在输出页面时有一个更合理的布局；另一方面，当前端着陆时，它可以帮助前端准确地恢复。

四.结论

一个高质量项目的落地是各部门合作的结果。就像我们玩游戏一样，后期的高质量输出也需要前期的出色协助来铺平道路。

这是我在长期处理前端时应该注意的一点，总结一些用户界面辅助的前端登陆，希望对大家有所帮助。

最重要的是：在工作过程中，错误并不可怕，犯错误后不总结也很可怕。对你来说，不扔掉锅，想想你是否能做得更好，这是一件好事。