前台体验 × 后台系统：双层流程卡设计
把用户动作放在第一视觉层，把后台工作放在第二视觉层，用三组双层卡片讲清一段购物经历如何对应后台系统。
本文目录 5 节 · 点击展开
这套视觉块来自《从一条商品链接开始：用千牛看懂电商运营完整链路》。它要解决的不是“流程怎么画得更复杂”，而是一个更基础的问题：读者第一眼到底应该先看用户做了什么，还是先看后台做了什么？
原版虽然同时写了用户动作和后台工作，但两者的视觉重量接近，读者更容易先看到后台标题。改造后，用户动作成为大字号高亮色带，后台工作被放到下方浅色区域，阅读顺序自然变成：
用户经历了什么 → 后台对应什么 → 运营为什么这样做
完整效果
QIANNIU LEARNING MAP
先走一遍消费者的路，再翻到后台看答案
消费者负责搜、看、选、付、收货和反馈 ；商家则通过商品、订单、ERP、售后和数据，把这段购物经历真正做出来。
这篇文章的读法 先看用户经历了什么 · 再看后台对应什么 · 最后理解运营为什么这样做
一段完整购物经历 前台动作与后台工作的 3 次对应
01
↓ 用户动作 用户搜、看、选、付
后台对应
后台准备商品与成交条件
标题、主图、详情、SKU、价格、活动、服务和库存。
02
↓ 用户动作 用户等待并收到包裹
后台对应
后台完成订单与履约
订单、ERP、仓库、物流和售后。
03
用户动作 用户留下数据、售后和评价
后台对应
运营继续推广和优化
上架、推广、链接、履约、售后和评价进入下一轮改进。
这套设计解决了什么
先看到用户
用户动作使用高饱和色带、大字号和白色文字，成为每张卡片的第一视觉层。
再理解后台
后台工作放在浅色内容区，用图标、标签、标题和说明形成稳定的第二层信息。
最后串成旅程
蓝、青、紫分别对应成交、履约和反馈，编号与箭头把三次对应关系串成完整购物经历。
信息层级怎么安排
| 层级 | 展示内容 | 视觉处理 | 读者得到什么 |
|---|---|---|---|
| 第一层 | 用户搜、看、选、付 | 大字号、高对比色带 | 先理解真实购物动作 |
| 第二层 | 后台准备商品与成交条件 | 浅色内容区、图标和标签 | 找到前台动作对应的后台工作 |
| 第三层 | 链接、SKU、价格、ERP 等 | 小字号辅助说明 | 需要时再进入具体术语 |
适合哪些内容
这套双层流程卡适合表达“外部体验与内部系统之间的对应关系”，例如：
- 用户下单，对应订单、库存、仓库和物流。
- 客户发起诉求，对应客服判断、任务流转和售后执行。
- 员工提交申请，对应审批、财务和系统状态变化。
- 用户点击一个按钮，对应接口、数据处理和结果返回。
它不适合普通的单线操作步骤。如果内容只有“第一步、第二步、第三步”，使用普通步骤卡会更简单；只有同时存在前台动作与后台工作两层关系时，这种结构才有价值。
在文章中使用
正式文章位于 src/content/posts/ 时：
import UserBackendJourneyMap from '../../components/UserBackendJourneyMap.astro';
<UserBackendJourneyMap />视觉实验室文章位于 src/content/posts/visual-lab/ 时：
import UserBackendJourneyMap from '../../../components/UserBackendJourneyMap.astro';
<UserBackendJourneyMap />正式使用效果：从一条商品链接开始：用千牛看懂电商运营完整链路。