本文从组件分类、命名、上传、设计评审等关键点梳理了如何构建组件库。

1、建立元件库有什么好处？

让设计更高效，开发更快速，产品体验更一致。很多大公司也做了自己的组件库，比如Ant等。成熟的组件库确实让产品体验更好，团队效率更高。如果你也想开始为你的产品搭建自己的组件库，希望本文能帮到你。

2.什么样的模块可以成为组件？

复用：如果一个模块需要复用，那么可以认为是一个组件，比如Bar，Tab等。

3.如何建立组件库？ 1.对所有组件进行分类

参考Ant的分类方式，如果你的开发采用了Ant组件库的话，这种分类方式对开发者来说也是非常友好的。

如果事先理清了所有的类别，后续组件的命名过程就会更加清晰。

（一开始没有理清思路，导致很多组件命名不清不得不重来，这些都是我含泪帮你们踩过的坑）

Ant 包含了基本的通用组件，不同的产品组件比较多sketch怎么安装，需要根据功能进行分类，例如可以参考 Ant 的 7 个基本类别。

1.1

大致可以分为3类，如图：

图标＆

1.2 导航

分类规则：为了给用户提供浏览内容的导航选择，我们可以将其归类到Nav类别中。

1.3

分类规则：用户对组件进行操作，改变或者更新产品内容。

1.4

分类规则：该组件仅具有显示功能。

1.5

分类规则：对用户操作之后给予反馈的组件，主要是一些模态/非模态弹窗。

1.6 盒子

分类规则：组成以上组件的最基础的组件，包括一些线段，阴影，圆角和方角卡片等。

1.7 图标

分类规则：产品内所有图标均可归入此分类。

2. 组件命名

参考Ant的命名方式：为你的所有产品命名。最好与开发人员讨论这个过程，看看他们的命名偏好是什么。这将使他们后续的开发过程更加容易，其他团队成员也更容易找到相应的组件。

命名规则：类别/组件名称/级别/大小/样式/状态

例如 /.Item/Main/Large/Text/

名词分析：

注意：所有名字都是英文的，首字母大写。中文名字对开发来说毫无意义，是时候重新学习英文了

（Ant的命名中，会在类别前加上数字，以便你自己的组件库分类更加清晰，这个就看个人喜好了。）

在命名部分sketch怎么安装，开发人员只需要考虑组件名称和状态，因此最好提前与开发人员讨论你的命名约定。

3. 组件上传

这里推荐一款国外的软件，还有在线版，这个软件很好用，除了收费和响应慢，没什么缺点，其实如果下载客户端的话，响应速度也在可以接受的范围内，这个部分组件真的很友好。

以下是链接

下载插件，安装，选择组件，点击上传到组件库。

在设计稿中，如果你的设计稿使用了该元件，该元件将会显示在设计稿上，并可以链接到元件库中。如图：

你还可以在设计规范中上传颜色和文字。当你的设计稿使用超出你规范的颜色或文字时，它会自动提醒你是否需要将它们添加到设计规范中。这实际上可以帮助设计师检查设计稿中的颜色或文字是否有错误。我真的很喜欢这个功能。

注意：免费版每人只能建立一个项目，并且只能上传99个组件。

4. 设计演练

在绘制过程中，不同的页面可能会用到相同的基础组件，但是布局会有所不同，因此建立组件库，进行设计变体，可以保证设计稿的一致性。

终于

搭建组件库是一个漫长的过程，但一旦搭建成功，会帮我们省去很多重复设计的时间，让我们更专注于产品的用户体验。本文只是跟大家分享一些我个人搭建组件库的经验，大家有什么建议可以相互交流，希望对大家有所帮助。

如有侵权请联系删除！