过往阅读总结之原子化设计系统

  1. Atoms
  2. Molecules
  3. Organisms
  4. Templates
  5. Pages

原子

代表页面最基本组成成分,例如我们的原子这里可以理解为一个表单上的一个input filed

原子是每一个足够抽象的单元,例如color等,你可以很轻易地复用它们

molecules

把分散的Atoms 单元组合起来 成为一个molecules

例如表单元素组合可以形成一个表单

Organisms

这一层相当于已经是页面构建块的组件了。

它由molecules组件,相对复杂的一部分。

例如我们网页上的一个section 块

Templates

模版已经很接近我们目标的page了,用户可以在这里看到我们的网页原型,这层也是Organisms与molecules的常见组合地

Pages

pages相当于是模版的实例化,将占位元素都替换成真实存在的。

pages是页面设计可见的最后一步应该是反复讨论的终点。

原子设计使我们能够从抽象到具体。因此,我们可以创建促进一致性和可伸缩性的系统,同时在最终上下文中显示内容。通过组合而不是解构。


对比思考。

atomic设计我们在css也可以用到。

由YAHOO提出。主要点强调于抽象可抽象部分,作为最小单元进行复用。

虽然单位越小,代表复用性越强。

这样的前提下,atomic css带给我们的优点显而易见

  1. 复用的class,有效stylesheet大小。
  2. 复用性最大化
  3. 减少class name冲突问题
  4. 从HTML元素上可以获得元素的样式(HTML可以看到class 而不用跳到指定文件获取)

但是缺点也不是没有,维护成本,还有抽象的日益膨胀,对新加入项目的人员增加学习成本。

目前国内大多数的公司,组与组之间的技术栈都未必一致,这样的前提下,atomic css的实施成本很大。


组件样式共享库最佳实践

https://www.figma.com/blog/component-styles-and-shared-library-best-practices/

这种模式简单的一个实现(游乐场)

http://demo.patternlab.io

视频,bradfrost演示实际应用中我们如何建立design-system

Let’s Make A Design System! Live Coding at Smashing Conf


在写自己的组件库,对以前找过的一些资料进行总结回顾

共勉,加油!

发表评论

电子邮件地址不会被公开。 必填项已用*标注