COURSE 12 · 组件库

网页组件库搭建

共 7 章节 约 112 分钟 高阶

当页面越来越多,没有组件库就会陷入"每个页面都在重复造轮子"的泥潭。本课从原子设计思想出发,带你分层搭建按钮、表单、卡片、导航等核心组件,沉淀组件文档与版本管理,最终向完整的设计系统演进,让团队协作与开发对接都更高效。

网页组件库搭建教学课程封面
CHAPTERS

课程章节目录

七个章节从原子到系统,带你搭出真正可复用的组件库资产。

01

为什么需要组件库

从"重复造轮子"的痛点出发,理解组件库在一致性、效率、协作上的价值,明确搭建目标。

15 分钟入门
02

组件分层:原子、分子、模板

用原子设计思想给组件分层,从最小元素到页面模板逐级组合,建立清晰的组件组织结构。

16 分钟中级
03

按钮与表单组件规范

按钮的类型、尺寸、状态规范,输入框、选择器、开关等表单组件的统一定义与交互细节。

16 分钟中级
04

卡片、列表、表格组件

信息展示类组件的规范设计:卡片的结构与留白、列表的密度、表格的对齐与可读性。

16 分钟进阶
05

导航与弹层组件

顶部导航、面包屑、分页等导航组件,以及弹窗、抽屉、下拉等弹层组件的设计与触发规范。

16 分钟进阶
06

组件文档与版本管理

给每个组件写清楚用法、属性、状态说明,并用版本号管理迭代,让组件库真正可维护可协作。

16 分钟高阶
07

组件库到设计系统的演进

组件库 + 设计令牌 + 规范文档 = 设计系统。学习如何把组件库升级为驱动全局一致的设计系统。

17 分钟高阶

动手之前,先用原型验证想法

原型设计课程,帮你低成本快速试错