Web设计师的原子设计简介
原子设计是一种使用化学类比法从下至上构建有效UI的新方法。
模块化 ， 可重用性和可伸缩性不仅是编码概念，而且您还可以利用它们来创建优化程度更高的设计系统 。
原子设计不是设计网页集合，而是从称为原子 （按钮，菜单项等）的最简单的UI组件开始，并通过四个更多的阶段来构建整个UI： 分子 ， 生物 ， 模板和页面 。
这本书
原子设计作为一本书发布 ，您可以免费在线阅读 ，也可以订购平装本（$ 20.00）或电子书（$ 10.00） 。
该方法是由设计师Brad Frost创建的，目的是“设计成功的UI设计系统” 。
本文旨在对这种方法进行介绍，但是本书对这种解释进行了更深入的介绍，因此，如果可以的话，请读它，这是值得的。
原子设计从全新的角度处理用户界面设计，希望可以稍微改变一下Web设计领域 。
原子设计层次
它们如下：
这五个阶段加在一起构成了一个清晰，逻辑的界面设计系统 。
每个阶段均由上一阶段的一组组件组成。
原子设计的层次结构分为五个阶段 ;
原子设计基本上是一种心理模型 ，可使设计人员将网页视为可重用组件的层次结构 。
1.
因此，原子是提供网页最小单元的基本HTML元素 ，例如按钮，标签和输入字段。
就像化学中的原子一样， 原子是无法进一步分解的最小结构单元。
当然， 并非所有HTML元素都是原子 ，例如， <section>元素（ <article> ， <section>等）不是（不能是）网页的最小单元。
用Brad自己的话来说 ，原子“一眼就能展示出您的所有基本样式” 。
原子不仅是HTML元素，而且是它们所属的样式 ：字体，颜色，尺寸和其他CSS样式规则。
原子–示例
它们使用相同HTML和CSS代码，并且可以轻松地与其他内容区分开 。
推荐职位的标题可能是一种原子 ;
这是我们网站上的一个例子。
请注意，Hongkiat.com并非在设计时就考虑了原子设计，此处仅用于演示目的 。
原子设计的本质是使用这五个阶段从下至上设计UI ，而不是随后确定原子设计组件。
2.
考虑已经由多个HTML元素组成的更简单的UI元素，例如搜索表单或侧边栏中的推荐帖子。
分子构成了原子设计层次结构的下一个阶段。
一个分子是由一组原子形成的 。
在更大的组（分子）中，原子必须相互支持和互补 ，它们必须协同工作才能创建可用的设计。
组织成一个分子赋予每个原子一个目的 。
这样，两个原子“ 团结 ”在一起工作以获得最佳结果。
例如，在推荐的帖子块中，标题（一个原子）必须比作者的名字（另一个原子） 得到更多的强调 （更大的字体，更大的重量等）。
分子–示例
推荐的后分子由三个原子组成 ：缩略图，标题和作者的名字原子。
使用我们之前的示例，您可以看到在Hongkiat的侧边栏中，一个推荐帖子块可以看作是一个分子。
3.
在网页设计中，有机体是表示页面的确定部分的更复杂的UI组件 ，例如页眉，页脚或侧边栏。
生物是由一组分子，原子 （有时还包括其他生物）组成的 。
并且，这可以是两者的组合。
有机体可以由不同类型的分子组成 ，例如侧边栏可以由搜索栏和不同类型的小部件组成，也可以由相同的分子重复多次 （例如，相互之间有几个相关的柱状图块）组成。
有机体–示例
它由一个搜索栏 （一种分子类型，仅显示一次）和几个推荐帖子 （另一种分子类型，显示多次）组成。
在Hongkiat的网站上，侧边栏可能是有机体。
原子设计是一个灵活的模型 ，规则不是很严格，因此在这种情况下，我们可以将相同的构件定义为分子和生物。
但是，侧栏生物也可以看作是一个分子 （搜索栏）和另一种生物 （带有多个推荐帖子的推荐帖子小部件）的组成。
4.
布拉德在这一点上拒绝使用术语，因为他认为这对于客户和其他利益相关者而言较难理解 ，并且实质上是设计师需要出售的最后两个阶段（模板和页面）。
如您所见，这是原子设计停止使用化学类比的时候 。
原子设计层次结构的下一个阶段是模板 。
模板的目的是代表基础内容的结构 。
它们是页面级对象，但没有最终内容 。
模板由生物组成。
它们基本上代表了页面的骨架 。
模板显示不同的原子，分子和生物如何“在布局的背景下共同发挥作用” 。
模板–示例
例如，考虑一个带有占位符图像和lorem ipsum文本块的主页模板 。
原子，分子和生物都处在原处，但仅具有示意性内容 。
它是TimeInc杂志的主页模板。
在下面，您可以看到《原子设计》一书中的示例。
5.
在页面阶段，模板将填充真实内容 （副本，显微镜，图像，视频等），就像它们将出现在真实UI中一样。
页面是“模板的特定实例” 。
页面代表原子设计层次结构的最后阶段。
通过页面，设计人员可以查看最终用户的体验 ，并与真实用户一起测试设计 ，并评估其在可用性，转换，可访问性和其他指标方面的表现。
页面和模板变体
例如，如果您想向不同的用户组显示不同的内容（例如，访客与登录用户），或者某个标题比其他标题长得多。
当基础模板相同但填充内容（略有不同）时，我们谈论的是模板变化。
页面阶段的另一个目标是使模板变体成为可能。
较小的组件（原子，分子，生物）必须在不同的情况下发挥良好的功能 。
如果我们要创建一致且有弹性的用户界面，使用模板变体至关重要。
如果在某些变体中它看起来不可行，则需要重新设计按钮原子，直到它适合所有用例为止。
例如，一个按钮必须与周围的任何周围元素都可单击。
页–示例
然后，他们也需要针对该模板变体（页面）测试设计。
为了拥有有效的UI，设计团队必须认真考虑实际网站中可能发生的变化 。
不过，这只是一个模板变体 。
看起来不一样吧？
在下面，您可以看到上一个TimeInc主页模板的页面阶段。
翻译自: https://www.hongkiat.com/blog/atomic-design-for-web-designers/