原子设计_Web设计师的原子设计简介

模块化 ， 可重用性和可伸缩性不仅是编码概念，而且您还可以利用它们来创建优化程度更高的设计系统 。 原子设计是一种使用化学类比法从下至上构建有效UI的新方法。

原子设计不是设计网页集合，而是从称为原子 （按钮，菜单项等）的最简单的UI组件开始，并通过四个更多的阶段来构建整个UI： 分子 ， 生物 ， 模板和页面 。

这本书

该方法是由设计师Brad Frost创建的，旨在“设计成功的UI设计系统” 。 原子设计作为一本书发行 ，您可以免费在线阅读 ，也可以订购平装本（$ 20.00）或电子书（$ 10.00） 。

原子设计从全新的角度处理用户界面设计，希望可以稍微改变一下Web设计领域 。 本文旨在对这种方法进行介绍，但是本书对这种解释进行了更深入的介绍，因此，如果可以的话，请读它，这是值得的。

原子设计层次

原子设计基本上是一种心理模型 ，可使设计人员将网页视为可重用组件的层次结构 。 原子设计的层次结构分为五个阶段 ; 每个阶段都由上一阶段的一组组件组成。 这五个阶段加在一起构成了一个清晰，逻辑的界面设计系统 。 它们如下：

1. 原子
2. 分子
3. 生物体
4. 范本
5. 页数

1.

就像化学中的原子一样， 原子是无法进一步分解的最小结构单元。 因此，原子是基本HTML元素 ，例如按钮，标签和输入字段，它们提供网页的最小单位 。

当然， 并非所有HTML元素都是原子 ，例如， <section>元素（ <article> ， <section>等）不是（不能是）网页的最小单元。

原子不仅是HTML元素，而且是它们所属的样式 ：字体，颜色，尺寸和其他CSS样式规则。 用Brad自己的话来说 ，原子“一眼就能展示出您的所有基本样式” 。

原子–示例

这是我们网站上的一个例子。 推荐职位的标题可能是一种原子 ; 它们使用相同HTML和CSS代码，并且可以轻松地与其他内容区分开 。

请注意，Hongkiat.com并非在设计时就考虑了原子设计，此处仅用于演示目的 。

原子设计的本质是使用这五个阶段从下至上设计UI ，而不是随后确定原子设计组件。

2.

一个分子是由一组原子形成的 。 分子构成了原子设计层次结构的下一个阶段。 考虑已经由多个HTML元素组成的更简单的UI元素，例如搜索表单或侧边栏中的推荐帖子。

组织成一个分子赋予每个原子一个目的 。 在更大的组（分子）中，原子必须相互支持和互补 ，它们必须很好地协同工作才能创建可用的设计。

例如，在推荐的帖子块中，标题（一个原子）必须比作者的名字（另一个原子） 得到更多的强调 （更大的字体，更大的重量等）。 这样，两个原子“ 团结 ”在一起工作以获得最佳结果。

分子–示例

使用我们前面的示例，您可以看到在Hongkiat的侧边栏中，一个推荐的块可以看作是一个分子。 推荐的后分子由三个原子组成 ：缩略图，标题和作者的名字原子。

3.

生物是由一组分子，原子 （有时还包括其他生物）组成的 。 在网页设计中，有机物是代表页面的确定部分的更复杂的UI组件 ，例如页眉，页脚或侧边栏。

有机体可以由不同类型的分子组成 ，例如侧边栏可以由搜索栏和不同类型的小部件组成，也可以由相同的分子重复几次 （例如，几个相互关联的柱状图块相互重叠）组成。 并且，这可以是两者的组合。

有机体–示例

在Hongkiat的网站上，侧边栏可能是有机体。 它由一个搜索栏 （一种分子类型，仅显示一次）和几个推荐的帖子 （另一种分子类型，显示多次）组成。

但是，侧栏生物也可以看作是一个分子 （搜索栏）和另一个生物 （带有多个推荐帖子的推荐帖子小部件）的组成。 原子设计是一个灵活的模型 ，规则不是很严格，因此在这种情况下，我们可以将同一构件定义为分子和生物。

4.

原子设计层次结构的下一个阶段是模板 。 如您所见，这是原子设计停止使用化学类比的时候 。 布拉德在这一点上拒绝使用术语，因为他认为这对于客户和其他利益相关者而言较难理解 ，并且实质上是设计师需要出售的最后两个阶段（模板和页面）。

模板由生物组成。 它们是页面级对象，但没有最终内容 。 模板的目的是代表基础内容的结构 。

模板显示不同的原子，分子和生物如何“在布局的背景下共同发挥作用” 。 它们基本上代表了页面的骨架 。

模板–示例

例如，考虑一个带有占位符图像和lorem ipsum文本块的主页模板 。

在下面，您可以看到《原子设计》一书中的示例。 它是TimeInc杂志的主页模板。 原子，分子和生物都处在原处，但仅具有示意性内容 。

5.

页面代表原子设计层次结构的最后阶段。 页面是“模板的特定实例” 。 在页面阶段，模板将填充真实内容 （副本，显微镜，图像，视频等），就像它们将出现在真实UI中一样。

通过页面，设计人员可以查看最终用户的体验 ，与真实用户一起测试设计 ，并评估其在可用性，转换，可访问性和其他指标方面的表现。

页面和模板变体

页面阶段的另一个目标是使模板变体成为可能。 当基础模板相同但填充内容（略有不同）时，我们谈论的是模板变化。 例如，如果您想向不同的用户组显示不同的内容（例如，访客与登录用户），或者某个标题比其他标题长得多。

如果我们要创建一致且有弹性的用户界面，使用模板变体至关重要。 较小的组件（原子，分子，生物）必须在不同的情况下发挥良好的功能 。

例如，一个按钮必须与周围的任何周围元素都可单击。 如果在某些变体中它看起来不可行，则需要重新设计按钮原子，直到它适合所有用例为止。

页–示例

在下面，您可以看到上一个TimeInc主页模板的页面阶段。 看起来不一样吧？ 不过，这只是一个模板变体 。 为了拥有有效的用户界面，设计团队必须认真考虑实际网站中可能发生的变化 。 然后，他们也需要针对该模板变体（页面）测试设计。

翻译自: https://www.hongkiat.com/blog/atomic-design-for-web-designers/