佛山建站公司：前端开发人员的规格颂歌

在物质世界中，没有人在没有详细的蓝图的情况下建造任何东西，因为人们的生命就在线上。在数字世界中，风险并不高。

它被称为“软件”是有原因的：因为当它击中你的脸时，它并没有那么多伤害。如果你的网站上传了标题的左边距4像素与它下面的图像不对齐，没有人会死。

但是，虽然用户的生活可能不在线，但设计蓝图（也称为设计规范或规格）可能意味着正确实现的设计与改善用户体验和满足客户之间的差异以及令人困惑且不一致的设计会破坏用户体验和不满客户。

佛山建站公司对于我们这些创建数字产品的人来说，设计规范可能意味着高效协作与浪费的来回流程之间的差异，以及代价高昂的实施错误和交付延迟。这也可能意味着您的企业赚钱和亏钱之间的差异，在这种情况下，生活可能实际上是在线。

简而言之，规范可以帮助我们更快，更有效地构建正确的产品。

什么是蓝图（为什么它们是蓝色的）？

为什么蓝图是蓝色的？为了找到答案，让我们回顾一下，维基百科提供的：

“蓝图是技术图纸的复制品，记录了建筑或工程设计，在光敏纸张上使用接触式印刷工艺。该工艺于19世纪推出，可以快速准确地复制建筑和工业中使用的文件。蓝色印刷工艺的特点是蓝色背景上的浅色线条，原始的负片。“

建筑蓝图是19世纪的复印机。它们是用于复制技术图纸的最便宜，最可靠的技术。

通过在透明胶片上的墨水图周围发光来创建蓝图。除了墨水之外，光线会照射到任何地方，然后撞上涂有光敏材料的纸张，将纸张变成蓝色。这概述了深蓝色背景上的工程图的白色副本。

然后将这些副本分发给负责在这些图纸中实施设计的建筑商。

如今，许多平面设计师还将设计规范分发给负责实施设计的前端开发人员。设计规格不再是用纸和光制作的，它们不再是蓝色的，但是，和以前一样，它们确保产品正确构建。

从砖到比特和字节

在我之前作为房地产开发商的职业生涯中，我学到了建筑蓝图的价值。我的职责之一是找到伟大的建筑师来创建蓝图，以便我们雇用的建筑工人确切地知道要建造什么。在某个地方，我意识到房地产开发不适合我：我希望通过构建虚拟而非真实世界的可扩展天际线来产生更大的影响。我学习了HTML，CSS和JavaScript，并开始寻找正在招聘的创业公司。我对详细蓝图重要性的理解与我同在。

在万维网初创公司的狂野西部，我不得不构建单页JavaScript应用程序，看起来很好并且表现良好，我必须快速完成。设计通常在产品发布日期前一周传递给我们，我们被要求开始冲刺。设计通常由Photoshop文件（PSD）组成，其中包含许多层和零规格。

对于以前的房地产开发商而言，使用没有规格的图形设计就像获得一组带有所有图纸的建筑蓝图而没有数字。如果没有必要的CSS“测量”，我被迫通过形状和文本元素的图层和子图层来搜索“购买”按钮周围的边框或“忘记密码？”中使用的字体系列的正确HEX值。领域。这样的工作流程非常缺乏成效。

当我的朋友Chen Blume向我提出Specctr的想法时，我正在寻找规格，这个工具可以将建筑蓝图的熟悉好处带到平面设计和前端Web开发的世界。我立刻意识到这个想法的价值和潜力，所以我们马上开始合作，不久之后，Specctr的第一个版本发布了。

最初，Specctr插件仅适用于Adobe Fireworks用户，当时 - 2012年 - 似乎是UI和Web设计人员的最佳工具。后来，我们扩展了支持的应用程序范围，今天它包括Fireworks，Illustrator，Photoshop和InDesign。

一张图片（和一些数字）值得超过千言万语

他们说一张图片胜过千言万语。好吧，图片和一些RGB值可能更值得！

短语“一张图片胜过千言万语”意味着只用一张静止图像即可传达复杂的想法。它还很好地描述了可视化的主要目标之一，即可以快速吸收大量数据。但是，在设计和开发业务中，图片或单个PSD是不够的。

开发人员需要了解设计的确切属性才能编写通过代码重新创建文本和形状元素所需的HTML和CSS。如果PSD没有附带详细的规格，那么进行近似猜测或通过层进行搜索可能导致错误或丢失宝贵的开发时间。

开发者专注

在开发某些东西时，我可能需要几分钟才能在我的工作效率之前加载必要的心理模型。任何中断都可能会给我脑子里难以组装的错综复杂的想象机器带来一个破坏性的球。

这就是为什么不得不查找RGB值或转向队友询问使用哪种字体可能会导致我的生产力出现巨大差距。

如果您是分布式或远程团队的成员，那么您甚至无法立即让同事回答您的问题 - 您需要使用Skype，Hipchat之类的异步通信工具，或者更糟糕的是，电子邮件。正如Chris Parnin所说：

“在办公室环境中研究了中断的成本。中断的任务估计需要两倍的时间，并且包含两倍于不间断任务的错误。57％的任务被打断，工人必须在零散的状态下工作。对于程序员来说，中断的影响和普遍程度的证据较少。通常情况下，在中断后至少15分钟内被扔回“区域”的数量。对程序员的采访产生了类似的数字。“

错误的狂欢：开发者版

朱莉娅一直在她的电脑上连续八个小时和她的父母共进晚餐，但她承诺在当天结束时在主分支上的“产品”覆盖和“购买”覆盖之间进行CSS转换。她差不多完成了，但是这个“提交”按钮上的类型看起来和现在网站上的类型不一样。

“没关系，”她想。“我明天会改变它。”

面对短期限和通过Photoshop图层翻找的前景，一些开发人员会在黑暗中采用何种类型进行刺穿 - 因此，否定他们投入的设计研究的时间与一个压力推动的决策。

最后，无论如何我们都要重做它，但现在我们将满足截止日期。这完全取决于开发人员的便利性。

历史上没有人永远付出额外的努力来做错事。错误通常是遵循诱人的捷径的结果。

唱片业试图阻止音乐数字发行的失败就是一个很好的例子。Spotify的整个商业模式基于这样一个事实：“人们愿意做正确的事情，但只有当它做出有益的事情，而且比做错事更麻烦。”

为您的前端工程师提供完全规格的设计，然后沐浴在他们脸上散发出的感激之情。他们将获得你所有的边距和填充完全正确; 微妙的渐变将具有您所需的精确值，以便匹配; 这一切都会更快完成。为什么他们会做其他事情？他们需要的所有信息就在他们面前！

乏味的胜利：设计师版

Lauren花了一秒钟欣赏她完成的设计。它很平衡并传达了一种平静感，同时引导人们注意“提交”按钮。

经过漫长的一天工作后，她已经厌倦了准备回家，但她承诺提供完成的设计，以便Julia能够在明天的截止日期前开始开发它。她有时会为与她合作的开发人员制作规格，但她只是没有在她手中输入并手工绘制每个单独的注释。

“朱莉娅会明白这一点，”她在点击“发送”时自言自语。

这一切都与设计师的便利性有关。

如果设计规格（即蓝图）有很多东西可以提供，那么为什么它们不是每个设计师工作流程的一部分呢？我作为开发人员可能会跳过查找类型的原因与许多设计人员不创建规范的原因相同：更容易不这样做。

这是因为设计师没有使用正确的工具。他们手动测量并绘制每个尺寸，并使用与创建设计相同的通用绘图工具“手动”键入每个像素值和RGB值。

每当你要求艺术家停止创作并专注于过程时，你就是在进行一场艰苦的战斗。当过程缓慢而乏味时，山丘会变得非常陡峭。

利用适当的工具自动创建规范，设计人员可以降低成本，使整个团队能够获得创建和分发设计规范的好处。

让我们创建（和使用）设计规范

上面的两个例子 - 朱莉娅和劳伦 - 都是虚构的，但这并不意味着它们不会在现实生活中不断发生。开发人员不应该做任何导致错误和浪费时间的猜测。另一方面，手动创建详细的规格很繁琐，需要很多设计师的时间。

有没有更好的办法？我相信有。

我们应该开始使用工具来帮助我们以最少的麻烦创建设计规范。这些工具可以为设计人员和开发人员节省时间，并可以带来更好的设计人员 - 开发人员工作流程

以下是使用Specctr注释的设计文档的一些摘录。在Specctr插件的帮助下，设计师可以快速提供任何设计元素的颜色值，以及精确的宽度和高度，渐变值，类型属性（包括字体系列，重量，字距，前导等），边距，填充，边框属性等。这将极大地帮助开发人员实现设计，因为他们不需要通过层和子层进行搜索或进行任何猜测。

作为额外的副作用，使用详细的设计规范将帮助您避免在现实生活中实现的最终版本设计中的错误和不一致。下面是一个“漂移”的例子，当实现细节没有明确表示并且由开发人员猜测时，可能会出现“漂移”。

注意： Specctr不是唯一自动生成详细设计规范的工具。像PNG Express这样的插件（设计用于Photoshop）可以完成类似的任务，但我一直在提到Specctr，因为我自己开发并拥有最丰富的经验。如果您已尝试过其他规范生成工具，请在下面的评论中分享您的经验。

组件和样式指南

开发人员长期以来一直熟悉通过面向对象编程将大型系统分解为小型组件的优势，面向对象编程目前是主流编程范例，这得益于Java等语言的采用。将复杂项目分解为构成整体的独立部分，允许单个部件在项目的多个位置重复使用，并允许更大的项目组织和更容易的维护。

设计人员还发现，将设计分解为其原子组件可以提高效率，因为他们能够将它们组合起来以重用其代码和样式。查看项目整个设计所源自的组件，可以直接传达该项目的样式选择。将显示的组件的示例是网格，按钮，表单，表格和列表。

结合设计规格的组件构成了风格指南。样式指南既可以作为参考，也可以传达项目的设计美学，并为开发人员提供实施细节。开发人员不再需要依赖设计人员来规范单个文档，而是可以使用此参考来查找他们需要的信息。通过这种方式，样式指南是设计师和开发人员之间更高效协作的另一个很好的工具。

结论

我与几位设计师联系，征求他们对文档设计所遵循的流程的意见。我最喜欢的回应之一来自Cooper的高级视觉设计师Jason Csizmadi ：

“项目各个阶段的开发人员都期望并需要强大的文档。

虽然文档从来不是设计中最激动人心的方面，但它是确保顺畅工作关系，及时交付和最终成功交接的关键步骤。最终，设计文档充当生命支持系统，确保您的愿景得以正确执行。“

与任何良好的业务流程一样，设计规范应该支持主要的努力 - 在这种情况下，创建漂亮的网站和应用程序。创造这些产品，需要设计人员和开发人员之间的协作，有效的协作需要有效的沟通。投资于工作流程和工具的开发，使这种沟通更容易，更高效，将有助于提高产品的速度和效率，并最终取决于依赖这些产品的企业的成功。

佛山建站公司