回溯设计史，AI/XR 的未来藏在这个知识点里

下一个时代的用户界面会是什么样子的？这是一个很有趣的问题。上周和朋友谈及 GPT4o、Vision Pro 这些指向未来的 AI 和 XR 技术时，我们忍不住针对这个问题进行了深入的讨论。

GPT4o 对于环境的强大感知能力和算力支持下的「情绪价值」输出，让电影《Her》当中的人工智能似乎触手可及。

而 Vision Pro 由于它自身的特质，物理环境下的真实物品、事物和数字界面可以发生关系，从而极大地拓展了交互和体验的维度。

相反《头号玩家》中所描绘的虚拟世界体验，则可能是 Vision Pro 这类头戴显示器相对更容易实现的功能。而 AI+XR 的组合在未来几乎是必然的，多技术叠加之后，生成式 AI 赋予，让原本相对静态的 UI 界面，近乎拥有了「无限」的可能性。（不过 Figma 在这方面的探索其实还有待商榷）

但是可以确定的是，以 GPT4o 和 Vision Pro 为代表的 AI/XR 的环境感知力，未来的次世代界面几乎必然拥有强大的理解和感知力，那么「智能场景化」的 UI 是否会是答案？

这个思路让我想起一个可能没多少人还记得……但是曾经极为著名的一个失败案例，MS Bob。

知名的失败案例：MS Bob

如果仅仅只是提取「场景化」「UI界面」「空间交互」这几个关键词，Vision OS 和 MS Bob 还是挺相似的，只是后者无疑是一个极为「低配」的版本。

图片来源：http://www.enterpix.in/feature/personal-paradigms/ode-to-the-home-screen-notes-from-an-obscure-computer-history/

Microsoft Bob是一款Microsoft 软件产品，旨在为Windows 3.1x、Windows 95和Windows NT操作系统提供更用户友好的界面，取代 Windows程序管理器。该程序于 1995 年 3 月 11 日发布，并于 1996 年初停产。Microsoft Bob 显示的屏幕显示了一所房子，用户可以访问其中的房间，其中包含与计算机应用程序相对应的熟悉的物品，例如带有笔和纸的桌子和支票簿。单击笔和纸将打开系统的文字处理器。

——维基百科

MS Bob 当中包含有大量的手绘场景，但是程序的排布缺乏逻辑、极难预测。同时，它还有着当时「极为先进」的数字助手和大量的对话式交互：

但是，即使对于当时接受能力最强的用户而言，MS Bob 也并不是他们所期待的东西。

在失败产品博物馆当中，MS Bob 占有非常重要的地位。在很长时间内，即便是在微软诸多失败产品当中，它也算是拉的最大的那一坨。

在媒体编辑们的眼里，MS Bob 的评价也是极低的。PC world 的编辑哈里·麦克拉肯在他的博文当中写到「MS Bob …… 作为一个短暂出现的数字产品，在科技圈当中是一个广泛而长久存在的一个侮辱性词汇。」2007 年 PC world 评选的史上最差科技产品中，MS Bob 位列第七，2006 年 CNET 评选十大最差产科技产品当中，它位列第一。

MS Bob 出现的时间节点，正是科技公司试图将心理学和行为学融入到设计那个阶段的产物。

但有意思的地方在于，将 MS Bob 的出现放到整个交互/体验设计发展历程当中来看，倒是可以为下一个阶段的 UI/UX 设计提供一些参考。

第一阶段：直觉设计的引入

将心理学和认知科学引入到设计当中来，并不是一件太新鲜的事情，但是将这件事情学科化，基本上还是在第二次世界大战之后，整个学科的成型和发展则是在上世纪 60 年代之后。

我们如今称为「人体工学」的领域，在更早阶段的国内教材中通常被称为「人因工程学」，恰恰源自于「human factors」这个通俗易懂的词汇，决定用户决策的认知要素、交互、界面、决策技巧等因素，都被归结到 Cognitive Ergonomics 这个门类之下，也就是「认知人因工程」。

其中，图形化界面（GUI）的出现是重要的节点。

Xerox Star：模拟场景的视觉设计

关于 GUI 诞生的细节，在之前的这篇访谈当中有相对详细的介绍。如今我们所熟知的、形成普遍共识的符号和图标，在 70 年代的时候就已经由施乐的团队创造出来，比如汉堡图标：

其中，设计师 Dave Canfield Smith 在访谈中说道：

「当时传统的办公室当中，绝大多人并不了解电脑，而且管理层是不需要打字输入的，相反秘书是需要的。所以，我的想法是将办公室场景下的很多元素逐渐融入到整个计算机的视觉系统当中，包括文件柜、垃圾桶、文档、文件夹，这样会更易于学习和理解，并不是像之前那样仅仅提供一个简单的说明手册就完事了。我们在 PARC 利用全部所有的技术来创造这些东西。」

从今天的视角来看，轻描淡写地「将办公室场景融入视觉系统」的设计近乎直觉，但是这种设计策略自古就有，从上古的象形文字到如今快速发展的 AI，几乎都遵循着类似的思路。（只是这种设计到底是仿真还是拟像，就是更深入的哲学问题了，鲍德里亚的《拟像与仿真》中对此有更加详细的探讨）

Dave 基于使用场景进行符号化的设计，将复杂的概念抽象并映射到计算机当中，借助认知科学和视觉设计来打破了自二战以来计算机界面「高不可攀」的认知门槛，让普通人有了「染指」计算机指令的更多可能性。

在某种程度上，他们是计算机技术领域最重要的「火种」之一，来自施乐的这群科学家运用了心理学、认知科学和视觉设计，盗取了这一丝火苗。

将这一丝火苗烧得更旺，则离不开 Susan Kare。

Macintosh：对用户更好一点

相比于其他人，Susan Kara 加入 Macintosh 团队的时间算是比较晚的，但是她所做出的贡献绵延几十年，影响力直到今天都很难被人忽略。她是那个「让麦金塔电脑微笑的女人」。

1984 年，苹果公司的「Macintosh 艺术家」 Susan Kare 在办公桌前休息。© Norman Seeff

Susan 和当时负责 Macintosh 的首席架构师 Andy Hertzfeld 是高中同学， 1983 年 1 月入职的 Susan 要面对的工作，是要为 1 年后正式开卖的 Macintosh 「画龙点睛」。

彼时以 IBM 为代表的大型计算机公司，在产品销售策略上遵循的是「FUD原则」，也就是 「恐惧 Fear, 不确定 Uncertainty, 怀疑 Doubt」，这一原则早在 1920 年代就出现了，而 IBM 这样的企业，在 70 年代的时候，会让销售人员对客户灌输阿姆达尔公司和其他竞争对手产品的负面观念，在顾客的头脑中注入疑惑与惧怕，使顾客误以为除了该公司的产品外，他们别无其他选择。

图片来自https://oversitesentry.com/the-old-fud-fear-uncertainty-doubt/，图中为阿姆达尔出产的大型机，来自纽卡斯尔大学。

而 Susan 的处理思路则是截然相反的。结合她在平面设计领域的经验和积累，基于施乐之星的 GUI 界面设计的策略，她进一步探索「隐喻」在计算机界面中的视觉表现。

在Macintosh 的图形化界面并不复杂，我在之前的《Mac 视觉史 1》当中就梳理总结过早期 Mac 系统设计，在这块 512x 328 的屏幕上，最具有视觉识别性的元素毫无疑问是各种图标和无处不在的字体。

对于这块有待开垦的数字原野，Susan 用最原始的策略开始设计，她用尺子在方格纸上画出 32 x 32 的绘图区域，然后用铅笔和彩笔在 1024 个小方格中创建图像。

「位图图形就像马赛克、笔尖绘画和其他伪数字艺术形式，所有这些我在加入苹果公司之前都练习过，我没有任何计算机经验，但我有足够多的平面设计经验。」

Susan Kare 素描本上的「危险」图标原始草图，大概在 1983 年绘制。图片由 Susan Kare 和 kareprints.com 提供，侵删

施乐找对了一个大概的方向，但是在触达用户认知的方面依然笨拙。天然具有艺术家特质的 Susan 则更加俏皮，思路也更加天马行空。从「隐喻」出发的构思，最终用或「直观」或「幽默」的图形呈现处于，以一种极富情绪价值的姿态，让图标和用户的双眼进行接触，消解计算机行业在过去几十年间建立起来的 FUD。

图片来源：https://elephant.art/the-birth-of-an-icon-susan-kare-and-the-creation-of-apples-graphics-09082022/

所以，相比于施乐研究员们的探索，Susan 在此基础上创建出的视觉设计，更加接近普通用户「所期望的友好」。

早年间乔布斯对于英文书法的偏好，最终也借由 Susan 之手，在 Mac 上实现了出来，每一种全新的字体，都使用「世界级」大都市的名字来进行命名。

从未设计过字体的 Susan 在短短一年时间内，将 Macintosh 的视觉指示系统（图标）和作为主要信息载体的文本（字体），全部都建立了起来，而所有一切，都是基于「打破人们对计算机冷酷而令人生畏的刻板印象」这一感知和思路。

而 Susan 在 GUI 设计上的探索，也明确地将数字设计应该向人「拟合」的道路，开辟了出来。而苹果公司，也沿着这条路一直有条不紊地迭代着 Macintosh 系统。

第二阶段：尝试引入心理学

随着时间的推移，越来越多的设计者和研究者开始注意到心理学对于操作系统界面的影响。曾经于90年代初在苹果工作的唐纳德诺曼，创造了「用户体验」这个词。

尼尔森十大启发式也同样是在 90 年代中期被创造出来。但只是从理论到世间中间缺乏落地的策略和连接，无论是是「用户体验」还是「尼尔森十大启发式」真正广泛的发挥作用，基本上都在 2000 年之后。这个阶段，仅苹果在 Macintosh 变体的探索上，都相当一言难尽：

而 MS Bob 也是在比尔盖茨的授意之下，针对 Windows 系统的「激进探索」的产物。

MS Bob ：粗糙的心理学应用

从功能上来说，MS Bob 是一个套壳的 Windows 95，它所有的功能都是 Windows 95 可以承载的基础功能，但是它换了套「更加卡通」的界面。

MS Bob 的产品经理 Karen Fries 在和开发者 Tandy Trower 沟通的时候，曾经专门撰写了一份文档来解释 Bob 背后的设计动机：功能丰富的 GUI 应用程序在复杂性上会不断增加，而用户在面对大量功能和选项的时候，就像去超市看着麦片货架试图做出选择，或者去一家菜单丰富的餐厅一样。

「一方面，菜单会引导你做出选择，而优秀的餐厅也会有服务员帮助你做出选择」，在和 Tandy 探讨的时候，Karen 还建议「我们是时候考虑在软件上采用类似的方法了」。为此，MS Bob 团队为这个系统创建了一系列奇奇怪怪的动物角色，作为 MS Bob 的「接待人员」（好像还有个莎士比亚），以数字助理的身份出现，为用户提供各种建议。

而在这套设计方案背后，产品经理 Karen Fries 的设计依据来自于两位斯坦福教授 克利福德·纳斯和拜伦·里夫斯 的研究。这两位教授后来将他们当时的研究整理成书出版，书名为《媒体方程式：人们如何将电脑、电视和新媒体视为真实的人和地方》。

人们对待和回应媒体（计算机、电视等）的方式，与他们在日常社交互动中对待和回应其他人的方式，是完全相同的。

——《媒体方程式》

他们的研究结论可以简单地总结为上面这句话。克利福德·纳斯和拜伦·里夫斯在 90 年代初做了大量的定性的、先对粗放的实验，来研究用户和电脑/电视进行交互的方式，并且发现人和电脑进行交互的方式，和与人沟通的方式有很高的相似度。此后克利福德·纳斯和拜伦·里夫斯也和微软签署了协议成为了 MS Bob 团队的顾问。

此后 拜伦·里夫斯 在微软内部演讲的时候说道：

我们认为人们是擅长建立社交关系的，有着交谈沟通并解读面部表情等线索的能力。人类还擅长处理自然环境的信息，例如物体的排布和房间内角色的移动，因此如果界面与用户的交互上，可以利用这些人类的才能，那么这个产品可能就不需要说明手册了。

这一研究是支撑 MS Bob 进行「拟人化」设计的根基。1995 年 1 月 7 日，比尔盖茨在当年 CES 消费电子展上展示了 MS Bob，演讲现场他用一页 PPT 来总结他所预测的「社交交互界面」的 3 个设计原则——「能力、外观、交互」。

CES 95' 比尔盖茨的演讲：https://www.youtube.com/watch?v=no4aSCQYUJk

在分享完愿景之后，他甚至还展示了微软研究院制作的 3D 角色原型 Peedy，这是一只嘎嘎叫的 3D 鹦鹉，它在现场基于盖茨的口头请求播放 Tears for Fears 这首歌。

以今天设计师对用户体验的理解，克利福德·纳斯和拜伦·里夫斯在心理学和行为学的研究实在是有点太不具备「启发性」，而比尔盖茨所总结的 MS Bob 设计3原则，也相当的简陋。

更重要的是 MS Bob 的失败还留有 2 个重要的遗产，一个是 Office 当中长得像回形针的数字助手 Clippit：

另一个，则是此后字体界臭名昭著的 Comic Sans：

另一边的 Macintosh，则依然是在不断强化拟物化设计，继续用模拟真实的设计和细节，来贴近用户的认知：

第三阶段：行为经济学和 UX

在我看来，海量的心理学和行为学的研究，和用户所追求的体验之间，真正的连接，来自于 2000 年之后，行为经济学在世界范围内的认可和应用。这种颠覆传统认知的用户行为决策研究，为心理学和 UX 之间建立起直接的关联。

Amazon：不让用户费心的设计策略

2000 年之后，经历过多次失败最终迭代成功的 MacOSX 和 Windows XP ，终于扭转口碑变为正面案例，成为此后 UI 设计的重要参考和学习对象。其中，Mac OS X 的迭代过程差点将苹果逼上绝路，而 Windows XP 的成功背后，则站着顶尖设计公司 Frog Design。

互联网的蓬勃发展和 Web 设计的快速崛起，则让网站迅速成为了设计师的练兵场和游乐园。

在 UI/UX 和交互设计成为一份大众职业之后，许多设计师在学习进阶时，总绕不开《Don't Make me think》这本书，如果你曾翻阅过 Steve Krug 的这本书，会注意到大量基于 Mac OS X 和 Amazon 的网站设计范例，这本首发于 2000 年的设计书，在很大程度上是 21 世纪初绝大多数设计师对于「用户体验」的初体验。

图片来源：https://brightinventions.pl/blog/5-web-development-rules-from-dont-make-me-think-book/

「一个好的软件程序或网站应该让用户尽可能轻松直接地完成他们的预期任务。——Steve Krug」

Krug 将原本复杂、抽象的用户体验设计原则，借由 Amazon 网站设计的细节来阐明表达，直观扼要地分享了出来。而在今天的我们看来，这些「以用户为中心」的设计策略是熟悉、自然且直觉的。

《Don't Make Me Think》虽然在当时颠覆性地强调「让用户不要思考」，但是它仍然没有《思考，快与慢》的作者丹尼尔·卡尼曼说得通透。如果使用丹尼尔·卡尼曼的行为经济学来总结，Krug 的整本书就说了一件事情：怎样用设计让用户只调动「系统1」。

行为经济学：彻底打破「理性人」的假设

丹尼尔·卡尼曼是 2002 年诺贝尔经济学奖的获得者，获奖的原因是他通过实证研究结果，挑战了现代经济理论中盛行的「人类是理性的」这一假设。因此卡尼曼被称为「行为经济学之父」

丹尼尔·卡尼曼将用户的的思考机制，拆分为快速决策的「系统1」和理性思考的「系统2」，在这一研究基础上所拓展出来的「用户决策」方式，更好地解释了我们身为人，在生活工作中无处不在的非理性决策，也更加深入、成体系地将用户决策和设计结合到了一起，设计师因此可以设计出更优秀的产品。

早期的心理学在设计上的应用，由于中间链条的缺失，很多出发点是好的，但是落地之后，往往效果不佳，比如 MS Bob 这种产品，从它的设计原则到落地方式，都粗放而模糊，谈不上错误，但是落地实施很容易出现偏差，从而落得失败的结果。

而行为经济学的加入，则以正确的视角切入，将庞杂的心理学知识和对人的正确「设定」连接到一起，从而让用户体验设计，开始发挥它应有的能力。

从策略上来说，行为经济学高估关注用户决策机制：

• 识别用户的认知偏见，并且视图解决用户偏见
• 推动设计师基于人类的思维方式来进行设计
• 连接研究和具体实施方法，让设计具备说服力
• 让长周期的持续性设计成为可能，比如很多游戏化设计的策略

而在具体决策机制上，行为经济学也提炼出了了比早期心理学研究更具指引性的设计影响因素：

• 认知偏差：导致用户判断系统性失误的思维捷径（系统1），比如厌恶损失（损失带来的痛苦比收益更大），现状偏见（即使有更好的，也偏向现状），锚定效应（做决策时更加偏向第一条信息所提供的「锚」）
• 用户情绪：情绪直接作用于用户决策倾向，时常会压倒理性思考，积极情绪让用户冲动，消极情绪导致用户怠惰、逃避，情绪驱动是用户体验设计中最常用到的策略之一。
• 社会认同：用户会有从众的行为（比如标识出「80%的用户会选择xxx」），容易受到他人影响，顺应推荐、认同乃至信仰，类似大众点评、豆瓣影评这样的内容会直接影响用户的决策。
• 框架：不同的呈现方式会影响用户的决策偏好。

（基于锚定效应、社会认同和框架等影响因素，制定出来的定价策略）

• 个体差异：不同的性格、价值观和经历会塑造出截然不同的决策机制，从而影响决策过程。厌恶风险的人更不愿意做出重大改变，而控制欲强的人更倾向于自己做决策，可以根据几类用户心理来规划产品的方案。
• 环境提示：物理环境会影响用户的决策。宽敞明亮的环境会激发创造性，逼仄阴暗的环境则更容易让人谨慎、规避风险。这些决策机制在视觉设计上用的非常多，色彩心理学也算是这类决策机制的一种应用。
• 时间压力：时间的可用性会显著影响用户的决策方向。在时间有限的时候，用户往往会做出更快的决定，通常依赖于启发式，直觉和偏见。但是清晰简明的指引、精简不必要的步骤、提供优先和必要的选项，这样的设计结合时间压力就能创造出影响。

而在如何运用好这些「用户决策影响因素」上，另外一个诺贝尔经济学奖获得者理查德·塞勒，则提供了更加明确的指引——助推（Nudge）。

人们倾向于无意识地做出决定。小提示或上下文变化可以鼓励用户做出某个决定，而无需强迫他们。这通常是通过启动、默认选项、显着性和感知多样性来实现的。

https://growth.design/psychology#nudge

虽然「助推」理论最早出现在 James Wilk 1995 提出的控制论内容中，但是「助推」的概念真正大范围普及应用，则是在 2008 年，理查德·塞勒 和 卡斯·桑斯坦 所合著的《助推》一书，为这一概念的应用落地、大范围普及提供了突然。这本书的全称是 《助推：如何做出有关健康、财富与幸福的最佳决策》，它相比于卡尼曼的著作，还要更加主动。

同样源自于「非理性人」的核心设定，卡尼曼借助大量的研究案例，从观察者的视角来剖析人类的大脑决策机制，而理查德·塞勒的助推则从决策者的角度出发，审视了不同影响因素所带来的不同结果，从另外一个方向印证了要怎样去设计，才能「助推」出「期望」的结果。

实际上，正是这种褪去粗放的直觉设计策略之后，过于浓重的拟物化设计才得以不断的减负，更加精简轻量级的设计，同样能够有效影响用户，设计隐喻同样能达到甚至超越拟物化的设计，才有了 2009 年之后，翻天覆地的扁平化设计运动。

这一变化看起来是一场自外向内发生的视觉风格变化，但是如果重新审视其深层原因，则是 APP 等数字产品爆发式增长之后，对于更高能效设计追求下的必然结果。而更为深刻的影响在于，它极大地扩展了 UX 和产品设计领域的纵深，以至于在 2013 年之后，UX 行业从业者所需要学习的心理学、行为学的知识列表，狠狠地扩展开来。

相应的，诸如「运营设计」、「增长设计」这样需要深入揣摩用户所想，甚至在策略上更加「晦涩」的设计分支开始出现，如今也成为稳定的职业分支。

那么，回到最初的问题：进入 AI 和 XR 的时代之后，全新的设计范式是什么？

下一阶段：AI/XR 时代的 UI 范式

2000 年的时候，用户愿意为网页加载等待十几秒，而 2010 年前后，这个数据骤降到5秒内，而今天的用户是不会等的。这还只是关乎「等待加载」的一个简单数据，世界范围内，用户的行为模式一直在持续的、大范围地发生变化。

从我的视角来看，AI 时代的 UI 和体验模式，还有待建立。基于行为经济学/心理学重新审视「如今的用户」的真实需求和全新的行为范式，再来叠加 AI 和 XR 这类新技术的便利性、拓展性，以及灵活的生成能力，逐步重新建立新的设计系统、交互方式以及新的约束，是如今我们所面临的真实情况。

关于 Vision Pro 这样的 XR 设备的留存率和市场普及率还太低，留待之后再说。而 AI 类的产品如今并不少，声量毫无疑问是足够大的，但数据是骗不了人的。2023 年年底，红杉资本的统计数据中，即便是最头部的 OpenAI 的产品留存率和转化率也远不如传统 APP。

如果从行为经济学的角度来粗略审视 ChatGPT 和 Midjourny 的「提示词工程」，以及界面复杂参数众多的 Stable Diffsuion，我们都可以很清晰的知道这是一个需要费劲调用理性思维「系统2」的过程。

但是 Tiktok 开之后，只需要你调动「系统1」——往下滑或者停留，就能获得简单直接的快乐。

围绕 AI/XR 建立的全新的 UI 范式必然需要较长的时间来重塑，而其中将会需要更加广泛和深入的行为经济学研究作为基础。相比于揣测新的 UI 范式是什么样的，比如研究新技术支持下，还需要多么深入的行为经济学和用户决策机制的研究打底。

而如何深入洞察今天的用户，借由有效的助推设计，让用户的「期望」和产品背后企业的的「期望」合而为一，用户只需调动「系统1」就能用把 AI/XR 产品用舒服了，那才是 AI 产品的春天。

参考引用

https://medium.com/@ramidoss/harnessing-the-power-of-behavioral-economics-in-product-design-a1ffe988a14f

https://growth.design/psychology#nudge

https://brightinventions.pl/blog/5-web-development-rules-from-dont-make-me-think-book/

https://technologizer.com/2010/03/29/bob-and-beyond-a-microsoft-insider-remembers/index.html

https://invention.si.edu/susan-kare-iconic-designer

https://elephant.art/the-birth-of-an-icon-susan-kare-and-the-creation-of-apples-graphics-09082022/

https://en.wikipedia.org/wiki/Fear,_uncertainty,_and_doubt

https://oversitesentry.com/the-old-fud-fear-uncertainty-doubt/

https://web.archive.org/web/20180602125205/

http://www.pcworld.com/article/193006/the_bob_chronicles.html

https://www.technologizer.com/2010/03/29/microsoft-bob/

https://museumoffailure.com/exhibition/microsoft-bob

https://en.wikipedia.org/wiki/Office_Assistant