Design specifications (specs) are guidelines that developers will use to implement a design. Think of an architect providing building blueprints to the construction team. Many designers think of specs as mindless zombie work. They may even recruit a spec monkey (or more junior designer) to do it for them so that they can get on with the ‘real’ design stuff.

设计规范(规格)是开发人员用来实施设计的指南。 想想一个为建筑团队提供建筑蓝图的建筑师。 许多设计师认为规范是无意识的僵尸作品。 他们甚至可以招募专门的猴子(或更多的初级设计师)来为他们做，以便他们可以继续“真正的”设计工作。

However, taking time and care to produce great specs can be fundamental to the success of your project.

但是，花一些时间和精力来制作出色的规格可能会 基本的 确保您的项目成功。

为什么好的规格很重要？ (Why are good specs important?)

Designs are implemented correctly ✅ 🤩If you fail to communicate your design properly, what gets built could have crucial differences from what you intended. A great design poorly communicated can easily turn into a clunky and frustrating user experience.

正确实施设计✅🤩如果您无法正确传达设计，则构建的内容可能与您的预期有重大差异。 沟通不畅的出色设计很容易变成笨拙而令人沮丧的用户体验。

Helps you to spot holes in your design 🔍 😬Going over your designs with a fine-toothed comb will inevitably help you spot errors and edge cases you would otherwise have missed.

帮助您发现设计中的Kong🔍with用细齿梳子梳理您的设计将不可避免地帮助您发现本来会错过的错误和边缘情况。

Saves time for everyone ⏰ 🥳With good specs the development team have fewer unknowns, fewer bugs and fewer questions, because your specs will answer the questions for you.

节省每个人的时间🥳🥳凭借良好的规范，开发团队的未知数，错误和问题更少，因为您的规范将为您解答问题。

Overall, great specs mean designs can be implemented quicker and to a higher quality. This is better for the team, the business and, ultimately, the users!

总体而言，出色的规格意味着设计可以更快，更高质量地实施。 这对于团队，企业乃至最终用户来说都是更好的选择！

创建规格就是设计 (Creating specs is design)

A good way to create better specs is to approach it like any other design task.

创建更好规格的一个好方法是像处理其他任何设计任务一样进行处理。

When we design, we research our users. We uncover their goals, their pain points and their workflows.

在设计时，我们会研究用户。 我们揭示了他们的目标，痛点和工作流程。

Our approach to specs should be no different — we are creating a product for a user so should design it to best suit their needs.

我们的规范方法应该没有什么不同-我们正在为用户创建产品，因此应该设计出最适合他们需求的产品。

Talk to your developers — find out what their process looks like, what frameworks they are using, what can make their lives easier and what can drive them crazy.!

与您的开发人员交谈-了解他们的过程是什么样的，正在使用的框架，哪些可以使他们的生活变得更轻松以及哪些会使他们发疯。

When you begin to understand your team’s mindset and workflows, you can start to align your specs to them.

当您开始了解团队的思维方式和工作流程时，就可以开始根据其规范进行调整了。

从样式指南开始 (Start with a style guide)

Style guides document the colours, text styles and other basic elements in your design. This is useful not just for ensuring consistency in your designs, but also for speeding up development and future spec work.

样式指南记录了设计中的颜色，文本样式和其他基本元素。 这不仅对确保设计的一致性很有用，而且对加快开发和将来的规范工作也很有用。

Now, instead of having to write out the styles for every element, you can just reference them in your style guide.

现在，您不必为每个元素写出样式，只需在样式指南中引用它们即可。

组件库 (Component libraries)

As your design progresses you can expand your style guide to include more complex UI components. Here you could include things like buttons, form elements and modals. Anything you find yourself reusing multiple times in your design should be defined here and referenced externally.

随着设计的进行，您可以扩展样式指南以包括更复杂的UI组件。 在这里，您可以包括按钮，表单元素和模态之类的东西。 您发现自己在设计中多次重复使用的任何内容都应在此处定义并在外部引用。

Now, instead of having to specify the styles and behaviour of a component every time, you can do it once and refer back to it.

现在，您不必一次指定组件的样式和行为，而是只需执行一次并返回引用即可。

为什么这些有用？ (Why are these useful?)

The advantages of style guides and component libraries for the design workflow have been heavily documented. But did you know they are also a dream come true for developers?

样式指南和组件库在设计工作流程中的优势已得到大量记录。 但是您是否知道对于开发人员来说，这也是梦想成真？

A basic principle of good development is D.R.Y — Don’t Repeat Yourself. It states that:

良好发展的基本原则是干-不要重复自己。 它指出：

every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

每条知识都必须在系统中具有单一，明确，权威的表示形式。

This means that instead of repeating code in several places, you should write it once and refer back to it. Sound familiar?

这意味着您不必在多个位置重复代码，而应编写一次并返回参考。 听起来有点熟？

This is exactly the mindset we are using when creating style guides and component libraries. By mirroring this workflow in your specs, you make it much more efficient to translate designs into DRY code — and your developers will love you.

这正是我们在创建样式指南和组件库时所使用的心态。 通过在您的规范中反映此工作流程，可以使将设计转换为DRY代码的效率大大提高-开发人员会爱上您。

视觉规格 (Visual Specs)

Visual specs document all the styles and spacings on your designs, to ensure that your beautiful designs actually look good when they’re translated into code.

视觉规格记录了设计中的所有样式和间距，以确保将漂亮的设计转换为代码后实际上看起来不错。

手动与自动规格 (Manual vs. Automated Specs)

Recently, a whole range of tools have been introduced promising to fully automate visual specs.

最近，引入了一系列工具，有望完全自动化视觉规格。

Tools like Zeplin, Invision Inspect, Google Gallery and many more allow you to upload your design files and share them with developers, who can inspect and extract the styles of every element.

Zeplin，Invision Inspect，Google Gallery等工具可让您上载设计文件并与开发人员共享，开发人员可以检查和提取每个元素的样式。

Just like other forms of automation, there are pros and cons to this method. Although they are a great way to save time, they only capture a static version of a screen. It’s likely that you will still need to do some kind of annotation to communicate interactive states and responsive behaviours.

就像其他形式的自动化一样，此方法也有其优缺点。 尽管它们是节省时间的好方法，但它们只能捕获屏幕的静态版本。 您可能仍需要做某种注释来传达交互状态和响应行为。

That’s why my preferred method of creating visual specs is a hybrid approach — use the automated tools as a back up to communicate simple styles, but add your own annotations to demonstrate behaviours and point out the more important visual elements.

这就是为什么我首选的创建视觉规格的方法是混合方法的原因-使用自动化工具作为备份来传达简单的样式，但是添加自己的注释来演示行为并指出更重要的视觉元素。

Find out more about the pros and cons of automated specs here:

在此处了解有关自动规范的优缺点的更多信息：

视觉规格：重要提示 (Visual Specs: Top Tips)

简化，简化，简化 (Simplify, simplify, simplify)

When creating your visual specs, don’t try to display all information about a screen in one go. Chances are it will be completely overwhelming and difficult to read.

创建视觉规格时，请勿尝试一次性显示有关屏幕的所有信息。 很有可能会完全压倒性且难以阅读。

As designers, we’d never subject our users to a screen of cluttered, unorganised information, so why do we do it to developers?

作为设计师，我们永远不会让用户看到混乱，杂乱无章的信息，那么为什么我们要对开发人员呢？

Instead, break the spec down into sections.

而是将规范分为几部分。

For example, you could start by speccing the outer area of a screen:

例如，您可以先指定屏幕的外部区域：

And then move on to how the different components fit within that screen:

然后继续介绍不同组件在该屏幕中的放置方式：

And finally, the inner styles of the component.

最后是组件的内部样式。

If a component is particularly complex, break down the specs into several parts, for example:

如果组件特别复杂，则将规格分为几部分，例如：

This will make the spec more digestable and there are less likely to be errors in implementation.

这将使规范更易于理解，并且在实施中不会出现错误。

Always ask yourself, “is this clear and easy to read?” If not, you probably need to simplify!

总是问自己：“这清晰易读吗？” 如果没有，您可能需要简化！

行为规范 (Behavioural Specs)

Behavioural specs are where you define the rules around how your design actually works.

行为规范是您定义设计实际工作方式的规则。

Sometimes we assume that a simple image is enough to communicate behaviour, but that’s rarely the case. Developers are not mind readers, and we should never assume that a user’s thought process is going to match our own.

有时我们假设一个简单的图像就足以传达行为，但这种情况很少发生。 开发人员不是介意的读者，我们永远不应假定用户的思维过程将与我们的思维过程相匹配。

Clearly defining your behavioural rules is the best way to ensure that your design actually works like you want it to.

明确定义行为规则是确保您的设计按预期实际工作的最佳方法。

Here are some ways to make sure your behavioural specs are clear to the person reading them:

以下是确保您的行为规范对阅读它们的人清楚的一些方法：

设置上下文 (Set context)

Imagine picking up a book halfway through and trying to understand what’s going on. No one likes to be thrown into the details without understanding the wider context. It’s important to communicate the background and surrounding context of a design before getting too specific.

想象一下，半途拿起一本书，试图了解正在发生的事情。 如果不了解更广泛的背景，没有人喜欢将其投入细节。 在变得过于具体之前，交流设计的背景和周围环境非常重要。

Start your spec document with an overview of the feature. This could include user needs, site maps, user flows - anything that is useful in explaining the overall goal of this piece of work. You could also link to a walkthrough document or prototype if these resources exist.

从功能概述开始您的规格文档。 这可能包括用户需求，站点地图，用户流-有助于解释此工作总体目标的任何内容。 如果存在这些资源，也可以链接到演练文档或原型。

When developers understand the background to a design, they can make more informed decisions and recognise why certain choices were made.

当开发人员了解设计的背景时，他们可以做出更明智的决策，并了解为什么要做出某些选择。

显示和讲述 (Show & Tell)

Combine descriptions of behaviour with examples of how it will look. It can be very difficult to get an idea across with just pictures or just images, but together they can communicate almost anything.

将行为描述与行为外观示例结合起来。 仅通过图片或图像来传达想法可能是非常困难的，但它们可以一起传达几乎所有内容。

Use simple, concise language. Give examples of things that are hard to explain. Ask yourself if you’d understand the behaviour described if you weren’t the one who had designed it.

使用简单明了的语言。 举例说明一些难以解释的事情。 问问自己，如果您不是设计它的人，您是否会理解所描述的行为。

表格和图表 (Tables & diagrams)

You don’t need to stick with annotated hi-fidelity mockups to get your behaviours across. Sometimes using simple tables or diagrams can be a better way of communicating, especially if it involves complex logic or a lot of steps.

您无需坚持使用带注释的高保真模型即可了解自己的行为。 有时使用简单的表格或图表可能是更好的通信方式，尤其是在涉及复杂的逻辑或很多步骤的情况下。

Combining traditional diagrams with wireframe versions of your screens can help link the abstract concepts and flows to how the real thing will look.

将传统的图表与屏幕的线框版本结合起来可以帮助将抽象的概念和流程链接到真实外观。

组织 (Organisation)

So you’ve written your visual and behavioural specs. But if you just throw a gigantic document to your developers, there’s little chance they are going to read it or find what they’re looking for.

因此，您已经编写了视觉和行为规范。 但是，如果您只是向开发人员扔了一个巨大的文档，他们几乎没有机会阅读或找到他们想要的东西。

This circles back to understanding the context of use — how and why are people going to read this? What is the user’s workflow?

这回过头来了解使用的上下文-人们将如何以及为什么要阅读此内容？ 用户的工作流程是什么？

Most development teams will follow some form of agile process. They will usually break features down into individual stories, small enough for a single developer to tackle in a couple of days to two weeks.

大多数开发团队将遵循某种形式的敏捷过程。 他们通常会将功能分解为单个故事，对于单个开发人员来说，足够小，可以在几天到两周内解决。

Breaking your specs down in a similar way can help make sure that people only get the information they need, without all the extra stuff.

以类似的方式分解您的规格可以帮助确保人们仅获得所需的信息，而没有所有多余的东西。

Try to imagine what stories might be written in order to build this feature, and break your specs down to cover this. This might take some time to get used to how your particular team breaks down features.

尝试想象可能会写些什么故事来构建此功能，然后分解规格以涵盖此内容。 这可能需要一些时间来适应您的特定团队如何分解功能。

I organise my specs in Figma similar to the layout above. Each frame/artboard describes a story-sized slice of functionality. I can link to this frame straight from the corresponding story in Jira. It’s obvious what part of the spec relates to each story, and developers can also see the context surrounding that story in the other frames.

我在Figma中组织我的规格，类似于上面的布局。 每个框架/画板都描述了一个故事大小的功能。 我可以直接从Jira中的相应故事链接到此框架。 很明显，规范的哪一部分与每个故事有关，开发人员还可以在其他框架中看到围绕该故事的上下文。

迭代和改善 (Iterate and improve)

It can sometimes take several iterations to perfect a spec. This may seem like a waste of time, but we’d never dream of pushing out the first design that we come up with to our users.

有时可能需要几次迭代才能完善规格。 这似乎是在浪费时间，但是我们从来没有梦想向用户推出我们想到的第一个设计。

如何创建完美的规格？ (How to create the perfect spec?)

The key to good specs is the key to any good design: understanding and empathy.

好的规格的关键是任何好的设计的关键：理解和同理心。

Understand development workflows, principles and mindsets.

了解开发工作流程，原理和心态。

Empathise with your end user: would you understand this in their shoes? Would you want to read it?

同情您的最终用户：您会在他们的鞋子中明白吗？ 你想读吗？

进一步阅读 (Further reading)