1. 在 GUI 出现之前：人通过命令使用计算机#

早期计算机主要通过穿孔卡片、纸带、控制面板以及后来出现的文本终端与计算机交互。

在这种模式下，计算机更像是一台需要被“操作”的机器：

人告诉计算机应该执行什么命令，计算机执行命令并返回结果。

用户必须理解计算机能够接受什么样的指令。

这种交互方式对于专业人员来说效率很高，但对于普通人而言，最大的障碍就是：

你必须先学会计算机的语言。

因此，早期人机交互研究开始尝试寻找一种更加直接的方式，让人能够通过视觉和动作与计算机中的内容进行交互。

2. 1963 年：Sketchpad#

1963 年，Ivan Sutherland 开发了 Sketchpad。

它被认为是早期图形用户界面的重要先驱之一。

Sketchpad 使用光笔作为输入设备，用户可以直接在屏幕上绘制、选择和修改图形对象。

图片来源：Ivan Sutherland 与 Sketchpad（1962，MIT Lincoln Laboratory），出自 Computer History Museum

这与传统的命令输入存在明显区别：

1
传统方式：
2

3
告诉计算机：
4
“画一条线”
5

6
↓
7
计算机执行

而 Sketchpad 更接近：

1
看到屏幕上的对象
2

3
↓
4
直接操作对象

这意味着人与计算机之间开始出现了一种新的关系：

用户不再只是向计算机发送命令，而是可以直接操纵计算机屏幕上的对象。

Sketchpad 后来的许多思想都成为图形交互发展的重要基础。

图片资料：

• https://commons.wikimedia.org/wiki/Category
• https://commons.wikimedia.org/wiki/File.tif
• https://www.computerhistory.org/revolution/computer-graphics-music-and-art/15/209/1878

3. 1968 年：鼠标和“直接操作”#

到了 1960 年代，Douglas Engelbart 及其团队在 Stanford Research Institute（SRI）继续研究人与计算机之间更加直接的交互方式。

他们开发了 NLS（oN-Line System）。

NLS 使用了鼠标、屏幕上的指针、窗口以及超文本等概念。

1968 年 12 月 9 日，Engelbart 对这一系统进行了著名的公开演示。

这场演示后来被称为：

The Mother of All Demos

图片来源：Wikimedia Commons — File Douglas Engelbart 1968.jpg

在这次演示中，鼠标、超文本、窗口等后来成为现代计算机基础交互方式的技术和思想已经同时出现。

因此，现代 GUI 并不是某一天突然被发明出来的，而是在这一时期逐渐形成了一系列重要的交互思想。

图片资料：

• https://commons.wikimedia.org/wiki/File.jpg
• https://commons.wikimedia.org/wiki/File.jpg

4. 1970 年代：Xerox PARC#

真正将这些思想进一步整合起来的，是 Xerox 的 Palo Alto Research Center（PARC）。

1970 年，Xerox 建立了 PARC，并开始进行大量计算机研究。

在这里，研究人员继续探索：

• 图形显示
• 鼠标
• 窗口
• 图标
• 菜单
• 位图显示
• 所见即所得
• 桌面隐喻

这些技术后来共同构成了现代 GUI 的基础。

5. 1973 年：Xerox Alto#

1973 年，Xerox PARC 开发出了 Xerox Alto。

Alto 是图形用户界面发展历史中非常重要的一台计算机。

图片来源：Wikimedia Commons — File Alto.jpg（摄影：Martin Pittenauer，CC BY-SA 2.5）

它拥有：

• 位图显示器
• 鼠标
• 键盘
• 窗口
• 图形界面
• 文件和文档的视觉表示
• 桌面隐喻

它甚至已经可以让文件看起来像纸张，让目录看起来像文件夹。

也就是说，计算机中的信息第一次越来越像现实世界中的物体。

用户不需要完全理解计算机内部的数据结构，而可以通过：

文件 → 文件夹 → 桌面 → 窗口

这样的视觉隐喻理解计算机。

图片资料：

• https://commons.wikimedia.org/wiki/File.jpg
• https://commons.wikimedia.org/wiki/File,_1973,_Computer_History_Museum.jpg
• https://www.computerhistory.org/revolution/input-output/14/347

6. WIMP：现代 GUI 的基本形态形成#

在 Xerox PARC 的研究中，后来逐渐形成了一套非常重要的图形交互体系：

WIMP

即：

• Windows —— 窗口
• Icons —— 图标
• Menus —— 菜单
• Pointer —— 指针

这套模式成为后来几十年桌面软件 UI 的重要基础。

用户通过鼠标移动指针：

点击图标 → 打开窗口 → 选择菜单 → 执行操作。

计算机原本抽象的命令，被转换成了屏幕上可以看到、选择和操作的对象。

这正是 GUI 最重要的历史意义之一：

把计算机的操作从“记忆命令”变成了“看见并操作”。

7. 1981 年：Xerox Star#

1981 年，Xerox 推出了 Xerox Star。

图片来源：Wikimedia Commons — File icons for Xerox Star 8010.jpg

Star 将 PARC 大量的研究成果进一步变成了商业工作站。

它进一步强化了：

桌面、文档、文件夹、图标、窗口、菜单

这些今天仍然非常熟悉的概念。

虽然 Star 在商业上并没有取得巨大的成功，但它对之后个人计算机 GUI 的发展产生了非常大的影响。

图片资料：

• https://www.digibarn.com/collections/screenshots/xerox-star-8010/
• https://www.digibarn.com/collections/systems/xerox-8010/index.html

8. 1983 年：Apple Lisa#

1983 年，Apple 推出了 Lisa。

图片来源：Wikimedia Commons — File Computer, 1983 (Lisa).jpg（摄影：Alan Light，CC BY 2.0）

Lisa 将图形用户界面、鼠标和桌面隐喻带到了消费者个人电脑领域。

它并没有取得商业上的成功，售价也非常昂贵，但它进一步证明了一件事情：

图形界面可以成为个人计算机的主要交互方式。

图片资料：

• https://www.computerhistory.org/timeline/1983/
• https://commons.wikimedia.org/wiki/Category

9. 1984 年：Macintosh#

1984 年，Apple 推出了第一代 Macintosh。

图片来源：Wikimedia Commons — File macintosh 128k, 1984 (all about Apple onlus).jpg

相比 Lisa，Macintosh 更便宜，也更加面向普通消费者。

它进一步普及了：

• 鼠标
• 窗口
• 菜单
• 图标
• 桌面
• 文件夹
• 回收站
• 拖放

这些概念。

对于很多普通用户来说，计算机第一次真正变成了：

可以通过视觉理解和操作的东西。

图片资料：

• https://commons.wikimedia.org/wiki/File.jpg
• https://commons.wikimedia.org/wiki/File,1984(all_about_Apple_onlus).jpg
• https://computerhistory.org/blog/macpaint-and-quickdraw-source-code/

10. 从此，GUI 成为了软件的基础#

到了 1980 年代后期，图形用户界面逐渐成为个人计算机软件的主流交互方式。

此后几十年，软件基本都在这个框架上不断发展：

1
窗口
2
│
3
├── 菜单
4
├── 工具栏
5
├── 按钮
6
├── 图标
7
├── 对话框
8
└── 设置

软件拥有越来越多的能力，于是 GUI 也不断增加新的：

• 页面
• 按钮
• 菜单
• 工具栏
• 弹窗
• 设置项
• 层级
• 参数

而我们今天熟悉的大多数软件 UI，实际上都可以追溯到这套在 1960—1980 年代逐渐形成的图形交互体系。

从 Sketchpad 到 Engelbart 的 NLS，再到 Xerox PARC、Alto、Star、Lisa 和 Macintosh，现代软件 UI 并不是一次设计出来的。

它是几十年人机交互研究不断叠加的结果。

而今天我们所熟悉的：

窗口、图标、菜单、按钮、设置页面

正是这段历史最终留下来的交互语言。

在新式 UI 之前，人们一直在尝试如何降低软件的学习成本#

如果回顾过去几十年的 UI 发展，会发现一个很有意思的现象：

人们其实一直在尝试让软件变得更加容易使用。

只是过去的解决方案，大多是在想办法隐藏软件内部的复杂性，让用户不需要理解计算机本身是如何工作的。

2. 用现实世界的隐喻降低理解成本#

另一个非常重要的方法，是把计算机里的抽象概念转换成现实世界中人们已经熟悉的东西。

最典型的例子就是：

Desktop Metaphor（桌面隐喻）

计算机里本来不存在“桌面”“文件夹”“垃圾桶”这些东西。

但设计者发现，如果把计算机中的对象映射成现实世界中的物品，普通用户就不需要重新学习一套完全陌生的概念。

于是：

Xerox PARC 在 1970 年代逐渐发展了这种设计，Xerox Alto 是早期重要实现，而 1981 年推出的 Xerox Star 则将这种思想用于商业产品。(Wikipedia)

图片来源：Wikimedia Commons — File icons for Xerox Star 8010.jpg

这种方法非常聪明。

因为用户不需要学习：

“文件系统中存在一个层级结构，你需要通过路径访问对象。”

用户只需要理解：

“这是我的桌面，这是我的文件夹，我把文件放进去。”

软件的内部结构没有消失。

只是被藏起来了。

3. 从“打开程序”变成“打开东西”#

这也是 Xerox Star 非常重要的一项设计。

传统计算机的逻辑通常是：

找到程序 → 打开程序 → 再打开文件

而 Star 尝试把它反过来：

找到文件 → 打开文件 → 系统自动选择合适的程序

用户不需要知道：

“这个文件究竟由哪个程序处理？”

只需要：

“我想打开这个文档。”

Xerox Star 的设计明确强调用户应该处理 documents，而不是 programs。打开文档后，系统会自动调用对应的应用程序。(ScienceDirect)

这实际上又隐藏了一层软件结构：

把“软件”藏在“任务”之后。

用户想做的是：

写一篇文章。

而不是：

调用一个文字处理程序。

4. WYSIWYG：让用户看到的就是结果#

另一个重要的尝试是：

WYSIWYG（What You See Is What You Get）

在早期计算机中，用户经常需要通过命令、参数或者特殊格式描述最终结果。

WYSIWYG 则试图让：

编辑时看到的内容 ≈ 最终得到的内容

例如：

屏幕上看到的文字是什么样，最终打印出来就是什么样。

这样用户就不需要理解计算机内部如何描述页面，只需要：

看到什么，就修改什么。

Xerox PARC 的 Bravo 等系统推动了 WYSIWYG 编辑方式的发展，之后 Xerox Star、Apple Lisa 和 Macintosh 等商业系统进一步将这种思想普及。(CMU School of Computer Science)

因此，GUI 的发展并不只是：

“把黑色命令行变成漂亮的窗口。”

而是在不断尝试：

把计算机内部的抽象规则，转换成人类可以直接观察和操作的对象。

5. 从“记忆”变成“识别”#

命令行最大的学习成本之一，就是：

你必须记住命令。

GUI 则逐渐把这种模式变成：

你不需要记住，只需要看到。

例如：

1
rm file.txt

变成：

看到文件 → 点击文件 → 点击删除

再进一步：

看到文件 → 拖进垃圾桶

这就是一个非常重要的变化：

从 Recall（回忆）转向 Recognition（识别）。

用户不需要记住删除文件的命令是什么，只需要看到一个垃圾桶，就能够理解：

“把东西拖进去应该就是删除。”

WIMP（Windows、Icons、Menus、Pointer）也逐渐成为现代桌面 GUI 的基础，并通过 Xerox Star、Apple Lisa 和 Macintosh 等产品进入大众计算机。(Wikipedia)

6. 从鼠标到触摸#

后来，计算设备又发生了一次变化：

触摸屏。

鼠标实际上已经缩短了人与计算机之间的距离：

手 → 鼠标 → 光标 → 屏幕对象

而触摸屏进一步变成：

手 → 屏幕对象

用户可以直接：

• 点击
• 滑动
• 拖动
• 缩放
• 长按

这进一步强化了“直接操作”的思想。

触摸屏并没有改变软件本身的复杂程度，但进一步降低了操作方式本身的学习成本。

7. 但这些方法仍然没有解决一个根本问题#

把过去几十年的 UI 简化方法放在一起，会发现一个非常明显的规律：

可以发现：

每一次 UI 的进步，本质上都在隐藏一部分软件内部结构。

但是软件本身也在不断变得复杂。

于是几十年之后，我们又遇到了新的问题：

设置 ↓ 通用 ↓ 外观 ↓ 主题 ↓ 深色模式

用户明明只想：

“换成深色。”

却必须理解软件内部的层级结构。

于是问题开始发生变化：

过去我们一直在想办法让用户更容易操作软件暴露出来的功能。

而现在真正值得思考的是：

用户为什么还需要寻找功能？

如果用户只需要告诉软件：

“我想做什么。”

而软件自己去决定：

“应该调用什么功能。”

那么 UI 的下一步，或许就不再是继续优化菜单、按钮和设置页面。

而是：

从“操作界面”走向“表达意图”。

意图式UI#

在这个情况下我就开始思考到底是怎样的UI才更适合普通用户？

其实已经有很多的UI已经是广义上的意图式UI，但是又做的没那么好。

那么现在我们来举一个例子，比如说深浅色切换。

在传统的软件设计中深浅色切换可能需要你：

设置 -> 通用 -> 外观 -> 深浅色切换

甚至更加复杂，如同迷宫一般的设置项让人头疼！

所以在现在的很多网站或者软件中，UI的设计师通常把深浅色的切换按钮直接放在用户第一眼就可以看见的地方：

图片来源：SpinDeck官网文档

这是现在已经做到的部分。但是如果我再多一个需求呢，比如我需要他在晚上几点开始是深色的，又在第二天早上几点变回浅色呢？

在这个情况下我看过的绝大多数软件其实都是引导你去设置（使用跳转或者是其他方式），这里确实比起让用户自己去找设置项有了很大的进步，但是也忽略了一个问题，用户在进入到该设置项的时候看到天花乱坠的设置项扎堆其实也是会产生感到其很复杂不好用的感受，如果设置项的显示命名用了较专业的描述的话就会显得更加复杂。

所以也许意图式UI的本质是意图，比如说：

用户：我想去把我的软件界面切换成深色的，同时我又想在切换完之后设置它从今晚6点开始是深色的，明天早上7点我起床之后它是浅色的。

其实在阅读了上述的语句后我们其实可以发现用户的需求是自然语言，那么就有很多人说我们引入LLM（大语言模型，AI）等直接帮用户做了不是就完美了吗？

但是我们都会在这里忽略一个很重要的成本问题，如果使用LLM，就代表了用户需要先组织好结构化的语言打句子输入，然后在此之前可能还要配置好提供商的地址和许可Key（密钥），最后还需要消耗Token（词元），也许还可能因为LLM对需求的理解问题而复杂化，同时LLM的推理也需要时间。

所以如果按以上的方法用户只是需要设置一个定时切换的效果，使用LLM的话所消耗的成本可能本身就远远高出的用户学习如何设置的成本。

所以，真正能方便用户使用的UI，并不代表是用户说一句话就能搞定或者说是完全抛弃原本传统UI的设计理念和框架。因为用户本身就熟悉传统UI的最表层的操作方式，所以我们也许只需要在自然语言和传统UI之间做一个结合也许就是最好的发展方向。

在一开始用户其实就已经表明了TA想要去做什么，所以在TA的句子中已经出现了具有明显顺序意图特征的表述，例如：

• 切换成深色的
• 再去设置自动切换的时间
• 设置时间

所以各位在这里其实已经可以很清晰的看到用户想要做的事情是按线性顺序来操作的，所以其实很简单，只需要让用户：

做完这个做这个

也就是说本来需要到处“奔波”才能搞定的事情我可以在切换的同时也直接做了！

我们可以直接把设置定时切换做成一个很小的按钮就放在切换按钮的旁边，用户只需要切换的时候点击切换按钮即可，需要设置特定时间的时候点击旁边的定时按钮，在出现的弹窗内直接设置保存就好了！

如以下示例：

意图式UI设计概念示例

历史资料板块#

UI简化的发展板块#

• CMU School of Computer Science — A Brief History of Human Computer Interaction Technology（Direct Manipulation、WYSIWYG 等术语的历史梳理）
• Wikipedia — Direct manipulation interface（直接操作理念的定义与发展）
• Wikipedia — Desktop metaphor（桌面隐喻的发展）
• Wikipedia — Xerox Star（“以文档为中心”、把软件藏在任务之后的设计）
• Wikipedia — WIMP (computing)（窗口、图标、菜单、指针体系）
• Wikipedia — WYSIWYG（所见即所得编辑理念）
• ScienceDirect — Human-Computer Interaction（Xerox Star 的“以文档为中心”设计）
• Wikipedia — History of the graphical user interface（WIMP 与 GUI 的普及历程）
• Wikimedia Commons — Category、Category Alto、Category Lisa（本文图片的主要来源）

意图式UI与现代交互板块#

• Nielsen Norman Group — Recognition and Recall（“从记忆变成识别”这一设计原则的理论依据）
• Nielsen Norman Group — Direct Manipulation（直接操作在现代 UX 中的定义与边界）
• Wikipedia — Conversational user interface（对话式/自然语言交互的优势与成本讨论）
• Wikipedia — Large language model（LLM 的推理成本与使用门槛背景）
• VitePress — Dark Mode（文中“把深浅色切换放在第一眼可见处”的实例之一）
• Apple — Human Interface Guidelines（系统级“上下文呈现功能”的设计实践参考）
• DigiBarn Computer Museum — Xerox Star 8010 screenshots、Xerox 8010 system