草图和原子设计是一组功能强大的工具和方法，设计师可以使用它们来创建允许标准化和更高效工作流的设计系统.

设计系统:入门

A 设计系统 是一组可重用的组件和指导方针，帮助团队在产品的创建和生命周期中围绕一种公共语言团结起来吗.

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

谷歌的 材料设计 是结构化UI设计系统的一个例子. 材料设计早在2014年就被引入，作为设计和开发内聚Android应用的一种方式.

另一个原子设计的例子是Mailchimp 声音和语气. 它描述的是一个人的声音总是一样的，但音调会随着语境的变化而变化. 意识到这一点有助于赋予内容力量，赋予品牌个性.

虽然有许多不同的方法可以用来创建一个设计系统, 选择一个允许团队围绕公共语言和标准集进行统一的框架是一个好主意. 原子设计是实现这两个目标的框架的一个很好的例子.

原子设计:建筑设计系统

原子设计方法是由 布拉德·弗罗斯特 in 2013. 它基于这样一种理念，即每个设计系统都可以被定义为一系列共存的构建模块.

下面是原子设计系统组件的快速概述:

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

“我们的任务是为更多的用户在更多的环境中使用更多的浏览器，在更多的设备上使用更多的屏幕尺寸和功能. 这确实是一项艰巨的任务. 值得庆幸的是，设计系统可以提供帮助.——布拉德·弗罗斯特在《 原子设计 和 设计系统.

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

如何在草图中使用原子设计

要开发原子设计系统，一个很好的(并且已经很熟悉的)工具是草图. 它为我们创造原子提供了画布, 分子, 有机体:定义设计系统核心所需的元素.

创建原子

我们首先在草图中创建三种类型的原子:符号，图层样式和文本样式.

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

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

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

当我们定义符号时, 图层样式, 还有文本样式, 草图可以在其符号和文本样式菜单中使用“/”(正斜杠)将它们划分为层次类别。. 遵循命名约定并拥有一组定义良好的主类别将使文件具有有组织的结构, 减少混乱和不一致.

下面是在草图中为符号、文本和图层样式创建层次分类的一些方法.

我们可以使用下面建议的命名约定来表示符号 原子/:

• 资产
• 按钮
• 输入控件
• 图片
• 导航
• 信息

我们不会将图层样式转换为符号，因此通过语义组识别它们就足够了. 再次使用 原子/:

• 填满
• 边界
• 阴影
• 梯度

与图层样式类似，下面是我们如何创建文本样式 原子/:

• 标题
• Body
• Caption
• 标签
• 链接

A unified design language shouldn’t be just a set of static rules 和 individual 原子; it should be an evolving ecosystem.airbnb上 构建视觉语言.

创建分子

原子定义了产品设计准则的基本部分, 但它们本身并不完全有用. 为了获得一些功能，我们把原子连接在一起，创造出分子.

将标签(原子)与输入按钮(原子)连接起来创建搜索函数是常用分子元素的一个很好的例子.

提醒一句，这里可能有一点灰色地带. 一颗钮扣，一颗 代码级别原子被认为是原子，但它是一个按钮 设计水平 被认为是一个分子，因为我们正在分组图层样式和文本样式原子. 为了避免混淆，最好只考虑代码级元素.

主要的分类是 分子/ 是:

• 信息
• 导航
• 输入控件

因为分子将开始以一种互动的方式塑造我们的产品, 进一步定义上述类别是个好主意. 在这种情况下，我们将定义一组代表模式库的子类别:

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

创建生物

生物体是一群原子和分子. 它们也可以是其他生物体的一部分.

不像原子和分子, 生物 do not have an abstract inclusion in the products we are designing; they are concrete, 可以通过特定操作轻松识别的可重用组件. 它们的结构比原子或分子还要复杂.

如果先前定义的搜索字段与其他组件分组, 比如导航条(分子), 和一个标志(原子), 一个有机体被创造出来. 导航栏或日历就是一个例子.

有机体和分子一样，可以归入相同的类别和子类别:

以下是我们将为有机体创建的主要类别:

• 信息
• 导航
• 输入控件

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

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

到目前为止, 大部分用户界面已经设计好了, 所以现在只要在设计需要组件的实例时调用它们就很简单了.

通过语义组很容易找到每个组件, 或者直接使用草图工具栏中的插入面板搜索它们, 我们在哪里可以找到一套组织良好的3个主要类别, or, 通过使用插件像 速写选手.

速写选手 通过提供一组键盘命令来优化设计师的工作流程，而不是在没完没了的菜单中寻找东西. 例如，他们可以输入单词 插入，点击 选项卡 键入并查找他们需要的组件.

通过输入 原子，下拉列表将显示属于该类别的所有元素. 如果这些设计系统的原子和分子有共同的范畴, 只有原子会被看到，所有的分子都会被忽略.

总结一下

草图和原子设计是一组强大的工具，可以一起使用，以改善设计工作流程和促进有效的设计系统框架.

使用 原子, 分子, 生物 作为一个组件基础, 原子设计帮助设计师在产品的创造和生命周期中统一一种共同的语言.

设计人员可以使用诸如草图之类的工具来实现原子设计 更高效的工作流程 以及一套设计团队中每个人都接受的标准，包括 开发人员 在项目的最后阶段.