用SVG画退换货流程图更可控：节点可交互、颜色CSS控制、文字可选中，语义清晰且适配深色模式；需统一状态文案、显性展示异常路径，并优化移动端横向滚动体验。

用 画退换货流程图比用图片更可控

直接插入 PNG 或 JPG 流程图，缩放失真、无法适配深色模式、文字不能被屏幕阅读器识别。用 手写流程图，节点可交互、颜色可 CSS 控制、文字可选中，也方便后续加 tooltip 或点击跳转到对应条款。

关键不是“画得多漂亮”，而是让每个步骤语义清晰、视觉层级分明：

• 用 或 表示状态节点（如“已签收”“申请提交成功”）
• 用 或 画带箭头的流向线，marker-end 属性加箭头更可靠
• 所有文字用 ，别塞进图片；字号设为 14px 或 0.875rem，确保小屏可读
• 给每个 容器加 data-step="return-applied" 类似属性，方便 JS 后续高亮当前步骤

流程节点文案必须和客服话术/售后系统字段对齐

前端写的“审核中”如果后端 API 返回的是 status: "review_pending"，用户看到页面和收到短信不一致，就会怀疑流程卡住。实际开发中，退换货状态字段常有歧义：

• "processing" 在有些系统里指“仓库已揽收”，有些指“财务正在退款”——得查清楚再映射
• “已寄出”和“物流已发出”不是同一件事：前者是商家打单，后者是快递扫描出库，中间可能隔 2 小时
• 别写“预计 3–5 个工作日”，要拆成具体节点：“平台 2 小时内审核 → 仓库 48 小时内处理 → 快递 1–3 天送达”

建议把各状态文案列成 JSON 配置，和订单详情页共享同一份 returnStatusMap，避免前后端各写一遍。

移动端流程图横向滚动比折行更可靠

用 CSS flex-wrap: wrap 把流程节点强行折成两行，容易导致箭头错位、文字重叠，尤其在 iOS Safari 上 flex 对齐 bug 较多。更稳的做法是：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 整个 设为固定高度（如 120px），宽度设为足够容纳全部节点（例如 800px）
• 外层容器加 overflow-x: auto 和 scroll-behavior: smooth
• 给容器加 padding-bottom: 16px，留出滚动条空间，避免遮挡底部文字
• 在节点上加 touch-action: pan-x，防止 iOS 上滑动时触发页面回弹

测试时重点看 iPhone SE（窄屏）下能否左右拖动看清每一步，而不是靠缩放——缩放会破坏 SVG 文字渲染精度。

别忽略“异常路径”的可视化表达

标准流程图只画主干（申请→审核→寄回→退款），但用户真正焦虑的是“卡在哪儿了”。比如审核失败、地址不匹配、商品超期，这些分支必须显性呈现：

• 用虚线箭头表示异常路径，颜色用 #F59E0B（琥珀色）而非红色，避免误判为错误提示
• 在异常节点旁加 标签，鼠标悬停显示原因（如“退货超时：订单签收已超 7 天”）
• 若该异常可自助操作（如“修改退货地址”），在节点内嵌一个 @#@#@#@#@#@#@#@#@#@0
• 所有异常分支终点必须指向明确出口：要么“重新提交申请”，要么“联系客服”，不能悬空

最常被忽略的一点：SVG 里的 默认不支持触屏长按，需要额外监听 touchstart 并手动 show tooltip——这点在安卓微信内置浏览器里尤其明显。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！