企业官网建设流程全解析

简介：本资源是一套面向产品经理、交互设计师及前端开发初学者的B2B2C在线平台高保真原型设计文件，聚焦威客类服务撮合场景（如企业发布需求、服务商竞标交付），解决多角色流程梳理、交易闭环验证与UI/UX协同评审等实际问题。压缩包共430个文件，含293张PNG界面截图（覆盖首页、店铺入驻、任务发布、投标管理、订单结算等核心流程）、25个HTML页面骨架、22个CSS样式文件、49个JS交互脚本（支撑表单校验、状态切换等动态效果），以及1个Axure浏览器插件（axure-chrome-extension.crx）用于本地原型调试，整体仅2.58MB，轻量易部署。目前已有643人学习下载，资源结构完整、模块划分清晰，可直接用于Axure RP快速复现与迭代，亦适合作为B2B2C模式下用户旅程图、组件库搭建与竞品交互逻辑分析的参考范本。

1. 这不是UI稿，而是一套可跑通的B2B2C业务流骨架：从角色隔离、订单穿透到三方结算逻辑全埋在RP文件里

你手头那份标着“B2B2C原型图”的RP文件，大概率不是设计师交差用的静态界面截图——它极可能是一份用Axure RP（常被简写为auxer）搭建的、带变量逻辑、条件交互与多端状态跳转的可执行业务原型。我见过太多团队把这份RP当PPT讲给客户听，结果开发一接手就懵：为什么采购方能看见供应商库存但不能改价格？为什么分销商下单后，系统要同时生成两笔订单（一笔对平台，一笔对上游）？这些都不是视觉问题，而是RP里用中继页面、全局变量和动态面板封装好的轻量级业务规则引擎。它不替代后端，但提前暴露了B2B2C模式中最容易翻车的三个断点：角色权限的嵌套控制、订单归属与分账路径的显式定义、以及跨角色数据视图的隔离粒度。适合正在做平台型SaaS产品规划的产品经理、需要快速对齐技术边界的前端负责人，以及想用最小成本验证B2B2C流程是否自洽的创业团队。别急着导出PDF，先打开RP文件，点开“Page Interactions”面板——那里藏着比PRD更早落地的契约。

2. 拆解RP文件结构：识别B2B2C核心模块的四个关键层

Axure RP的B2B2C原型不是线性页面堆砌，而是按业务域分层组织的。打开项目后，先看左侧“Pages”面板的折叠结构，典型分层如下：

2.1 角色入口层：用Master模板实现权限基线隔离

B2B2C的起点是角色分流。该原型通常包含3个顶层Master页：M_BuyerPortal（采购方）、M_SupplierPortal（供应商）、M_DistributorPortal（分销商）。每个Master页内嵌统一Header、Sidebar及用户状态栏，但Sidebar菜单项通过“Set Variable Value”动作绑定全局变量g_role控制显隐。例如，当g_role == "distributor"时，仅显示“我的分销订单”“返佣明细”等菜单；若g_role == "supplier"，则激活“库存管理”“结算对账”入口。

提示：不要手动复制粘贴菜单逻辑。右键Master页 → “Edit Master”，在交互设置中为每个菜单项添加“OnPageLoad”事件，条件判断[[g_role]]值，再设“Show/Hide”动作。这样后续新增角色只需改变量值，无需重刷所有页面。

2.2 订单穿透层：用中继页面（Repeater）模拟多级订单关系

B2B2C最易混淆的是订单归属。该原型用Repeater组件构建了“订单树”：主订单（Buyer下单）→ 子订单（平台向Supplier采购）→ 分销单（Distributor代销）。Repeater数据源为CSV表格，字段含order_id、parent_id、role_type（buyer/supplier/distributor）、status。关键交互在“订单详情页”：点击主订单ID时，触发“Filter Repeater”动作，筛选出parent_id == [[ThisItem.order_id]]的所有子项，并用不同颜色区块区分角色来源。

注意：Repeater的“Filter”条件必须用[[ThisItem.parent_id]]而非硬编码ID，否则无法复用。我在某次交付中因漏掉双括号，导致分销商看到的子订单全是空——因为parent_id被当成字符串字面量而非变量解析。

2.3 结算路径层：用动态面板（Dynamic Panel）封装分账逻辑

结算页不是静态表格，而是三层嵌套动态面板：DP_SettlementFlow（主流程）、DP_SupplierSplit（供应商分账）、DP_DistributorSplit（分销商分账）。切换角色时，通过“Set Panel State”动作控制各面板显隐。例如，当g_role == "supplier"，DP_SupplierSplit显示State1（含“应付金额”“平台扣点”“实付金额”三列），其数值由公式[[Item.total_amount * 0.95]]动态计算（假设平台抽5%）。

关键细节：所有金额字段必须设为“Text”类型而非“Rectangle”，否则无法绑定变量。曾有团队用矩形框写“¥12,800”，结果测试时发现无法随订单金额变化——因为矩形没有文本值属性。

2.4 数据视图层：用变量作用域控制跨角色信息可见性

B2B2C的核心矛盾是“同一条数据，不同角色看到不同字段”。原型用局部变量解决：在“商品详情页”，l_supplier_price（供应商供货价）仅对g_role == "supplier"可见；l_distributor_commission（分销佣金）只在g_role == "distributor"时渲染。实现方式是在页面加载时，用“Set Variable Value”为每个局部变量赋值，再用“Show/Hide”动作绑定变量值判断。

血泪经验：局部变量名前缀l_必须与全局变量g_严格区分。某次我误将g_supplier_price用于分销商页面，导致所有分销商都能看到供应商底价——因为全局变量在所有页面生效，而局部变量仅限当前页。

3. 验证原型逻辑：用Axure内置调试器跑通三条核心链路

光看页面跳转不够，必须用Axure的调试功能验证变量流转与条件分支。以下操作需在Axure RP 9+版本中进行（低版本无完整调试器）：

3.1 启动调试会话并监控变量

点击顶部菜单“Publish” → “Preview in Browser”，或快捷键F5。页面在浏览器打开后，右上角出现Axure调试工具栏。点击“Variables”标签，勾选“Auto-refresh variables”，此时所有全局变量（g_role、g_order_id等）和局部变量实时显示值。切换不同角色登录，观察g_role值是否同步变更，这是整个权限体系的基石。

3.2 跟踪订单创建链路：从采购下单到生成子单

在“采购方首页”点击“新建订单”，进入表单页。填写商品、数量后，点击“提交”。此时在调试器中：

• 查看g_order_id是否生成UUID格式新值（如ord_7a2f1e8c）；
• 切换到“订单列表页”，检查Repeater中是否新增一行，且role_type为buyer；
• 点击该订单ID，进入详情页，确认Repeater子订单区是否自动加载，且role_type为supplier。

若子订单未出现，立即检查“提交按钮”的交互设置：是否在“OnClick”事件中调用了“Set Variable Value”为g_parent_order_id赋值？是否遗漏了“Refresh Repeater”动作？这是80%订单穿透失败的根源。

3.3 模拟结算对账：验证分账金额的动态计算

进入“供应商结算页”，在调试器中手动修改g_role为supplier，页面应自动切换至供应商分账视图。此时：

• 查看DP_SupplierSplit面板的State1中，“应付金额”字段值是否等于Repeater中所有supplier订单的total_amount之和；
• 修改任意一笔订单的total_amount（在Repeater编辑模式下双击单元格），观察“实付金额”是否实时更新为[[Item.total_amount * 0.95]]。

注意：若金额未刷新，检查Repeater的“Data Grid”设置中是否勾选了“Enable dynamic interaction”——未启用则变量绑定失效。

3.4 压力测试：用批量操作验证角色切换稳定性

B2B2B2C原型常因角色变量污染导致状态错乱。在调试器中连续执行：

1. g_role = buyer→ 进入采购页 → 提交订单；
2. g_role = distributor→ 进入分销页 → 查看同一订单ID；
3. g_role = supplier→ 进入供应页 → 检查库存扣减。
   每步后检查g_role值是否准确，且各页面数据无残留（如分销商页面不应显示供应商价格字段）。若出现字段错位，说明局部变量命名冲突或作用域未隔离。

4. 避坑指南：B2B2C原型开发中五个高频翻车点与解法

B2B2C模式的复杂性在原型阶段就会暴露。以下是我在多个项目中踩过的坑，按现象、原因、解法结构化呈现，避免你重蹈覆辙：

4.1 现象：角色切换后，页面部分元素消失或错位

原因：Master页中嵌套了动态面板，但未在Master的“OnPageLoad”事件中重置面板状态。当从Supplier页跳转到Buyer页时，Supplier专属的动态面板仍停留在State2，而Buyer页未定义该State，导致渲染异常。
解决：在Master页的“OnPageLoad”事件中，为所有动态面板添加“Set Panel State”动作，强制设为默认State（如State1）。例如：Set Panel State of DP_PriceView to State1。切记，Master页的交互优先级高于子页面。

4.2 现象：Repeater子订单数据不更新，始终显示旧记录

原因：Repeater数据源为本地CSV文件，但原型发布时未勾选“Include data files in HTML output”。导出HTML后，浏览器无法读取CSV，Repeater回退到空数据源。
解决：发布前检查“Publish Settings” → “HTML Generation” → 勾选“Include data files”。更稳妥的做法是将CSV数据转为JSON格式，用“Set Repeater Items”动作在页面加载时动态注入，避免文件依赖。

4.3 现象：分销商能看到供应商的原始供货价

原因：错误地将g_supplier_price（全局变量）用于控制价格字段显隐。由于全局变量跨页面生效，当Supplier登录时设置了该变量，后续任何角色访问都会继承此值。
解决：价格字段显隐必须绑定局部变量l_supplier_price，并在页面加载时用“Set Variable Value”初始化。例如：Set Variable Value l_supplier_price to [[g_supplier_price]]，再用l_supplier_price != ""作为显示条件。

4.4 现象：订单状态流转卡在“待审核”，无法进入“已发货”

原因：状态变更依赖按钮点击，但按钮的“OnClick”事件中，仅设置了g_order_status = "shipped"，未触发Repeater刷新。Repeater仍显示旧状态，导致用户以为操作无效。
解决：在状态变更动作后，必须添加“Refresh Repeater”动作。例如：Set Variable Value g_order_status to "shipped"→Refresh Repeater RP_OrderList。可将这两步合并为一个交互序列，避免遗漏。

4.5 现象：移动端预览时，侧边栏菜单无法展开

原因：B2B2C原型为PC端设计，侧边栏使用固定宽度（如240px），未适配移动端视口。Axure的响应式断点未配置，导致小屏下菜单被截断。
解决：在“Page Properties”中启用“Responsive View”，添加断点（如768px），为移动端创建独立布局。侧边栏改为汉堡菜单，用动态面板实现展开/收起，交互绑定g_mobile_menu_open布尔变量控制显隐。

5. 进阶技巧：用Axure变量+外部JSON实现B2B2C数据热更新

当原型需要对接真实业务数据（如实时库存、动态价格），硬编码CSV或手动改变量太低效。我常用“外部JSON+Axure变量注入”方案，让原型具备准生产环境的数据感知能力。

5.1 构建可热更新的JSON数据源

准备一个b2b2c_data.json文件，结构如下（注意字段名与RP中变量名严格对应）：

{ "inventory": [ {"sku": "SKU001", "supplier_stock": 120, "distributor_stock": 85}, {"sku": "SKU002", "supplier_stock": 0, "distributor_stock": 0} ], "prices": [ {"sku": "SKU001", "supplier_price": 85.00, "distributor_commission": 12.50}, {"sku": "SKU002", "supplier_price": 120.00, "distributor_commission": 18.00} ] }

关键点：supplier_stock和distributor_stock字段分离，体现B2B2C库存的多角色视角；distributor_commission是绝对值而非比例，避免计算歧义。

5.2 在RP中注入JSON数据并绑定变量

Axure本身不支持直接读JSON，需借助JavaScript桥接。在“Page Properties” → “HTML Generation” → “Custom Code”中，于“Before ”插入：

<script> // 模拟AJAX获取JSON（实际项目中替换为fetch） const mockData = { "inventory": [{"sku":"SKU001","supplier_stock":120,"distributor_stock":85}], "prices": [{"sku":"SKU001","supplier_price":85.00,"distributor_commission":12.50}] }; // 将JSON数据注入Axure全局变量 window.axure && axure.setGlobalVariable('g_inventory_data', JSON.stringify(mockData.inventory)); window.axure && axure.setGlobalVariable('g_prices_data', JSON.stringify(mockData.prices)); </script>

注意：axure.setGlobalVariable是Axure 9+提供的API，必须确保发布时勾选“Enable JavaScript API”。JSON.stringify确保数据以字符串形式存入变量，后续可用JSON.parse()解析。

5.3 在页面中解析并渲染JSON数据

以“商品详情页”为例，需显示当前SKU的供应商库存和分销佣金。步骤如下：

1. 页面加载时，用“Set Variable Value”将g_inventory_data赋给局部变量l_inventory_json；
2. 添加“Inline Frame”组件，URL设为javascript:void(0)，在“OnPageLoad”事件中执行JS：

// 解析JSON并提取SKU001数据 const inventory = JSON.parse([[l_inventory_json]]); const skuData = inventory.find(item => item.sku === 'SKU001'); if (skuData) { // 将值注入RP文本字段 $axure.utils.setText('txt_supplier_stock', skuData.supplier_stock); $axure.utils.setText('txt_distributor_commission', skuData.distributor_commission); }

逻辑说明：$axure.utils.setText是Axure JS API，第一个参数为元件ID（需在RP中为文本框设置ID，如txt_supplier_stock），第二个参数为要显示的值。此方案绕过Repeater，直接操作DOM，适合少量关键字段。

5.4 实现数据热更新的闭环机制

真正价值在于“热更新”：当业务方修改b2b2c_data.json后，只需重新运行上述JS注入脚本（或部署到本地服务器），原型即可实时反映新数据。我习惯在项目根目录放一个refresh_data.bat批处理文件：

@echo off echo 正在更新B2B2C原型数据... copy /y "data\b2b2c_data.json" "prototype\" echo 数据更新完成！请刷新浏览器。 pause

从那以后我每次交付B2B2C原型，都强制走一遍JSON数据注入流程——哪怕只是模拟，也比纯静态变量更能暴露业务规则漏洞。比如某次发现分销佣金字段在JSON中为字符串"12.50"，而RP计算时当作数字相加，导致NaN错误。这种细节，只有真跑起来才看得见。希望帮到你。

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