是否建议在原子设计中使用角度？
“关于创建设计系统已经谈了很多，其中大部分都集中在为颜色、排版、网格、纹理等建立基础。这种类型的思维当然很重要，但我对这些方面不太感兴趣设计，因为最终它们是并且将永远是主观的。最近我对我们的界面由什么组成以及我们如何以更有条理的方式构建设计系统更感兴趣“，Brad Frost。
问问题
5065 次
1 回答
13
由于它是基于组件的架构，因此很容易在 Angular 中实现原子设计。事实上，一些鼓励重用、可维护性和组件化的 Angular 最佳实践很自然地适合原子设计范式。
以下是原子设计和 Angular 之间的相似之处。引用的定义取自“官方来源”：http ://atomicdesign.bradfrost.com/chapter-2/
原子
[A]toms 包括基本的 HTML 元素，如表单标签、输入、按钮和其他无法进一步分解而无法正常工作的元素。
在 Angular 中，您将在组件模板中使用基本的 HTML 元素，如上面引用中列出的元素。
分子
[M]olecules 是相对简单的 UI 元素组，它们作为一个单元一起发挥作用
Angular 最佳实践鼓励创建可以跨应用程序重用（甚至与不同应用程序共享）的小组件。如果您查看 Angular Material 组件库，有很多预制组件的示例，它们可以被视为原子设计中的“分子”。
有机体
有机体是由分子组和/或原子和/或其他有机体组成的相对复杂的 UI 组件。
在您的 Angular 应用程序中，您通常会有可重用的容器或组件。页眉和页脚、导航菜单、产品预览框等都是一些示例。这些容器由较小的组件（“分子”）组成，并在整个应用程序（甚至多个应用程序）中重复使用。
模板
模板是页面级对象，可将组件放入布局并阐明设计的底层内容结构。
上面的定义，经过一些小的修改，也可以描述 Angular 的模板系统。要创建页面，您需要放置组件（“有机体”、“分子”、“原子”）来创建页面结构。
页面
页面是模板的特定实例，可显示具有真实代表性内容的 UI 外观。
这本质上是 Angular 组件模板在浏览器中的渲染输出——可以说是 Angular 项目的最终产品。
如您所见，原子设计可以应用于 Angular 项目。此外，Angular 的组件架构和原子设计之间有很多重叠之处。
于 2019-11-21T01:03:04.437 回答