从零搭建组件库的完整指南之规划篇

搭建组件库不要上来就画按钮。先做好规划，后面才不会乱。 📌 第一步：明确目标 这套组件库给谁用？设计师、开发、还是都用？ 覆盖哪些业务？所有产品线还是单个产品？ 基于什么设计系统？自建还是基于 Ant Design 等开源方案定制？ 📌 第二步：盘点需求 梳理产品中已有的所有组件类型。 记录哪些组件复用率最高、哪些设计不统一需要规范化。 📌 第三步：确定架构 一般分为 3 层： 基础层（Foundation） 颜色、字体、间距、圆角、阴影、图标。 这些是 Design Token，是所有组件的底层依赖。 基础组件层（Basic Components） 按钮、输入框、选择器、开关、标签、徽标、提示…… 通用的、和业务无关的基础控件。 业务组件层（Business Components） 搜索筛选条、数据表格、审批卡片…… 和特定业务逻辑绑定的复合组件。 📌 第四步：制定命名规范 组件和变体的命名要统一。 比如：Button / Primary / Large / Default。 💡 规划做好了，后面搭建才会快、改起来也方便。 📚下面这份《UIUX 学习指南》，是我花 1 年时间整理，萃取苹果、谷歌等大厂设计智慧搭建而成的： • 体系完整又系统，从视觉、交互到用研、产品，覆盖 UI/UX 全链路 • 不管是零基础入门、中级进阶还是冲资深，都能精准适配 • 每天花 5～10 分钟，就能稳步搭建起专业认知框架 👇文末加入「UIUX 学习指南」，每天 5～10 分钟，坚持学习。 你会发现，焦虑、迷茫会被“坚实的确定性”挤走，你重新认识了自己和设计。