UI组件是什么？设计师如何从0搭建UI组件库？

做同一个项目，界面A的主按钮高40px，界面B变成44px；这个弹窗圆角8px，另一个弹窗又成了12px……更麻烦的是，这些差异往往要到设计评审甚至开发验收时才被发现。

而开发需要为每一种细微差别单独写样式，最后线上产品越做越像由几个不同团队拼起来的。

UI组件库就是用来解决这类问题的。它把按钮、输入框、导航栏等高频界面元素做成可重复使用、统一维护的标准组件，让设计师不必每次从头画，也让团队对“这个控件应该长什么样、有哪些状态、什么时候使用”有一致答案。

不过，搭建组件库并不是把常用控件复制到一个页面就结束了。真正好用的UI组件库，还需要统一底层规则，处理尺寸和状态，建立清晰的命名方式，并持续维护。下面就从基本概念开始，讲清楚设计师如何从0完成这件事，并结合摹客3说明如何把组件与基础规范真正管理起来。

一、UI组件是什么？和组件库、设计系统有什么区别？

1、UI组件是什么？

UI组件是界面中能够重复使用的基本单元，例如按钮、输入框、复选框、标签、分页器、导航栏、弹窗和卡片。

一个真正可复用的组件，不只是一组外观相同的图层。它通常还应包含以下内容：

• 结构：组件由哪些元素构成，例如按钮包含容器、文字和可选图标；

• 样式：颜色、字号、间距、圆角、描边等视觉规则；

• 类型：例如主要按钮、次要按钮、文字按钮；

• 状态：默认、悬停、按下、禁用、加载中等；

• 行为：点击后如何反馈，内容变长时如何适应；

• 规则：在什么场景下使用，以及哪些用法应当避免。

因此，把一个矩形和一行文字组合起来，只能算画出了一个按钮；让它能够适应不同文案、切换不同状态，并遵循统一规则，才算做成了可以稳定复用的按钮组件。

2、UI组件库是什么？

UI组件库则是按照统一规则整理的一组可复用组件。它不是简单的素材仓库，而是一套可供团队反复调用和集中维护的界面资产。

根据复杂程度，组件通常可以分为三类：

• 基础组件：按钮、图标、输入框、开关、标签等最小可复用单元；

• 复合组件：由多个基础组件组合而成，例如搜索框、日期选择器、导航栏和数据卡片；

• 业务组件：与具体产品场景相关，例如订单信息卡、审批流程节点和会员权益模块。

基础组件适用范围最广，应优先统一；业务组件复用范围较小，可以随着项目推进逐渐补充。这样比一开始就试图覆盖全部业务更容易落地。

3、UI组件库不等于设计系统<