第 4 章

鼠标带来的新手指

席德·梅尔在1990年的某个下午坐到了他的电脑前。他面前是一台386个人电脑,14英寸CRT显示器,分辨率640乘480,16种颜色。这些数字在今天听起来像古董,但在1990年,这是MicroProse公司程序员的标准配置。

梅尔的右手握着一只微软鼠标——1986年的版本,两个按键,灰白色塑料外壳,底部是一颗橡胶滚球。这只鼠标在桌面上移动一英寸,屏幕上的光标跳大约200个像素。从左到右穿过整个屏幕,需要手腕移动三英寸多一点。

他正在开发的游戏还没有正式名称。后来它会被叫作《文明》,会成为策略游戏史上的里程碑,会卖出数百万份拷贝。

但在那个下午,梅尔面对的是一个非常具体的问题。他需要让玩家管理一座城市、一支军队、一项科技研究、一场外交谈判,以及一整张世界地图。所有这些信息必须同时出现在一块14英寸的屏幕上。

而真正决定他能做什么、不能做什么的东西,正被他握在右手里。在那之前,游戏设计师从来没有面对过这种问题。街机柜里没有菜单。

红白机手柄上只有方向键和两个功能按钮,任天堂的工程师必须把整个《塞尔达传说》的操作逻辑塞进这六个输入点里。他们的解决方案是把UI固定在屏幕边缘,用方向键逐格移动光标,按A键确认。这套方案运转得不错,但它有一个硬上限——你不可能在方向键驱动的界面上同时管理几十个参数。每增加一个可选项,玩家的按键次数就线性增加。一个拥有十座城市、每座城市有五种建筑选项、同时还有六条外交关系需要处理的游戏,如果用手柄来玩,光是菜单导航就会占去一半的游戏时间。

但梅尔面前的屏幕上,光标可以自由移动。它不需要一格一格地跳。它可以斜着走。它可以从屏幕左下角直接飞到右上角,耗时不到一秒。

这个差异看起来只是速度问题。它不是。方向键驱动的界面是线性的——你的操作路径是一个序列,你必须从A走到B再走到C。鼠标驱动的界面是空间性的——你的操作目标是一个位置,你可以从任何起点直接抵达任何终点。

这意味着设计师可以开始在屏幕上放置任意数量的信息入口,而不必担心玩家抵达每个入口的路径成本。在方向键时代,增加一个按钮意味着增加整个导航序列的步数。在鼠标时代,增加一个按钮只意味着在屏幕上多画一个矩形。

这个自由来得太突然了。1985年,微软发布了Windows 1.0。这个操作系统在商业上几乎是一场灾难,但它埋下了一个概念:屏幕上可以同时打开多个矩形窗口,每个窗口里装着不同的信息,而鼠标可以在这些窗口之间自由跳转。这个概念在1980年代初期的施乐帕洛阿尔托研究中心已经诞生。艾伦·凯和他在施乐的同事们发明了“桌面隐喻”——屏幕就是你的办公桌,文件可以摊开在桌面上,你可以用手指直接拿起一份文件,移到一边,再拿起另一份。这个隐喻在1990年已经通过Windows 3.0和麦金塔操作系统进入了全球几千万台办公电脑。

而席德·梅尔的目标用户,恰好就是那些白天坐在办公室里,用鼠标在Excel表格和Word文档之间来回切换的人。

他们已经被训练过了。他们知道什么是菜单栏。他们知道什么是下拉菜单。他们知道点击一个图标会打开一个窗口,拖动标题栏可以移动窗口,点击右上角的小方框可以关闭窗口。这些操作不需要游戏说明书来教。他们的身体已经记住了。《文明》初代的界面架构直接继承了这套办公软件的语言。游戏主画面的顶部是一排菜单栏:Game、Orders、Advisors、World、Civilopedia。这五个单词的排列方式和Windows 3.0应用程序顶部的File、Edit、View、Tools、Help如出一辙。点击Advisors会弹出一个子菜单,里面列着Trade Advisor、Military Advisor、Science Advisor、Foreign Advisor、Attitude Advisor——五个选项,竖排,每个前面没有图标,只有文字。这就是当时办公软件的标准下拉菜单样式。这不是巧合。

MicroProse在1990年是一家以飞行模拟游戏闻名的公司,席德·梅尔本人就是一名专业的程序员,他每天的工作环境就是DOS命令行、Windows 3.0的窗口和麦金塔的图形界面。当他需要为《文明》设计一套能承载帝国管理全部信息的界面时,他转向了自己最熟悉的交互范式。

这不是一个艺术决策。这是一个工程决策。菜单栏已经被全球几千万办公用户验证过了——它有效,它可学习,它不需要重新发明轮子。

但《文明》的菜单栏做了一件办公软件菜单栏做不到的事。在Excel里,你的菜单操作和你的工作区内容是分离的。你点击File-Open,打开一个文件,然后你的注意力回到表格本身,菜单栏退回背景。但在《文明》里,菜单操作直接改变世界地图上的城市、军队和领土。你在Advisors菜单里点击Trade Advisor,弹出的不是一份独立的报告窗口,而是一张与当前游戏状态实时绑定的贸易路线图。你在这张图上做的每一个判断,都会直接影响下一回合的帝国收入。

菜单不再是工具。菜单变成了游戏本身的一部分。这是鼠标进入游戏领域后发生的第一个质变。

在街机和家用机时代,UI是附着在游戏画面上的信息层——血条、分数、剩余时间,它们告诉玩家游戏里正在发生什么,但玩家不能直接操作它们。你用手柄操作的是游戏世界里的角色,UI只是被动地反映角色状态。

鼠标改变了这个关系。当光标可以自由移动到屏幕的任何位置时,UI元素突然变得可以点击了。按钮不再只是信息指示器。按钮变成了操作入口。

《文明》初代的城市管理界面展示了这个转变的完整形态。当玩家点击地图上的一座城市,屏幕中央会弹出一个窗口。窗口的标题栏写着城市名称和人口数字。窗口内部排列着这座城市的建筑列表、驻守单位、当前生产的项目、粮食和工业产出。窗口底部有一排按钮:Info、Map、Rename、Buy、Sell、Exit。每个按钮都可以被鼠标点击。玩家可以在这个窗口里完成所有城市管理操作,然后点击Exit关闭窗口,回到世界地图。

这个交互流程和当时任何一个办公软件的文件属性对话框完全一致——点击文件,弹出属性窗口,查看和修改参数,点击确定关闭。

但《文明》的设计师在这里做了一次关键的改编。在办公软件里,属性窗口是模态的——你打开它之后,必须先关闭它才能继续操作主窗口。但在《文明》里,城市管理窗口是非模态的。你可以打开一座城市的窗口,不去关闭它,然后滚动地图去查看另一片区域。窗口会一直悬浮在地图上方。你可以同时打开三座城市的窗口,把它们拖到屏幕的不同位置,对比它们的产出数据,然后决定哪座城市应该优先建造奇迹。

这个设计决策在1990年不是理所当然的。Windows 3.0本身对非模态窗口的支持就很有限,大多数应用程序仍然使用模态对话框。

但梅尔的团队意识到,策略游戏的玩家需要同时看到多组信息。帝国管理不是线性流程——它是并行判断。你需要在军事态势、经济数据、科技树进度和外交关系之间反复跳转,每一次跳转如果都需要关闭一个窗口再打开另一个,你的思维流就被打断了。

鼠标让非模态多窗口成为可能——光标可以在窗口之间自由移动,不需要按任何键来切换焦点。设计师因此获得了一个在街机时代不敢想象的权力:他们可以把整个帝国管理拆成几十个独立的窗口,摊开在玩家面前,让玩家自己决定查看的顺序和组合。

这就是鼠标带来的第二个质变:UI从信息层升级为信息空间。在红白机上,《塞尔达传说》的心形容器和卢比计数器是固定在屏幕边缘的——它们是信息层,附着在游戏世界上方。但在《文明》里,菜单、窗口、按钮构成了一个独立的空间——它有自己的层级、自己的导航逻辑、自己的视觉语言。玩家在这个信息空间里花费的时间,往往比观看世界地图本身的时间更长。玩《文明》本质上是在操作一套信息系统,世界地图只是这套系统里最底层的那个窗口。

这个转变的影响远远超出了策略游戏。1992年,西木工作室发布了《沙丘II》。这款游戏后来被公认为即时战略类型的奠基之作。

但在1992年,它的设计师布雷特·斯佩里和乔·博斯蒂克面对的问题和席德·梅尔在1990年面对的问题几乎一样:如何让玩家同时管理几十个移动单位、一座基地的建筑序列、一片战场的地形信息——而所有这些信息都在实时变化。

他们的解决方案后来成了整个即时战略类型的肌肉记忆。玩家在地图上按住鼠标左键,拖动出一个矩形框。框内的所有单位被选中。然后玩家在地图的另一个位置点击鼠标右键,选中的单位开始向那个位置移动。如果要攻击,就点击敌方单位。如果要建造,就点击侧边栏的建筑图标,然后在基地附近点击放置位置。这套操作——框选、点击移动、右键取消——在1992年之前没有任何游戏做过。

但它在另一个领域已经存在了将近十年。1983年,苹果发布了Lisa电脑,它的操作系统首次向消费者展示了鼠标框选文件的操作:在桌面上按住鼠标拖动出一个矩形,矩形内的所有文件图标被同时选中,然后你可以把它们一起拖到另一个文件夹里。1984年的麦金塔继承了这套操作。

1985年的Windows 1.0也继承了它。到1992年,全球几千万办公电脑用户已经习惯了每天用鼠标框选文件、拖拽移动、右键弹出菜单。

《沙丘II》的设计师把这套文件管理逻辑搬进了战场。单位就是文件。框选就是多选。点击移动就是拖拽。右键在当时的操作系统里通常用来弹出上下文菜单,但在《沙丘II》里,右键被重新定义为取消当前操作并回到默认状态。

这是一个微妙的改编。在办公软件里,右键提供更多选项。在《沙丘II》里,右键撤销刚才的指令。但两者的底层逻辑是一致的:右键是次要操作,它提供一种退出当前任务流的方式。

这个改编之所以可能,还是因为鼠标。手柄的按钮数量有限,每个按钮都必须承担多重功能——长按、短按、组合键。但鼠标有两个独立的按键,设计师可以把它们分配给两种不同性质的操作:左键执行,右键取消。这个分工在办公软件里已经确立,西木工作室不需要向玩家解释。玩家的右手食指和中指已经记住了这个分工。身体默认值从办公室延伸到了战场。

《沙丘II》的侧边栏设计同样来自办公软件的传统。屏幕右侧是一列垂直排列的图标按钮,每个图标代表一种建筑或单位类型。点击图标,然后在主画面中点击放置位置。这个交互流程和当时任何一个绘图软件的工具栏完全一致——选择画笔工具,在画布上点击绘制。侧边栏的视觉风格也是当时典型的三维凸起按钮样式:浅灰色背景,顶部和左侧有亮边,底部和右侧有暗边,按下去时亮暗边反转,模拟物理按钮的按下效果。这种样式在Windows 3.0和麦金塔系统7中无处不在。它来自桌面隐喻的核心承诺:屏幕上的按钮应该看起来像现实中的按钮,让用户一眼就知道它可以被按下。

但《沙丘II》的侧边栏有一个办公软件没有的约束。战场是实时变化的。敌方单位不会等你造完建筑再进攻。这意味着玩家必须在观看战场和操作侧边栏之间频繁切换视线。如果侧边栏占据了太多屏幕空间,战场视野就变小了。如果侧边栏太小,按钮就难以点击。

西木工作室的解决方案是让侧边栏占据大约四分之一的屏幕宽度——这在1992年的640乘480分辨率下,意味着主画面只剩下480乘480的方形区域。这个比例后来成为即时战略类型的标准配置,从《命令与征服》到《星际争霸》再到《魔兽争霸》,侧边栏的宽度几乎没有变过。

这不是技术限制的结果。640乘480的分辨率在1992年已经足够支持更窄的侧边栏。但设计师发现,如果侧边栏太窄,按钮就太小,玩家在紧张的战斗中容易点错。如果侧边栏太宽,战场视野就太窄,玩家看不到足够的地形信息。四分之一的屏幕宽度是一个经验性的平衡点——它来自无数次测试中玩家的反馈,而不是任何公式计算。鼠标的点击精度和人类手指在紧张状态下的运动精度,共同决定了这个比例。换一个输入设备,这个比例就会不同。

1996年,暴雪娱乐发布了《暗黑破坏神》。这款游戏的故事发生在一个黑暗奇幻的地下城里,玩家扮演一名英雄,深入不断生成的迷宫,砍杀恶魔,收集装备。

它的核心玩法循环很简单:点击怪物攻击,点击地面移动,点击物品拾取。整个游戏的操作几乎完全依赖鼠标——左键移动和攻击,右键施放特殊技能。键盘只负责快捷键。但《暗黑破坏神》留给游戏UI史的最重要遗产不是它的操作方式,而是它的两个巨大的半球形指示器。

屏幕底部中央偏左的位置,一个深红色的半球,里面装着液体般的红色内容物。屏幕底部中央偏右的位置,一个深蓝色的半球,里面装着液体般的蓝色内容物。红色是生命。蓝色是法力。当角色受伤时,红色球体里的液面下降。当角色施法消耗法力时,蓝色球体里的液面下降。喝下治疗药水,红色液面回升。喝下法力药水,蓝色液面回升。

这两个球体占据了屏幕底部相当可观的面积。在640乘480的分辨率下,每个球体的直径大约相当于屏幕高度的八分之一。两个球体加上中间隔开的技能栏和两侧的按钮区域,整个底部UI面板占据了大约百分之十五的屏幕空间。这在当时是一个大胆的设计选择。

同期的角色扮演游戏倾向于把UI元素分散在屏幕边缘,尽量不遮挡游戏画面。《暗黑破坏神》反其道而行之,把两个巨大的半球形指示器直接放在玩家视线最常落下的屏幕底部中央。暴雪的设计师做这个决策时,依据的不是美学理论,而是注意力经济学。

在《暗黑破坏神》的战斗中,玩家的目光焦点在屏幕中央——角色所在的位置。怪物的攻击从四面八方涌来,玩家需要持续关注角色的血量和周围敌人的动向。如果把血量显示放在屏幕左上角或右上角,玩家的视线就需要在战斗焦点和血量指示器之间来回跳动。这个跳动的时间可能只有零点几秒,但在高强度战斗中,零点几秒的注意力转移就可能导致角色死亡。

半球形指示器的解决方案是用尺寸换取注意力成本。球体足够大,大到玩家即使盯着屏幕中央,用余光也能感知到红色液面的高度变化。

当液面降到危险区域时,红色球体底部会出现一个明显的空缺——这个视觉信号不需要直接注视就能被周边视觉捕获。人类周边视觉对亮度和颜色的突变特别敏感,但对精确形状和文字不敏感。

一个变空的红色球体比一个变短的血条更容易被余光察觉。暴雪的设计师没有发明这个原理——航空仪表盘和核电站控制室的设计师早就知道,关键警报应该用大面积的颜色变化而不是小字体的数字变化来传达。他们只是把这个原理应用到了游戏UI里。

红色和蓝色的选择同样不是随意的。在西方文化传统中,红色与血液、危险、生命力的关联至少可以追溯到中世纪。蓝色与神秘、魔法、精神力量的关联也有类似的深度。暴雪的设计师不需要向玩家解释为什么红色代表生命、蓝色代表法力——这种颜色编码已经深植于文化默认值中。他们只是把它放大到了前所未有的尺寸。

两个半球形指示器成为《暗黑破坏神》最醒目的视觉标志,后来的续作和无数模仿者都保留了这个设计。

但血球UI的真正巧妙之处在于它同时解决了两个问题。第一个问题是信息传达——玩家需要快速知道自己还剩多少血。第二个问题是氛围营造——《暗黑破坏神》是一个黑暗奇幻游戏,它的视觉风格需要让玩家感到压抑、紧张、时刻面临死亡威胁。

两个巨大的、装满液体的球体,像两罐随时可能流干的血液和魔力,它们的视觉重量本身就传递了一种不安感。小血条做不到这一点。小血条是信息工具。大血球是信息工具同时也是情绪装置。

这是PC游戏UI在1990年代中期达到的一个高峰。设计师不再只关心玩家需要知道什么信息,他们开始关心这个信息应该让玩家产生什么感觉。鼠标让设计师可以自由放置任何尺寸的UI元素,而高分辨率显示器——1996年的主流分辨率已经从640乘480升级到800乘600——给了他们足够的像素来挥霍。一个直径一百像素的血球在800乘600的屏幕上看起来足够醒目,同时不会让人觉得它侵占了游戏画面。因为游戏画面本身是2D的,背景是一张静态的渲染图,血球覆盖的那一小块区域并没有隐藏任何重要的视觉信息。

这个平衡是脆弱的。它建立在一个即将被打破的前提之上:游戏世界是2D的,UI面板覆盖的区域并不比它背后的画面更重要。

在《文明》里,菜单栏覆盖的是地图的顶部边缘,那一带通常只是海洋或极地冰盖。在《沙丘II》里,侧边栏覆盖的是战场右侧,玩家只需要把基地建在偏左的位置就不会被遮挡。在《暗黑破坏神》里,血球覆盖的是地下城地面的底部中央,那里通常只有石砖纹理。这些UI面板之所以可以被容忍,是因为它们遮挡的东西本身就不重要。

但如果游戏世界是3D的呢?如果玩家可以360度旋转视角,看向任意方向呢?如果屏幕上的每一个像素都可能包含重要的视觉信息——敌人可能从任何方向出现,宝物可能藏在任何角落,地形起伏可能影响战术判断——那么,一个浮在画面表面的UI面板就不再是无害的信息层了。它会变成一个异物。一块挡在眼前的补丁。一个时刻提醒玩家你正在看一个屏幕而不是正站在一个世界里的视觉噪音。这个冲突在1996年还没有爆发。《暗黑破坏神》发布时,3D游戏还处于萌芽阶段。

《雷神之锤》在同一年夏天刚刚证明了全3D第一人称射击是可行的,但它的UI仍然沿用2D时代的惯例——屏幕底部的一排数字和图标,浮在3D渲染的画面上方。这个方案在1996年看起来没问题,因为《雷神之锤》的分辨率已经可以跑到640乘480甚至更高,屏幕底部放一排数字并不碍事。而且射击游戏的玩家大部分时间盯着准星——屏幕正中央——余光扫一下底部的弹药数字就够了。

但设计师们已经开始感到不安了。1995年,Windows 95发布。这个操作系统带来了全新的用户界面设计语言——任务栏、开始菜单、最小化最大化和关闭按钮的统一样式。它的视觉风格比Windows 3.0更精致,按钮有更细腻的三维阴影效果,窗口有更平滑的圆角。更重要的是,它进一步巩固了全球几千万用户对图形界面的身体默认值。

到1996年,一个典型的PC游戏玩家白天在办公室用Windows 95的鼠标操作Excel表格,晚上回家用同一只鼠标操作《暗黑破坏神》的血球和技能栏。

他的右手食指已经积累了数千小时的点击经验。他对菜单的层级结构、按钮的视觉暗示、窗口的拖拽行为的理解,已经进入了一种不需要意识参与的状态。这是PC游戏UI黄金时代的真正基础。

不是技术。不是图形性能。是玩家已经通过办公软件完成了对鼠标交互哲学的全身心内化。

设计师可以假设玩家知道如何操作菜单、按钮、窗口和滚动条,因此可以把界面做得更复杂、更丰富、更接近一套完整的信息管理系统。《文明》的科技树窗口、《沙丘II》的建筑序列面板、《暗黑破坏神》的装备栏——这些UI元素的复杂度远远超过了街机和家用机时代的任何界面,但玩家并没有被吓跑。因为他们已经在白天的工作中学会了这套语言。

席德·梅尔在后来的一次访谈中提到过一个细节。他说《文明》初代的测试玩家中,有一些人从来没有玩过电脑游戏。他们是在办公室听同事说这个游戏很有意思,于是下班后把软盘带回家安装。这些人对游戏的期待不是来自街机厅或红白机,而是来自办公软件。

他们看到《文明》的菜单栏时,第一反应不是觉得这个游戏界面复杂,而是觉得它跟Excel差不多。他们自然地点击菜单,自然地拖拽窗口,自然地在多个信息面板之间跳转。他们的学习成本几乎为零——不是因为游戏设计得好,而是因为游戏借用了他们已经拥有的技能。

这个借用之所以可能,是因为鼠标的存在。键盘也可以操作菜单——Windows 3.0的所有菜单项都可以用Alt键加字母快捷键来触发。但键盘操作菜单是线性的,你必须按照菜单的层级结构一层一层进入。鼠标操作菜单是空间性的,你可以直接跳到任意层级的任意选项。键盘让菜单变得可用。鼠标让菜单变得透明——它消失了,变成了玩家思维和游戏反馈之间的直接通道。

当玩家完全掌握了鼠标操作后,菜单本身就不再是注意力的对象。注意力直接穿过菜单,落在菜单所代表的操作上。

这就是鼠标带来的第三个质变:UI的透明化。在街机时代,UI是显眼的——闪烁的分数、巨大的血条、不停跳动的计时器,它们时刻提醒玩家你正在玩一个游戏。

在家用机时代,UI开始收缩到屏幕边缘,试图降低自己的存在感,但它仍然是一个与游戏世界分离的框架。在PC鼠标时代,UI开始变得透明——不是视觉上的透明,而是认知上的透明。玩家不再意识到自己在操作一套界面。他们只是点击城市建造建筑,框选单位移动攻击,看着血球决定喝药。界面本身退入了背景。

但透明化的前提是界面元素可以自由放置,而自由放置的前提是鼠标可以指向屏幕上的任意位置。这个链条一旦断裂,透明化就会逆转。如果输入设备不能提供空间性的指向能力,设计师就必须回到线性导航的老路——在屏幕上排列选项,让玩家一个一个地跳过去。UI会重新变得显眼。它会再次变成一道挡在玩家和游戏世界之间的墙。

1996年,这道墙还没有出现。PC游戏UI的黄金时代正在全盛期。大屏幕、高分辨率、鼠标的自由光标、玩家对图形界面的熟练掌握——这些条件共同创造了一个短暂的窗口期,让策略游戏、角色扮演游戏和即时战略游戏得以发展出极其复杂的信息架构。但这个窗口期即将关闭。

3D游戏正在敲门。当游戏世界从平面变成立体,当玩家的视角从俯瞰地图变成第一人称直视,那些浮在画面表面的菜单、面板和血球,将面临一个它们在2D时代从未遭遇的质问。这个问题在1996年还没有答案。但在《暗黑破坏神》的血球下方,在《文明》的菜单栏边缘,在《沙丘II》的侧边栏右侧,那个问题的轮廓已经隐隐可见了。鼠标给了设计师把UI铺满屏幕的自由。但很快,游戏世界本身也会要求占据整个屏幕。到那时,UI将不再是信息的载体,而是信息的障碍。界面契约需要被重新谈判。而这一次,谈判的场所不在桌面。它在一个更深、更暗、更让人分不清哪里是界面、哪里是世界的地方。