设计规格传达用户界面细节，如颜色、样式、测量和资产，并允许设计师和开发人员无需付出太多努力即可沟通和移交设计。良好的设计规范甚至可以加快整个设计开发工作流程，并帮助产品团队创造更好的产品。

但是，您真的知道哪些好的设计规格应该包括在一起吗？它们如何加快您的设计到开发工作流程？

本文将引导您浏览网站或移动项目设计规格的所有基础知识，并回答设计规格是什么、为什么和何时应该使用它们，以及如何创建设计规格。

什么是网站或移动应用程序设计规格？

当涉及到网站或移动应用程序产品设计时，设计规格（也称为设计规范）提供有关网站或移动项目的所有可能的设计细节。

这些规范文档的工作就像设计蓝图一样，允许开发人员提取所有必要的值、组件、颜色、测量结果，并获取所需的设计资产和用户体验流。

在大多数组织中，设计规范由设计师创建，并随原型和其他设计资源一起移交给开发人员。

让我们首先检查一个设计规格示例：

设计规范文件应包括哪些内容？

有效的设计规范文件通常附带以下信息：

• 用户界面详细信息。在开始编码用户界面之前，开发人员总是需要了解界面的每一个细节，如颜色、字体、测量等。设计规范文档涵盖了所有此类详细信息。

• 设计资产。除了界面详细信息，产品开发人员还需要无法编码的设计资产，包括界面图像、图标和其他资源。为了简化开发过程，设计规格还应包括所有设计资产。

• 用户体验流式流动。有效的设计规范文档还应提供设计信息，如用户体验流、用户行为和界面功能。开发人员可以更好地了解内部逻辑，并创造出真正令人印象深刻的产品与优秀的UX。

• 其他设计资源。您可以添加任何其他设计资源，帮助开发人员更好地了解产品，避免与设计师进行来回沟通。例如，尝试将链接添加到原型预览、用户流程图或任何其他有用的资源。

是什么造就了一份好的规范文件？

精心制作和有效的设计规范文件应该是：

• 清晰而完整。网站或移动应用设计包含数百个值、测量和其他设计资源，如主题颜色值、间距值、不透明值、角无线电值、网格、图标。设计规范文档应允许开发人员尽快找到所有所需的数据和详细信息。每个超小细节都应包含在规范中。

• 易于阅读和扫描。为了节省时间和精力，设计人员有时会直接在界面上添加加价，以指定不同的原始值。但是，这种方法对开发人员来说可能是一场灾难，因为所有这些值和信息通常都分散或挤在一片混乱中，使得他们很难阅读、扫描和查找所需的属性。因此，在编写设计规范文档时，您应该注意可读性和可访问性。

• 易于共享。作为重要的交接文件之一，良好的设计规范文档应易于共享和阅读。Word、PDF 或 TXT 格式文件非常适合在团队或组织中共享所有设计规格详细信息。

• 一致。确保所有设计规范文档都以相同的视觉语言（如相同的调色板、字体、文本样式）编写，并提前删除所有可能的差异。

• 保持最新状态。良好的设计规范文档也应便于设计师随时更新。

• 创建规范的实时版本。现场设计规格是设计规格的优秀格式。如今，有许多强大的设计工具，如 Mockplus，它允许用户创建在线设计规范文档，并使用简单的链接与整个团队共享。

为什么需要设计规格？

分享设计细节

手动准备设计规范文档可能需要数小时、数天甚至数周的时间。但是，一旦创建完，设计师就更容易与团队中的开发人员共享所有可能的设计值、元素和其他详细信息。每次想要共享新设计时，都无需与开发人员举行会议。

简化设计沟通和协作

设计规范文档与所有可能的设计细节和数据保持设计师和开发人员在同一页上，使他们能够讨论每一个微小的细节，想法或反馈，并更好地了解对方。不再有误解和沟通不畅。

进设计师到开发人员的交接流程

当涉及到设计交接过程时，有了详细的设计规范文档，设计师可以轻松地将所有相关的移交文件（如设计规格、资产、用户流量和原型）打包到 zip 文件中，并通过 Slack 或任何其他通信渠道将其交给开发人员。无需召开正式会议来讨论细节。

节省大量时间和金钱

如果没有无数次同步会议，设计师和开发人员都可以腾出更多的时间去做更重要的事情——实际的设计和开发。良好的设计规范可帮助您节省大量时间，提高团队的工作效率。产品设计和开发的总成本也可以极低。

何时使用设计规格？

通常，产品构建过程包括以下几个阶段：

• 用户研究

• 头脑 风暴

• 映射并重复设计草稿

• 创建产品原型

• 编码

• 测试

• 产品发布

设计规格是在您完成设计原型阶段后立即创建的。在许多情况下，设计师在获得设计草稿的最终版本后开始准备设计规范，因为这种方法可以帮助他们避免任何浪费。

如何创建设计规格？

一般来说，设计师有两种方法来准备设计规范：

1） 手动将设计规格组合成文档

如果设计人员无法访问自动设计工具，他们可以手动创建设计规格，并将所有设计值、测量和其他信息组合到文档中。文档、文档、PNG 或 PDF 文件将是呈现所有设计详细信息的完美解决方案。

2） 使用模拟+在线创建和共享设计规格

时间和精力是手动设计规格的主要缺点。手动规格非常耗时，需要设计人员在创建新设计版本时经常修改和更新文档。

为了避免额外的工作，产品团队可以使用一些方便的设计工具，如Mockplus，这可以帮助产品团队自动创建实时设计规格。

事实上，作为一个一站式的在线产品设计平台，Mockplus 将您的整个设计工作流程连接起来，并允许您原型创意、评论和协作设计、创建和共享相同的设计系统，并将所有设计资源交给开发人员。都在一个地方它还帮助产品团队改进设计交接过程与汽车和手动规格。

设计师和开发人员都可以从使用模拟加号中获益。

对于设计师，他们可以：

• 在线创建和共享自动生成的设计规格

在 Mockplus 中，一旦设计师从素描、Adobe XD 和 Photoshop 导入设计，界面设计规格将自动生成。使用简单的 URL 向开发人员共享设计规格后，开发人员只需点击几下即可即时查看所有设计值。

• 添加手动设计规格以供进一步解释

如果设计师需要进一步解释想法或设计细节，他们还可以直接在设计屏幕中添加手动规格并丰富其设计规格。还可以添加超链接，使一切变得清晰。

• 使用拖放创建用户流程图

有了莫克加，用户流程图图就变得轻而易举。导入所有设计页面后，设计人员可以轻松地拖放逻辑线条以连接不同的页面。页面跳跃关系已经足够清晰了。

• 使用简单的链接共享和移交最新的设计规格

Mockplus 还通过让设计师轻松地将设计规格发送给具有简单链接的开发人员来加快设计交接流程。一旦更改了设计版本，相关设计规格也将同时同步。

设计人员还可以在共享保护数据的链接之前分配不同的角色和权限。

对于开发人员，他们可以：

• 只需点击一下，检查超小的设计细节

开发人员可以轻松地使用简单的链接加入设计工作流程，并单击任何界面位置以检查相关层、样式和资产数据。单击或悬停在元素上还允许他们查看不同元素之间的间距。

• 查看和下载资产

资产会随着设计自动导入。开发人员可以轻松单击资产布局并在正确的面板上查看数据。只需单击一下，他们只需下载所需的任何资产。

如果他们在响应迅速的网站或移动项目上工作，他们可以下载专为所有设备和平台（如网站、iOS 和 Android 设备）量身定制的资产。

• 预览原型以更好地了解产品

开发人员可以单击一个简单的预览链接来预览和测试产品原型，从而更容易理解产品的工作原理。无需询问有关详细信息的问题

•  

良好的设计规格使设计师和开发人员的生活更轻松，并使他们能够顺利地协作，创造更好的产品。

我们希望本指南可以帮助您更好地了解设计规格的概念，并帮助您为您的新项目创建设计规格。

作者：Snow Hu