任何一个成熟的领域，都有一个特点，就是完善和专业。所以，你与优秀设计师之间就差一个属于自己的组件库。

因为一个有效的组件库，可以帮助设计师和研发提高工作效率，提升设计专业度的同时让产品本身的体验更加一致、可学，品牌感更强，它所具备的基本特征一定是通用的、灵活的、复用的。

前言

01

做好一件事：做好组件，输出优秀的 UI 界面，让你从视觉美化者进阶为真正的 UI 设计师。

组件库的优点

02

我们设计师，现在就要做得的就是设计规范：组件本身的设计和使用方式就可以直接作为交互和视觉规范的一部分，按照统一的设计规范来确定需要使用的主题色、组件样式、组合方式及页面结构，可以快速搭建出一个或多个产品的交互框架。

一个完善的组件库必须具备这几个优点：

通用性：意味着足够基础和常见且不带业务属性，参与设计环节的每个人都应该知道这个组件的功能及目的，同时具备一定扩展性。

灵活性：要求元件的组合需灵活，可以在不同场景下通过互相组合来快速搭建交互框架原型图，并根据不同页面结构的演变来适应新的业务需求。

复用性：指的是适用于多个业务或产品，在设计过程和研发过程中都可以高频复用。

组件分类

03

需要遍历自己所负责产品内已有的业务场景，提取并整理业务场景中所用到的组件，保留高频通用的部分。

对于竞品UI组件库也要研究，学习它的优点，然后归纳至自己的库中。

最后对组件进行分类：基础组件、导航、数据录入、数据展示、操作反馈。

组件库设计示例

04

「导航组件」使用示例：

「表格组件」使用示例：

「弹窗组件」使用示例：

「步骤组件」使用示例：

组件库最大的价值在于提升整个团队的产研效率，使设计质量得以保障的同时，提升产品整体的用户体验。

再啰嗦一句：组件库并不是构建完就结束了，是需要在后续项目中逐步维护与更新的长期积累过程。