融合新闻产品制作：交互叙事、视觉设计与互动开发

本章系统介绍融合新闻产品制作的核心技术与方法，涵盖计算机交互叙事理论、视觉设计原则、内容管理系统、新闻游戏与互动新闻开发工具，构建从叙事逻辑到产品实现的完整知识链条。

2026-03-30 第 5 周

学习要点

掌握非线性叙事结构与叙事节点编排的基本方法，能够将交互叙事理论应用于融合新闻产品的叙事设计
掌握色彩、排版、信息层级等视觉设计基本原则，能够评价并优化新闻产品的视觉呈现效果
熟悉主流内容管理系统（CMS）的操作流程，能够完成融合新闻内容的组织、编辑与发布
了解新闻游戏设计逻辑与互动新闻开发框架，能够运用相关工具构建具有互动功能的新闻产品原型

正文

计算机交互叙事理论

计算机交互叙事（Interactive Narrative）是指在数字媒介环境下，读者通过主动操作介入叙事进程，从而影响故事走向、信息呈现顺序或叙事结果的叙事形态。它区别于传统线性叙事的根本特征在于：叙事的时序与路径不再由作者单方面固定，而是由作者预设的叙事逻辑结构与读者的实时选择共同决定。

叙事学家玛丽-劳尔·瑞安（Marie-Laure Ryan）将交互叙事的核心结构概括为"叙事空间"概念——作者搭建可供探索的叙事地形，读者在其中自主导航。这一比喻对融合新闻产品具有直接的操作意义：记者不再仅仅是"讲述者"，更是"叙事空间的建筑师"。

叙事节点与路径设计是交互叙事实践的基础单元。叙事节点（Node）指一个独立的内容单元，可以是一段文字、一段视频、一张信息图或一组数据；节点之间通过"链接"（Link）相互连接，构成叙事图（Narrative Graph）。根据节点连接方式的不同，常见结构包括：

线性链式结构：节点依次连接，读者仅能顺序前进，适用于事件回顾类报道。
树状分支结构：每个节点提供若干选项，读者的选择决定下一节点，适用于情景模拟类新闻游戏。
网状结构：节点之间存在多向连接，读者可自由跳转，适用于深度调查类报道的非线性呈现。

以"新冠病毒溯源"深度报道为例：报道者可将"病毒基因序列分析""动物传人证据链""各国官方调查时间线"设为独立节点，读者可依据自身兴趣自由进入，而非被迫阅读一篇数万字的线性长文。这种设计大幅降低了信息获取门槛，同时保留了报道的知识深度。

用户路径设计还须考虑"叙事闭合"问题：即无论读者选择何种路径，均应能获得相对完整的叙事意义。为此，设计者通常在节点编排时引入"必经节点"（Obligatory Node）与"可选节点"（Optional Node）的区分，确保核心新闻事实的传递不因路径差异而缺失。

视觉设计原则与用户体验

视觉设计（Visual Design）在融合新闻产品中承担双重功能：一方面通过视觉层次引导读者的信息摄取顺序，另一方面通过视觉反馈强化交互操作的可感知性。用户体验（User Experience，UX）则是评估产品在使用过程中满足用户需求的整体感受的综合指标，由可用性（Usability）、可及性（Accessibility）、情感响应（Emotional Response）等维度构成。

信息层级与排版是新闻视觉设计的首要原则。格式塔心理学（Gestalt Psychology）的"接近律"与"相似律"为新闻排版提供了认知科学依据：视觉上相近或相似的元素会被读者归入同一信息组，设计者应利用这一规律，通过间距、字号、粗细与颜色区分标题层级，帮助读者在视觉扫描阶段（F型或Z型阅读路径）迅速定位关键信息。

色彩设计在数据新闻与互动新闻中尤为关键。色彩须遵循三个基本约束：其一，语义一致性——同一色彩在产品全局表达相同含义（如红色表示危险/负面，绿色表示安全/正面）；其二，对比度达标——文字与背景的对比度应满足 WCAG 2.1 AA 级标准（普通文字对比度不低于4.5:1），以保障视觉障碍用户的可及性；其三，色盲友好——避免单独使用红绿对比传递关键信息，可辅以形状或标注加以区分。

交互反馈设计遵循唐·诺曼（Don Norman）在《设计心理学》中提出的"反馈原则"：系统必须在用户操作后立即给出可感知的响应。对于新闻产品，这意味着：点击可展开的注释时，展开动画须在200毫秒内启动；数据筛选操作完成后，图表须在合理时间内更新；鼠标悬停于交互元素上时，光标形态应切换为"pointer"以提示可点击性。

信息可视化的视觉编码原则由统计图形学家爱德华·塔夫特（Edward Tufte）系统化归纳：数据墨水比（Data-ink Ratio）应最大化，即图表中每一像素的存在均须承载数据含义，冗余装饰应予去除。这一原则对数据新闻图表设计具有直接指导价值。

内容管理系统与多媒体发布工具

内容管理系统（Content Management System，CMS）是用于内容创建、存储、组织与发布的软件平台，其核心功能是将内容的"编辑层"与"展示层"解耦，使记者无需掌握前端开发技术即可完成内容发布。

当前新闻机构广泛采用的 CMS 可分为两类：通用开源 CMS（如 WordPress、Drupal）与新闻专用 CMS（如《纽约时报》内部研发的 Scoop、Arc Publishing 旗下的 PageBuilder）。前者灵活性高，插件生态丰富；后者针对新闻生产流程深度定制，支持多媒体嵌入、版本管理、协作编辑与多渠道分发等新闻专项需求。

以 WordPress 为例，其内容组织逻辑围绕"文章（Post）""页面（Page）""分类（Category）""标签（Tag）"四个基础概念展开。记者在后台编辑器（Gutenberg Block Editor）中以"块"（Block）为单位构建页面，每个"块"可以是段落、图片、视频、引用或自定义 HTML 代码块，这一逻辑与叙事节点的概念高度对应。

多媒体发布工具则专注于富媒体内容的集成发布。Shorthand 与 Scrollytelling 工具（如 Flourish、Datawrapper）允许记者在不编写代码的前提下，实现滚动触发动画、数据图表嵌入与多媒体并排展示等互动效果，大幅降低了融合新闻产品的制作门槛。

内容发布的另一关键环节是结构化数据标注。新闻机构采用 Schema.org 词汇表为文章添加机器可读的元数据（如发布时间、作者、文章类型），有助于搜索引擎正确索引新闻内容，提升报道的可发现性。

新闻游戏的设计逻辑与制作工具

新闻游戏（Newsgame）是将新闻事件、社会议题或公共政策的核心逻辑编码为游戏规则，使玩家通过游玩过程体验该逻辑、形成观点的一种融合新闻形态。游戏研究学者米格尔·西卡特（Miguel Sicart）将其核心机制定义为"程序性修辞"（Procedural Rhetoric）：游戏通过规则本身——而非文字或图像——论证新闻观点。

以《卫报》制作的《奥巴马预算模拟器》为例：该游戏将美国联邦预算的增减项编码为可拖动的滑块，玩家须在不突破赤字上限的前提下调配各项支出。游戏本身未发表任何评论，但玩家在反复尝试与失败中自然理解了财政紧缩的结构性困境——这正是程序性修辞的典型实现。

新闻游戏的叙事机制通常包含以下要素：

核心循环（Core Loop）：玩家反复执行的基本操作，须与新闻议题逻辑直接对应
约束条件（Constraint）：模拟现实中的资源限制或规则边界
反馈系统（Feedback System）：将玩家决策的后果以量化形式呈现，强化因果认知

Twine 是目前最广泛用于新闻游戏原型制作的无代码/低代码工具。它以节点图可视化界面支持树状与网状叙事结构的搭建，输出为标准 HTML 文件，可直接嵌入新闻网站。其基本语法如下：

:: 开始 [开始节点标签]
你正在报道一场突发洪灾。救援物资有限，你需要决定报道优先级。

[[前往受灾最严重的村庄 -> 村庄A]] 
[[先采访官方新闻发布会 -> 官方发布会]]

:: 村庄A
你抵达村庄A，发现官方公布的受灾人数严重低估。
你手中有独家证据，但发布可能干扰救援协调。

[[立即发布独家报道 -> 立即发布]]
[[等待救援结束再发布 -> 延迟发布]]

:: 官方发布会
官方数据与你的实地调查存在明显出入。
记者会上，你是否选择公开质疑？

[[公开质疑官方数据 -> 公开质疑]]
[[会后私下核实 -> 私下核实]]

上述结构展示了新闻伦理情景模拟游戏的典型节点编排方式：每个节点呈现一个具体新闻情境，读者的选择触发不同的叙事后果，游戏在规则层面编码了新闻职业伦理的内在张力。

互动新闻开发工具与数据驱动叙事

互动新闻（Interactive Journalism）是以数据、程序与用户交互为核心手段，实现信息个性化呈现与读者主动参与的新闻形态。其技术实现路径以数据驱动叙事（Data-Driven Storytelling）为主干：记者以结构化数据为原材料，借助可视化工具或前端开发框架，将数据转化为可探索的交互叙事界面。

Flourish 与 Datawrapper 是目前新闻机构最广泛采用的无代码数据可视化发布工具。前者支持赛马图、滚动叙事、网络关系图等复杂交互形式；后者专注于统计图表的新闻化呈现，内置符合新闻规范的配色方案与字体系统，产出的图表可直接以 iframe 形式嵌入 CMS。

对于有一定技术基础的新闻从业者，D3.js（Data-Driven Documents）是实现定制化互动可视化的核心 JavaScript 库。D3.js 的核心逻辑是将数据与 DOM 元素绑定，并通过数据的变化驱动视觉元素的更新。以下示例展示了一个最简数据绑定逻辑：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
// 引入 D3.js 库（假设已通过 CDN 加载）
// 场景：将各省新冠确诊数量绑定为条形图高度

const data = [
  { province: "湖北", cases: 67803 },
  { province: "广东", cases: 1388 },
  { province: "河南", cases: 1276 }
];

// 选择页面中 id 为 "chart" 的 SVG 容器
const svg = d3.select("#chart");

// 为每条数据创建一个 rect 元素（矩形条形）
svg.selectAll("rect")
  .data(data)           // 将数据数组与元素绑定
  .enter()              // 为每条数据创建新元素
  .append("rect")       // 追加矩形元素
  .attr("height", d => d.cases / 100)  // 以确诊数量决定矩形高度（缩放比例）
  .attr("width", 40)                   // 固定宽度40像素
  .attr("x", (d, i) => i * 60)        // 按索引横向排列
  .attr("fill", "#c0392b");            // 统一设置填充色

Scrollytelling（滚动叙事）是互动新闻中应用最广泛的叙事模式，其核心逻辑是将读者的页面滚动行为映射为叙事进程的推进：每滚动到一个预设位置，图表、地图或视频即切换至下一叙事状态。Scrollama.js 是实现这一效果的轻量级 JavaScript 库，《纽约时报》《华盛顿邮报》等主流媒体均在其互动报道中大量采用滚动叙事模式。

数据驱动叙事的质量最终取决于数据新闻生产流程的规范性，包括：数据来源的权威性核查、数据清洗与异常值处理、可视化图表的设计审核（防止误导性视觉编码）以及最终发布前的跨设备兼容性测试。这一流程本质上是新闻核查规范在数字技术层面的延伸。

实践示例

场景：为一篇关于"中国城市空气质量十年变化"的深度报道制作一个基于滚动叙事模式的互动新闻原型，将各城市 PM2.5 年均浓度的变化趋势以可交互折线图形式呈现，并配合滚动进度逐步揭示关键叙事节点。

目标：构建一个包含标题区、滚动叙事区（含折线图与文字说明步进）的 HTML 页面原型，使读者滚动页面时，图表依次高亮显示北京、上海、成都三座城市的数据，同时右侧出现对应的叙事说明文字。

实现步骤：

第一步：搭建 HTML 基础结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>中国城市空气质量十年变化</title>
  <style>
    /* 基础布局：左侧固定图表，右侧滚动文字 */
    body { margin: 0; font-family: "Noto Serif SC", serif; background: #f9f7f2; }
    
    #sticky-chart {
      position: sticky;       /* 固定定位：图表跟随滚动保持可见 */
      top: 0;
      width: 50%;
      height: 100vh;          /* 占满视窗高度 */
      float: left;
    }
    
    #scroll-text {
      margin-left: 52%;       /* 文字区域从右半侧开始 */
      padding: 0 2rem;
    }
    
    /* 每个叙事步骤的文字卡片 */
    .step {
      min-height: 80vh;       /* 每步占视窗80%高度，保证滚动触发有足够空间 */
      display: flex;
      align-items: center;
      padding: 2rem;
      background: rgba(255,255,255,0.85);
      margin-bottom: 2rem;
      border-left: 4px solid #c0392b;  /* 左侧红色装饰条，与图表色彩呼应 */
    }
    
    /* 数据来源标注，符合新闻规范 */
    .data-source {
      font-size: 0.75rem;
      color: #888;
      margin-top: 0.5rem;
    }
  </style>
</head>
<body>

  <!-- 页面标题区 -->
  <header style="padding: 4rem 2rem; background: #1a1a2e; color: white;">
    <h1 style="font-size: 2rem; font-weight: 900;">空气的代价</h1>
    <p style="font-size: 1.1rem; color: #aaa;">2013—2023：中国主要城市 PM2.5 浓度变迁</p>
    <p class="data-source">数据来源：中国生态环境部官方年报</p>
  </header>

  <!-- 主体区：左侧图表 + 右侧滚动文字 -->
  <main style="display: flex;">
    
    <!-- 左侧固定图表容器 -->
    <div id="sticky-chart">
      <svg id="line-chart" width="100%" height="100%"></svg>
    </div>
    
    <!-- 右侧滚动文字步进 -->
    <div id="scroll-text">
      
      <div class="step" data-step="0">
        <p>2013年，"雾霾"一词进入公众视野。<br>
        北京当年 PM2.5 年均浓度达 <strong>89.5 μg/m³</strong>，
        约为世卫组织标准的9倍。<br>
        滚动继续，了解此后十年的变化。</p>
      </div>
      
      <div class="step" data-step="1">
        <p>2017年，《大气污染防治行动计划》进入收官阶段。<br>
        <strong>北京</strong> PM2.5 首次降至 58 μg/m³，
        同比下降幅度创历年之最。<br>
        政策干预的效果在数据曲线上留下了清晰折痕。</p>
      </div>
      
      <div class="step" data-step="2">
        <p><strong>上海</strong> 的改善轨迹与北京高度同步，
        但绝对浓度始终低于北京约15—20 μg/m³。<br>
        这一差距与两城的产业结构差异密切相关：
        上海制造业占比持续低于京津冀地区。</p>
      </div>
      
      <div class="step" data-step="3">
        <p><strong>成都</strong> 的改善速度在2018年后明显提速，
        但受盆地地形影响，静风天气导致污染物扩散困难，
        其 PM2.5 浓度在三城中下降幅度相对有限。<br>
        地理因素构成了政策效力的天然边界。</p>
      </div>
      
    </div>
  </main>

</body>
</html>

第二步：引入 D3.js 与 Scrollama.js 并绘制折线图

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!-- 在 </body> 前引入依赖库 -->
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://unpkg.com/scrollama"></script>

<script>
// ── 数据定义 ──────────────────────────────────────────────
// 模拟数据：三城市2013—2023年PM2.5年均浓度（μg/m³）
const pmData = {
  北京: [89.5, 85.9, 80.6, 73.0, 58.0, 51.0, 42.0, 38.0, 33.0, 30.0, 29.8],
  上海: [62.1, 55.0, 53.0, 45.0, 39.0, 36.0, 31.0, 27.5, 25.0, 23.0, 22.5],
  成都: [97.0, 88.0, 82.0, 75.0, 65.0, 59.0, 52.0, 50.0, 48.0, 44.0, 42.0]
};

const years = d3.range(2013, 2024);  // 生成2013至2023的年份数组

// 城市对应颜色编码
const colorMap = {
  北京: "#c0392b",   // 红色：首都，视觉权重最高
  上海: "#2980b9",   // 蓝色
  成都: "#27ae60"    // 绿色
};

// ── 图表尺寸与比例尺 ──────────────────────────────────────
const margin = { top: 40, right: 40, bottom: 50, left: 60 };
const width  = document.getElementById("sticky-chart").offsetWidth  - margin.left - margin.right;
const height = window.innerHeight - margin.top - margin.bottom;

const svg = d3.select("#line-chart")
  .append("g")
  .attr("transform", `translate(${margin.left},${margin.top})`);

// X 轴：时间比例尺
const xScale = d3.scaleLinear()
  .domain([2013, 2023])
  .range([0, width]);

// Y 轴：PM2.5浓度比例尺（0—120 μg/m³）
const yScale = d3.scaleLinear()
  .domain([0, 120])
  .range([height, 0]);

// 绘制坐标轴
svg.append("g")
  .attr("transform", `translate(0,${height})`)
  .call(d3.axisBottom(xScale).tickFormat(d3.format("d")));  // 年份格式：整数

svg.append("g")
  .call(d3.axisLeft(yScale));

// Y 轴标签
svg.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", -50)
  .attr("x", -height / 2)
  .attr("text-anchor", "middle")
  .style("font-size", "12px")
  .text("PM2.5 年均浓度（μg/m³）");

// 绘制世卫组织标准线（5 μg/m³）作为参照
svg.append("line")
  .attr("x1", 0).attr("x2", width)
  .attr("y1", yScale(5)).attr("y2", yScale(5))
  .attr("stroke", "#bbb").attr("stroke-dasharray", "4,4");

svg.append("text")
  .attr("x", width - 5).attr("y", yScale(5) - 5)
  .attr("text-anchor", "end")
  .style("font-size", "10px").style("fill", "#999")
  .text("WHO 标准（5 μg/m³）");

// ── 绘制三条折线（初始透明，通过滚动逐步高亮）──────────────
const lineGenerator = d3.line()
  .x((d, i) => xScale(years[i]))
  .y(d => yScale(d));

// 为每座城市绘制路径，初始透明度0.15（灰显）
Object.entries(pmData).forEach(([city, values]) => {
  svg.append("path")
    .datum(values)
    .attr("class", `line-${city}`)  // 用城市名作为类名，便于后续选中
    .attr("d", lineGenerator)
    .attr("fill", "none")
    .attr("stroke", colorMap[city])
    .attr("stroke-width", 2.5)
    .attr("opacity", 0.15);          // 初始灰显
});

// ── Scrollama：监听滚动步进，动态更新图表高亮状态 ───────────
const scroller = scrollama();

// 各步进对应高亮的城市
const stepCityMap = {
  0: null,    // 第0步：无高亮，展示全局背景
  1: "北京",
  2: "上海",
  3: "成都"
};

scroller
  .setup({
    step: ".step",      // 监听所有 class 为 "step" 的元素
    offset: 0.5         // 元素到达视窗50%位置时触发
  })
  .onStepEnter(({ element, index }) => {
    
    const highlightCity = stepCityMap[index];
    
    // 遍历所有折线：高亮目标城市，其余灰显
    Object.keys(pmData).forEach(city => {
      const opacity = (highlightCity === null || city === highlightCity) ? 1 : 0.15;
      const strokeWidth = (city === highlightCity) ? 4 : 2;
      
      svg.select(`.line-${city}`)
        .transition().duration(400)   // 400毫秒渐变，避免突兀切换
        .attr("opacity", opacity)
        .attr("stroke-width", strokeWidth);
    });
    
    // 高亮当前步骤的文字卡片
    d3.selectAll(".step").style("opacity", 0.5);
    d3.select(element).style("opacity", 1);
  });

</script>

效果说明：

页面加载后，读者首先看到黑色标题区，简洁呈现报道主题与数据来源。进入主体区后，左侧折线图固定显示，三条折线初始均以低透明度呈现，传递出"全部数据存在，等待被发现"的视觉暗示。随着读者向下滚动，每进入一个文字卡片区域，对应城市的折线即从灰显状态过渡为全色高亮显示（北京为红色，上海为蓝色，成都为绿色），线条同时加粗，其余折线保持灰显。与此同时，当前文字卡片不透明度升至100%，前序卡片退为半透明，形成视觉焦点的自然流动。400毫秒的 CSS 过渡动画保证了状态切换的流畅感。世卫组织标准参照线以虚线形式始终保持显示，使读者在任意时刻均能直观感受到各城市浓度与国际标准之间的差距，实现了数据论据的持续在场。整个原型无须任何后端服务，导出为单一 HTML 文件即可在任何现代浏览器中运行，亦可通过 iframe 嵌入主流 CMS。

练习

基础练习：使用 Twine 工具搭建一个包含至少6个节点的新闻伦理情景模拟游戏，主题自选（建议选取"突发事件采访中的隐私保护"或"社交媒体未经证实信息的转发判断"），要求每条叙事路径均以一段新闻从业者的反思文字收尾。
进阶练习：选取一组公开数据集（如各省GDP数据、城市人口流动数据等），使用 Datawrapper 制作一张交互式地图或折线图，要求：（1）图表标题与描述文字符合新闻标题写作规范；（2）色彩方案通过 WCAG 2.1 AA 级对比度检验（可使用 WebAIM Contrast Checker 工具在线验证）；（3）撰写不少于300字的"设计说明"，解释你的视觉层级设计决策。
综合练习：围绕一个具有本地新闻价值的社会议题（如城市公共空间分布不均、外卖骑手劳动权益等），完成一个融合新闻产品的完整原型设计。要求：（1）绘制包含至少8个节点的叙事图，标注必经节点与可选节点；（2）使用 Shorthand 或 Flourish 制作可发布的多媒体版本；（3）撰写不少于500字的产品设计文档，说明叙事结构选择的依据、目标用户的用户路径设计以及视觉设计决策；（4）邀请至少2位同学进行可用性测试，根据反馈修订原型并记录迭代过程。

本章小结

计算机交互叙事：以叙事节点与路径为基本结构单元，记者作为叙事空间建筑师，须在保障核心新闻事实传递的前提下设计多路径叙事图
视觉设计原则：信息层级、色彩语义一致性与交互反馈是融合新闻产品视觉设计的三项核心约束，WCAG 可及性标准是不可忽视的硬性门槛
内容管理系统：CMS 将内容编辑层与展示层解耦，记者无需掌握前端技术即可完成多媒体内容的组织与多渠道发布
新闻游戏：程序性修辞通过游戏规则本身传递新闻论点，Twine 是新闻游戏原型制作的入门首选工具
数据驱动叙事：Flourish、Datawrapper 等无代码工具与 D3.js 等专业库共同构成互动新闻的技术工具链，滚动叙事是目前最广泛采用的互动叙事模式