随着《义务教育信息科技课程标准（2022年版）》对计算思维的强调，算法知识逐渐被大家所重视。但算法由于本身的抽象性，在中学生普遍程序设计基础薄弱的当下，较难高效地开展教学。因此，许多专家提出借助可视化工具将算法从复杂的代码中抽离出来，让学生直观地感受算法本身，从而帮助理解。本文介绍了市面上的几类算法可视化的方法，并为大家重点介绍Data Structure Visualizations这款工具的特点以及使用方法，同时我也会结合基于该工具的教学实践，检验真实效果，并给出借助算法可视化工具的教学建议，希望可以帮助教师适应新课程改革下对算法教学的要求，从而有效提升学生的计算思维。

一、可视化的教学理念

《义务教育信息科技课程标准（2022年版）》的颁布，正式将计算思维确定为一项重要的信息科技学科核心素养。然而对刚刚步入初中的学生来说，算法知识依然较为抽象，在传统讲授加练习的教学模式下，学生会消耗大量时间在代码的编写上，但对算法思想却缺乏思考，导致大多数学生只能机械地套用基本模板，而无法将其应用到解决实际问题上。

在此背景下，许多专家提出了基于可视化理念的算法教学策略。脑科学研究发现，人类1/3大脑都是处理视觉信息，因此在课堂上使用可视化工具来呈现教学信息，更容易帮助学生建构认知。江苏师范大学的王树梅老师通过一个学期的对比实验研究，发现借助算法可视化工具教学的班级，在学时量更少的情况下却能够取得更好的平均分成绩。北京师范大学的赵国庆、黄荣怀等教授则以双重编码理论为基础，借助知识制品的角度，从理论层面介绍了知识可视化的研究框架与应用方法。

目前主要的算法可视化方法大致有三类：基于交互式动画、图形化编程以及演示系统。其中李晓鸿等借助Flash软件完成了基于学习者视角的常见算法的交互式动画，算法执行过程更加直观，但是其交互性依旧停留在最基本的开始、暂停两个操作步骤，对算法运行过程中产生的中间数据支持不够。常年执教信息学竞赛的一线教师梁雪梅提出了基于Scratch搭积木自主探究式的教学方法，提升学生在编程时的主观能动性，但是这对学生的前置知识有要求，同时在语境较为抽象的问题中较难借助Scratch准确还原问题背景。杜鑫等一大批大学教授则致力于算法可视化仿真教学系统的设计，能够有效帮助学生直观化地理解算法执行过程，但是这类系统往往是基于B/S架构的封闭式系统，普通一线教师开发使用成本较高，不具有普适性。

因此我考虑使用市面上面向公众开源的在线算法可视化工具，并经过试用和对比，综合各种考虑，最终选择了Data Structure Visualizations这款工具。借助这款开源算法可视化工具，可以更高效地开展算法教学，帮助学生深入理解算法。

二、 Data Structure Vi -sualizations工具介绍

Data Structure Visualizations是美国旧金山大学计算机科学家大卫·加勒基于HTML5和JavaScript开发的一款算法可视化网站。其集成了一整套从基本算法到数据结构的交互式动画，并提供了一系列用户组件，包含特定算法的调参和常规动画的控制功能等。

1.页面模块

Data Structure Visualizations网站的页面设计简约大方，一共6个模块（如图1），其中最主要的是算法模块，内置了包括递归、排序、动态规划、线性表、栈、树、图等常见的算法及数据结构，找到对应算法点进去后可以通过文本框、按钮等组件来帮助调整参数。

2. 算法可视化过程

这款网站是全英文的，但是词汇量不多，难度也不大。低年级学生在使用过程中可以借助浏览器的翻译功能，将其转换为中文版（不同浏览器翻译可能有区别，因此本文后续演示一律使用原版英文状态）。

以常见的冒泡排序为例，我们选择“Algorithms”模块下的“Sorting”。系统会根据需要随机生成一系列数据，并且以条形图高低的方式来直观展现数据量的大小，然后选择对应“冒泡排序”的按钮，平台就会自动调用后台的程序，并且会将排序过程中两两变量的交换过程用不同颜色直观地展示在界面上。整个过程中，学习者可以根据进度自主调整程序运行的速率，随时暂停、继续和回溯，实现了整个算法的可视化。这种直观的展现非常有利于学生理解算法的基本思想，为后期的代码实现提供了坚实的理论支撑。

3. 优势介绍

丰富的算法资源库 平台一共提供了包括线性表、树、图在内的57种算法，基本涵盖了中学阶段需要涉及的程序，免去了一线教师高额的开发成本。

在线使用免注册 这款工具是基于B/S架构的在线网站，虽然是全英文，但是响应速度极快，且支持包括IOS设备在内的任何浏览器。另外这款网站免注册、无需收费的特点，使其特别适合国内中小学生学习。

交互式可控 市面上很多算法可视化平台虽然也能够对算法进行形象化表达，但是互动性不足，学生无法根据自己的需求自行调节程序的进程。

强大的定制功能 该平台考虑到部分用户定制化的需求，提供了HTML模板示例以及对应的JavaScript文件。借助于此，用户甚至可以针对平台尚未提供标准可视化的算法自行创建自己的源代码，并使其可视化展现。

三、可视化工具应用分析（实际应用案例）

接下来我以斐波那契数列为例，设计了基于Data Structure Visualizations的递归算法教学案例。

1.问题提出

有一种兔子，从出生后第3个月起每个月都生一只兔子，小兔子长到第3个月后每个月又生一只兔子。假设有一只兔子是第3个月出生的，那么它第5个月开始会每个月都生一只兔子。如果一月的时候有1只兔子，假如兔子都不死，请问第n个月（n≤50）的兔子总数是多少。

2.抽象建模

引导学生通过表格的形式，列举出几个月的兔子数量，尝试找出规律。通过举例，我们不难发现，第3个月的兔子数量是第1、2个月的兔子数量之和，第4个月的兔子数量又是第2、3个月的兔子数量之和，因此我们可以得出通项方程f（n）=f（n-1）+f（n-2），（n≥3）而这实际上就是非常有名的斐波那契数列。

3.问题分析

我们仔细观察斐波那契数列会发现，第n项的值是通过解决第（n-1）项和第（n-2）项得来的，所以其本质是一个将大问题转换为小问题的过程，只要我们知道了起始项f（1）和f（2）的值，那么n无论取多大的值，理论上都是可以通过将其不断拆解直到f（1）和f（2）无法再分解而求得。这种算法在数学上对应的是归纳法，在程序设计中我们称其为递归算法。

总结递归算法的思路，我们发现，递归算法需要包含三个方面，可见下表。

依据总结的递归算法解题步骤，给出递归代码，形成初始化感性认知，递归算法模板如图2。

4.Data Structure Visua-lizations分析递归过程

由于递归算法涉及函数的重复自我调用，因此这个过程一定会导致部分学生难以理解调用过程中数据的走向。我们这时打开Data Structure Visualizations中的斐波那契数列代码，以10作为初始参数，展示程序是如何一步步将大问题逐渐分解为一个个小问题，直到最终求得f（1）和f（2），同时在这个过程中引导学生发现递归算法的精髓就是要找出跳出循环的条件，否则会陷入到死循环的困境中。递归算法可视化如图3。

在这个过程中，我们甚至可以将n的初始值参数调大到50，此时程序的执行过程是异常缓慢的，可以引导学生借助工具的暂停、步进等功能探索程序超时的原因，充分发挥主观能动性，鼓励其自主调试程序以改良递归算法的缺陷。

5.课堂小结

当学生借助Data Structure Visualizations直观地感受到递归算法中函数调用的过程后，再让学生编写并尝试改良初始递归代码，从可视化算法形成直观感受，到借助平台自主控制程序进程，自主摸索并深入理解代码，就能够让学生将学习到的算法应用到实际问题当中，最终实现提高算法背后的计算思维。

四、可视化工具在教学应用中的展望与困难

算法课应该怎么上？其是否等同于编程课？这是我在执教算法时一直思考的问题。算法的本质应该是计算思维，代码只是其作用到计算机的手段。所以在算法教学上，我希望可以将数据可视化软件融入到教学环节中，将学生从代码中剥离出来，直观地感受算法的执行过程，体会其背后所蕴含的思想，以便培养学生的逻辑思维能力。这是之前传统课堂所无法实现的，也是我认为可视化工具在日后算法教学上会得到重视的原因。

虽然可视化工具愈发受到重视，但是我们也需要了解可视化工具在教学应用上面临的困难。

1.针对信息科技课程的可视化应用的理论研究不够

由于可视化在知识传递和认知建构中拥有巨大优势，因此中小学课堂中越来越多地使用可视化工具进行授课，但是更多把可视化教学局限在提供一种图形化展示，而忽略了我们需要在教学形式上考虑借助可视化工具提供一种从抽象到具体的处理方法，以期高效地解决复杂知识的抽象问题。西北师范大学的梁潇丹对“基于可视化的信息技术课的教学设计”进行了文献研究，发现只有38条记录是有关联的，这说明当前国内对信息科技课程可视化教学的研究还太少，课程设计缺乏理论基础。

2.可视化工具的教学资源加工难度偏重

另外，可视化工具在应用过程中不可避免地需要教师更多的准备，课堂管理上的难度增加。我采访发现，大部分教师并不是不愿意使用可视化工具，而是没有精力去制作可视化内容，更别谈设计可视化教学了，因此这就需要从组织层面顶层设计，筹备可视化教学资源库，以便进一步推广使用。

综上所述，算法可视化工具在目前的实际教学应用中依然存在着许多不足。但或许，对我们而言更重要的是开始，而不是一次就完美。只要我们不断努力，最终一定可以实现更高效的算法教学。