相信你对素描组件并不陌生。作为sketch正式推出的功能，已经比较久了。不知大家是否还停留在只能建立单一组件，而不会组合使用的情况。最近，我也在一个项目中研究这个组件。接下来我会通过落地项目和实际案例与大家分享组件的逻辑和制作思路。
00-1010我们先简单了解一下原子设计理论(文末链接):分为原子、分子、组织、模板、页面。
让我们来关注一下原子、分子、组织和模式(分裂)。
图片来自原子设计的理论文章。
不熟悉原子理论设计的学生，读读这篇文章：
00-1010近年来，风格指南逐渐发展成为设计体系。基于一套架构严谨、规则统一的框架体系，产品性能级的设计可以逐步实现模块化操作，从而大大提高设计效率。
阅读文章
1.原子
原子可以称为元素，作为用户界面的基本组成部分(不能进一步分解)。如表格文本、图形、图标、分割线等。
2.分子
原子按照一定的顺序和空间排列组合，称为小成分。例如导航栏、选项卡、列表等。
3.组织
它是由原子(元素)和分子(小组分)按照一定的顺序和空间排列组合而成的，称为大组分。比如：列表流、入口模块、瀑布流等。
4.风格
样式分为文本样式和图形样式，它们作用于原子并与之配合。它通常用于改变文本的属性(重量、颜色、大小、间距等)。)和图形(颜色、笔画、投影等。).在其他文章中，样式是以原子的形式出现的，我将在这里将其分开，因为样式在后面的组件解释中相当重要。
总结：组织(大组件)可以同时包含分子(小组件)、原子(元素)和风格。您也可以仅包括分子，这取决于您如何设置组件模块。案例实践会解释。
了解组件的逻辑
草图组件的命名逻辑是：分类/模块/组织/分子/原子，命名顺序从大到小。
比如：(曾祖父/祖父/父亲/儿子)虽然有点搞笑，但是比较形象。
界面完整组件命名：XX分类/xx模块/xx组件/组件状态
例：掘金(分类)/专家列表(模块)/按钮(组件)/关注(状态)这里斜线“/”是根据思维导图的逻辑关系来区分父子关系的，也包含嵌套关系。
00-1010在解释之前，我们先来看看素描响应式布局的一些设置。
这里的设置是边定(左定、右定、上定、下定)和定尺寸(定高、定宽)。最后一个预览是我们设置了前两个属性后，会有一个小动画来演示设置的效果。
=”1500″ img_height=”452″ alt=”用一个落地项目，帮你掌握Sketch组件的制作思路” inline=”0″>
我们在创建组件的时候可以选择性赋予不同方向的属性，赋予属性之后组件内容增加或减少会根据设置的方向改变组件的宽高。只能存在一种属性或者无属性。
案例1
知识点：靠边固定、固定尺寸、赋予方向属性
难点：靠边固定设置错误，拉伸会跟着改变；没设置固定高度宽度，拉伸变形
案例2
知识点：标签替换、间距固定、文案换行、设置控件、无控件设置
难点：组件命名不一致、不能替换；组件方向属性未设置，内容不会推移内容
案例3
知识点：小组件逻辑、编组赋予方向属性
难点：组件逻辑、方向属性设置
组件化的好处
1. 统一
在对于业务线庞大的软件，经常是多个设计师一起完成整个产品设计，不同业务线设计师需严格按照统一规范、组件去使用。提升整个产品的视觉统一与交互规则统一。
2. 高效
在前期创建组件考虑好组件逻辑，做好每一种状态。快速利用组件搭建完整页面，替换原子、分子元素。提升设计团队效率
3. 灵活
在sketch组件中设置智能布局。可灵活手动更改组件控件的高度宽度，或根据内容多少自动调整。
4. 复用
组件必定是高频复用的，通过建立完整的组件库，在以后更新迭代可以直接修改复用组件。
设计团队难免出现进出，即使有成员离开或者加入，通过设计规范和组件库可以快速对接工作。复用组件避免出现新的设计师对于设计不同的认知，增加沟通成本。在做马甲包或者相同业务的产品时。可以通过页面结构、视觉规范统一和交互逻辑的复用让用户能够感知到是同一系列产品（如阿里系、腾讯系等）提升强化产品品牌感。
5. 组件化对于开发来说也是有很大的好处
组件化开发是根据功能、业务线进行代码划分，开发可以把任何的一个html 代码封装成一个组件,前提是高度复用的场景以及梳理清楚逻辑关系。（这和设计在做组件的时候是一样的）
降低软件体积包大小
制作常用公共功能组件和各业务复用多的组件方便调用更改，避免出现 一个同样框架的导航栏、不同业务的开发用代码重新写了一遍浪费app资源（这里对应前面讲到的分子部分,常用公共功能组件如输入框、日历、表单等)）
提升工作效率、减少开发成本
可以在保持接口不变的情况下，替换不同的组件快速完成任务需求。
便于后期维护
由于整个页面都是通过组件组合起来的，在测试出现问题的时候，可以定位问题，快速找到对应组件修改或者移除。
在团队开发中，组件化带来的优势是便于协同开发（如设计多人协作完成一个项目时保证项目的统一性）。团队中每个人发挥所长维护各自业务模块的组件，对于APP来说也是一个不断打磨的过程。
组件的扩展使用
1. 组件工具及团队协作
蓝湖规范云
目前使用较多是蓝湖规范云来进行团队协作
优点是：上传便捷、拖拽使用、规范组件整理方便、自动同步更新
缺点是：当不同的人上传组件后同步更新比较慢、一些样式拖到新的文件中会丢失、超过10人收费
sketch cloud
个人觉得在团队协作中比蓝湖强大一些
优点是：可多人协作一份文档、可查看文件历史版本，可追溯、及时更新组件（sketch右上角有提示）
缺点是：个人收费比较贵，对于设计师多团队有点不友好（当然啦，土豪公司例外）
2. 插画组件
和页面组件一样，可以替换组件元素更改人物造型、背景等。可以快速通过组件组合成不同的插画场景。
Humaaans插画组件库
下载地址：
这位大神做的矢量插画素材，不仅高度自由可修改还能免费商用！
不懂手绘，但又想做插画风格的 Banner?
阅读文章 >>
阿里海兔插画组件库
下载地址：
阿里又出免费神器！让插画设计变得像搭积木一样简单！
HiTu 目前以图形化设计资产的形式和大家见面，使用 ETCG 的思路设计（ETCG 分别是 案例 example ，模板template，组件component ，全局样式 global style ），包含构图、颜色、寓意等一系列设计指引，帮助设计者快速且优雅地完成图形化设计需求，让人人都可以是插画设计师。
阅读文章 >>
总结
组件化思维、组件能力是渐渐成为设计师必不可少的一项能力，对于团队来说提升效率，减少设计师的沟通成本以及项目统一性的提升。设计团队能够花更多的时间去打磨产品细节，对于开发来说，减少工作量，保证实现还原的一致性。对于公司来说节省时间人力成本。组件库要学会举一反三运用在更多的地方，期待你们发掘不说了我得去做组件了。记得点赞哟~
