1.基本框架

上个视频中提到，我们开发了一个网站，希望「通过升级媒介来让所有人的学习都变得更容易」，交代了我们为什么要做这件事，以及想要如何实现这个目标。

这个视频中，我会介绍我们现阶段是如何实现这些思路的，介绍网站的具体功能。

由于网站的媒介会尽可能多地支持各种模态，我们也把网站里的内容称为「多模态材料」或「多模态视频」。

1.1.内容结构

任何一个多模态视频，都是由若干个「学习材料」以特定结构组合而成的。「学习材料」是网站要展示和操作的「基本单元」，以「段落」的形式呈现。

每个「段落」都可以包含 7 种模态，为了统一描述，我们称其为：

• 自然语言：也就是汉语/英语文本

• 数学语言：也就是公式

• 计算机语言：也就是代码

• 视听语言：也就是动画、声音

• 段落讨论：我们把观众针对某个段落的讨论，也同样视为学习材料的一种模态

• 段落结构：指的是每个段落在多模态视频中的层级和位置，该信息决定了所有段落是如何组织成一个多模态视频的

• 段落类型：用于标识该段落属于什么类型的学习材料，共有：描述、例子、类比、自定义、标题（知识点/话题）

• 段落名称：是高度概括该段落内容的关键词

目前我们并没有对三种语言进行区分展示，而是在正常文本中加入「latex公式」和「代码」的支持。

1.2.区域与模式

随后我们划分了三个区域来展示上述信息，分别是目录区、动画区和文本区：

• 目录区：展示段落结构、段落类型、段落名称

• 动画区：展示动画

• 文本区：展示语言模态（自然语言、数学语言、计算机语言）、段落讨论、段落类型

目录区和文本区均有两种模式，随播模式和展开模式：

• 在随播模式下，区域上的信息均会转变成「有时限」模式，保留核心信息与操作。

• 在展开模式下，区域上的信息就会转变成「无时限」模式，提供全部信息与操作。

切换方式也有两种，点击切换和快捷键切换：

• 可点击文本区的任意位置和目录区的「父级区域」来切换模式

• 可按「数字1」切换目录区的模式，按「数字3」切换文本区的模式，按「数字2」回到随播模式

2.目录区

2.1.展开目录

当目录区变成展开模式时，段落结构会以导图的形式展示。

对于目录展开模式下的信息：

• 可通过「有无填充」来区分「已播」和「未播」

• 可通过「颜色」来区分「段落类型」

对于目录展开模式下的交互：

• 可通过「单击」段落来跳转到段落起点

• 可通过「拖拽」来跳转到段落的某一时刻

• 可通过「悬停」来进一步查看和交互

2.2.随播目录

当目录区变成随播模式时，会仅显示「当前层级」的段落结构。同时也细分为两个区域，父域和子域：

• 左侧的父域：显示「父级段落」的信息

• 右侧的子域：显示「当前段落」和「同级段落」的信息

对于目录随播模式下的信息：

• 可通过「有无填充」来区分「已播」和「未播」

• 可通过「颜色」来区分「段落类型」

• 可通过「明暗」来区分「当前段落」和「同级段落」

• 当「子域」容纳不下那么多段落时，会尽可能多地显示当前段落周围的段落，显示不下的段落会被折叠，仅展示段落的数量

父域和子域的段落会随着播放，动态地切换，以此来支持多层级目录的展示，而为了提醒观众「段落层级」是「向下级切换」还是「向上级切换」，我们也做了切换动画帮助区分。

对于目录随播模式下的交互：

• 可通过「单击」段落跳转到段落起点

• 可通过「拖拽」来跳转到段落某时刻

• 可通过「悬停」进一步查看和交互

• 可通过「单击」父级段落切换到目录展开模式

• 另外，由于随播目录仅显示当前层级的段落，一旦切换到下一个层级，就失去了对上层段落的控制，所以为了方便，还提供了一个「跳到上个段落」的按钮，可通过悬停在父级段落上唤出。

3.文本区

3.1.展开文本

当文本区变成展开模式时，又会细分成三个区域，依次是标签区、文章区、讨论区：

• 标签区：展示段落类型

• 文章区：展示文章

• 讨论区：展示针对某个段落的讨论

对于文本展开模式下的信息：

• 可通过标签的颜色和文字来区分段落类型

• 可通过背景高亮来定位当前段落和当前句子

• 为了加快信息查看速度，讨论也被分成了四类：提问、回答、异议、补充，也对应四个颜色

• 讨论分为针对段落的讨论，和讨论下的讨论，可通过排版层级进行区分

• 可通过标签下的数字来快速确定该段落的讨论数

• 为了能大致辨别某条讨论的可信度，每条讨论都有一个「认同」属性，通过计算得出，可为负值；

对于文本展开模式下的交互：

• 可通过「双击」句子来跳转到句子的时刻

• 可通过「单击」标签来切换「当前选中段落」，以指明要对哪个段落进行操作

• 可通过点击讨论按钮，并选好讨论类型，打开编辑栏

• 编辑栏中可以切换讨论类型

• 编辑栏也支持 latex公式，通过点击小眼睛来切换编辑/显示模式

• 也可以把某个标签或某个句子直接拖拽到编辑栏里，方便添加讨论时的引用，点击链接后被引用的位置会闪烁

• 可通过单击文章中的公式来复制公式

• 部分段落有「关联段落」，点击后也会闪烁被关联的段落位置，可帮助学习者明确「非相邻段落」之间的关系

3.2.随播文本

当文本区变成随播模式时，文章会被转换成字幕，段落标签显示在字幕左侧，而段落讨论会被转换成「讨论热度」，用于提醒学习者“当前段落产生了不少讨论，你或许想要展开文本区来查看”。

对于文本随播模式下的信息：

• 公式、代码、链接的形式在字幕中依旧保留

• 字幕过长时会滑动显示

• 讨论热度是根据段落讨论总数而分出的档位，若讨论较多，会出现一个火种，若讨论热烈，会出现两个火种

对于文本随播模式下的交互：

• 点击有链接的位置会打开对应网页

• 点击其余位置会切换到文本展开模式

• 点击公式会复制公式到剪贴板

4.摘注与派生

4.1.随播摘注

你还会注意到一个「摘注」按钮，那是我们当前对「有时限」模式下记笔记的一种解决方案。思路是：如果能让学习者不必输入任何内容，仅靠点一下鼠标来记笔记，就能避免“还没记完笔记，视频就播放到下一个内容了”。

基于这个思路，我们就做了「摘注」功能。该功能有两种用法，一种是「只摘抄，不注释」，另一种是「既摘抄，又注释」，怎么运用二者取决于学习者「是否有充足的操作时间」：

• 只摘抄，不注释：当没有足够的操作时间时，点击摘注后，直接点保存，就能把对应段落的信息直接摘取下来，保存到「摘注收藏栏」里，待学习者看完视频后，再来整理与回顾。

• 既摘抄，又注释：当有足够多的操作时间时，点击摘注后，可先给段落赋予新的“名称”、“概述”和“类型”，然后再保存到收藏栏里。相当于在 github 上复制了函数后，修改函数的名称和部分内容，为自己所用。

可以按「数字1」左侧的那个按键来摘注。

看完视频后，可通过点击「打开派生」按钮，在视频下方的「摘注收藏栏」里对摘注进行管理和回顾。

4.2.派生整理

摘注实际上可被看作是学习者基于原段落的「二次创作段落」，且保留了原段落的引用链接，只是缺省了段落结构信息，成了孤立的段落，但当学习者积累了足够多的摘注，再给这些摘注赋予结构信息后，就可以形成一个新的多模态视频。

基于这个思路，我们做了「派生」功能。该功能可以让学习者通过操作导图来赋予摘注结构信息，从而形成一个“派生”视频。

学习者可以通过三种方式往导图里添加摘注：

• 从摘注收藏栏里拖拽：适合整理之前看视频时添加的摘注

• 拖拽标签区或目录区中的标签来添加：适合专门整理摘注时使用

• 直接在导图中添加一个节点：但这样创建的节点没有任何信息，需要自己编辑，适合添加站外的引用

• 当悬停在某个派生上时，会出现播放按钮，点击后就可以播放该摘注的原段落内容了

• 打开派生时，目录区的上方会出现多标签栏，可打开多个视频，方便学习者用多个视频来整理派生

• 学习者可以给派生命名和添加概述

• 点击后退按钮，可进入到派生列表进行管理

5.统计封面

我们也思考了「如何从海量的视频中挑选出自己想要的学习材料」。既然学习者找的是学习材料，就应该根据学习材料来筛选要看的视频。为此，我们增加了一个特殊的封面，该封面由四部分构成，分别是：段落类型的雷达图、讨论类型的条状图、多个副标题和知识点导图。

知识点导图部分也有交互功能：

• 当知识点上有 info 标识时，可通过悬停查看该段落的概括

• 可以通过点击段落，直接跳到段落位置播放，便于观看后的复习

由于知识都是解决同一类问题的，正标题难免会起抽象的名字，因此提供了三个可写具体应用的副标题。

6.未来计划

以上便是网站现有功能的简介了。目前我们也正在制作一个新节目（就是学习观书的内容），是关于如何认识世界、改造世界的故事，会包含有关学习的全部内容，也包含剩下的那两个环节的优化思路，也就是：

• 如何优化「传授者对学习材料的制作过程」

• 如何优化「学习者对学习材料的学习过程」

网站未来的所有功能都是基于该节目中的理论而开发的，也可将其理解为网站在理论层面上的说明书。

该节目将会是一个付费内容，也会是网站目前唯一的收入来源，将用于支撑我们后续的服务器、流量、新功能与移动端开发等所有支出。

目前的网站功能都是具有实验性质的，还有很多功能要试验和优化，当功能逐步完善成型后，我们也会将网站的创作功能提供给其他人使用。