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