设计54张计算机科学卡片教会我的平面设计心得

背景

本文作者是一名软件工程师，在业余时间设计并制作了一副名为 Algodeck 的实体卡片——共 54 张，每张卡片都配有醒目的插图和简短说明，旨在将计算机科学与数学中的核心概念、算法、数据结构以及思维模型提炼成一种容易理解的形式。作者认为，计算机科学对许多人来说是一个“黑箱”——抽象、密集、隐藏在屏幕之后，而他自己却看到了其中的优雅结构与创造性问题解决。通过这个项目，他不仅实现了知识的简化传播，还借机学习了图形设计的基础，并发现了两个领域之间的深层共通之处。

核心内容

Algodeck 是作者在大学和软件工程师工作中积累的、自己最喜欢的算法、数据结构和思维模型的集合。卡片内容既有信息性的，也有指导性的。例如，其中一张卡片建议：“不要总想着该做什么，试着想想该避免什么。哦，走一走也挺好。”

作者的愿景是将复杂知识浓缩成简短、易读的形式，让读者偶然间发现感兴趣的点。这副卡片打破了传统教科书线性、密集的呈现方式。学习时跟随自己的路径是关键。有时一张卡片会显得晦涩难懂，但只要它能引导读者去搜索更多信息并学到新东西，作者就认为任务完成了。

在深入项目过程中，作者意识到总有更多东西要学。他利用这个机会学习图形设计的基础知识，并将自己对编程和逻辑的热爱与图形设计融合，用代码创作了全部 54 幅插图。

他使用的工具是自己的老本行：代码。对他来说，这比打开 Illustrator 到处点击更自然。他可以用代码一次性改变所有卡片的颜色或描边宽度，从而快速测试不同选项。使用代码也带来了约束，这对他帮助很大。

这个项目让作者认识到，计算机科学与图形设计之间的共同点比想象中更多。两者都在解决问题：图形设计解决沟通问题，软件工程解决信息问题。在两个学科中，从业者都是从构建系统开始来解决问题的。

图形设计师往往精通数学和逻辑概念，有时自己都没意识到。决定字体尺度或划分网格需要数学思维。我们常常使用黄金比例等概念来合理化布局选择。Gerstner 的著名著作《设计程序》（1964 年）是一份面向系统设计的宣言，受 60 年代计算机系统兴起启发。最近，Martin Lorenz 的《灵活视觉系统》引入了创建可重用、可组合的设计系统以生成沟通方案的理念。作者发现这种系统思维方法对这个项目很有用，因为他需要设计 54 张风格和尺度统一的卡片。

在第一版原型中，所有卡片的尺度都不一样。有些插图很小，有些很大，看起来很杂乱，但这只是一个探索阶段。在第二版原型中，作者挑选了喜欢的部分，并将它们结晶成一个设计系统。为了统一，他将空间划分为网格。单元格的大小决定了所有元素的大小，甚至描边的粗细。使用代码进行设计可以创建变量，并编码设计系统的规则。通过定义规则和变量，施加约束，事情变得更容易。设计系统也意味着不必从空白页开始，而是可以拉取形状、颜色和基本元素，然后开始尝试。

在视觉语言上，作者倾向于简洁，选择了经典的红蓝双色。这既呼应了计算机使用的二进制系统，也向包豪斯运动和法国旧式小学课本致敬。基本形状和颜色贯穿始终。

工具方面，作者使用了 Drawbot，这是一个 Python 驱动的图形设计工具。有趣的是，Drawbot 是由 Python 之父 Guido van Rossum 的兄弟 Just van Rossum 创建的。

关于 AI 大语言模型，作者提到自己开始这个项目时，这些工具还没有成为主流。他亲手设计和书写了所有内容，只用了 Grammarly 检查语法。现在情况变了，他不确定自己是否还会重新开始这个项目，但他相信 Algodeck 现在有了更重要的角色：它鼓励人们跳出屏幕，花时间翻翻卡片。当然，你可以让 LLM 输出：“给我 54 个我应该从计算机科学、数学和工程中学到的东西，每个主题 100 字。”它会生成通顺的句子，并且做得很好。但最终，Algodeck 是一个学习工具和问题解决套件，帮助人们学习计算机科学、培养新的问题解决技能，并改变他们处理问题的方式。

关键要点

• 图形设计与软件工程本质相通：图形设计解决沟通问题，软件工程解决信息问题，两者都是通过构建系统来解决问题。
• 用代码做设计：作者使用 Python 驱动的 Drawbot 创作全部 54 张插图，利用变量和约束快速迭代，比传统图形工具更高效。
• 设计系统是关键：从第一版混乱的尺度到第二版基于网格的设计系统，统一了所有卡片的样式和比例，降低了重复决策成本。
• 视觉语言简洁：红蓝双色致敬二进制、包豪斯和法国旧式课本，基本形状和颜色贯穿始终，强调易读性和一致性。
• 学习路径非线性：卡片不求百科全书式覆盖，而是以简短、可探索的形式激发兴趣，鼓励读者自主搜索和深入。
• AI 时代仍需离线思考：尽管 LLM 可以快速生成摘要，但 Algodeck 提供的物理、离线、非线性的浏览体验，有助于跳出屏幕，培养真正的思维转变。

意义与影响

Algodeck 项目展示了如何将抽象的计算机科学知识转化为可触摸、可浏览的实物，降低了学习门槛。它打破了传统教科书和数字屏幕的局限，让学习过程更主动、更个性化。对于图形设计领域，它提供了一个用代码构建设计系统的真实案例，证明了系统思维在视觉传达中的重要性。在 AI 大语言模型泛滥的当下，作者强调“跳出屏幕”的价值，提醒人们不要完全依赖模型生成的“完美句子”，而应保留自由探索和意外发现的乐趣。这种对离线学习工具和物理交互的坚持，可能成为未来知识传播的一种补充方向。