本篇译文来自GE（通用电气）的用户体验团队，介绍如何基于原子设计理论打造他们新的设计体系，帮助我们了解如何实际应用原子设计理论。

---

我们在GE的第一个设计体系创建于2012年，类似于今天在网上找到的许多设计体系。设计目的是吸引和支持GE内部的广大受众，它包含大量按功能分组的常见设计模式(我将使用这个术语来涵盖UI组件和交互模式)。这样做是为了推动一个由10名设计师组成的团队采用共同设计标准，从而试图让全球大约4万名软件开发人员做出外观一致的软件。

最初的体系在内部很成功，但存在一些成长的烦恼。它在按钮和文本框上表现良好，但不能始终如一地满足我们对复杂模式(如地图和数据可视化)的需求。经常需要修改和扩展每个应用的设计模式，这与设计体系的目的背道而驰，导致界面风格不一致，浪费设计师精力。此外，一个简单地提供“界面套件”的设计体系也留下很多可供解释的空间。这导致一些问题，同时增加额外设计指导。即使开发与设计师的比例不是4000比1，也很难管理，急需一种可持续发展的方法。

有了这些经验教训，我们希望GE的下一代设计体系可以着重于学习和分享。设计体系不应该仅仅是一些UI组件和设计理论的简单集合。它应该展示设计模式是如何在实际产品中应用，并记录其他团队是如何将设计模式扩展到具体的案例中。该设计体系的目标是使产品团队能够集中精力解决客户的新需求，并与公司其他团队共享解决方案。

从原子设计理论入手

由Brad Frost开创的原子设计方法是将设计模式进行合理组织并划分层级的方法。在基础层面(原子层)，包含简单的设计模式，如按钮、文本框或标签。将按钮、文本框和标签组合成“邮件提交表单”的复杂模式位于层级结构的下一层(分子层)。层级结构中的每一个上层模式都由更简单的下层模式构成。这种方法有两个好处：首先，当记录设计模式如“邮件提交表单”时，设计师不必重复按钮或文本框。其次，“邮件提交表单”提供了如何有效使用按钮、文本框和标签的实际案例。原子设计使学习设计体系中的模式如何工作变得更容易，同时使用设计体系创建内容也变得更容易。

GE的原子设计

GE的新Predix工业互联网平台是第一个使用这种结构的，因此被称为“Predix设计体系”，但它不是仅仅为这一个产品而设计，GE Healthcare也在使用相同的结构来组织他们整个产品目录的下一个设计体系。我们从Brad Frost定义的原子设计理论的层级划分思想出发，而不是直接把Brad在原子设计方面做的伟大工作仅改个名字就变成GE的东西。我们的目标是保持它的完整性，并利用互联网上所有优秀的文档和视频，使我们的团队了解是什么让这个方法如此有效。

然而，当我们为内部解释原子设计时遇到了两个问题：分类问题和扩展性问题。

下面的说明不是来自于我们的设计者的直觉，而是来自于创建企业级设计体系的实际工作和许多轮迭代的结果。

原子设计分类的问题

当我们向同事展示使用原子设计分类方法的初始设计体系概念时，看到很多困惑的表情。大家不明白为什么一个关于软件设计的网站要使用高中化学中用到的词汇。这个比喻并不受用户的喜欢，也没有增加参与度。分类成为一个沟通障碍且必须要解释，显然，为了在组织内取得成功，我们必须使分类方法更易于理解。

最终，打破原子设计准则对我们来说是一个积极的举动。当然，我们失去所有优秀的培训材料，但它确实让我们重新定位层级结构，以适应我们将来跨越多个产品的庞大设计体系的需求。

扩展原子设计概念

颠倒的层级结构

Brad Frost从原子层面开始介绍原子设计，藉此他描述原子如何结合而产生分子。他以最抽象的层级开始，以最具体的层级（完整设计的网页）结束。Pattern Lab是一个基于原子设计体系的网站生成器，也遵循这个演示顺序。以这种方式呈现原子设计，对于讲解如何建立层级结构有效，但却不是实际参与设计体系的最佳方式。

我们对新设计体系的一个重要要求是成为学习资源。我们希望设计师在访问设计体系网站时不仅可以了解哪些模式是可用的，还要弄清楚如何以适当且有意义的方式应用这些模式。要做到这一点，设计师需要上下文——关于解决问题的上下文，即用户试图完成什么任务，现有的模式如何帮助他们来完成。这种上下文只存在于原子设计的最具体的层级中，以完整的页面和应用被记录下来。正是在这些层面上，我们应该指导设计师去学习如何应用设计体系。

扩展分类方法

除了颠倒的层级结构之外，我们还添加两个具有实用价值的抽象层级：应用层和原则层。应用层提供了一个空间来记录整个产品和业务信息，以提供关于应用中页面如何和为何组织的上下文；原则层被添加到原子层下面，作为我们通用交互模式的知识库，包括如何和为何使用动画，截断文本的正确方式等。这些是设计师在创建新模式时应该注意和遵循的基本模式，但是不涉及任何代码。后面将会更详细地讨论应用层和原则层。

新设计体系的结构

GE’的Predix设计体系结构与原子设计对比

应用层

应用层是设计体系的入口。它是我们记录使用设计体系构建的各种应用或产品的地方。应用层可以被认为是深入到设计体系层级结构中的实际案例研究。每个应用层项目都包含必要的上下文，以了解应用可以做什么、为了解决什么问题、如何满足客户需求及其唯一的功能层组织构成。

功能层

功能层是允许用户完成一项任务或解决一个问题的界面组合。作为为用户和客户提供价值的功能集合，功能层不一定要很吸引人。用户帐户和权限管理的功能永远不会成为焦点，但对于许多企业应用的成功非常重要。它还应该在公司提供的各种应用产品之间保持一致和可重用。

在某些方面，功能层似于原子设计中的“页面层”。事实上，从页面到功能的转换是我们进行的一项更改。这一改变背后的原因是，在企业级软件中，单个界面很少能完成一个用户故事。专注于一个“功能”而不是单一“页面”，可以让我们提供更多关于应用上下文，如用户是如何以及为何从一个屏幕导航到另一个屏幕来完成任务的。

模板层

对于设计师或开发人员来说，模板并不是一个陌生的概念。它们用来记录部分或整个界面的布局和结构。在原子设计中，模板用于整个页面的布局。在我们的系统中，稍微扩展了这一角色，以抵消对原子设计中“有机体层”的需要。

违反“有机体层”的案例

取消“有机体层”是我们与传统原子设计的最大背离，但我们发现这样更容易创建原子设计引入的层级结构。

我们发现模板、有机体和分子之间的描述对设计体系的使用者来说是一种负担。对于我们的设计师和开发人员来说，存储设计体系的常见用户界面模式层级常常是一个叫法的问题。简单的项目，如按钮和文本框可以很容易地确定为原子，但更复杂的项目，如“时间轴”的划分会模糊一些，需要更多的思考。

的确，要确定一个图案是原子或分子，需要对设计体系的内容非常熟悉。而删除“有机体层”并将其内容分配到相邻的两个层级，会让使用变得更友好一些。更多地处理布局(页眉、页脚)的设计模式被划分到模板层，而交付更复杂交互(数据可视化)的模式仍然停留在分子级别，即使它们本身可能包含分子。

组件层

组件层在原子设计中称为分子层，它包比较复杂用户界面模式。搜索、数据表格和范围选择器这些设计模式可以在组件层中找到。选择“组件（component）”这个名称，因为它是在大多数设计体系中的典型术语。我们预计组件将是设计师和开发人员在层级结构中使用最频繁的级别之一，因此希望选择一个熟悉的术语。

基础层

基础层，即原子设计中的原子层，包含简单的设计模式。具有标准html标记的用户界面控件是最明显的基础层形式。按钮、复选框和链接都是属于这一层的设计模式。借用原子设计的理论，基础层是用户界面的最小结构，它们不能再被分解。基本层与原子设计中的原子层几乎相同，除了那些记录更多理论结构的设计模式，我们决定排除它们并放在称为原则层的较低级别。

原则层

原则层，顾名思义，是设计师在创造新的设计模式时应该参考和尊重的指导原则。原则层是设计体系的基础，具有可预测的逻辑。原则层的例子包括在分页上正确使用无限滚动，或者文本超长该如何截取等。这些原则提供了哲学的连续性，并不提供任何实际的代码。

实际应用情况

Predix设计体系的内部发布包括Predix平台设计团队创建和记录的设计模式，以及在Predix上构建产品的团队贡献的设计模式。来自多个团队的贡献使我们能够用内容填充设计体系的整个层级结构。平台团队作为设计体系的管理者，提供了包括原则、基础、组件和模板等大部分基础的设计模式。另一方面，产品团队从设计体系的应用层面提供设计模式。

包含多个产品团队创建的设计模式不仅有助于填充设计体系层级结构，同时还演示我们如何实现共享和重用的目标。团队现在正在利用已经在其他产品中使用的设计模式，并且渴望向社区的其他成员分享和展示他们的设计。基于发布后几个月的反应，GE内部的Predix社区渴望学习和分享新的设计模式。

创建和维护一个设计体系是一项重要的工作。Brad Frost的原子设计方法是一个坚实的基础，我们坚定地致力于设计体系层级结构的价值。我们希望分享对原子设计方法的修改，让公众的讨论继续下去，并为设计生态提供价值。在内部，我们正在为Predix和其他GE设计团队建立设计体系资源，并每周召开一次会议来分享工作、获得反馈和发展设计体系。我们将在今年晚些时候分享更多学到的东西。

译者注：从本文可以看出，原子设计的最大价值是对设计体系的层级结构划分，在实际应用中，不必生搬硬套它那些“原子、分子、有机体”的化学词汇，而是学习它是如何将设计模式进行层层嵌套，形成有用的层级。