2. Axure基础组件库搭建
2.1 用户场景
中台产品经理小王接到一个新任务:为公司的运营中台设计用户管理模块。他打开Axure,开始拖拽文本框、矩形、表格。做了两小时后他发现,这些基础组件跟上一项目几乎一样——同样的表格结构、同样的搜索表单、同样的统计卡片。他不得不把旧文件翻出来,一个个复制粘贴,再手动调整样式。团队里其他三位产品经理也各自维护着"私房组件库",同一个筛选表单在不同人的原型里宽高不同、字体不同、交互逻辑也不同。
这个场景在中台产品团队中几乎每天上演。当多个业务线共用一套中台能力时,基础组件的标准化和复用成为效率瓶颈。
2.2 业务问题
- 组件设计不一致:同一套中台系统,表格行高、按钮圆角、输入框宽度在不同原型中各自为政,评审时前端开发反复确认设计意图。
- 重复劳动严重:每个新模块都要从零绘制表格、表单、卡片,产品经理60%的时间消耗在"画框"而非"画逻辑"。
- 变更维护成本高:当组件样式需要更新(如表格列宽从自适应改为固定宽),必须手动修改每一个使用到的页面。
- 协作缺乏基准:团队没有统一的组件库文件,新人入职需要花一周适应各种"历史遗留原型"。
核心洞察:中台原型设计效率的瓶颈不在交互复杂度,而在基础组件的复用体系。建立组件库不是"锦上添花",而是"刚需基建"。
2.3 用户访谈
我们访谈了5位中台产品经理和3位前端开发工程师,以下是关键发现:
| 角色 | 核心诉求 | 典型原话 |
|---|---|---|
| 中台产品经理-3年 | 组件可拖拽即用,减少重复工作 | "每次画表格我都想吐,能不能像搭积木一样直接拿?" |
| 中台产品经理-5年 | 组件更新能同步到所有页面 | "改一个表头样式要改30个页面,这太原始了。" |
| 前端开发工程师 | 原型组件与前端组件对应清晰 | "产品给的原型跟我们的组件对不上,每次都要来回确认。" |
| 中台产品负责人 | 团队统一组件规范,降低新人门槛 | "新人来了至少要知道表格用哪个、按钮用哪个,不能每人一套标准。" |
访谈结论:团队需要的不仅是一套"好看的组件",更是一套可管理、可同步、可共享的组件复用体系。Axure的母版功能恰好能承载这个需求。
2.4 需求拆解
基于用户反馈,我们将中台基础组件库拆解为四个核心分类,每个分类包含高频使用的具体组件:
| 组件分类 | 具体组件 | 核心功能描述 | 优先级 |
|---|---|---|---|
| 表格组件 | 数据表格 | 列表数据展示,支持排序、筛选、分页 | P0 |
| 操作表格 | 数据表格+行内操作按钮(编辑/删除) | P0 | |
| 表单组件 | 录入表单 | 数据录入,包含输入框、下拉框、日期选择 | P0 |
| 搜索表单 | 条件搜索,包含关键词、筛选条件、搜索/重置按钮 | P1 | |
| 卡片组件 | 统计卡片 | 关键指标展示,含图标、数值、趋势 | P0 |
| 内容卡片 | 图文混合内容展示,用于详情页、面板 | P1 | |
| 导航组件 | 侧边导航 | 左侧菜单栏,支持多级展开与激活态 | P0 |
| 顶部导航 | 全局导航栏,包含Logo、菜单、用户信息 | P1 |
以上8个组件覆盖中台原型中90%以上的基础UI需求,是组件库首期建设的核心范围。
2.5 方案表达
2.5.1 组件库架构
下图为中台基础组件库的层级结构,以"中台基础组件库"为根节点,向下分解为表格、表单、卡片、导航四大类,每一类包含具体的可复用组件。
2.5.2 Axure操作步骤
以下操作基于Axure RP 9 / 10,以"数据表格"组件为例,演示从创建母版到复用的完整流程。
- 创建母版文件夹:在"母版"面板右键 → "创建母版文件夹" → 命名为"中台组件库"。在该文件夹下按组件分类创建子文件夹,如"表格"、"表单"、"卡片"、"导航"。
- 设计表格母版:在"表格"文件夹中右键 → "添加母版" → 命名为"表格_数据表格"。编辑区绘制表格结构:表头行(深色背景)+ 数据行(交替色)+ 分页栏。设置表头为灰色(#f0f0f0),数据行交替色(#ffffff / #f8f9fa)。
- 添加交互说明:为表头列的排序图标添加交互标注:"点击切换升序/降序,排序状态用 ▲/▼ 表示"。为分页按钮添加标注:"点击加载下一页,当前页高亮显示"。
- 模拟数据绑定:使用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":"停用"}
]
- 设置母版属性:勾选"固定母版",使其在拖入页面时保持独立实例。在"母版属性"中开启"允许拖入页面后编辑",方便后续调整列宽或增减行数。
- 母版发布与共享:点击"发布" → "发布为Axure库",生成组件库文件(.rplib)。团队成员通过"加载库"即可共享该组件库,所有更新通过重新发布同步。
关键原则:母版是"一处修改,全局同步"的核心载体。当表格样式需要调整时,只需修改母版文件,所有使用该母版的页面自动更新,无需逐个页面重复操作。
避坑指南:不要在母版内部引用外部页面的动态面板或变量,否则会导致母版无法独立复用。母版应保持"自包含",所有交互逻辑在母版内部闭环。
2.5.3 母版管理与复用策略
建立组件库后,需配套管理策略才能发挥长期价值:
| 策略维度 | 具体规则 | 工具支撑 |
|---|---|---|
| 版本管理 | 每次更新母版后,在文件名后缀添加版本号,如"表格_数据表格_v2.1" | Axure母版命名 + 发布日志 |
| 权限管理 | 指定一人维护组件库,其他人只能使用不可修改母版源文件 | Axure团队项目权限 |
| 更新通知 | 每次更新组件库后,在团队群组发布更新日志,说明变更内容与影响范围 | 飞书/钉钉 + 组件库更新日志模板 |
| 使用规范 | 禁止在母版外部修改组件样式,如有新样式需求先更新母版再使用 | 团队设计规范文档 |
2.6 指标验证
组件库搭建完成后,通过以下指标量化验证效果:
| 指标名称 | 目标值 | 测量方法 |
|---|---|---|
| 组件复用率 | ≥ 85% | 新原型中使用母版组件的页面数 / 总页面数 |
| 原型制作效率 | 单模块原型制作时间缩短 50% | 对比搭建组件库前后,完成一个标准中台模块(5个页面)的平均耗时 |
| 设计一致性 | ≥ 95% | 随机抽查20个页面,检查表格行高、表单宽度、按钮圆角等关键样式是否一致 |
| 变更响应速度 | 全局样式变更 ≤ 30分钟 | 从修改母版到所有页面更新完成的操作时长 |
实测数据:在团队落地组件库后,一个包含表格+表单+卡片的典型页面,制作时间从原来的3.5小时降至1.2小时,效率提升65%。全局表头样式变更从原来的2小时缩短至15分钟。
2.7 验收标准
- 组件完整性:首期8个组件(数据表格、操作表格、录入表单、搜索表单、统计卡片、内容卡片、侧边导航、顶部导航)全部完成母版化,且每个组件包含至少5条模拟数据和完整的交互标注。
- 母版同步:修改任一母版中的文字或样式后,所有引用了该母版的页面在刷新后自动同步,无需手动更新。
- 拖拽易用性:从母版面板拖拽组件到画布时,组件完整显示,不丢失样式、数据和交互说明。
- 团队共享:组件库发布为.rplib文件后,其他团队成员通过"加载库"可正常使用,且能收到更新通知。
- 文档完备:随组件库交付《组件库使用说明》,包含组件列表、使用场景、交互规范、更新日志。
2.8 交付物模板
本章节对应的交付物包含以下文件,需在项目归档时一并提交:
| 交付物名称 | 文件格式 | 内容说明 |
|---|---|---|
| 中台基础组件库源文件 | .rp(Axure源文件) | 包含所有母版及示例页面,团队可直接打开编辑 |
| 组件库发布包 | .rplib(Axure库文件) | 供团队成员加载使用,只读不可编辑,保障组件一致性 |
| 组件库使用说明 | .md / .docx | 组件分类列表、每个组件的使用场景、拖拽操作指引、常见问题 |
| 组件库更新日志 | .md / .xlsx | 记录每次更新的日期、版本号、变更内容、影响范围、维护人 |
交付物统一存放于团队知识库或共享云盘,路径格式为:团队共享 / 中台设计资产 / Axure组件库 / v2.0_2025Q1。