第2章 Axure基础组件库搭建：中台常用组件与母版管理

2.1 用户场景

中台产品经理小王接到一个新任务：为公司的运营中台设计用户管理模块。他打开Axure，开始拖拽文本框、矩形、表格。做了两小时后他发现，这些基础组件跟上一项目几乎一样——同样的表格结构、同样的搜索表单、同样的统计卡片。他不得不把旧文件翻出来，一个个复制粘贴，再手动调整样式。团队里其他三位产品经理也各自维护着"私房组件库"，同一个筛选表单在不同人的原型里宽高不同、字体不同、交互逻辑也不同。

这个场景在中台产品团队中几乎每天上演。当多个业务线共用一套中台能力时，基础组件的标准化和复用成为效率瓶颈。

2.2 业务问题

• 组件设计不一致：同一套中台系统，表格行高、按钮圆角、输入框宽度在不同原型中各自为政，评审时前端开发反复确认设计意图。
• 重复劳动严重：每个新模块都要从零绘制表格、表单、卡片，产品经理60%的时间消耗在"画框"而非"画逻辑"。
• 变更维护成本高：当组件样式需要更新（如表格列宽从自适应改为固定宽），必须手动修改每一个使用到的页面。
• 协作缺乏基准：团队没有统一的组件库文件，新人入职需要花一周适应各种"历史遗留原型"。

2.3 用户访谈

我们访谈了5位中台产品经理和3位前端开发工程师，以下是关键发现：

访谈结论：团队需要的不仅是一套"好看的组件"，更是一套可管理、可同步、可共享的组件复用体系。Axure的母版功能恰好能承载这个需求。

2.4 需求拆解

基于用户反馈，我们将中台基础组件库拆解为四个核心分类，每个分类包含高频使用的具体组件：

以上8个组件覆盖中台原型中90%以上的基础UI需求，是组件库首期建设的核心范围。

2.5 方案表达

2.5.1 组件库架构

下图为中台基础组件库的层级结构，以"中台基础组件库"为根节点，向下分解为表格、表单、卡片、导航四大类，每一类包含具体的可复用组件。

2.5.2 Axure操作步骤

以下操作基于Axure RP 9 / 10，以"数据表格"组件为例，演示从创建母版到复用的完整流程。

1. 创建母版文件夹：在"母版"面板右键 → "创建母版文件夹" → 命名为"中台组件库"。在该文件夹下按组件分类创建子文件夹，如"表格"、"表单"、"卡片"、"导航"。
2. 设计表格母版：在"表格"文件夹中右键 → "添加母版" → 命名为"表格_数据表格"。编辑区绘制表格结构：表头行（深色背景）+ 数据行（交替色）+ 分页栏。设置表头为灰色(#f0f0f0)，数据行交替色(#ffffff / #f8f9fa)。
3. 添加交互说明：为表头列的排序图标添加交互标注："点击切换升序/降序，排序状态用 ▲/▼ 表示"。为分页按钮添加标注："点击加载下一页，当前页高亮显示"。
4. 模拟数据绑定：使用Axure的"中继器"功能，在表格母版中插入中继器，添加列字段（name、email、role、status），加载5条示例JSON数据：

[
  {"name":"张三","email":"zhangsan@xx.com","role":"管理员","status":"启用"},
  {"name":"李四","email":"lisi@xx.com","role":"编辑","status":"启用"},
  {"name":"王五","email":"wangwu@xx.com","role":"访客","status":"停用"},
  {"name":"赵六","email":"zhaoliu@xx.com","role":"编辑","status":"启用"},
  {"name":"陈七","email":"chenqi@xx.com","role":"管理员","status":"停用"}
]

5. 设置母版属性：勾选"固定母版"，使其在拖入页面时保持独立实例。在"母版属性"中开启"允许拖入页面后编辑"，方便后续调整列宽或增减行数。
6. 母版发布与共享：点击"发布" → "发布为Axure库"，生成组件库文件(.rplib)。团队成员通过"加载库"即可共享该组件库，所有更新通过重新发布同步。

2.5.3 母版管理与复用策略

建立组件库后，需配套管理策略才能发挥长期价值：

2.6 指标验证

组件库搭建完成后，通过以下指标量化验证效果：

2.7 验收标准

• 组件完整性：首期8个组件（数据表格、操作表格、录入表单、搜索表单、统计卡片、内容卡片、侧边导航、顶部导航）全部完成母版化，且每个组件包含至少5条模拟数据和完整的交互标注。
• 母版同步：修改任一母版中的文字或样式后，所有引用了该母版的页面在刷新后自动同步，无需手动更新。
• 拖拽易用性：从母版面板拖拽组件到画布时，组件完整显示，不丢失样式、数据和交互说明。
• 团队共享：组件库发布为.rplib文件后，其他团队成员通过"加载库"可正常使用，且能收到更新通知。
• 文档完备：随组件库交付《组件库使用说明》，包含组件列表、使用场景、交互规范、更新日志。

2.8 交付物模板

本章节对应的交付物包含以下文件，需在项目归档时一并提交：

交付物统一存放于团队知识库或共享云盘，路径格式为：团队共享 / 中台设计资产 / Axure组件库 / v2.0_2025Q1。