原子设计：吹嘘你对网页设计的了解

人们普遍认为，灵活性与不受约束是一样的，要具有创造力，您也必须不受约束。 但是，要完成一个项目，尤其是像网页设计一样复杂的项目，创建结构实际上可以为您提供更大的灵活性。 你需要一个框架——它是不容商量的。 在真正拥有自由的地方展示您的艺术和创意肌肉，将产生既具有灵感又具有功能性和现实性的设计。 原子设计是一种合理的、有条理的网页设计方法，它仍然让您有机会在框架内进行实验。

设计系统

设计师不再只是简单地创建网页； 他们创建设计系统。 设计系统包括：

• 颜色
• 网格
• 质地
• 排版
• 等等。

我喜欢 UX Planet 的 Jack Strachan 对设计系统的描述：“简而言之，设计系统是一组可重复使用的组件，以明确的标准为指导，可以组装在一起以构建任意数量的应用程序。 设计系统是一种在处理不同接触点时在产品中翻译一致体验和视觉语言的方法。”

设计元素可能是主观的，它们很快就会变得势不可挡和混乱。 为了对它们进行分类，必须以更有条理的方式看待设计。 这就是网页设计师 Brad Frost 所做的。

原子设计的诞生

以下是 Brad 提出原子设计的方式：“在寻找灵感和相似之处的过程中，我不断地回到化学领域。 这个想法是所有物质（无论是固体、液体、气体、简单的、复杂的等）都是由原子组成的。 这些原子单元结合在一起形成分子，这些分子又结合成更复杂的有机体，最终创造出我们宇宙中的所有物质。”

他继续解释说，接口由可以归类为构建块的组件组成。 下面是从小到大的顺序：

• 原子
• 分子
• 有机体
• 模板
• 页面

资料来源：BradFrost.com

原子设计的基石

原子设计的主要吸引力在于它促进了一致性。 您创建的许多元素都可以轻松复制、重用或缩放。 为了跟踪所有这些，设计师可以为自己建立一个库，在那里他们可以在一个地方看到他们的所有元素和样式。 也有一些定制的空间，但前提是构建块在范围上变得更加复杂和宏大。 让我们进入五个构建块：

1. 原子

正如原子在自然界中很重要一样，HTML 标签对于 Web 界面来说也是如此。 含义：所有 Web 界面都以 HTML 标签或基本元素（动画、按钮、调色板、字体、表单标签等）开头。 虽然这些原子本身对网页设计没有好处，但它们是构建网页界面所必需的。

2. 分子

分子比原子更复杂，但它们总体上并不复杂。 当您将不那么有用的原子组合在一起时，您将拥有更有用的分子：搜索表单标签 + 输入 + 按钮（原子）= 完成的搜索表单（分子）

3. 生物

当你将分子组合在一起时，你会得到比它们的前辈更复杂的有机体：徽标 + 导航 + 搜索表单 + 社交媒体图标（分子）= 已完成的标头（有机体）

理想情况下，您将能够在网站上或跨不同网站重复使用有机体，保持总体布局并使用不同的文本和图像对其进行自定义。 例如，您可以在您设计的所有网站上使用相同类型的标头，或者您可以创建特定于产品的有机体（图像 + 标题 + 价格），并在产品页面上重复。

这是 Web 界面真正开始以独特的、定制的方式形成的时候。 在此之前，您的界面只是普通元素的集合。 在有机体阶段，网站变得更加视觉化。

如果您要与客户分享您的流程，这就是他们会去的部分，“哦，我明白了。” 现在是开始绘制线框图或制作模型的时候了，这样客户就可以在你进一步发展之前给你反馈。

4. 模板

当您将有机体组合在一起时，您就有了模板。 这是实际页面布局组合在一起的时候。 虽然分子和生物体有自己的内部布局，但模板阶段是您开始了解它们如何相互补充和相互作用的阶段； 他们彼此相对的位置； 以及它们作为一个整体如何流动。 模板给出了分子和生物体的上下文。 请注意，模板具有占位符内容，而不是自定义或原始内容。

资料来源：BradFrost.com

5. 页面

通过用实际内容替换占位符内容，页面将模板提升到一个新的水平。 它可能不会是最终的内容，但它会更能代表最终的设计和内容。 此时添加高质量、永久的内容可能是一种浪费，因为网站仍然需要测试、审查和调整。 也就是说，您可能会插入最终的内容——这取决于您在该过程中的位置。

这是网站将受到最严格审查的阶段。 根据您获得的评论和反馈，可能需要更改分子、生物体和模板。 这也是测试设计变化的好时机。

最后的想法

关于原子设计的事情是它并不新鲜——口头上是，但理论不是。 这就是网站长期以来的设计方式。 使用原子设计术语不会自动使您成为出色的设计师或开发人员； 它不能替代扎实的工作。

以这种方式谈论它的一个好处是，在使用这种术语来阐明方法时，非开发人员更容易理解——您可以向客户解释您的过程。 对于有组织的开发人员来说，这是一种划分设计的方式。 您将能够深入研究一个组件或一小组不起作用的元素。 它可以帮助你只见树木不见森林，而不是说，“这整件事都有缺陷。”

原子设计使您可以拥抱创造力而不会迷失其中。 它以一种让您更快开始项目的方式处理基本元素和设计系统，以便将时间花在最需要您的艺术性和技能的地方——进行复杂的调整、解决问题、满足客户需求并最终创建一个网站超出常态。

保持网页设计的势头，并查看每个网页设计项目要遵循的 10 条优秀 UI 设计规则。

特色图片来自 ShadeDesign/shutterstock.com