原子设计和草图——改进工作流程的指南

Sketch 和 Atomic Design 是一组强大的工具和方法，设计师可以用来创建设计系统，实现标准化和更高效的工作流程。

设计系统：入门

设计系统是一组可重用的组件和指南，可帮助团队在产品的创建和生命周期中围绕共同语言团结起来。

在大多数情况下，设计系统由样式指南和组件库组成。 它们还可以包括声音和语气以及品牌价值等元素。 拥有设计系统的目的是创建一组标准，作为产品或品牌的单一事实来源。

Google 的 Material Design 是结构化 UI 设计系统的一个示例。 Material Design 早在 2014 年就被引入，作为设计和开发具有凝聚力的 Android 应用程序的一种方式。

另一个例子是 Mailchimp 的 Voice and Tone。 它描述了一个人的声音如何始终相同，但语气会根据上下文而变化。 意识到这一点有助于增强内容并赋予品牌个性。

虽然有许多不同的方法可用于创建设计系统，但选择一个允许团队围绕通用语言和一组标准统一的框架是一个好主意。 原子设计是实现这两个目标的框架的一个很好的例子。

原子设计：建筑设计系统

原子设计是 Brad Frost 在 2013 年引入的一种方法，其理念是每个设计系统都可以定义为一系列共存的构建块。

以下是原子设计组件的快速概述：

• 原子。 表示设计系统的基本构建块。 一个示例是按钮或文本样式。
• 分子。 一组原子作为一个单元一起工作。 分子是有形的 UI 元素。 例如，可以将按钮和文本字段分组以创建搜索表单。
• 有机体。 原子和分子在一个复杂的结构中协同工作。 与导航栏分组的搜索字段在网站上形成标题有机体。
• 模板。 将组件放置到定义内容结构的布局中的页面级对象。 例如，获取标题有机体并将其放置在主页模板上。
• 页。 代表最终产品的模板实例。

“我们的任务是为更多的用户在更多的环境中使用更多的浏览器在更多的设备上提供比以往更多的屏幕尺寸和更多功能的界面。 这确实是一项艰巨的任务。 值得庆幸的是，设计系统可以提供帮助。”——Brad Frost 作为原子设计和设计系统的介绍。

使用原子设计来创建和维护设计系统将帮助设计师更有效地工作，并在他们的团队中更好地沟通。 有大量的工具和方法可用于创建和维护设计系统，但通常最好的工具是我们最熟悉的工具。

如何在 Sketch 中使用原子设计

要使用 Atomic Design 开发设计系统，Sketch 是一个很棒的（并且已经很熟悉的）工具。 它为我们提供了创建原子、分子和有机体的画布：定义设计系统核心所需的元素。

创建原子

我们首先在 Sketch 中创建三种类型的原子：符号、图层样式和文本样式。

符号。 符号只不过是可重用的组件。 它们被定义一次，因为它们可以在整个产品中被实例化。 例如，可以使用边框颜色、大小等属性定义箭头符号（原子）。然后我们可以重用这个符号，而不必每次都重新创建它。

图层样式。 图层样式是可重用的视觉样式元素，在每个图层中保持一致。 例如，先前定义的箭头的填充颜色。

文本样式。 文本样式与图层样式类似，是可重复使用的元素，可确保相似文本对象之间的一致性。 例如，定义 h1 元素的字体大小和颜色。 它的工作方式类似于 Google Docs 或 Microsoft Word 中的文本样式。

当我们定义符号、图层样式和文本样式时，Sketch 可以在其符号和文本样式菜单中使用“/”（正斜杠）将它们划分为分层类别。 遵循命名约定并拥有一组明确定义的主类别将为文件提供有组织的结构，从而减少混乱和不一致。

以下是一些在 Sketch 中为符号、文本和图层样式创建分层类别的方法。

我们可以在Atoms/下使用以下建议的命名约定来表示符号：

• 资产
• 纽扣
• 输入控件
• 图片
• 导航
• 信息

我们不会将图层样式转换为符号，因此通过它们的语义组来识别它们就足够了。 同样，使用原子/：

• 填充
• 边框
• 阴影
• 渐变

与图层样式类似，下面是我们如何在Atoms / 下创建文本样式：

• 标题
• 身体
• 标题
• 标签
• 链接

统一的设计语言不应该只是一组静态规则和单个原子； 它应该是一个不断发展的生态系统。——Airbnb on Building a Visual Language。

创建分子

原子定义了产品设计指南的基本部分，但它们本身并不完全有用。 为了获得一些功能，我们将原子连接在一起并创建分子。

将标签（原子）与输入按钮（原子）连接以创建搜索功能是常用分子元素的一个很好的例子。

请注意，这里可能存在一些灰色区域。 代码级别的按钮被视为原子，但设计级别的按钮被视为分子，因为我们将图层样式和文本样式原子分组。 为避免任何混淆，最好只考虑代码级元素。

属于Molecules/的主要类别是：

• 信息
• 导航
• 输入控件

由于分子将以交互方式开始塑造我们的产品，因此进一步定义上述类别是一个好主意。 在这种情况下，我们将定义一组代表模式库的子类别：

• 下拉列表
• 切换
• 滑块
• 标签
• 分页
• 进度指标
• 日期字段
• 文本字段
• 复选框
• 单选按钮
• 模块

创造有机体

有机体是原子和分子的组。 它们也可以是其他生物的一部分。

与原子和分子不同，有机体在我们设计的产品中没有抽象的包含物。 它们是具体的、可重复使用的组件，可以通过特定操作轻松识别。 它们的结构比原子或分子更复杂。

如果先前定义的搜索字段与其他组件（如导航栏（分子）和徽标（原子））组合在一起，则会创建一个有机体。 一个示例是导航栏或日历。

有机体，如分子，可以归入相同的类别和子类别：

以下是我们将为 Organisms/ 创建的主要类别：

• 信息
• 导航
• 输入控件

与分子一样，我们还将为生物体创建子类别：

• 下拉列表
• 切换
• 滑块
• 标签
• 分页
• 进度指标
• 日期字段

到目前为止，大部分 UI 都已经设计好了，所以现在它就像在设计需要时调用我们的组件实例一样简单。

通过它们的语义组很容易找到这些组件中的每一个，或者通过使用 Sketch 工具栏中的插入面板直接搜索它们，我们将在其中找到一组组织良好的 3 个主要类别，或者使用类似的插件Sketch 的赛跑者。

Runner for Sketch通过提供一组他们可以使用的键盘命令来优化设计师的工作流程，而不是在无尽的菜单中查找内容。 例如，他们可以键入单词insert ，按Tab键并查找他们需要的组件。

通过输入atom ，下拉列表将向我们显示属于该类别的所有元素。 如果原子和分子具有共享类别，则只会看到原子而忽略所有分子。

把它包起来

Sketch 和 Atomic Design 是一组功能强大的工具，可以一起使用来改进设计工作流程并促进有效的设计系统框架。

使用原子、分子和有机体的概念作为组件基础，Atomic Design 帮助设计师在产品的创建和生命周期中围绕共同语言统一。

设计人员可以使用 Sketch 等工具来实施原子设计，从而提供更高效的工作流程和一组标准，设计团队中的每个人都接受这些标准，包括项目最后阶段的开发人员。

进一步阅读 Toptal 设计博客：

• 如何构建有效的设计框架
• 了解设计系统和模式
• 如何创建草图样式指南、库和 UI 工具包
• 为什么初创公司需要风格指南
• Zeplin Sketch 插件——设计和工程之间的工作流程桥梁