从22年发布「图表组件」开始，我陆陆续续收到了很多小伙伴的正向反馈。
刚好这个月我也发了新的「业务组件库」，所以想就着这次项目经验，给大家分享一下我搭建整个组件库的思路和过程，也为有想要搭建个人组件库的同学们提供一些参考。同时，文章中也为大家罗列了很多我在搭建组件库时阅读的参考文章链接。
本篇文章没有专业的方法论，也不是教大家如何去搭建企业级的组件库，而是一些自己踩过坑的“土方法”，来告诉大家如何从设计师自身出发去建立一套属于自己的、“独立行走的”组件库。
这里的组件库，并不是指figma中创建的变体组件，更像是一个素材库。
全篇大白话，对于刚刚接触UI设计的小伙伴也可以看懂并轻松上手，不要紧张。
通过4个简单易懂的场景作为切入点，来为大家提供思路：
需要精细调整和排版的页面，比如表格、日程安排或甘特图等。这些页面实现起来难度并不高，但它们繁琐、枯燥，且极其耗时。
我们也可以去Figma资源社区寻找现成的素材来快速拼凑。但是往往下载下来的素材，也需要花费额外的时间去跟根据自己的业务和规范进行调整，最终可能还不如从头开始自己制作来得高效。
因此，针对这种场景下的内容，我就会把它实现并归类到组件库。
如果有些小伙伴公司的业务内容比较相似或者工作久了，大家一定能懂我这个标题的意思，我们可将工作中重复造轮子的内容抽离出来，做出标准化的模版。
总结的方法：大家可以将页面贴到一起，把重复的部分切出来，概括包含哪些元素，然后针对这些元素去做标准化模版。
如何做好B端体验标准化？用阿里的数据可视化案例教你！
本条和上一条有相似之处，但我单拎出来，是因为对于很多本身工作内容过于垂直的同学来说，（比如我，会做很多财务相关的数据看板或者工作台，很少做表单类的页面。但是作为一个要在行业内生存的设计师，只做这两块肯定不够，要放在整个行业去做一些通用的组件）。
如果一些小伙伴还不太了解都有哪些业务场景的话也没关系，我以
表单
为例，为大家提供3种方法：
网站设计图：
大家去设计网站（花瓣、站酷等），搜索关键词“表
相关文章：
站在巨人的肩膀上，有很多设计师已经总结好了相关专题的文章。
产品体验：
在前两个方法中，一定会有很多产品图，我们可以挑选一些去注册体验。
一些需要卷视觉的页面，以b端为例，比如登录页的配图、首页可能会有banner、以及一些图标、甚至说一些3D场景，这些如果在一个时间紧凑的项目期，我们是没有足够的时间花在这上面的。所以需要抽其他时间做些素材积累。（注意这里的积累，不是只做一个两个，而是尽可能的丰富）
对于需要卷视觉的内容，因为我本身不是科班出身，所以这里我给大家推荐两种土方法：
1.专项临摹：
我们可以在设计网站上搜索相关类型的优质页面，进行临摹。将这些临摹的素材用在工作中，可以是样式临摹、可以是布局参考。
2.善用AI：
不知道大家有没有看过我分享的几篇关于Midjourney的笔记，当作学习，我会把平常不容易做的设计，通过AI生成，比如：渐变背景、登录页的配图。
知识点补充： 既然讲到midjourney，之前也有小伙伴咨询过我，这里给大家分享一下我用它生图的基本步骤：
公司自有：如果公司本身有一套样式规范和组件库，那我们可以在这个基础上做拓展
开源通用：公司没有规范的话，我们也可以选用开源的规范，比如我的组件库是引用的arco
1.软件：
做ui的工具很多，mastergo、即时设计、figma、或者Axure,大家选择自己熟悉的即可。figma文件可以导入到mastergo、即时设计。通过插件也可以导出到Axure。
2.Figma插件：
这里给大家推荐几个我在做组件时用到的插件。
组件库是一个持续积累的过程，建议大家在做的过程中做好版本管理，每一个阶段都参考资料都可以存为历史版本。
因为我的业务组件库分为了工作台组件和b端通用组件，而这两类之间有较大的差异，所以我分开讲：
首先我们需要先知道工作台组件都包含哪些大类，以及每种类型下包含哪些子类，这里我为大家总结3种渠道：他们已经对工作台有了完整的总结，我们只需要提炼出我们自己需要的类型就可以了。
这些产品，会将工作台归纳出组件，而针对这些组件用户可以自定义。那么这些已经归纳好的类型以及可以自定义的属性，我们都可以参考。以飞书和钉钉为例：
大家去设计网站，搜索关键词“工作台”，去挑选一些
相对落地（最好是已经上线的产品）
的界面，将每个界面的模块截图，归纳相似类型。这一步也可以为我们之后设计组件时提供参考。
总结：这一步我确定了工作台组件库的分类及每类包含的大致内容。
上一步确认了工作台组件库的分类后，我们针对每一类进行元素梳理，以
个人信息
为例：
元素梳理过后，我们也可以对元素间的布局进行举例，以
数据分析
为例：
根据我们基础准备阶段选择的样式（公司自有、开源系统），对上一步梳理好的草稿调整样式规范。包含字体样式、字号、颜色、间距、圆角等。
🚩这一步很重要，因为我们的组件要拼接到页面中使用，并根据栅格和实际字段，宽度会有所不同，所以组件的自适应很重要。
我在给小伙伴做组件库校验的时候，发现很多组件会忘记做自动布局，这边
建议每做完一个卡片后，都顺手通过以下两点，来顺手校验自动布局问题：
修改字段长度，考虑字段超长、上下排列对齐时字段长短不一等；
同时，我发布过一篇关于figma自动布局举例的笔记，大家可以看一下，会更清楚的理解。
在这一步，我们可以尽可能去丰富卡片的视觉效果，比如通过增加渐变、背景图等。
这点类似于第一章中提到的「1.4特殊且需要耗时的视觉设计」，我们在做组件库时做好可以直接应用的效果。
在上一步中，我们可能会犯一个错误，比如下图中：个人信息卡片的颜色过重（即使在右下角，但第一眼看到的可是那一条蓝色横幅），但因为
工作台组件是拼接到一个页面中使用
，所以要注意整体的视觉平衡，不要有过于突出的颜色。
在V1.0中包含了导航、表格、表单3种常见的组件类型。
工作台组件库每种类型比较独立，但这一部分的组件库相对复杂、设计知识点很多，所以在开始之前建议大家有一定的知识储备。这里给大家贴出了我在这一过程中，收集的一些相关资料。
实战攻略：B端销售系统（CRM）表格减负&提效设计秘诀
「Ant Design 4.0 探索专题」“表里不一”的设计资产
B端体验深耕-洞察用户诉求，打造心有灵犀的使用体验
https://www.uisdc.com/web-form-design
https://www.zcool.com.cn/article/ZMTIxMzA2OA==.html
同时，我也发布过两篇关于侧边导航的笔记，里面有更详细的分类，大家可以看一下：
根据上一步的文章阅读及设计参考，我们会对每个模块分别有什么内容有大致的概念，这一步就可以对模块的元素进行梳理。
根据上一步梳理的元素内容，我们需要为后期页面级的组件，搭建一些业务原子组件，注意这里文章第二部分的「原子库」不一样，是具有业务属性的原子组件。
这里以
表格
为例：我梳理出业务中常用的单元格数据，并将每一类数据列举出10行（表格有分页时通常为10行），每一行的数据都是真实的，这样后期在搭建页面级组件时，即可直接复制。
在上一步已经搭建好原子组件后，我们就可以根据参考资料和元素梳理的内容，来搭建页面。
整体规范与工作台组件一致，需要符合基础设计样式规范，这里我不再做过多讲解。
导航、表格、表单三类组件关于自动布局注意点各有不同：
对于标题在左侧的，因为标题字数不固定，这里对于原子组件宽度采用固定宽（可以自行调整）。
很多小伙伴，在做组件库的时候，很容易犯的一个错误就是，想太多，一开始就想做的很全面，恨不得考虑到所有场景，结果越想越多，越做越复杂，就做不下去了。
