组件相信大家都不陌生，作为官方的一个功能，已经存在很久了，不知道大家是不是还停留在只会搭建单个组件，不会组合使用的境地，我最近在项目中也在做这个组件，接下来我会通过落地项目和实际案例，跟大家分享一下组件的逻辑和制作思路。

理解组件的逻辑

我们先来简单了解一下原子设计理论（链接在文章末尾）：分为原子、分子、组织、模板、页面。

我们来重点关注以下四个：原子、分子、组织和模式（分解后）。

△图片来自原子设计理论文章

对于不熟悉原子理论设计的人，请阅读这篇文章：

今年非常流行的原子设计理论给大家做了全面的总结！

近年来，Style Guide逐渐发展成为一套架构严谨、规则统一的框架体系，产品性能的设计可以逐步实现模块化操作，从而大大提高设计效率。

阅读文章 >>

1. Atom

原子可以称为元素，是用户界面的基本组成部分（不可进一步分解），例如表格文本，图形，图标，分割线等。

2. 分子

小部件由按一定顺序和空间排列的原子组成。例如导航栏、标签、列表等。

3.组织

大组件是由原子（元素）和分子（小组件）按照一定的顺序和空间排列而成的。例如：列表流、入口模块、瀑布流等。

4. 风格

样式分为文本样式和图形样式，它们作用于原子，与原子配合使用。它们通常用于更改文本属性（字体粗细、颜色、大小、间距等）和图形属性（颜色、描边、投影等）。在其他文章中，样式以原子的形式出现，但我在这里将它们分开，因为样式在后面的组件解释中非常重要。

摘要：组织（大型组件）可以同时包含分子（小型组件）、原子（元素）和样式。或者它们可以只包含分子，这取决于您如何设置组件模块。案例研究将对此进行解释。

组件命名

组件的命名逻辑为：////Atom，命名从大到小。

例如：（曾祖父/祖父/父亲/儿子）有点滑稽，但相对生动。

接口的完整组件命名：XX类别/XX模块/XX组件/组件状态

例如：块块（类别）/专家列表（模块）/按钮（组件）/已关注（状态）这里的斜线“/”用来区分父子关系，也根据思维导图的逻辑关系，包含嵌套关系。

实用解释

在讲解之前我们先来了解一下响应式布局的一些设置

这里的设置是固定边缘（固定左、固定右、固定上、固定下），固定大小（固定高度、固定宽度），最后的预览是一个小动画，演示了我们设置完前两个属性后的效果。

在创建组件的时候我们可以选择性的指定不同的方向属性，指定属性之后组件内容的增加或者减少会按照设置的方向改变组件的宽高，只能有一个属性或者没有属性。

情况1

知识点：固定到边缘、固定大小、赋予方向属性

难点：侧边固定设置不正确，拉伸也会随之改变；固定高宽没设置好，拉伸会变形

案例 2

知识点：标签替换、固定间距、文字换行、设置控件、无控件设置

难点：组件命名不一致，无法替换；未设置组件方向属性，内容不会移动

案例 3

知识点：逻辑、分组和分配方向属性

难点：组件逻辑、方向属性设置

组件化的好处

1. 统一

对于业务线较多的软件，往往会有多名设计师共同完成整个产品的设计，不同业务线的设计师必须严格遵循统一的规范和组件sketch控件库，以提高整个产品的视觉统一性和交互规则。

2. 效率

在组件创建初期就考虑组件逻辑，为每个状态做好准备。快速使用组件构建完整页面，替换原子和分子元素。提高设计团队的效率

3.灵活性

在组件中设置智能布局，可以灵活地手动改变组件控件的高度和宽度，也可以根据内容的多少自动调整。

4. 重复使用

组件必须经常复用，通过建立完整的组件库，在以后的更新迭代中，可以直接修改复用的组件。

设计团队难免会有人员来来去去，即使有成员离开或加入，也能通过设计规范和组件库快速衔接工作。复用组件避免新设计师对设计产生不同的认知，增加沟通成本。在做背心包或者同业务的产品时，通过页面结构的复用、统一的视觉规范和交互逻辑，让用户感知到是同一系列的产品（如阿里巴巴、腾讯等），提升产品品牌感。

5. 组件化对开发也非常有利

组件化开发就是按照功能、业务线来划分代码sketch控件库，开发者可以将任意的 HTML 代码封装成组件，只要场景复用性高，逻辑关系梳理清楚即可。（这点和设计组件是一样的）

减少软件包大小

创建通用的公共功能组件和各个业务复用的组件，方便调用和修改，避免导航栏框架相同，也避免不同业务重写开发代码浪费app资源（这个对应前面提到的分子部分，输入框、日历、表单等通用的公共功能组件）

提高工作效率，降低开发成本

可以通过更换不同的组件来快速完成任务需求，同时保持界面不变。

后期维护方便

由于整个页面都是由组件组成的，当测试出现问题的时候，可以定位问题所在，快速找到对应的组件进行修改或者移除。

在团队开发中，组件化的好处在于便于协作开发（比如多人协作完成一个项目时，可以保证项目的统一性），团队中每个人都发挥自己的所长去维护各自业务模块的组件，这对于APP来说也是一个不断打磨的过程。

组件的扩展使用1.组件工具与团队协作

蓝湖标准云

目前，Blue Lake标准云被广泛应用于团队协作。

优点：轻松上传、拖拽，方便组织标准化组件，自动同步更新

缺点：不同人上传组件时，同步较慢，拖到新文件时部分样式会丢失，10人以上需要收费。

云

个人认为在团队配合上比蓝湖强。

优点：可以多人协作处理一个文档，可以查看文件的历史版本，可以追溯，可以及时更新组件（右上角有提示）

缺点：个人费用相对较贵，对大型设计师团队不太友好（当然巨头公司例外）

2. 插图组件

就像页面组件一样，您可以替换组件元素来改变角色形状，背景等。您可以快速将组件组合成不同的插画场景。

插图组件库

下载链接：

这位大神制作的矢量插图素材不仅高度自由可修改，而且可以免费用于商业使用！

不懂手绘，但想做插画风格？

阅读文章 >>

阿里海兔插画组件库

下载链接：

阿里巴巴又推出免费工具！插画设计变得像搭积木一样简单！

HiTu 目前以平面设计素材形式呈现，采用 ETCG 方法设计（ETCG 代表案例、模板、组件和全局样式），并包含构图、色彩、含义​​等一系列设计准则，帮助设计师快速、优雅地完成平面设计需求，让每个人都能成为插画师。

阅读文章 >>

总结

组件思维、组件能力逐渐成为设计师不可或缺的能力，对于团队来说，提高效率，减少设计师的沟通成本，提高项目的统一性，设计团队可以花更多的时间打磨产品细节，对于开发来说，减少工作量，保证还原的一致性，对于公司来说，节省时间和人力成本，组件库要学会应用在更多的地方，期待你的发现，我现在也要开始做组件了，记得点赞哦~

如有侵权请联系删除！