一篇读懂：用原子设计思维构建组件库

对于设计师来说组件库并不陌生，但是构建时往往是一头雾水，存在很多问题。比如说组件多了之后层级不明确，很多组件堆在一起比较混乱等等。这时候我们就可以运用原子设计思维来构建。那么什么是原子设计思维，以及如何运用它来构建组件库呢？且看我一一分解：

 

什么是原子设计思维

原子是构成物质的最小粒子，原子和原子构成分子。那么在我们的界面设计中，构成页面的最小元素（字体、颜色、图标、按钮）就可以理解为原子，元素和元素结合构成组件（搜索、卡片等），组件就可以理解为是分子。再往下推就是组件和组件结合可以构成模块，模块和模块组合就可以组成界面了。

 

 

 

构建组件

在构建组件的过程中，原子设计思维能够帮助我们梳理组件，清晰思路。有很多设计师觉得构建组件的过程过于繁琐，索性就放弃这一方法，直接人工重复。事实上，整理组件起初会有些麻烦，但是建成之后不管是复用还是修改都很方便。前提是一定要把众多组件合理分类、清晰命名，这样在后期使用时才能更快捷查找。下面就从这几个节点来说：

 

分类

构建组件库，虽然是从最小元素开始，但是在构建之前我们要先梳理出组件的类别、层级，便于后面对于组件进行归类整理。只有做到这样才能在很多组件的情况下，依然清晰不混乱。

 

我通常会将组件一级分类为：大组件、小组件、icon、按钮、其他。通常模块类、或者元素比较多的组件一般归类在大组件里。元素少一些的归在小组件，像是icon、按钮、色彩类的比较常用就单独归类，以及其他不常用的组件就归在“其他”里面。

二级分类通常是依据组件的功能来分，比如卡片、搜索、导航等明确功能分组；三级就以状态来分，比如样式名、选中、未选中等状态。

 

命名

命名不一定要懂英文，记缩写，只要自己能看清楚看明白，怎么命都行。当然，如果是团队协作的组件库，命名就另说了。在Sketch中，组件是根据命名自动分类的，中间以 “/” 区别层级，“/”前为上一级，“/”后为下一级。了解了前面的分类规则之后，命名规则也就顺理成章。通常是：一级名/二级名/三级名/…比如说界面中有多种样式的卡片时，就可以这样命名：小组件/卡片/样式1（样式2/3/4），软件就根据命名分组，当我们查找时就像下图这样分类层级都很明确。

这里要注意的是，在命名时斜杠“/”的输入法应该是英文的，否则软件无法识别，影响分类。

 

构建与应用

在起初做界面的时候要有预见性，需要复用、替换的都要做成组件，保证设计的规范、快捷。当然除了组件，页面中的文字、以及图层样式，都要做到规范统一。

 

组件

以sketch为例，在构建组件时，一个小的元素也要建成组件，因为组件是可以嵌套的，这样后面就可以直接用其他组件替换。下图中的卡片，就是组件套组件。复用的时候就可以任意替换同尺寸的元素。

当我们选中内容，触发创建组件按钮之后，会出现一个弹窗。弹窗的左下角“发送组件到组件页面”一般就是勾选的状态，建立完成之后直接就自动存储在组件页面，后面方便查找、整理。名称输入框下面的布局选择是什么作用呢？我们以页面中常见的城市组件来帮助大家理解。城市和定位图标的组合，字体和图标的间距是固定的，但是城市名字有长有短，下图是不同布局方式相应的效果。可见没有选择布局时，图标不会跟随字体长短变动，甚至会重叠在一起。因此我们作图时可以选择合适的布局方式。

 

下面我们一起来整理一个底部导航栏。底部图标通常是分为未选中、选中两种状态。我们可以将每个图标的一种状态建立一个组件。（在命名时要注意上面制定的规则：icon/底部/首页/选中）

 

单个图标建立好组件之后，再把底部栏和图标一同选中建立组件，就可实现组件的嵌套。后面选中该组件，可以在右侧覆盖层区域，替换其中的图标。

但是现在问题来了。假如说现在的产品突然要换主体色，那是不是每个图标都要一一点进去修改，页面其他元素也要一点点修改呢？这里就要用到“图层样式”和”文字样式“。

 

图层样式

首先说图层样式。比如说画一个色块，可以在右侧外观区域创建样式。这里要记得遵循上面所说的命名规则。通常色彩都会这样命名：彩色（无色）/纯色（渐变）/色彩名。

后面在绘制界面元素时可以直接调用已经建立的图层样式。如果界面中的某一图层样式需要修改，修改之后点选更新，那么界面中所有应用此样式的元素都会随着更新。省去了一一修改的麻烦。这里要注意的是页面中元素都要调用图层样式，避免其中没有应用样式的元素在修改更新时漏掉。

当然图层样式除了色彩之外，还有描边，投影等。比如说线性图标的描边、卡片的投影颜色大小，都可以建立成图层样式，方便后面复用。现在回过头再看，如果是要改主体色，那么只需要改图层样式，之后更新就可以了。页面中所有应用此样式的元素都会随之更新。也可以直接在右侧更改相应的图层样式。

 

文字样式

文字在界面设计中也是无处不在的，一个界面中存在着多种大小、粗细的文字。我们在做界面时要注意同等级文字的样式的一致，这就需要为文字建立文字样式。就如上面组件、图层样式一样，文字样式也具有快速复用、修改的特点。首先选中文字创建样式，命名一般是：颜色/字号/对齐方式/字重。这样命名的好处是，通用性强，还比较容易查找。

这里注意的是，为了保证所有文字的规范性，界面中尽量所有的文字都调用文字样式，这样在需要修改的时候，也能够保证不会有文字被漏掉。

 

划重点

设计中如果建了大量组件，每次自己都要找半天，那建组件的意义也就不存在了。界面不是只要画好看就可以，还要高效的管理设计稿，以及和团队合作无障碍。因此在建立组件库时，要做到分类清晰，命名规范，方便自己使用，以及团队设计师协作。

 

原文地址：
海盐社（公众号）

作者：山竹屁