嗨~

我是Lay Chen

前段时间，读到了一篇文章《Atomic Design原子设计┃构建科学规范的设计系统》

（https://coffee.pmcaff.com/article/854694758193280/?newwindow=1）

让人非常兴奋和感触，这就是我之前做组件库一直在考虑的问题，读到这篇文章有种一拍即合的感觉，有许多不谋而合的地方，在这里想通过这篇文章与大家分享我在实际项目中对原子设计方法论的应用。

1、什么是原子设计？

背景：在2013年网页设计师Brad Frost从化学中受到启发：原子（Atoms）结合在一起，形成分子（Molecures），进一步结合形成的各式各样的事物。所谓道生一、一生二、二生三、三生万物。

通过界定元素组合层级，分为原子级、分子级、组织、模块和页面，这就是Definition概念。

2、本组件库项目是如何界面每个层级的？

首先，组件库通过sketch60.1及以上版本调用，本版本的sketch新增了令人兴奋的“智能布局”功能，它将我的许多想法变为现实，文章下方会提供案例讲解。

在原子级别上，包含了四种元素：字体外观、图层外观、图标、交互动作。

通过其不同属性设置、将其穷举分类，目的是为了覆盖到所有样式，以便于在调用和修改样式时变得更方便，以达到高度一致性标准的功能、防止设计人员人为错误的发生。

接下来，以本组件中的元素之一：字体外观为例

分类标准：字号、自重、字色（遵循web安全色）、对齐方式

本组件的字体外观库

字体外观库的使用场景

以下是本组件的颜色外观库

如需更改组件库配色，只需对此颜色外观库进行更新即可。

本组件的颜色外观库

颜色外观库的使用场景

本组件的图标库及对应的图标外观库

以下是本组件中的原子级概念的分类

本组件的symbol库

其中需要注意的是本组件中包含“资源库”的概念。

什么是资源库？

用于组件呈现的次级组件叫资源，通常由一个以上基础组件排版形成。设定资源的目的是让原子能够在资源所设定的框架中按照规则执行，而不出现布局错乱的情况，或实现布局的功能

2、本组件库项目是如何界定每个层级的？

3、本组件库的隐藏功能

为保证视觉规范的落地和业务的拓展性，组件库包含的以下功能。

以上是笔者对原子设计在组件库项目中的应用的分享。

文章中的项目链接：Lay设计PC端组件库【视觉规范文档篇】

作者：Lay Chen

 "My name is Lay Chen"

I'm waiting for you on

Dribbble . Behance . Zcool

Powered by Froala Editor