企业官网建设流程全解析

简介：这是一套面向产品经理、交互设计师及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 class="fas fa-user-circle" style="font-size:16px;color:#333;"></i>

其中fas表示 Solid 风格，fa-user-circle是图标名称。关键参数说明：

• font-size：必须显式声明，Axure 默认字号会覆盖图标比例；
• color：支持变量绑定，例如[[LVAR.icon_color]]，可在「全局变量」中定义icon_color = '#007bff'；
• style属性内可追加transform: rotate(90deg)实现旋转动画，配合「鼠标悬停」交互事件。

2.2.2 图标状态机实战：工单优先级动态变色

以工单列表中的「优先级图标」为例，其交互逻辑如下：

1. 中继器每行数据绑定字段priority_level（值为low/medium/high）；
2. 文本元件内嵌 HTML：

<i class="fas fa-exclamation-triangle" style="color:[[ LVAR.priority_level == 'low' ? '#6c757d' : LVAR.priority_level == 'medium' ? '#ffc107' : '#dc3545' ]]; font-size:14px;"></i>

3. 当用户点击「升级优先级」按钮时，触发动作：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 模块大量依赖中继器实现数据驱动界面，但模板将其分为三个抽象层级，避免重复配置：

2.3.1 客户资料列表的 Excel 数据源绑定实操

1. 打开09.客户资料导入模板.xlsx，确认首行为字段名（customer_id,name,phone,status,last_contact_date）；
2. 在 Axure 中，右键中继器 →「Import Data」→ 选择该 Excel 文件；
3. 关键配置步骤：
   • 勾选「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 保护等级与操作权限的实时映射

规则表结构示例：

在客户详情页，通过以下表达式控制按钮显隐：

[[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_condition（SQL-like 条件，如age > 25 AND city IN ('北京','上海')）
• target_count（预估人数）

在 Axure 中，中继器读取该 Excel 后，用户点击某行时：

1. 触发Set Variable Value → selected_segment = Item.segment_name；
2. 动态更新右侧「人群预览」中继器，数据源为[[LVAR.selected_segment]]对应的子数据集；
3. 「发送营销短信」按钮启用条件：[[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文件——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文件。必须附带三份轻量级文档：

1. 接口契约表.xlsx：从模板中提取所有中继器数据源字段，标注：

   • 字段名（如customer_id）
   • 类型（String/Number/Date）
   • 是否必填（Yes/No）
   • 示例值（"CUS2023001"）
   • 业务含义（「客户唯一编码，由CRM系统生成」）

2. 交互逻辑速查表.md：用表格列出关键交互点，例如：

   页面	元件	触发事件	动作	开发注意点
   工单详情页	「通过」按钮	点击	跳转至resolved状态，调用/api/tickets/{id}/approve	需校验当前用户是否有审批权限

3. 字体与资源清单.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。

本文还有配套的精品资源，点击获取