（文章很长，建议收藏）
前言
在开始阅读之前，笔者想做个小调研，目前你在用的主力工具是什么？Sketch、Adobe XD 还是 Figma？大家在心里默默的做下选择就可以了，之所以开头问这个问题，是因为笔者摸爬滚打多年也算了经历过这些工具的变迁历程。
2011-2012年，我眼中的组件只是开发口中的一种“偷懒”名词；
2014年，效率与规范是那个时候听到最多的2个词，了解并使用过相关方案在项目中，但对组件提高效率这个意识并不敏感；
2015-2016年，基于 Sketch 建成了第一套 PC 与M站组件库；
2017年，基于 Sketch 建成第一套客户端 App 组件库；
2019-至今，基于 Figma 建成了高度实用化组件库。
每一次的工具或者流程的迭代，都伴随着工作角色的转变，下图为基于 Figma 所构建的组件库演示，多人协作可快速构建页面，并且构建出的新页面可以进行主题拓展。
—
1. 为什么要做组件化？
—
2. 组件库的构建要素
2.1 组件框架思路
2.1.1 Token
Design Token 是构建和维护设计系统所需的参数和代号，包含间距、颜色、版式、字体样式、动画参数等。
如图所示，将颜色先赋予一个 Global Token，再带入 Global Token 的属性进行别称命名，例如加上前缀 Primary，则代表此颜色被定义为主色，以此类推。
2.1.2 Assets
Assets 库目前在使用中的效果是通过单个元素即可拓展其他内容，具有超全面的覆盖性，调用素材的便捷性，以及工程化作为基点。在此库中，所有元素的命名均需要与前端保持一致，或使用标签标注清晰。
2.1.3 Components
Components 是所有组件的集合，是整个组件系统的核心部分，此库中的所有组件都是通过 Atoms 构建完成，组件的构建结构也需要与前端的构建概念保持一致，这是优质组件库所应具备的基本准则。
2.1.4 other
一个成熟的产品，是少不了 Buff 加持的，这些库可以让你的搬砖效率大大提高。Tips 库可以为一些特殊标注和设计说明提供快捷样式，保证设计稿的整洁性，拯救强迫症；illustration 库可以将产品中的插画素材进行整合，方便效果调试和插画统一；Style 库包含了通用的设计规范，让不便在组件中表现的无形规则得到落地，方便与设计上下游（产品与研发）沟通。
不同的库都有各自的职责所在，但同时也拥有一个共同特点“工程化”，这也是使用figma作为设计工具的组件库比较具有优势的一点。而且如果合理的运用插件，也会让整个组件系统在与前端的合作上更加流畅。下图为各个库所承载的部分内容。
当设计师接到产品需求时，首先要对需求内的不同样式进行评估，针对每一个新出现的设计结构，我们需要进行至少三步思考；
当设计师接到产品需求时，首先要对需求内的不同样式进行评估，针对每一个新出现的设计结构，我们需要进行至少三步思考；
2.2.2 组件分类与命名
在构建组件的过程中，针对不同的组件，如何进行分类和命名也有比较大的考虑，首先要能分清不同的组件是属于什么类别，通过团队内部的整理归纳，我们将组件大致分为四个小类。
原生组件：顾名思义就是系统本身自带的组件类型，例如按钮、导航、弹窗等；
扩展组件：在原生组件基础，进行功能扩展，例如在导航栏上加下拉操作，在弹窗中加操作项等；
封装组件：是指对产品中重复出现的模块，或者一系列类型页面进行组合封装的组件；如下图所示，将多个组件封装组合在一起做成特定功能的组件就叫做封装组件。例如图片查看器、打赏系统内的动画组件、自定义表情包上都进行了组件封装。
2.3 Token的构建思路
以上给大家介绍了组件的框架和组件化思维，下面可以重点介绍一下 Token 库的构建思路。
2.3.1 使用标签分类法进行颜色命名
所谓标签分类法就是将颜色的主标签通过特定概念进行类别划分；
在做 Token 的时候不仅仅要考虑当前默认主题下的使用，还要考虑在 Dark Mode 以及做不同主题下的拓展，我们对不同标签下的颜色的映射关系又进行了重新划分，可以分为三类；
下图为当前起点读书在使用的颜色Token及不同主题下的映射关系。
2.3.2 栅格系统的运用
栅格系统的运用也是组件环节里不可或缺的一部分，很少有产品能够完全按照固定的栅格系统进行设计的，尤其是对于复杂产品来说，就更难去统一完整的栅格系统了。因此我们所说的栅格系统是需要精简的，至于精简到什么地步就看各自产品的复杂程度了，但是不管如何运用，还是需要坚持以下几个原则；
通过栅格化构建的组件库，既可以在当前产品内达到内循环，也可以将集团内部的多个产品进行规范整合，达到跨产品线统一，同时也能够快速孵化新产品。
2.3.3 2倍原则
顾名思义，在使用数字（间距、字号等）上，遵循着2的倍数原则，间距上使用2、4、8、12、16等标准间距，同时在字体的布局上也使用了了这一概念。
例如在设计 Text View 时，设计师关注的往往是两个文字间的物理间距，而在前端的概念里，Text View 是有自己的默认高度的，这个默认高度并不等于字号的大小，因此如果只定义文字大小，而不去定义 Text View 的高度，就会出现研发实现的效果与设计效果偏差过大的情况。
为了解决这一问题，我们与研发进行深度讨论合作，制定了这样一条规则（文本框高度=[(字号+4/8/12)x行数]），通过规范化处理后的 Text View 在设计稿上的表现对前端来说就是所见即所得了。
—
3. 组件化思维的业务转变
3.1 展示程序的构建思路
将设计组件库通过代码表现出来，这是我们起初的想法。随着这个想法的加深，我们将可使用、可操作、可查看兼具拓展性与原本的构建思路结合，就产生了现在的「QD展示程序」这个组件展示平台。
3.2 展示程序的功能
这套展示程序不单单只是一套展示系统，它既可以进行组件的展示与构建，还可以用作技术测试，以及组件的直接调用。
3.3 展示程序的能力拓展
—
4.小结
应用组件化思维，我们通过点滴改变产品现状，影响团队变化，不断提升设计影响力的过程；
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
