伊凡·萨瑟兰的 Sketchpad：交互式图形的诞生

为什么 Sketchpad 仍然重要

Sketchpad 是那种不仅改进了计算机——而且改变了人们认为计算机“应该做什么”的少数项目之一。此前，大多数交互意味着输入命令然后等待结果。20 世纪 60 年代早期由伊凡·萨瑟兰创建的 Sketchpad 展示了一条不同的道路：你可以通过 绘制、指点 和 操作 屏幕上的形状来与计算机协作。

用通俗话解释“交互式图形”

“交互式图形”意味着你可以在显示器上看到视觉元素并直接更改它们，系统会立即响应。你不再通过文本描述图形（“从 A 到 B 画条线”），而是直接作用于图像本身：选择一个点、拖动一条线、调整一个形状，并马上看到结果。

本文会让你学到什么

这篇文章解释了 Sketchpad 是什么、为什么重要，以及它的核心思想如何不断重现——先是在计算机辅助设计（CAD）中，然后在图形用户界面（GUI）里，后来又出现在现代界面设计工具和设计系统中。你会看到诸如直接操作、可重用组件和基于约束的绘图这些概念并非从今天的应用开始，它们有着深厚的历史根源。

一个起点，而非全部历史

Sketchpad 并没有瞬间创造出我们现在使用的软件。现代 CAD、GUI，以及像 Figma 或 Sketch 这样的工具是几十年间由许多团队共同演进出来的。但 Sketchpad 是一个关键的起点：它证明了这种方法可行——屏幕上的可视化、交互式工作可以是精确、有结构并可扩展的，这不仅仅是演示，而是一种新的人人与计算机交互的模型。

伊凡·萨瑟兰是谁？

伊凡·萨瑟兰是计算机图形学和人机交互领域的奠基人物之一——推动了计算机从“用文本编程的机器”向“可以视觉交互的工具”转变。他生于 1938 年，受训为电气工程师，迅速关注一个简单而激进的问题：如果与计算机的工作感觉更像是在纸上、在图表和物理对象上操作，会怎样？

在正确的时间、处于正确的地方进行研究

Sketchpad 是萨瑟兰在 1960 年代初期于 MIT 攻读博士期间的研究成果，使用的是 MIT 林肯实验室的 TX-2 计算机。这很重要，因为当时 TX-2 在能力上不寻常：它支持交互式显示和专用输入硬件，使得动手实验成为可能。

他要解决的问题

当时大多数计算主要面向数字与文本，而不是视觉思维。萨瑟兰的目标是让计算机能用于视觉任务——绘图、编辑和精修图表——而无需把一切“翻译”为代码行。换句话说，他希望计算机能直接表示形状和关系，就像人们在草图时那样。

后来的影响（去掉夸张）

萨瑟兰的工作远不止 Sketchpad——还涵盖了计算机图形学、交互系统以及早期的虚拟现实实验（包括头戴显示器）。他在职业生涯中获得了重要的认可（例如 ACM 图灵奖），被广泛认为是定义交互计算可能性的先驱之一。

在 Sketchpad 之前的计算：大多是文本与等待

在 Sketchpad 出现之前，人们并不像现在那样“使用”计算机。你不会坐下打开程序并随意调整。你把工作准备好，交给计算机，然后等待结果。

常见工作流：输入、提交、祈祷它能运行

20 世纪 60 年代早期的交互主要是基于文本且间接的。程序常以穿孔卡或纸带的形式输入，或在电传打字机式终端键入。许多系统以批处理模式运行：你提交一摞卡片，计算机按队列处理作业，你稍后才得到输出——有时是几分钟，有时是几小时。

如果出现错误（笔误、缺卡或逻辑错误），你不能立即修正。你只有在运行结束后才发现问题，然后修改卡片重新尝试。这造成了一种缓慢的、停—走式的节奏，塑造了人们对计算机用途的认知。

为什么在屏幕上绘图很奇怪

屏幕存在，但它们并不是像现在的那样成为日常“工作区”。显示硬件昂贵且稀缺，通常用来展示结果而非构建它们。你可以直接在屏幕上绘图、然后选择、移动、复制或调整所绘内容的想法超出了当时对计算的常规预期。

那时“实时”意味着什么

“实时”并不是营销术语；它描述了一种新型体验。它意味着计算机会在你操作时做出响应，而不是在你提交作业之后才回应。这种即时性把机器从远程计算器变成了更像“伙伴”的存在：你可以实验、立即纠错，并在想法还在脑中时反复打磨。

把 Sketchpad 的雄心放在这样的背景下更容易理解。它不仅仅是一个聪明的绘图程序——它挑战了那个时代关于人类与计算机如何协作的假设。

用通俗的话说：Sketchpad 是什么

Sketchpad 是一个运行在带显示器的计算机上的交互式绘图系统。你不再键入命令然后等待结果，而是可以直接在屏幕上绘图并立即看到更改。

一个简单的类比

可以把它想象成早期的矢量绘图应用（形状保持可编辑）和 CAD 程序（几何重要）之间的混合。Sketchpad 允许你创建线条、圆和形状，并把它们当作可以操作的对象——而不仅仅是画在屏幕上的像素。

基本工作流：绘制、选择、编辑

循环很直接：

• 绘制 屏幕上的一个形状。
• 选择 它（让计算机知道你指的是哪个对象）。
• 编辑 它——移动、缩放、复制或调整其部分。

现在听起来很正常，但在当时这是一个重大转变：计算机变成可以直观地交互的东西，而不是仅靠文本指令。

不是“图像”——而是可编辑的几何

Sketchpad 的绘图由计算机理解的几何元素构成：端点、长度、角度、弧线。因为系统知道每个元素的“意义”，所以你编辑时能保持图纸的一致性。如果更改了一条线的端点，连接的片段也会随之更新。

这种“图像背后的模型”是关键所在。这也是为什么 Sketchpad 常被称为现代 CAD、矢量编辑器 与许多 界面设计工具 的前身：它把绘图视为可操作的结构化数据，而非静态的图片。

输入的突破：用光笔绘制与选择

Sketchpad 最显眼的进步并非新的数学方法，而是一种新的与计算机“对话”的方式。萨瑟兰让人们可以使用光笔直接指向屏幕，而不是通过键盘输入命令并等待输出。

光笔到底是什么

光笔是一种笔形的指点设备，你把它贴在 CRT 显示器上。当屏幕的电子束扫描经过笔尖下的那个点时，系统检测到时序并计算出屏幕位置。它使得光笔成为一种早期的“可以握在手里的光标”，远早于鼠标成为标准设备。

在屏幕上绘制、选择和操作

有了光笔，Sketchpad 引入了一种现在看来很基础的交互风格：

• 绘制：将点和线放在想要的位置。
• 选择：通过指向已有元素来选择（而不是重输坐标）。
• 操作：在原位对所选项进行移动、缩放或复制，并即时看到更改。

选择 + 直接操作的组合把计算机从一个“你向它描述事物的设备”变成了一个“你直接编辑事物的设备”。

与当今输入设备的关联

现代的输入方法遵循相同的基本想法：

• 鼠标 将手的运动转换为指针。
• 手写笔/触控笔（在平板上）恢复了笔式的精确度。
• 触控 使用手指作为指点设备。

Sketchpad 的光笔是一个早期证明：对可见对象进行指点与操作通常比发出抽象命令更快速、更直观。

可用性影响：速度与信心

当你能抓住一条线并在原位调整时，你的迭代更快：尝试、看到、微调、重复。即时反馈减少错误、降低学习曲线，并让试验变得更安全——这些是成功设计与绘图工具仍然依赖的核心可用性特性。

核心思想：约束与关系

Sketchpad 最令人惊讶的技巧并不是能画图——而是你的图纸可以“有意义”。Sketchpad 允许你描述图中各部分之间的关系，并让计算机在你编辑时保持这些关系成立。

用日常例子解释约束

约束 是附加在几何上的规则。

• 绘制一条线并约束其保持水平。现在你可以拖动一个端点，线会左右滑动但不会倾斜。
• 绘制四条相等的线并约束角为直角。现在它不是“看起来像正方形的四条线”——它是一个始终为正方形的对象，即使缩放也能保持这一性质。

这不同于每次更改时重新手工绘制。你一次设定意图，然后自由编辑。

约束为何强大

约束让编辑成为你真正想要的连锁反应。移动一个点，所有连接的部分自动更新以满足规则。这意味着更少的手动修正和更少的意外变形。

它也使得图纸更容易演化。一个被约束的形状可以在保持关键属性的同时被拉伸、对齐或调整——平行线仍然平行、相等的长度保持相等、角度保持一致。

关系，而不仅仅是像素

Sketchpad 暗示了一个更大的思想：图形可以由具有关系的对象（点、线、形状）构成，而不仅仅是屏幕上的标记。计算机会像一个默默的助手一样维护这些关系。

你可以在现代工具中看到相同的思路：CAD 系统使用参数化约束，界面设计工具使用布局约束（固定、对齐、“保持间距相等”）。不同领域，同样的核心概念：描述事物应如何表现，然后让系统处理数学部分。

可重用构件：早期的组件与实例

Sketchpad 不仅让人们更快绘图——它引入了一个至今仍推动现代设计工作的想法：你不应该一次又一次地重画相同的东西。

符号与实例（一个可重用的主件）

在 Sketchpad 中，你可以创建一个符号——把它当作对象的主定义——然后在图中放置多个实例。与其每次都复制原始几何，不如重用同一个模版。

这意味着重复变成了一种功能而非苦差事。需要十个相同的托架、窗户或电路元件？你可以快速放置十个实例，保持图纸一致。

复制有用，但“关联复制”更强大

传统复制会产生会随时间偏离的重复品：你改了一个，却忘了改其它的，图纸就不一致了。Sketchpad 倾向于更好的方法：重用同一个组件，让更改保持协调。

一个实际例子：

• 你把“窗户”符号画好一次（边框 + 横档）。
• 在立面图中放置 20 个实例。
• 后来窗户设计改了：横档位置或厚度变化。
• 更新符号后，每个实例都自动更新——无需在图中手工查找并修复。

尽管具体机制与今天工具不同，但核心工作流很容易识别：单一事实来源，安全地重复使用。

今天的体现

如果你用过现代设计软件，你会看到 Sketchpad 的后裔体现在：

• CAD 块：可重用的门、固定件、标注——放到不同图纸中。
• 界面组件：按钮、输入、卡片——在多个界面中重用。
• 设计系统：带规则的组件库，帮助跨团队保持一致性。

因此，Sketchpad 更像是一种早期的“基于组件的设计”模型——在不牺牲一致性的情况下扩展视觉工作的方法。

直接操作与即时反馈

Sketchpad 最重要的转变不是新的形状或更快的机器——而是一种新的使用计算机方式。你不再键入“从 A 到 B 画线”这样的命令，而是可以直接指向线条，抓住它并在屏幕上修改它。

“直接操作”真正的含义

直接操作很简单：你作用于对象本身，而不是对象的描述。

在 Sketchpad 中，绘图不是远处的结果。绘图就是界面。想要移动一条线，你就选择那条线并移动它。想要改变一个角落，你就直接调整那个角落。

即时反馈：屏幕会回应你

同样激进的是响应的速度。Sketchpad 在你操作时立刻显示更改——在你还在工作时，而不是在你完成一批指令后再显示结果。

这种即时反馈创造了一个紧密的循环：

• 你尝试一个更改。
• 你立刻看到结果。
• 你修正、完善并探索。

这使软件变成你可以探测和塑造的东西，而不仅仅是操作的工具。

在现代软件中的表现

许多日常的 UI 行为都继承了这种交互风格：

• 方框、线条和图像上的拖拽手柄（抓住角落在原位缩放）
• 吸附与对齐指南（移动对象时感觉到“卡入”整齐位置）
• 选择高亮（对象告诉你“是的，你在编辑我”）

即便我们使用菜单或键盘快捷键，也仍然期望对象保持中心：选择它、作用于它，并即时看到更新。

为什么它塑造了对“现代”软件的期望

Sketchpad 帮助设定了一个基线：用户现在默认软件应该是交互式、可视且响应迅速。当一个应用让你填写表单、点击“应用”，然后等待结果时，它会显得过时——并不总是因为功能缺失，而是因为反馈循环被打断了。

Sketchpad 如何引向 CAD

Sketchpad 并非现代意义上的 CAD——没有物料表、没有加工刀具路径、也没有庞大的零件库。但它展示了一个关键转变：技术绘图可以是你用计算机来做的事情，而非你把图纸提交给计算机再等待输出。

为什么交互式图形让 CAD 变得实用

工程设计是迭代性的。你试一个尺寸，查看它如何影响间隙，改动它，再检查结果。如果每次调整都需要重新输入一长串坐标或离线绘图，工具就会与工作流程对抗。

Sketchpad 表明精确工作受益于直接、可视的交互：你可以指向一条线、选择并在看到结果的同时编辑它。这个紧密循环使 CAD 在实际设计探索中变得可用。

与 CAD 工作流相似的 Sketchpad 思想

若干 Sketchpad 的概念与 CAD 用户现在习以为常的功能相吻合：

• 精确几何：将圆、线和形状作为定义良好的对象（而非像素）与 CAD 存储几何以便测量与制造相匹配。
• 约束与关系：保持线条水平、点重合或强制等长等思想属于当今参数化草图的同类。
• 捕捉与选择：选择端点、中点或交点的能力与“对象捕捉”相呼应，帮助构建整洁模型。
• 参数化编辑：更改尺寸并让相关几何更新是基于约束的绘图的核心——Sketchpad 的演示让这种方法看起来可行。

审慎地看待影响

更保守的说法是，Sketchpad 帮助验证了概念：交互式、能感知约束的图形是可行的。一些后来的系统直接受其启发；另一些则随着硬件与研究的成熟而独立发展。但无论如何，Sketchpad 令人信服地表明计算机可以支持日常制图与设计的具体操作，而不仅是事后计算结果。

从 Sketchpad 到我们日常使用的 GUI

Sketchpad 看起来不像现代桌面环境，但它证明了一个关键点：人们可以通过指向图像并直接操作来与计算机交流，而非仅仅输入命令。一旦这一思想被接受，其它“日常”界面的概念便顺理成章——可以抓取的窗口、可以选择的对象、能看到操作结果的动作。

从记忆命令到使用可视控件

早期计算常常意味着记住精确的命令词和格式，然后等待结果是否符合期望。交互式图形颠覆了这种体验。你不必记住正确语法，而是可以在屏幕上识别所需对象并直接作用。记忆（recall）到识别（recognition）的转变是 GUI 被更多人接受的核心原因之一。

指点设备、窗口与直接操作的兴起

Sketchpad 的光笔是早期的指点设备：指向某物来选择它并移动。后来系统用鼠标、轨球和触控板替代了光笔——但保留了相同的心智模型。

窗口化界面直接受益于这一点：当多个对象同时可见时，指点与选择成为区分“你意指哪个对象”的自然方式。即便你的电脑不显示 CAD 风格的绘图，它仍然充满了可操作的屏幕对象。

我们现在习以为常的 UI 模式

许多常见的 UI 模式都在延续相同的交互循环：

• 选择：点击图标、选中文本、选中文件
• 拖拽：移动窗口、重新排序列表、拖放附件
• 手柄：调整窗口大小、裁剪照片、在设计工具中调整形状
• 菜单和工具栏：可见操作代替记忆命令

围绕这些思想形成的领域

随着交互式图形的传播，研究者和产品团队需要评估什么对真实用户有效。这一努力发展成了**人机交互（HCI）**领域——专注于设计、测试并改进人类与计算机通过界面沟通的方式。

在现代界面设计工具与设计系统中的回响

如果你曾在 Figma 中拖动一个矩形，在 Sketch 中调整按钮大小，或在设计工具中调整自动布局（Auto Layout），你就在使用那些看起来非常“Sketchpad 式”的理念：直接绘制、保持关系完整、在不重画一切的情况下重用部分。

矢量绘图与直接操作

现代界面工具把形状视为可选、可移动和可原位编辑的对象——这正是 Sketchpad 帮助普及的思维模型。你不是“描述”一个圆，而是抓住它。即时的视觉反馈把设计变成与屏幕的对话：微调、查看、再微调。

用设计师听得懂的话解释约束

Sketchpad 的基于约束的绘图与响应式界面行为契合良好：

• 固定/锚定：保持图标距右边缘 16px，即使框体变动也不变。
• 缩放规则：按钮水平扩展但保持高度不变；文本保持居中。
• 关系：项间距保持一致；标签与字段保持对齐。

在设计系统中，约束是区分“静态模型”与“能在真实内容下生存的组件”的关键——应对长文本、多语言和不同屏幕尺寸时尤为重要。

组件与实例 = 大规模一致性

Sketchpad 的“主件 + 实例”思想如今以组件、变体和 token 的形式出现。单一事实来源让团队只需在一处更新排版、内边距或状态，变动就能级联到多个界面，减少偏差、加快审查并让交付更加可预期。

一个现代回声：通过操作更高级对象构建软件

一个有趣的平行体现在新兴的“vibe-coding”工作流中。像 Koder.ai 这样的平台可以通过对话生成网页、后端或移动应用，但最佳体验仍依赖于 Sketchpad 式的原则：快速反馈、清晰的可见模型和可重用构件。

例如，当 Koder.ai 生成一个 React 界面（或一个 Flutter 页面）时，实际收益不仅仅是速度——而是你能在紧密循环中迭代、在屏幕间保持组件一致性，并在不丢失结构的情况下向前或回滚更改。从某种意义上说，这与 Sketchpad 推动的转变一致：停止把软件视为单向的“提交并等待”过程，开始把它当作一个交互式工作区来使用。

给团队的要点

这些概念之所以仍能改善工作流，是因为它们减少了手工劳动与错误：把意图（对齐、间距、行为）编码进设计本身，使系统在增长过程中保持一致。

关键要点与如何深入学习

Sketchpad 被记住的不是某个单一“功能”，而是一组逐渐成为默认值的思想。

仍然影响界面的持久概念

首先，交互式图形：计算机不仅仅是打印结果的机器——它是一个你可以操作的表面。

第二，约束与关系：与其每次手工重绘，不如描述元素应如何关联（平行、等长、对齐），系统在你编辑时帮你维护这些意图。

第三，直接操作：你作用于对象本身——选择、移动、重塑——并立即看到变化。

第四，可重用构件：一次定义组件并重用其实例，是走向现代组件、符号与设计系统的直线路径。

对产品团队的实用教训

让操作可见。如果用户看不到哪些内容可以被选择、移动或编辑，他们就不会信任工具。

减少模式切换。每一个额外状态（绘图模式、选择模式、编辑模式）都会增加摩擦和出错概率。偏好手势在不同情况下的一致行为，并让界面清晰地提示下一步会发生什么。

及早支持重用。团队常把组件当作后期整理的工作。Sketchpad 的提醒是：重用会改变人们的思维方式——它把编辑变成管理关系，而不是推像素。

为反馈速度而设计。即时响应不仅仅是“好看”——它让探索变得安全。

如果你在评估现代的生成或构建工具，关注这些属性：可见模型、快速迭代以及在实验失败时的便捷回滚。（例如 Koder.ai 的规划模式与快照/回滚功能就是在生成与细化应用时保持“可以放心尝试”循环的实用方法。）

如何进一步探索

去看博物馆或大学的早期交互计算演示；现场看到一次光笔演示会让这些概念更直观。

观看关于早期人机交互的纪录片与访谈，听听这些思想如何通过动手实验被发现。

如果你想读原始资料，搜索 伊凡·萨瑟兰的原始 Sketchpad 博士论文 与相关技术报告——这些文献对于基础工作的描述出奇地通俗易懂。

想看更多类似的历史性文章，请浏览 /blog。