简介这是一套面向产品经理、交互设计师及Axure初学者的CRM中台系统原型模板聚焦企业级客户关系管理场景解决系统类产品原型设计效率低、组件复用性差、中后台框架不统一等实际问题。资源共69个文件包含27张界面示意图png、6个核心Axure源文件rp、4套字体图标资源otf/woff2/ttf/eot、4份Excel业务模板如客户导入、需求管理、4个SVG图标及4个Visio流程图vsdx整体包体34.58MB结构清晰、模块可拆解复用。已有615人学习下载适用于快速搭建CRM类系统原型或作为中后台设计规范学习范本。用户可直接调用已梳理的通用组件库、4套登录与框架方案结合流程图客户流转、系统工作流与全局规则表高效完成定制化设计所有rp文件支持二次编辑配套使用说明与字体方案确保开箱即用。1. 这不是“画页面”的模板而是中后台产品设计的标准化工作流起点很多刚接手 CRM 类项目的产品经理第一反应是打开 Axure 拉几个矩形、写几行文字再加点交互——结果两周后发现审批流程逻辑对不上业务方说的规则工单状态跳转漏了异常分支报表筛选条件和真实数据库字段不一致。这套 AxureUX 客户关系管理系统中台原型模板 v1.2本质是一套可执行的中后台设计契约它把「数据管理→审批触发→工单分派→服务闭环→统计归因」整条链路用 Axure 的动态面板、变量、条件逻辑和中继器全部具象化。你不是在画界面而是在用 Axure 编写一套轻量级业务规则引擎。模板里所有模块都预置了状态机如客户保护等级变更触发审批、权限隔离不同角色看到的菜单/按钮/字段不同、数据联动选择部门自动过滤下属人员列表这些不是装饰性交互而是可直接导出 HTML 并被开发团队当作接口契约参考的逻辑骨架。适合两类人一是需要快速交付合规中台原型的 B 端产品经理二是想系统掌握 Axure 处理复杂业务流能力的交互设计师——尤其当你面对的是银行、政务、制造类客户时这套模板里内置的「客户流转示意图」「需求管理列表模板Excel」「全局规则表」比任何 UI 组件库都更关键。2. 基于 Axure RP 9 的中台框架复用机制从系统框架模板到组件级继承2.1 四套系统框架模板的选型逻辑与切换路径模板包中包含系统框架模板方案1.rp至方案4.rp共四套独立文件每套对应一种典型的中后台架构范式方案1经典三栏布局左侧导航树 顶部功能区 主内容区适配强层级管理场景如集团多子公司架构其导航树支持三级折叠且每个菜单项绑定独立的「权限标识符」变量如var_role_dept_admin后续页面可通过[[LVAR.var_role_dept_admin true]]控制显隐方案2顶部 Tab 导航 左侧快捷操作面板侧重高频任务聚合如客服坐席台Tab 切换时自动加载对应中继器数据源避免页面跳转方案3卡片式仪表盘驱动入口适用于数据驱动型 CRM如销售漏斗看板所有卡片均绑定DataSource数据集支持按时间范围、部门、状态三重筛选方案4极简单页应用SPA风格无传统菜单通过顶部搜索框 动态面包屑导航定位功能适合 SaaS 化部署场景。提示不要直接修改.rp文件本身。正确做法是将选定方案拖入主项目AxureUX客户关系管理系统中台原型模板 v1.2.rp的「Pages」面板右键 →「Convert to Master」生成 Master 页面。后续所有子页面继承该 Master即可统一更新框架样式与逻辑。2.2 FontAwesome v5 Pro 图标系统的集成与参数化调用模板未使用 Axure 自带图标库而是完整嵌入 FontAwesome v5 Pro 字体文件含font-awesome-pro.woff2、CSS 文件及图标映射表。所有图标均通过「文本元件」「字体设置」实现而非图片插入——这意味着缩放不失真、颜色可全局替换、且支持状态切换如按钮悬停时图标旋转。2.2.1 图标调用标准语法与动态控制在任意文本元件中输入以下代码即可渲染图标i classfas fa-user-circle stylefont-size:16px;color:#333;/i其中fas表示 Solid 风格fa-user-circle是图标名称。关键参数说明font-size必须显式声明Axure 默认字号会覆盖图标比例color支持变量绑定例如[[LVAR.icon_color]]可在「全局变量」中定义icon_color #007bffstyle属性内可追加transform: rotate(90deg)实现旋转动画配合「鼠标悬停」交互事件。2.2.2 图标状态机实战工单优先级动态变色以工单列表中的「优先级图标」为例其交互逻辑如下中继器每行数据绑定字段priority_level值为low/medium/high文本元件内嵌 HTMLi classfas fa-exclamation-triangle stylecolor:[[ LVAR.priority_level low ? #6c757d : LVAR.priority_level medium ? #ffc107 : #dc3545 ]]; font-size:14px;/i当用户点击「升级优先级」按钮时触发动作Set Variable Value→priority_level high→Refresh Repeater。注意FontAwesome v5 Pro 的图标类名必须严格匹配官方文档如fa-exclamation-triangle不可写作fa-warning模板中所有图标均经font-awesome-pro.min.css校验若替换为社区版 Font Awesome 5 Free需同步修改 CSS 引用路径并剔除 Pro 专属图标如fa-chart-line在 Free 版中不存在。2.3 中继器Repeater在 CRM 数据流中的三层应用模式CRM 模块大量依赖中继器实现数据驱动界面但模板将其分为三个抽象层级避免重复配置应用层级典型场景数据源类型关键配置项基础层客户资料列表、工单列表Excel 导入09.客户资料导入模板.xlsx启用「分页」「排序」「搜索框绑定」列宽自适应启用Auto-fit columns业务层审批流程节点、营销活动计划手动录入数据集Data Set设置「条件显示」[[Item.Status pending]]控制行显隐「条件样式」[[Item.DaysLeft 3]]触发红色背景聚合层销售漏斗统计、部门绩效看板多源数据合并通过Add Row动作动态注入使用[[RepeaterName.Items.Count]]获取总数[[RepeaterName.Items.Sum(Amount)]]计算汇总值2.3.1 客户资料列表的 Excel 数据源绑定实操打开09.客户资料导入模板.xlsx确认首行为字段名customer_id,name,phone,status,last_contact_date在 Axure 中右键中继器 →「Import Data」→ 选择该 Excel 文件关键配置步骤勾选「Treat first row as column headers」在「Columns」选项卡中将status字段类型设为「Dropdown」选项值填入[active,inactive,pending]在「Filters」选项卡中添加筛选条件[[Item.status ! deleted]]排除软删除记录在「Pagination」选项卡中设置每页显示 10 行启用「Show page numbers」。2.3.2 审批流程节点的状态机联动审批模块的中继器不仅展示数据还承担状态流转控制每行数据绑定current_step当前步骤、next_step下一步骤、approver_role审批角色「通过」按钮动作链Set Variable Value → current_step next_step Set Variable Value → next_step [[GetNextStep(Item.next_step)]] Refresh Repeater其中GetNextStep()是自定义函数在「Functions」面板中定义根据next_step值返回下一环节 ID如step_3→step_4避免硬编码。3. CRM 核心模块的交互逻辑拆解从客户保护到工单闭环3.1 客户保护机制基于规则表的动态权限控制CRM 的核心风控点在于「客户保护」——防止销售私藏客户或跨区域抢单。模板将保护规则固化在01.AxureUX客户关系管理系统全局规则表.xlsx中该 Excel 被作为数据集导入 Axure并驱动以下逻辑3.1.1 保护等级与操作权限的实时映射规则表结构示例customer_typeprotection_daysallowed_actionsrestricted_rolesVIP90[view,edit,assign][sales_rep]Standard30[view][sales_rep,manager]在客户详情页通过以下表达式控制按钮显隐[[LVAR.customer_type VIP LVAR.user_role ! admin]] → 显示「解除保护」按钮 [[LVAR.protection_days 0 LVAR.days_since_protect LVAR.protection_days]] → 灰化「转移客户」按钮提示days_since_protect变量需在页面载入时通过Set Variable Value计算[[DateDiff(d, Item.protect_start_date, Now())]]确保时间逻辑准确。3.2 工单管理模块的状态流转引擎工单模块是 CRM 中状态最复杂的部分模板采用「状态图 条件跳转」双轨设计3.2.1 状态图可视化与交互映射04.工单处理流程图.png并非装饰图而是状态机的视觉对照表。每个状态节点如created→assigned→in_progress→resolved→closed均对应 Axure 中的「动态面板状态」且状态切换由按钮触发「分配给」按钮 → 执行Set Panel State→ 目标面板TicketStatus→ 状态assigned「开始处理」按钮 → 检查[[LVAR.current_status assigned]]→ 成立则跳转至in_progress状态。3.2.2 异常分支的兜底处理模板预置了三条异常路径避免状态死锁超时未响应当status assigned且now() - assign_time 24*60*60秒自动触发「重新分配」动作驳回后退回点击「驳回」按钮时弹出文本框要求填写原因提交后Set Variable Value → current_status created并清空assignee_id跨状态跳转限制禁止从resolved直接跳至closed必须经过verified状态通过「条件动作」强制校验[[LVAR.current_status resolved LVAR.verify_result passed]]。3.3 营销工具模块的数据联动设计营销模块强调「人群圈选 → 活动创建 → 效果追踪」闭环模板通过 Excel 模板与中继器联动实现3.3.1 人群包构建的 Excel 驱动逻辑07.需求管理列表模板示例.xlsx和08.迭代需求管理模板示例.xlsx提供标准字段segment_name人群包名称filter_conditionSQL-like 条件如age 25 AND city IN (北京,上海)target_count预估人数在 Axure 中中继器读取该 Excel 后用户点击某行时触发Set Variable Value → selected_segment Item.segment_name动态更新右侧「人群预览」中继器数据源为[[LVAR.selected_segment]]对应的子数据集「发送营销短信」按钮启用条件[[RepeaterName.Items.Count 0]]。3.3.2 营销效果看板的实时聚合效果看板使用「聚合层中继器」数据源为模拟的marketing_report.csv模板中已预置关键聚合公式点击率CTR[[RepeaterName.Items.Sum(clicks) / RepeaterName.Items.Sum(impressions) * 100]]%ROI[[RepeaterName.Items.Sum(revenue) - RepeaterName.Items.Sum(cost)]] / [[RepeaterName.Items.Sum(cost)]]4. 原型交付前的必检清单从 Axure RP 9 兼容性到 HTML 导出验证4.1 Axure RP 9 版本兼容性验证要点该模板基于 Axure RP 9.0.0.3701 构建若使用 RP 10 或更高版本需检查以下三项检查项RP 9 行为RP 10 风险点解决方案中继器分页控件自带「上一页/下一页」按钮RP 10 默认禁用分页按钮需手动勾选「Show pagination controls」打开中继器属性 →「Pagination」→ 勾选「Show navigation buttons」FontAwesome 字体引用通过link标签引入本地 CSSRP 10 的 HTML 导出可能忽略相对路径导致图标不显示将font-awesome-pro.min.css内容复制到 Axure 的「HTML 输出设置」→「Header HTML」中变量作用域LVAR局部变量与GVAR全局变量区分明确RP 10 对LVAR的生命周期管理更严格页面跳转后可能丢失关键变量如user_role,current_customer_id统一改用GVAR提示若团队使用 RP 9切勿升级至 RP 10 后直接打开.rp文件——Axure 会自动转换格式但部分条件逻辑如嵌套[[ ]]表达式可能被破坏。建议先备份原文件再在 RP 10 中新建项目逐页复制内容。4.2 HTML 导出后的功能性验证脚本导出 HTML 后需验证核心交互是否生效。以下 Bash 脚本可自动化检测需安装curl和jq#!/bin/bash # 验证工单状态跳转 echo 测试工单状态跳转 curl -s file://$(pwd)/output/index.html | grep -q assigned echo ✓ 工单初始状态正确 || echo ✗ 初始状态异常 # 验证中继器数据加载 echo 测试客户列表加载 if curl -s file://$(pwd)/output/index.html | grep -q 张三\|李四; then echo ✓ 客户数据成功渲染 else echo ✗ 客户列表为空请检查 Excel 数据源路径 fi # 验证 FontAwesome 图标 echo 测试图标加载 if curl -s file://$(pwd)/output/index.html | grep -q fa-user-circle; then echo ✓ FontAwesome 图标正常 else echo ✗ 图标未加载请检查 CSS 引用路径 fi运行后输出示例 测试工单状态跳转 ✓ 工单初始状态正确 测试客户列表加载 ✓ 客户数据成功渲染 测试图标加载 ✓ FontAwesome 图标正常4.3 开发交接文档的最小化生成策略向开发团队交付时避免只给.rp文件。必须附带三份轻量级文档接口契约表.xlsx从模板中提取所有中继器数据源字段标注字段名如customer_id类型String/Number/Date是否必填Yes/No示例值CUS2023001业务含义「客户唯一编码由CRM系统生成」交互逻辑速查表.md用表格列出关键交互点例如页面元件触发事件动作开发注意点工单详情页「通过」按钮点击跳转至resolved状态调用/api/tickets/{id}/approve需校验当前用户是否有审批权限字体与资源清单.txt明确声明FontAwesome v5 Pro 字体文件font-awesome-pro.woff2已内嵌 所有图标类名均来自 FontAwesome v5 Pro 官方文档 Excel 数据源路径./data/customers.xlsx交付时需提供实际数据文件交付包结构示例CRM_Template_Delivery/ ├── AxureUX_CRM_v1.2.rp ├── interface_contract.xlsx ├── interaction_cheatsheet.md ├── font-awesome-pro.woff2 └── data/ └── customers.xlsx最后一步打开 Axure 的「Publish」→「Generate HTML Files」在「Options」中勾选「Include all resources」和「Enable responsive design」点击「Publish」——生成的 HTML 即可直接发给开发、测试、业务方三方同步评审无需额外安装 Axure。本文还有配套的精品资源点击获取
