用户体验中的原子设计系统：它是什么以及它的用途

如果您想提供一致的用户体验并优化设计人员和开发人员团队的工作并节省成本，则原子设计系统是必要的。我们解释为什么以及如何构建一个高效的系统。

如果您曾经从宜家购买过一件家具，您就会知道它总是附带一本手册，解释如何逐步组装它。有了这本手册，您无需雇用任何人或致电宜家技术服务部门来组装您的家具。只需按照说明进行操作即可。

现在想象一下，如果宜家手册不存在。组装一件家具将是一项更加困难和乏味的任务。您需要其他人的帮助，甚至花钱请人为您做这件事。如果你想稍后出售家具，买家可能会要求你解释如何组装它，如果他们不能，甚至可以将其退还给你。

这与用户体验 (UX) 设计有什么关系？宜家的例子说明了在创建数字产品时制定清晰一致的指导方针的重要性。无论您的企业规模有多大，拥有一本用于网站或应用程序设计的“说明手册”总是一个好主意。本手册就是所谓的设计系统。

设计系统将帮助您优化开发流程并长期保持品牌一致性。

什么是用户体验中的原子设计系统？

原子设计系统是一种组织和构建用户界面视觉组件的方法。一种专有的用户体验方法，可以组织最简单的视觉组件，例如按钮和文本字段，以便可以将它们组合起来创建更复杂的组件，例如表单和面板。这些更复杂的组件又可以组合起来创建完整的用户界面。

它就像一本样式书，但适合界面设计。它允许您定义管理网站或应用程序外观的原则、组件和规则。因此，您可以修改数字产品的设计，甚至与不同的开发商或机构合作，而不会失去品牌的身份或可用性。您只需向他们提供您的业务设计系统，他们就可以轻松遵循。

它被称为原子设计系统，因为它的灵感来自原子组合形成分子、有机体和系统的方式。这个术语是由 Brad Frost 在他的《原子设计》一书中创造的。

在这个 UX/UI 领域的系统中，视觉元素被分类和定义为五个层次结构：

数字原子是系统最基本的元素，如按钮、图标、颜色、字体等。它们本身没有意义，而是组合起来形成其他更复杂的组件。

它们是形成功能单元的多个原子的联合，例如带有按钮的文本字段、带有图像和文本的卡片等。它们可以在不同的上下文和屏幕中重复使用。

它们是形成界面一部分的分子和原子的集合，例如导航菜单、表单、标题等。它们具有特定的功能并适应内容和设备。

它们是页面或屏幕的骨架，其中定义了有机体、分子和原子的区域和分布。可以为不同类型的页面或屏幕创建不同的模板，例如主页、产品页面、登录屏幕等。

它们是将实际内容应用到模板而生成的最终结果。它们通过图像、文本和特定数据来展示界面的外观。它们用于验证设计并检查其操作。