让我们更多地了解设计规范、如何创建它们，以及它们如何平滑设计和工程之间的交接过程。
什么是设计规范？
设计规范（规范的简称）是随设计文件附带的说明，可帮助前端工程师实现 Web 或移动应用程序的 UI。
一点历史
过去，这些说明需要涵盖设计中的各种尺寸和空间。然而，当Zeplin推出时，它彻底改变了游戏规则。一旦设计文件导出到 Zeplin，它允许设计师和工程师自动查看设计规范的部分内容。
随着Figma的兴起，事情变得更容易、更快，其中基本设计规范直接显示在工具中，并在对设计进行任何更改时自动更新。
你为什么需要它？
1：实现准确性：设计规范帮助工程师更好地理解设计应该如何实现以及当用户与其交互时它应该如何表现。它还让设计师从不同的角度和角度看待他们的工作，让他们能够涵盖更多的边缘情况并尽早发现设计流程。
2：一致性：创建清晰的规范让设计师更多地考虑他们构建的 UI 元素的一致性和可扩展性，也让他们有机会评估他们的一些决定并在此基础上调整设计。
3：沟通：设计规范减少了在实施过程中设计和工程之间来回对话所花费的时间。它通过提供有关实施的最常见问题的答案来节省每个人的时间，这有助于加快实施过程并提高其效率。
总结：规范您的设计消除了设计和工程之间的很多摩擦，并为每个人节省了大量时间。这将是设计方面的一点投资，但会带来巨大的回报；作为一名设计师，您在交付设计之前必须做更多的工作，但这将最大限度地减少您从负责实施您的设计的工程师那里得到的澄清问题。
什么时候应该创建设计规范？
如果您使用 Figma 或 Sketch，您可能不需要指定所有内容，例如宽度、高度，甚至字体大小，因为这已在工具中自动显示。但是，对于响应式或粘性 UI 元素等其他部分，您需要手动指定它们。
在某些情况下，如果您在快速变化的环境中工作，例如小型初创公司，那么花大量时间制定详细规范可能没有多大意义，您可以花更多时间与工程师讨论实施细节.
话虽如此，即使在初创公司，我也强烈建议至少为您工作的主要部分创建设计规范。这将最大限度地减少您和工程师之间的来回，并使他们更有效率。
您应该使用哪些规范工具？
您可以通过多种方式创建设计规范，最重要的是确保它们与实际设计有所区别。为了实现这一点，我建议使用明亮的独特颜色和等宽字体来注释您的规格。
大多数情况下，我使用线条工具在 Figma 中手动指定我的设计，并使用一些文本进行注释，在某些情况下，我使用红线来加快流程。
以下是我在工作流程中使用的颜色、字体和支持工具：
- 颜色：我将颜色
#ff00ff用于指定浅色 UI 和#00ffff深色 UI，因为这两种颜色都非常生动和中性，很少用于我的任何设计中。我的脑海中已经记住了这些值，但您当然可以为它们中的每一个创建颜色样式。 - 字体：我根据指定元素的层次结构使用
Roboto Mono相当小的尺寸12px, 14px, 16px。 - 支持插件：我有时会使用一个名为Redlines的插件来帮助加快我的流程，因为它可以自动计算设计中不同元素之间的距离，并且还有一些我喜欢的其他很酷的功能。
你如何指定你的设计？
现在进入本文最有趣和最有趣的部分！
下面我们将通过几个不同的设计规范示例来解释何时以及为什么应该执行这些类型的规范。
1：描述流程
流程的每个屏幕下方都有清晰的描述，解释了该屏幕上的逻辑和交互。在许多情况下，它可能只是对该屏幕上发生的事情的一行解释，而在其他一些情况下，它可能会很长。
这完全取决于该屏幕的复杂程度，以及它是全新的逻辑还是只是对现有屏幕的更新。
2：响应式布局断点
这通常用于根据浏览器窗口的宽度在响应式布局中显示断点。这也可以应用于基于浏览器窗口高度的垂直响应布局断点。
3：粘性元素
滚动时会在屏幕上的固定位置保持粘性的元素。
在下面的示例中，您正在查看一个页面中间滚动，其中该页面的标题在顶部是粘性的。
同样的东西可以用来指定固定在屏幕上其他位置的元素，比如页面右下角的粘性横幅，通常用于应用内聊天。
4：相对大小
具有相对大小（宽度/高度）的元素需要指定该元素的最大和最小宽度。
在下面的示例中，您可以看到中间容器规格为 100% 宽度，最小宽度为 240 像素，最大宽度为 640 像素，这意味着该元素将根据屏幕尺寸而变化保持宽度在 240px-640px 之间。
这也可用于指定按钮和其他流畅的 UI 元素，例如按钮。
5：按钮和表单元素
这可能是一个有争议的话题，但我坚信你不应该为按钮的高度和宽度指定一个固定值，除非你真的需要。
相反，您应该始终让文本周围的填充决定按钮的大小。这样，无论您的字体大小、字体系列，甚至该按钮中的文本语言如何，都可以保证您的按钮始终正常工作。
另一方面，如果您为按钮指定了固定高度，然后决定增加字体大小，则按钮可能会损坏，因为文本周围的填充会缩小。
为了确保按钮具有响应性，但同时适合我们的 UI，我们可以为其定义最小和最大宽度。
至于按钮的高度，不是给它指定一个最大高度，如果它超过按钮的宽度，我们可以截断文本，当然我们可以决定我们想要允许多少行文本在我们截断之前。如果你很好奇这里有一篇很好的文章解释了它是如何在 CSS 中完成的。
6：元素状态
这是为了确保您设计中的元素具有所有正确的状态，例如悬停、活动、焦点等。这对于设计的可访问性和可用性很重要。
我还建议为每个状态包含正确的光标，以确保它在实现过程中应用于每个状态。
当您指定单选按钮或复选框元素时，请确保包含该元素的选中状态的规范。
最后，为了让 UI 感觉更流畅一些，您可以随时为不同状态之间的转换添加规范。我通常添加持续时间为 0.15 秒的缓动过渡0.15s ease-in-out（CSS 代码片段，但同样的事情可以应用于其他编程语言，如 Swift/Java）。
7：截断多行文本
通常，如果文本超过特定高度或特定行数，您会通过显示省略号来指定文本的截断规则 –...
或者，您可能希望淡出文本。当您指定它时，您必须确保对设计中可能不是很明显的部分进行注释，这也将有助于工程师了解您认为这将如何实现。
在下面的示例中，我突出显示了文本的下部，以表明其顶部将有一个渐变层以创建淡入淡出效果。
8：动画和过渡
在许多情况下，您需要指定一个动画组件/UI 元素，一个常见的例子是模态。
在下面的示例中，您将看到从屏幕顶部显示的模式的规格，它从屏幕边界外开始，不透明度为 0%。
当然，您需要指定模态的结束位置以及您希望它如何转换。
在指定动画组件时，您需要指定该组件的开始和结束位置，在某些情况下还需要指定中间状态。
在下面的示例中，我使用动画规范（缓动和持续时间）显示了模态的结束位置。我还添加了模态的 max-height 以帮助确保它始终在屏幕上完全可见。
正如你在上面的例子中看到的，我使用ease-in-out了动画计时功能，这基本上意味着元素将开始缓慢过渡，然后变得更快，最后在它停止之前减速。
或者，您可以通过检查浏览器中的网页来指定更复杂的动画曲线，该网页上有一个设置了过渡的元素。我通常在Codepen.io上创建一个带有基本过渡的快速原型，然后我开始根据自己的喜好调整动画曲线（动画计时函数）值。
PS 或者，如果您没有任何 CSS 经验，您可以在 Principle App 中获取动画曲线值。
9：添加代码片段
您始终可以使用一些代码片段来支持您的规范，以帮助您的工程师了解您认为该功能将如何实现。这并不一定意味着工程师会使用您的代码片段，但它会向他们表明您已经花了一些时间考虑实现并且为此准备了解决方案，并且在许多其他情况下工程师会实际使用您的代码片段。
我与我的工程团队分享的一个有用的 CSS 代码片段示例，他们认为非常有用的是向元素添加多个边框的 box-shadow 技巧。
另一个例子是position: sticky使元素在滚动时具有粘性，并flex: 1允许元素扩展以填充其 flex 容器中的空间。
10：滚动条
在某些情况下，您需要在容器内有一个滚动条。
在实现过程中通常会忽略滚动条的样式，因此，始终值得在规范中对其进行调用。
我通常还包含一个直接链接到一篇很棒的CSS Tricks 文章，其中包含自定义滚动条的技巧（提示：链接可以在 Figma 中点击！）。
现实生活中的例子
以下是我最近创建的几个项目的 3 个规范示例。
1：反应栏
2：动画
3：复杂模态
结束的想法
这是我在个人设计技术博客中的第一篇文章的结尾。我希望你喜欢这篇文章，并发现这些信息是有帮助的和有用的。
我很想听听你对这个话题的想法和反馈，让我们在 Twitter @mahdif上联系并讨论它。
来源：mahdif，mahdi farra
