DTC Hub

把多市场、多站点的 DTC 运营后台,从「工程模块堆叠 + 超长发布手递」收成「按站点看清状态、按运营工作流导航、冲突才打断」的总部控制台——并坚持借 Woo/Shopify 能力,不重做一套电商后台。

项目
ELFBAR DTC · 多站点 DTC 运营后台
角色与协作
产品 / UX · 协作 PX/DEV/PM
范围
Admin IA · 运营工作流 · 对象×站点状态 · 一键发布 · 多市场权限与用词
载体环境
内部 Admin(本机/验收环境)
商城运营空间 · 3 个市场 · 6 个站点
六态优先级: 站点自管 > 发布失败 > 站点上有改动 > 有更新待发布 > 已发布 > 未发布 · 现网状态词: 生效中 草稿 待检查 待配置 已验证 (Verified)
总部控制台左栏:顶部搜索框、首页/商品/内容/市场四项主导航,以及底部「商城运营空间 · 3 个市场 · 6 个站点」范围锚点
左栏「商城运营空间」显式锚定 3 个市场 · 6 个站点 与四项高频工作流入口
市场与范围管理实屏:展示市场配置、站点绑定、商品范围清册三个标签页,以及 GB(United Kingdom · GBP · en-GB · 草稿 · 待配置)状态行
市场与站点状态条(来自图 03):统一收敛「市场配置 · 站点绑定 · 商品范围清册」,直读区域市场状态(GB · GBP · en-GB · 草稿 · 待配置)
运营首页「接下来可以做什么」待办卡片:完善商品资料 3 项、审核内容 4 项、检查发布计划 1 项
总部控制台日常工作流入口(裁自图 12 底部待办区):先处理「完善商品资料 3 项 · 审核内容 4 项 · 检查发布计划 1 项」日常动作

示意布局 · 状态摘要四卡(替代原概览空折线区 · 概念取自正文已核实口径)

总部控制台首屏优先回答「站点是否连通、哪些对象有冲突、今天先处理什么」,不堆砌未接真数的转化率折线

01 · SITE CONNECTIVITY

站点连通

覆盖 3 个市场 · 6 个站点 的店铺连接与内容连接;区分 已验证 (Verified) 与 认证暂不可用,只读展示脱敏连接元数据。

02 · PUBLISH CONFLICTS

待发布冲突

常规发布一键直达并回读;仅当命中 站点上有改动、发布失败 或 待确认 / 待检查 时才弹窗打断(覆盖 / 跳过 / 去处理)。

03 · OBJECT × SITE STATUS

草稿对象

以「对象 × 站点」为状态单元,收束 草稿、启用、生效中、待配置 与 未定价 叠加标,明确「记录启用不等于已发布」。

04 · TODAY'S QUEUE

今日待办

直接承接「完善商品资料 3 项」「审核内容 4 项」「检查发布计划 1 项」,把日常高频动作放在首屏第一顺位。

问题

多站点真相难以一眼看清:多站点 DTC 不是「再做一个商品后台」,而是总部要同时管:哪些市场可售、哪些站点已连上、对象在每个站点上是什么状态、站点是否被人改过、能不能安全写回去。

工程域侧栏堆叠与超长发布手递:旧路径把发布拆成工程步骤(批准 → 暂存 → 提交分发 → 目标对账),常规约 10 次点击,连接过期时更多(M2 流程精简方案 · 可核实计数)。侧栏也曾按 CMS 中心 / 设计中心 / 独立 SKU 矩阵等工程域堆叠,运营要先懂系统结构,才能完成「今天先处理什么」。

状态混用制造假安全感:状态一旦混用——草稿启用、市场资格、SKU 审核、站点发布并行暴露——就会出现「按钮能点、服务端才拒」或概览用假安全感(如零条记录显示成功率 100%,已在规范中明确禁止)。

发布路径点击计数(常规约 10 次点击)来自内部《M2 流程精简方案》核实账目。

图 01(问题锚点):早期商品列表界面,左侧导航仍见独立 SKU 矩阵、CMS 中心、设计中心等工程模块,列表内商品状态(草稿/启用)、记录状态与 US/GB 市场旗并列
图 01(问题锚点 · 早期侧栏与商品列表):左栏仍见独立拆出的「SKU 矩阵」及「CMS 中心」「设计中心」等工程域入口;顶栏提供「全部 / 启用 / 草稿 / 已归档」筛选,表格内「商品状态(草稿 / 启用)」「记录状态」与「市场(US / GB)」多列并存,尚未收束为按站点直读的单一状态徽章

约束

  • 多市场 × 多站点 × 权限:只能看见有授权的市场与站点;界面收敛为三角色(运营 / 管理员 / 只读),后端仍按「站点 × 市场」严格授权。
  • 借平台能力:不重做 Woo / Shopify 已有能力;无接口则只显示状态并跳回站点后台处理;库存归站点只读,促销归站点维护。
  • 双端可写:区分「总部管」与「站点自管」;总部与站点两边都改过时必须显式处理冲突,不能静默覆盖。
  • 小团队、少页面:日常高频用得到的才进一级导航;低频配置与渠道接入收进站点详情或管理员区。
  • Polaris + 界面规范 10 条与真数据纪律:以 Polaris 为组件基线,配自定界面规范 10 条(少冗余解释、少强制判断、文案贴运营)与中英双语 catalog;概览严格区分「暂无待处理」与「暂时获取不到」,无真实批量能力不假装。

过程

方法证据以产品架构定稿、流程精简方案与原型复查为主,非 C 端调研墙(总部控制台状态与待办主视觉见页首状态条,配套方法文档归目见文末附录)。

1. 定原则与对象模型

确立按站点发布、一键发布、少页面三项产品原则;把对象状态单位定为「对象 × 站点」,未定价作为叠加标记(IA §1–3)。

2. 收敛导航与入口

运营定稿四块主干(商品发布 / 组件与素材 / 市场管理 / 站点连接)→ IA 再收成「概览 · 商品 · 内容 · 站点 · 发布 · 工具」;补齐市场可售资格、SKU 编码审核、站点导入等真实入口(Admin 精简方案)。

3. 拆发布路径

对照现网多步手递点击账,目标改为「一个发布按钮 + 仅冲突/检查失败弹窗」;连接重查放进小窗内完成,不跳走(M2 精简方案)。

4. 用词、规范与原型审查

输出工程词对照表(如「漂移 → 站点上有改动」)与界面规范 10 条;商品原型按 Shopify Admin 对照审查(P1:SKU 入口、站点状态、库存只读、保存/发布分离、结构化商详等)。

图 12(过程方向证据):DTC Hub 商城运营空间左栏导航、3 个市场 · 6 个站点范围状态与日常待办工作流入口组合视图
图 12 · 过程方向证据(商城运营空间 · 3 个市场 · 6 个站点 + 日常待办工作流入口,无全零 KPI 折线,与页首状态条对应):将左栏收敛为「首页 · 商品 · 内容 · 市场」,并在控制台承接「完善商品资料 3 项 · 审核内容 4 项 · 检查发布计划 1 项」日常动作,作为收敛运营导航与工作流入口的过程方向证据

过程证据 C1 · 运营导航三阶段收敛(裁除右侧盘面干扰,直比左栏信息架构)

对应步骤 2:退役工程模块分类,将一级导航对齐日常运营任务流

阶段 1 · 早期工程域侧栏(图 01) 早期工程域侧栏裁切:概览、商品(SKU 矩阵、商品设置)、内容、CMS 中心、设计中心、市场

暴露独立「SKU 矩阵」「CMS 中心」「设计中心」等系统模块,运营需跨多处拼凑任务。

阶段 2 · 运营空间四主干(图 12 左栏) 运营首页原型左栏裁切:首页、商品、内容、市场与商城运营空间 3 个市场 · 6 个站点

按「首页 · 商品 · 内容 · 市场」收束主干,并在底栏固定当前授权范围「3 个市场 · 6 个站点」。

阶段 3 · 现行 IA 六项一级导航(图 08 左栏) 现行 IA 侧栏裁切:概览、商品(全部商品、商品设置)、内容、站点、发布、工具

定稿为「概览 · 商品 · 内容 · 站点 · 发布 · 工具」六项一级导航,SKU 矩阵并入全部商品视图。

过程证据 C2/C3 · 一键发布与「冲突 / 检查失败才打断」校验链路(M2 精简方案)

对应步骤 3:把约 10 次点击的工程手递改为「同页一键触发 + 交付预检 + 仅异常/冲突时打断」

1. 商品页点「发布到站点」 → 2. 自动执行「交付预检」 → 3a. 检查通过:直接下发并回读状态 / 3b. 站点上有改动 / 预检失败(待确认 · 失败):弹窗打断(覆盖 · 跳过 · 去处理)
商品编辑页底部裁切:左侧展示规格参数未关联产品类型的前置校验提示框,右侧展示标准主数据属性、商品详情页预览与「发布到站点」主按钮
同页一键发布与前置校验提示(裁自图 08):右下角常驻「发布到站点」主按钮,左侧同屏拦截未关联产品类型的属性缺失项
发布记录与分发操作顶部裁切:展示右上角「交付预检」按钮、分发操作边界,以及全部/排队中/执行中/失败/待确认/成功状态筛选条
交付预检与冲突/失败打断筛选(裁自图 05):提供右上角「交付预检」与「失败 · 待确认」拦截态过滤,承接需人工确认的冲突批次

决策

1. 导航跟运营任务走,不跟工程模块走

一级信息按「今天处理什么 / 维护商品与内容 / 管站点 / 查发布」组织;SKU 矩阵并入全部商品视图,设计中心等开发向入口退役或降权——让运营先看到日常工作,而不是系统拓扑(精简方案 + IA §5)。

早期工程域侧栏(图 01):概览 / 商品(独立拆出 SKU 矩阵 · 商品设置) / 内容 / CMS 中心 / 设计中心 / 市场

运营定稿四块主干:商品发布 · 组件与素材 · 市场管理 · 站点连接

现行 IA 六项一级导航(图 08 左栏):概览 · 商品(全部商品 / 商品设置) · 内容 · 站点 · 发布 · 工具

改版前 · 工程域模块并列(图 01 左栏) 图 01 早期侧栏特写:概览、商品、SKU 矩阵、商品设置、内容、CMS 中心、设计中心、市场
独立拆出 SKU 矩阵、CMS 中心与设计中心,导航映射后端表结构而非运营动作
改版后 · 六项运营任务导航(图 08 左栏) 图 08 现行侧栏特写:概览、商品(全部商品、商品设置)、内容、站点、发布、工具
收束为「概览 · 商品 · 内容 · 站点 · 发布 · 工具」,高频任务一步直达

2. 「对象 × 站点」单一状态模型(六态优先级)

列表汇总、点开看明细——把多站点复杂度压成可扫读徽章,而不是让多套并行状态机同时暴露给运营(IA §3)。

六态显式优先级:站点自管 > 发布失败 > 站点上有改动 > 有更新待发布 > 已发布 > 未发布

叠加与过渡规则:「发布中」只做过渡小标;「未定价」作为叠加标记提示补齐,不混入主状态机。

图 05:发布记录与流水线视图,展示四阶段工程流水线标签以及已完成 0 条时显示成功交付率 100% 的早期状态面板
图 05 · 发布记录与站点视角对照:早期右栏直接暴露「1. 契约快照冻结 → 2. 渠道远程调度 → 3. 回执确认核验 → 4. 最终端点上架」工程阶段,且在「已完成 0」时显示「成功交付率 100%」——定稿据此明确禁止零条 100% 假安全感,并将状态统一收束为「对象×站点」六态模型
图 05 右栏放大特写:已完成 0 时显示成功交付率 100%,以及流水线标准化四阶段标签
图 05 右栏反例特写:零条记录显示「成功交付率 100%」且暴露四阶段底层契约词,已在界面规范 10 条中明令剔除

3. 一键发布;只在必须判断时打断

常见路径收成:点「发布到站点」→ 自动检查 → 通过则直接发并读回。仅「站点上有改动」或「检查不通过」才弹小窗(覆盖 / 跳过 / 去处理)——用「少强制判断」对齐界面规范第 9 条,换掉四段工程手递(IA §4 + M2 目标流程)。

图 08:商品详情与编辑页,左栏为概览、商品、内容、站点、发布、工具六项导航,右栏展示记录状态(生效中)、销售市场(GB)与右下角「发布到站点」主按钮
图 08 · 商品编辑与同页发布入口:左栏已收敛为「概览 · 商品 · 内容 · 站点 · 发布 · 工具」六项运营导航;右栏明确提示「记录启用不等于已发布」,右下角直接放置同页「发布到站点」主入口

4. 借平台 + 清晰权属,而不是大一统后台

Hub 做统一入口与下发内容/基础价;库存、促销、无接口能力留在站点,管理范围按领域选「总部管 / 站点自管」。产品主张是可控的多站点操作系统,不是第二个 Woo 管理端(对照图 08 右栏销售市场/记录状态,以及下图 04 渠道连接边界)。

图 04 渠道认证可用性特写:展示 Shopify 渠道与 WooCommerce 渠道认证状态标签
渠道认证可用性特写(裁自图 04):显式区分 Shopify 与 WooCommerce 渠道认证通道状态
图 04 安全与合规审计特写:仅限元数据说明,只展示脱敏元数据,不展示连接密钥及凭据
安全与合规边界(裁自图 04 右下):只读展示脱敏元数据,严禁暴露底层连接密钥及凭据
图 04:连接管理页面,展示 Shopify 与 WooCommerce 渠道认证可用性、店铺连接与内容连接列表,以及右侧渠道健康度与脱敏元数据安全合规说明
图 04 · 渠道连接与平台权属边界全貌:统一管理店铺连接与内容连接的「已配置凭据引用 / 已验证 (Verified)」状态,明确总部与站点渠道的安全边界

5. 工具层组件化细节:多选素材选择器(图 09 · 同屏图例)

高频运营工具同样贯彻「显式站点作用域 + 同页完成操作」:商品图库在弹窗内区分「全球素材」与「本站素材(ELFBAR UK · en-GB)」,支持多选并拖拽调整首图顺序,已添加图片自动置灰防重。

图 09:选择素材(多选、可排序)弹窗特写,带 ① 至 ④ 四处紫点序号,展示站点作用域、全球/本站素材徽标、已选 3 项拖拽排序队列与底部确认按钮
图 09 · 多选素材:站点作用域 + 全球/本站徽标 + 拖拽排序(图中紫点 ①–④ 对应下方同屏旁注图例)
  1. ① 站点素材筛选与「全球 / 本站」徽标 顶栏切换「全部 / 全球素材 / 本站素材 · ELFBAR UK」,缩略图左上角标记「全球」或「本站」归属,右上角显示多选序号(图库已有 2 张自动置灰防重)。

  2. ② 已选队列拖拽重排首图 右栏实时汇总「已选 3 项」,支持按住拖拽调整顺序(深色描边项为拖拽中),第 1 张自动设为新增商品首图,放手后与网格序号同步更新。

  3. ③ 同页批量确认写回 底栏明确提示「已选 3 项 · 将添加到图库末尾」,点击「添加到图库 (3)」即刻在当前商品编辑页完成追加,无需跳出至独立媒体中心。

  4. ④ 显式绑定当前站点作用域与图库上下文 标题栏固定标明「用于:商品 › 商品图库(多选,可排序) · 当前站点 ELFBAR UK · en-GB · 图库已有 2 张」,从源头防止跨站误用素材。

From ops task to site truth

更少手递 · 状态可扫读 · 冲突才弹窗(按站点看清状态、按运营工作流导航,坚持借 Woo / Shopify 能力)

结果

  • 现行 Admin IA 定稿与维护:形成并维护现行 Admin 信息架构(一级导航、20 页清单、发布与状态文案、界面用词对照表)。
  • 运营导航与关键入口验收链路:运营导航与市场可售资格、SKU 编码审核、站点导入等关键入口具备完整书面定稿与验收链路(精简方案 / M0 清单 / 原型审查)。
  • 发布路径可对照设计:发布路径具备「现网点击账 → 目标一键流」的可对照设计,从工作流结构而非只改视觉皮层减负。
  • 设计系统与规范协作可证:落地 Polaris 列表/编辑骨架 + 自定界面规范 10 条 + 中英双语 catalog。

可讲的设计收获(不依赖数字):用「对象×站点状态 + 运营导航」同时解决多站点可见性与认知负担;用「冲突才打断的一键发布」对准超长手递,而不是再加一面板。页内仅呈现已核实的定性架构成果与验收实屏;面谈可按发布步数、冲突打断与待办动线方向进一步展开。

发布路径手递步数对照(基于《M2 流程精简方案》核实点击账目)

用结构化预检替代人工跨页对账

改版前 · 四阶段工程手递

常规约 10 次点击

Approve(批准) → Save(暂存) → Submit(提交分发) → Target Reconciliation(目标对账);连接过期时需跳出重连并重复手递。

改版后 · 一键发布 + 冲突才弹窗

同页 1 次主点击 + 异常打断

商品编辑页直接点 发布到站点 → 自动执行 交付预检 → 无冲突直接下发并读回;仅在 站点上有改动 或 失败 / 待确认 时弹小窗决策。

结果证据 E2 · 一键发布与冲突/预检打断实屏(自图 05 · 图 08 抬升)

同页触发「发布到站点」+ 前置属性拦截 + 发布中心「交付预检 / 待确认 / 失败」打断筛选

结果证据:发布记录页顶部的「交付预检」触发按钮、分发操作边界与「失败/待确认」打断状态筛选条
结果证据(裁自图 05):右上角「交付预检」与「排队中 / 执行中 / 失败 / 待确认 / 成功」状态筛选,集中承接需要人工裁决的冲突批次
结果证据:商品编辑页右下角「发布到站点」一键主按钮与左下角未关联产品类型前置拦截提示
结果证据(裁自图 08):商品编辑页底部内嵌前置规格校验提示与「发布到站点」一键入口,无需跳转多级工程流水线

结果证据 E3 · 对象 × 站点状态实屏(自图 01 · 图 08 · 图 03 抬升)

跨商品列表、商品详情与市场配置统一锚定状态徽标(草稿 / 启用 / 生效中 / 待配置)与站点市场旗(US / GB)

结果证据:商品列表表格特写,展示全部/启用/草稿/已归档筛选标签,以及每行商品的草稿/启用状态徽章与 US/GB 市场旗
商品列表状态与市场旗(裁自图 01):按行直读商品状态(草稿 / 启用)与目标市场(US / GB)
结果证据:商品编辑页顶部与右栏特写,展示「编辑商品: M2 Acceptance Woo Product 生效中 GB」及右栏「记录启用不等于已发布」说明
对象详情与站点发布边界(裁自图 08):顶栏并列 生效中 与 GB 市场标,右栏显式提示「记录启用不等于已发布」
结果证据:市场与范围管理特写,展示市场配置、站点绑定、商品范围清册及 GB 市场草稿与待配置状态
市场配置与站点绑定范围(自附录图 03 抬升):统一维护区域市场(GB · United Kingdom · GBP · en-GB)、状态(草稿)与配置进度(待配置)

结果证据 E4 · SKU 市场可售资格与「站点 × 市场」作用域过滤(自附录图 02 · 图 06 抬升)

兑现多市场权限与真实运营入口:跨商品 SKU 事实审核与按「站点 × 市场」组合筛选资产

结果证据:全局 SKU 与市场成员治理特写,展示 SKU000001、PRD000001、待检查状态、生效中记录状态与 GB 市场授权
SKU 审核与市场授权(自附录图 02 抬升):明确区分审核状态(待检查)、记录状态(生效中)与市场授权(GB)
结果证据:素材资产中心顶部过滤条特写,展示「站点: Local GB Site」与「市场: United Kingdom (GB)」组合筛选标签
显式「站点 × 市场」双重过滤(自附录图 06 抬升):默认按授权范围绑定 站点: Local GB Site 与 市场: United Kingdom (GB)
附录 · 查看完整未裁切验收/原型归档图(02·03·06·07·10·11)与方法文档索引 点击展开 / 收起

SKU 治理、市场配置、素材中心与跨渠道组件库全幅归档(图 02、03、06、07 · 验收静帧)

图 02:全局 SKU 与市场成员治理页面,展示 SKU000001、所属商品 PRD000001、待检查状态、生效中记录状态与 GB 市场授权
图 02 · 全局 SKU 与市场成员治理(验收静帧):早期独立拆出的跨商品 SKU 检索、属性事实审核与市场成员资格表(后续 IA 收敛并入全部商品视图)
图 03:市场与范围管理页面,包含市场配置、站点绑定、商品范围清册三个标签页及 GB(United Kingdom / GBP / en-GB)配置行
图 03 · 市场与范围管理(验收静帧):统一配置区域市场(如 GB · United Kingdom · GBP · en-GB)、站点绑定成员关系与商品可售范围清册
图 06:素材资产中心页面,展示按站点 Local GB Site 与市场 United Kingdom (GB) 过滤的多媒体资产网格
图 06 · 素材资产中心(验收静帧):支持按站点(Local GB Site)与市场(United Kingdom · GB)组合筛选、分组归档与网格/列表双视图切换
图 07:组件库页面,列出 Hero Banner、Product Grid、Store Benefits、Stay Connected、Carousel Banner 等 9 个跨渠道组件及其渲染契约说明
图 07 · 跨渠道组件库(验收静帧):维护 Hero Banner(dtc/hero)、Product Grid(dtc/product-grid)、Store Benefits 等 9 项组件规范与影响范围(后期从一级导航降权收束)

单选素材详情抽屉与 390px 窄屏响应式视图(图 10、11 · 原型/验收)

图 10:文章区块图片单选素材弹窗原型,右侧素材详情面板展示 logo-white.svg 尺寸、Alt 文本、来自 WordPress 媒体库标记及 3 处使用位置
图 10 · 素材选择器单选与引用详情抽屉(原型):用于文章区块配图单选,右栏直接暴露文件元数据、默认 Alt 文本(en-GB)、WP 反向登记来源及 3 处使用位置(文章 / 首页 footer / 关于我们)
图 11:390px 窄屏视口下的商品列表页面,顶部收起为汉堡菜单并保留状态切换标签与商品状态徽标
图 11 · 390px 窄屏商品列表适配(验收静帧):窄屏下将侧栏收进左上抽屉触发器,保留全部/启用/草稿/已归档筛选与核心状态列可读性

配套产品文档索引与实屏裁切归档核对

过程与规范文档(内部定稿归档):①《Notion Admin IA(2026-10-22 · 一级导航、20 页清单、对象×站点状态模型与发布路径)》;②《Admin 导航与入口精简方案(含 M0 真实入口清单)》;③《M2 发布流程精简方案(现网多步点击账对照与一键发布目标流)》;④《商品原型 Shopify Admin 对照审查(P1:SKU 入口、站点状态、库存只读、保存/发布分离、结构化商详)》;⑤《自定界面规范 10 条与工程词转运营词对照表》。

正文已抬升关键实屏索引:页首状态条与日常待办(图 12 侧栏/待办 + 图 03 市场范围)、图 01(问题锚点 + 侧栏对照)、导航三阶段收敛(图 01 / 12 / 08 左栏)、一键发布与预检打断(图 05 / 08 裁切)、图 04(渠道连接边界)、图 09(多选素材选择器与 ①–④ 同屏图例)、结果区冲突打断与对象×站点状态实屏(图 01 / 02 / 03 / 05 / 06 / 08 抬升)。