同一份暖通方案，三种表达方式——从线性叙事到设计画布的探索实录
龙脉暖通官网，用同一份业务数据，尝试了三种截然不同的页面表达方式。这篇文章记录探索过程、方法论和选型判断。
一、三种方案，长什么样？
风格一：经典线性叙事
代表页面：韦女士大平层 · 暖通方案书
从上到下，一章节接一章节。每个章节内有表格、参数、结论。读完一章翻下一章。
┌─────────────────────────────┐
│ 方案头部（客户/面积/顾问） │
├─────────────────────────────┤
│ 一、需求与配置总览 │
│ 1.1 日立空调配置表 │
│ 1.2 地暖两方案对比 │
├─────────────────────────────┤
│ 二、两款冷凝炉核心差异 │
│ 2.1 技术参数对比表 │
│ 2.2 适配建议表 │
├─────────────────────────────┤
│ 三、两套方案报价对比 │
│ 3.1 空调部分 │
│ 3.2 地暖基础部分 │
│ 3.3-3.4 炉体方案对比 │
├─────────────────────────────┤
│ 四、20年总投入对比 │
│ 五、选购建议 │
│ 六、两联供补充 │
│ 七、服务承诺 │
│ 八、方案附注 │
└─────────────────────────────┘一句话描述：像一份纸质方案书的网页版——完整、严谨、顺序阅读。
风格二：组件化代码页
代表产物：本次用 Next.js App Router 拆解重构的方案页
代表页面：韦女士大平层 · 暖通方案书
从上到下，一章节接一章节。每个章节内
内容和风格一完全一致，但把每个章节拆成独立 React 组件，统一用设计 Token 管控颜色、字号、间距。按钮有 default / hover / disabled / loading 四态。表格有 hover 行高亮。两方案对比用网格并置。
tokens/index.ts ← 颜色/字号/间距变量
components/
SolutionHeader.tsx ← 方案头部
ConfigOverview.tsx ← 配置总览
BoilerCompare.tsx ← 冷凝炉对比
PriceCompare.tsx ← 报价明细
TotalCostCompare.tsx ← 20年总投入
PurchaseAdvice.tsx ← 选购建议
DesignPhilosophy.tsx ← 设计理念
ServicePromise.tsx ← 服务承诺
Footer.tsx ← 页脚
app/solution/page.tsx ← 页面入口一句话描述：线性叙事的”代码化重构”——内容不变，载体从 WordPress 文章变成可维护的前端组件。
风格三：设计画布
代表页面：任女士·日立舒享+地暖方案前书
打开页面的第一感觉：不像方案书，像仪表盘。顶部是客户关键指标（面积、预算、超配率、主卧内机型号、管路规格），中间是七步决策流程，底部是两套方案并排对比卡片。
┌───────────────────────────────────────────────────┐
│ 任女士 │ 125m² │ 预算4.5-5万 │ 地暖85m² │
│ 128.8%超配率 │ 40型主卧 │ 32+20节能管路 │
├───────────────────────────────────────────────────┤
│ 七步决策流程 │
│ ① → ② → ③ → ④ → ⑤ → ⑥ → ⑦ │
├──────────────────────┬────────────────────────────┤
│ 方案一 经济实用型 │ 方案二 品牌升级型 │
│ 曼瑞德分段燃烧 │ 菲斯曼普通炉 │
│ 舒享125+32/20管路 │ 舒享125+32/20管路 │
│ 约4.5-5万 │ 约5-5.5万 │
│ [了解曼瑞德 →] │ [了解菲斯曼 →] │
├──────────────────────┴────────────────────────────┤
│ 核心方案配置 │
│ 外机舒享125 | 71+40+28+22内机 | 16.1kW | 32+20 │
├───────────────────────────────────────────────────┤
│ 产品对比资料 [日立→] [曼瑞德→] [菲斯曼→] │
└───────────────────────────────────────────────────┘一句话描述：像一张一屏搞定的决策面板——关键指标前置，对比关系一目了然。
二、三种风格的本质差异
| 维度 | 经典线性叙事 | 组件化代码页 | 设计画布 |
|---|---|---|---|
| 信息组织 | 纵向章节，顺序阅读 | 同左，内容不变 | 横向网格，空间并置 |
| 阅读方式 | 必须从头读到尾 | 同左 | 扫一眼抓关键，按需深入 |
| 对照关系 | 翻页比对，靠记忆 | 同左 | 同一行=同一件事，眼睛不用换行 |
| 信息密度 | 低（大量留白和过渡句） | 同左 | 高（结构化表格替代段落） |
| 制作成本 | 低（WordPress直接写） | 高（需要前端开发） | 中（WordPress可做，需要设计思维） |
| 适用场景 | 正式方案书、深度阅读 | 需要版本管理/批量生成 | 方案前书、快速决策、微信转发 |
| 客户体验 | “这是一份专业方案” | 同左（如果做出来的话） | “一目了然，不用读长文” |
三、画布风格的核心方法论——不是压缩，是重组
这是今天探索中最关键的认知。
错误理解
画布=压缩信息=删减内容=牺牲完整度
正确理解
画布=重组信息=改变排版密度和视觉通道=信息零丢失
具体来说：
| 原始形态 | 画布形态 | 信息变化 |
|---|---|---|
| 三段文字描述痛点、顾虑、解法 | 一张三栏对照表（您说的 / 您真正关心的 / 我们的方案） | 零丢失，但因果链从”纵向段落”变成”横向一行” |
| 1.1空调配置 + 1.2地暖配置 两个子章节 | 关键指标卡片群（超配率、主卧内机型号、管路规格） | 丢失了完整设备清单，但保留了决策核心 |
| 报价明细7行表格 | 总价大字 + 方案对比卡片 | 明细可展开/链接，总价一眼看到 |
| 20年总投入4行对比表 | 可视化进度条 | 数字变图形，直觉更强 |
核心原则：同一行即同一件事的三层翻译——客户说出来的是什么、心里真正想的是什么、我们用什么技术去回应。这个结构本身就是说服力。
四、什么场景用什么风格？
选线性叙事的情况
- 客户是理性决策型，喜欢看完整数据
- 方案涉及大额投资（10万+），客户需要”可存档”的正式文件
- 需要打印或导出PDF
- 多人决策场景（业主+家人+设计师各看一份）
典型页面：韦女士大平层方案书、刘忠福方案全书
选组件化代码页的情况
- 需要批量生成方案页（50个客户×3套方案）
- 方案数据从简道云/数据库自动拉取
- 需要版本管理、A/B测试
- 有专职前端开发者维护
典型场景：龙脉暖通如果上线”在线方案生成器”
选设计画布的情况
- 客户首次沟通，需要快速建立信任
- 微信转发，对方3秒内要看到核心结论
- 方案前书（还没到深度报价阶段）
- 小户型/预算敏感型客户，不喜欢看长文
典型页面：任女士方案前书
五、三种风格的进化关系
线性叙事（V1）
│
├── 代码化重构（V1.5）：内容不变，载体升级
│
└── 设计画布（V2）：内容重组，表达升级不是替代关系，是并行关系。
- V1 是底盘，保证信息完整度
- V1.5 是工程化，解决量产和可维护性
- V2 是表达层，解决客户体验和转化效率
理想状态：同一份数据，三种输出。后台一个数据源，前台根据场景自动选择呈现方式。
六、实做中的关键教训
教训1：画布风格最大的坑是”过度压缩”
把段落变成关键词卡片的时候，最容易丢掉的是因果链。
“痛点→解法”四个字，不如”您说的 / 您真正关心的 / 我们的方案”三栏表。前者只有标签，后者是完整决策逻辑。
教训2：线性叙事最大的坑是”客户不读完”
韦女士方案书全文约4000字，7张表格。客户实际只看3个地方：总价、品牌、工期。中间的技术参数对比表，90%的客户不会逐行读完。
所以画布风格把”总价+品牌”放到最显眼位置，技术参数变成”按需展开”的链接。
教训3：代码化最大的坑是”脱离发布环境”
Next.js 组件拆得再漂亮，客户打不开链接也白搭。WordPress 是龙脉暖通当前的内容阵地，任何页面表达方式的探索，最终都要回到 WordPress 可发布。
结论：先在 WordPress 里验证画布风格，再考虑是否工程化。
七、下一步方向
| 优先级 | 动作 | 目标 |
|---|---|---|
| P0 | 在 WordPress 里用简道云+CSS Grid 复现画布风格 | 验证”画布=重组≠压缩”方法论 |
| P1 | 定义画布风格的信息架构标准（哪些信息前置、哪些后置、哪些折叠） | 让任何顾问都能按模板出画布方案 |
| P2 | 探索”同一数据源，三种输出”的技术方案 | 数据驱动，自动生成线性/画布两种版本 |
| P3 | 客户反馈收集：哪种风格转化率更高 | 用数据验证风格选型 |
附录：三种风格对应页面
| 风格 | 页面 | 链接 |
|---|---|---|
| 线性叙事 | 韦女士大平层方案书 | page_id=2653 |
| 组件化代码页 | Next.js 方案页（本地文件） | 点击完整链接 |
| 设计画布 | 任女士方案前书 | page_id=2685 |
龙脉暖通 · 专注舒适节能设计 · 始于2004
本文由龙脉暖通团队与AI协作完成，2026年6月9日