17.1

鼠标、视窗、图标和菜单:这些就是计算机图形用户界面的组成元素。按照设计宗旨,图形用户界面应该容易理解和使用,描述起来简单明确。鼠标是指针,视窗分割屏幕,图标用符号代表应用程序和数据,菜单列出可选的操作。

但是,图形用户界面的发展绝对不简单。它是大学、政府实验室、公司科研团队中无数工程师和计算机科学家数十年努力的成果。在此过程中,研究人员以彼此的工作为基础,重复别人犯下的差错,又不断尝试新的想法。

在整个1970年代和1980年代初期,施乐公司旗下的帕罗奥托研究中心(PARC)艰苦卓绝地研究了视窗、菜单、图标和鼠标的许多早期概念。1973年,PARC开发出“奥托”(Alto)电脑原型机。共有1 200多台奥托电脑被制造出来,接受测试。基于奥托电脑的概念,施乐公司的系统开发部接着开发出“施乐之星”(Star)电脑,并在1981年向公众介绍这款电脑,它是第一款向大众出售的如此对用户友好的计算机。

1984年,苹果电脑公司推出的低成本麦金塔电脑(Macintosh)将友好的界面带给了数以千计的个人电脑用户。在之后的五年里,内存条的价格大幅下跌,使得位元映像图形(bit-mapped graphics)的巨大存储需求得到满足。在苹果麦金塔电脑之后,出现数十种相似的电脑与工作站界面。

麦金塔电脑在1980年代获得的成功激励苹果电脑公司展开法律行动,针对图形用户界面的许多特征的所有权提起诉讼。这些官司的结果是,将那些创新归于第一个申请法律保护方,而不是归于设计师以及他们的公司。

图形用户界面起始于“画板”

17.2

男子坐在一台阴极射线管显示器前面,屏幕的黑色背景中显示出白色的正方形和三角形。画板电脑由麻省理工学院林肯实验室的萨瑟兰创造于1962年,被认为是第一台拥有视窗界面的计算机

图形用户界面的老祖宗是“画板”(Sketchpad)。麻省理工学院的学生伊万 · 萨瑟兰(Ivan E. Sutherland)于1962年在林肯实验室创造出这台电脑,作为他的博士学位论文。画板电脑的使用者不仅能用光电笔在阴极射线管(CRT)显示器上画出点、线段和圆弧,还能指定他们画出的任何图形受到的约束以及之间的关系。

圆弧可以有指定的直径,线条可以是水平或垂直的,图形可以从元素和形状的组合来建构,还可以移动、复制、缩小、放大和旋转,同时图形的约束被动态保留下来。在CRT显示器本身是新奇事物的时代,使用者通过在电脑上绘图就能交互地创造物件的想法是革命性的。

另外,为了放大物件,萨瑟兰编写了第一个视窗拖曳程序,这就要求他构思出史上首个剪贴算法。剪贴是一个计算图形物件的哪个部分将被显示,而且仅仅在屏幕上显示那一部分的软件例程。程序必须计算一条线条将被拖曳到何处,再将那个位置与使用的视窗坐标相对照,避免显示出任何坐标落在视窗之外的线段。

尽管操作画板电脑的影片在计算机研究群体中被广泛展示,但萨瑟兰说,这个项目对如今的图形用户界面几乎没有直接的影响。画板运行在麻省理工学院的TX-2大型主机上,需要太多计算能力,给个人使用并不实际。然而,许多其他工程师认为,画板的设计与算法对整整一代用户界面的研究产生了重要影响。

电脑鼠标的起源

1950和1960年代中使用的、依靠互动式电脑系统来选择屏幕区域的光电笔——包括画板在内——存在一些缺点。为了执行定点操作,使用者的手臂得要从桌面上抬起,过上一阵就会变得疲累。拾起笔需要在桌面上摸索,假如光电笔有一个笔座的话,在用光电笔做选择后,还要花时间把它放回笔座。

用光电笔测知一个物件的操作直截了当:电脑在屏幕上显示光点,再询问光电笔是否有测知光点,就这样,程序始终知道眼下显示的内容。确定光电笔在屏幕上的位置需要更加复杂的技术——像是在屏幕上显示一个由9个点构成的十字图案,再移动十字,直至十字的中心对准光电笔。

1964年,国际斯坦福研究所的一位研究项目带头人道格拉斯 · 恩格尔巴特(Douglas Engelbart)测试了所有市售定点装置,包括从依然流行的光电笔到操纵杆和一种曲线追踪装置Graphicon(使用一枝装在电位器臂上的笔)等各种装置。但他感觉,测试未能涵盖所有可能的定点装置,他应该以某种方式填补空缺。

他接着记起1940年代时在大学里上过的一堂课,课上介绍了用测面仪计算面积的方法。他思考起来,如果将电位器与测面仪结合起来,改造一下,能把后者用作定点装置。恩格尔巴特用草图画下自己的构思,解释给工程师威廉 · 英格利希(William English)听,后者在国际斯坦福研究所的机器加工车间制造出一个后来被称为“鼠标”的东西。

第一个鼠标的尺寸很大,因为它使用了单圈电位器:滚轮得要旋转一周,光标才会从屏幕一侧移动到另一侧,这样滚轮势必要做得很大。但它与电脑的交互很简单:处理器只需通过模拟数字转换器读取电位器定位信号的频繁采样。

通过鼠标移动的光标很容易确定位置,因为来自电位器的读数能确定光标在屏幕上的位置。但是,后来视窗系统的程序员发现,确定鼠标选中哪个物件所需要的软件比光电笔需要的软件更加复杂:他们必须把鼠标位置与屏幕上显示的所有物件的位置进行比较。

17.3

电脑鼠标几度被重新设计

恩格尔巴特的研究团队用鼠标和其他定点装置做了对照试验,结果鼠标轻而易举地胜出。电脑用户也很快就适应了鼠标。然而,恩格尔巴特想要改进鼠标。在实验之后,他的团队总结说,光标移动和鼠标移动的适合比率是大约2:1,但他想要尝试变动比率——慢速移动时比率下降,快速移动时比率增加——从而改善精细移动时的鼠标控制,也能加快大幅移动时的速度。后来的一些鼠标控制软件融入了恩格尔巴特的这个点子。

这个阶段的鼠标依然是实验性的,直到1971年才发生变化。恩格尔巴特团队的多名成员到了新成立的PARC工作。那儿的研究人员决定,他们设计的任何实验性系统都会使用鼠标。

PARC雇用了发明家杰克 · 霍利(Jack Hawley)来制造新款鼠标。霍利决定,鼠标应该使用轴编码器而不是电位器,轴编码器通过一系列脉冲来测量位置,这样就能剔除昂贵的模拟数字转换器。

1972年,鼠标再度变身。担任PARC系统架构副总裁的罗恩 · 赖德(Ron Rider)当年还是一个新员工。罗恩建议工程师把轨迹球上下颠倒过来,缩小尺寸,当作鼠标来用。这种新装置被称为滚球鼠标。罗恩说:“这是我办过的最简单的专利。我花了五分钟想到点子,用半小时描述给律师听,然后专利就办成了。”

这种滚球鼠标的原型由施乐公司电子部门制造,随后由霍利进行重新设计。滚球转动两根垂直轴,每根轴的末端有一个鼓状物,鼓状物上覆盖交替的导电和不导电材料条纹。在鼓形物转动时,这些条纹通过金属接触电刷传出电脉冲。

当苹果电脑公司在1979年决定为丽莎(Lisa)电脑设计一款鼠标时,鼠标设计方案再度变化。苹果公司使用了橡皮球,球的牵引力依赖于橡皮的摩擦和橡皮球本身的重量。鼠标盒底部的垫子承担了重量,光学扫描器侦测内部滚轮的运动。这种鼠标的容许偏差更大,可动零件变少,所以成本只有之前的滚球鼠标的四分之一。

17.4

桌上这台奥托电脑有一个笨重的白色键盘。奥托电脑问世于1973年,由施乐公司旗下的帕罗奥托研究中心研发,一共生产了1200多台

鼠标如何获得按键又失去按键

国际斯坦福研究所推出的史上第一只鼠标是木制的,只有一个按键,仅为测试概念构思。国际斯坦福研究所之后制造的塑料鼠标有三个紧挨着的按键。PARC的首款鼠标同样有三个按键,因为那样最适合机械设计方案。1980年代的苹果鼠标只有一个按键,而其他鼠标有两个或三个按键。

英格利希说:“两个鼠标键好,还是三个鼠标键好,大家争论不休。苹果公司做出一个坏选择,只用一个鼠标键。”他认为鼠标键最少也该有两个。

人为因素工程学专家威廉 · 弗普朗克(William Verplank)同意英格利希的看法,并说奥托电脑的鼠标有三个按键,使用者常常忘记哪个按键派哪个用场。测试显示,单键鼠标也令人困惑,它需要用双击之类的动作来选择,然后打开文件。弗普朗克说,测试的最终结论是,对于大多数使用者而言,双键鼠标是最理想的。

许多界面设计师不喜欢多键鼠标,认为双击一个按键来选择一个物件更容易记住。拉里 · 特斯勒(Larry Tesler)过去是PARC的一位计算机科学家,后来进入苹果公司任职,是他将单键鼠标带到了苹果公司。

位元映像:构成计算机屏幕上图形显示的像素图形。

图形用户界面:视窗显示、菜单、图标和鼠标的结合,用于个人电脑和工作站上。

图标:屏幕上的一个代表程序或数据的图案。

菜单:电脑用户当前可用的指令选项列表。一些菜单始终在屏幕上,另有一些菜单是弹出式或者下拉式的。

光栅显示器:图像以点阵显示的阴极射线管显示器。

矢量显示器:电子枪扫描线条(或矢量),投射到屏幕磷光质涂层上的阴极射线管显示器。

视窗:电脑显示器的某个区域,特定程序在视窗中执行。

视窗如何进入电脑屏幕

1962年的画板电脑能把屏幕水平地分为两个独立部分。研究者称画板电脑是第一个平铺式视窗实例,不同视窗并排放在一起。它们不同于重叠式视窗,也就是一个视窗能堆叠在另一个视窗上方,遮盖下层的所有或部分内容。

视窗是给小小的屏幕添加功能性的一个显而易见的办法。1969年,恩格尔巴特给在线系统(NLS,由他发明于1960年代)配备了视窗,能把屏幕水平或垂直地分割为多个部分,并引入了用鼠标实现的跨视窗编辑。

1972年,在研究者艾伦 · 凯(Alan Kay)的领导下,PARC的Smalltalk编程语言团队实现了他们的视窗版本。他们使用的技术远远不同于萨瑟兰或恩格尔巴特:他们决定图像得要以点阵显示在屏幕上,领导了一场从矢量显示器到光栅显示器的转变。这就是PARC发明出的位元映像。在1980年代,随着持续的处理器逻辑和记忆体速度的性能改进,这项技术变得可行。

研究者丹 · 英戈尔斯(Dan Ingalls)做位元映像操作的实验,研发出被称为“位图动画”(BitBlt)的比特块转移程序。BitBlt软件使得应用程序能够混合和操作一个像素值的矩形阵列(该阵列包括屏幕内外的像素值),再将结果储存在位元映像的合适位置。

BitBlt使得编写许多操作的程序变得简单得多,比如滚动视窗、调整视窗大小和拖曳视窗。这也使得凯创造出重叠式视窗。但这些进展使剪贴的实现变得更困难。研究者彼得 · 多伊奇(Peter Deutsch)解释说,在重叠式视窗系统中,视窗可能显示在屏幕上任何一个地方,随机遮挡其他视窗的内容,所以必须剪切下相当不规则的区域。

电脑菜单栏的起源

1960年代的防空计算机系统中,菜单已经得到普遍使用。不同功能被罗列在屏幕上,用不同按键组合来选择启动。但是,直到BitBlt技术和视窗出现后,菜单才能在需要时出现,在使用后消失。它们和定点装置一起成为对使用者友好的界面的基本部分。

菜单的设计也有了演变。一些新系统使用层级菜单。有些菜单为新手突出显示最常用的指令,另一些菜单为经验丰富的使用者列出所有可选指令。

第一批测试按需出现的菜单的研究者中,有一位来自PARC的研究人员威廉 · 纽曼(William Newman),他在一个名为Markup的项目中进行了测试。很快,Smalltalk编程语言团队进行效仿,创造出弹出式菜单,使用者按下一个鼠标键,就会在光标处出现一个菜单。

1981年问世的施乐之星电脑又前进了一步,推出了菜单栏。菜单栏基本上就是一排文字,指出每个视窗可以弹出的可用菜单。人为因素工程学专家弗普朗克回忆说,菜单栏最初是在视窗的底部,但施乐之星电脑团队发现,使用者更容易将菜单栏与它下方的视窗相联系,于是菜单栏就被挪到视窗最上方。

苹果公司在丽莎和麦金塔电脑中简化设计,将一条菜单栏放在屏幕最上方。这条菜单栏只与使用中的视窗相关联,不同菜单能从菜单栏被“拉下来”,出现在菜单栏下方。设计师威廉 · 阿特金森(William D. Atkinson)在1984年8月凭此创新获得专利。

电脑“图标的名字是怎么来的?

画板电脑屏幕上有图形来代表约束(如线条长度相同的规则),1967年由犹他大学学生凯和艾德 · 奇德尔(Ed Cheadle)建造的Flex电脑用正方形来表示程序和数据(就像今天的计算机“文件夹”)。

但是,电脑“图标”的概念到1975年才成形。斯坦福大学的计算机科学研究生戴维 · 坎菲尔德 · 史密斯(David Canfield Smith)在1973年开始写博士论文。他的导师是当时在PARC工作的凯,凯提议史密斯研究一下利用奥托电脑的图形能力。

史密斯从俄罗斯东正教会中借取“icon”(圣像)一词。东正教所认为的圣像不仅仅是一张画像,因为它还体现圣像代表的神祗的属性。而史密斯的电脑图标包含它所代表的程序和数据的所有性质。

史密斯在1975年获得博士学位,于1976年加入施乐公司。他说,他入职后干的第一件事是以办公室术语重新阐述他的“图标”构思。“我环顾我的办公室,看到了文件、文件夹、文件柜、电话和书架,这很容易就转化为图标。”他说。

17.5

一台方形白色的麦金塔电脑,配上白色键盘。将图形用户界面引入个人电脑的苹果麦金塔电脑一共卖出200多万台。然而,它所使用的应用软件并不一致——至少有三个不同图标能代表地址文件

17.6

乔布斯创立的NeXT公司的NeXT电脑系统及NextStep用户界面,它对后来的电脑产业有着深远影响

17.7

开放软件基金会推出的Motif是用于Unix操作系统的图形界面,由150家公司协作开发。Motif的首个商用版本发布于1990年7月

施乐公司的研究人员研发、测试和修改了用于施乐之星电脑界面的图标。一开始,他们试图让图标看上去像物件的缩小透视图,后来权衡标签空间、可辨识性和屏幕上容纳的图标数量等因素后,他们决定把图标控制在1英尺宽、64×64个像素的正方形内,也就是512个字节。弗普朗克回忆说,研究人员随后发现因为背景图样的关系,图标的右侧显得参差不齐,于是他们将图标的宽度增加到65个像素。

敲定图标的尺寸后,施乐之星电脑团队测试了由两名平面设计师和两名软件工程师开发的4套图标。他们发现,调整图标大小可能引发问题。比如,他们把代表一个人的图标(显示一个人的脑袋和肩膀)缩小,希望把多个这一图标放到一起代表一群人,结果一名受试者说屏幕分辨率让缩小后的图标像墓碑上的十字架。计算机图形艺术家诺姆 · 考克斯(Norm Cox)最终被雇用来重新设计图标。

随着施乐之星电脑在1981年6月的问世,图形用户界面进入市场。虽然这款电脑在商业上未获成功,但在电脑用户中引起了极大的兴趣,就像之前的奥托电脑在设计师界引起的兴趣一样。

早在施乐之星电脑上市之前,那时依然在苹果公司的史蒂夫 · 乔布斯(Steve Jobs)于1979年11月拜访了PARC,向Smalltalk团队的研究人员提出数十个问题,打听奥托电脑的内部设计。他后来招募了施乐公司的特斯勒来设计苹果丽莎电脑的用户界面。

随着1983年1月丽莎电脑上市和1984年1月麦金塔电脑上市,图形用户界面终于进入了低成本、高容量的电脑市场。

丽莎电脑的定价几乎达到10 000美元,消费者认为它对于办公市场而言太过昂贵。但是在获奖广告和低定价的协助下,麦金塔电脑如风暴一般席卷世界。早期的麦金塔电脑仅有128k字节的内存,电脑反应缓慢,因为对于图形操作来说,内存太小了。另外,程序员学习图形例程工具箱需要一些时间,这也拖延了应用程序包的问世时间。但麦金塔电脑的易用性是无可争议的,它让许多人对电脑产生兴趣,惠及IBM个人电脑和微软磁盘操作系统(MS-DOS),以及基于Unix的工作站。

谁拥有图形用户界面?

然而,大众对图形用户界面的广泛接受也引发了激烈的法律战,诉讼的焦点就是谁拥有图形用户界面。没有一家公司明确地证明它拥有实现视窗、图标、菜单的种种软件。但诉讼还在继续。

事实上,所有制造和销售轮式鼠标或滚球鼠标的公司都向国际斯坦福研究所或施乐公司支付专利许可费。恩格尔巴特回忆说,国际斯坦福研究所的专利律师调查了用户界面的所有早期工作,但仅仅了解硬件部分。在看过如何实现视窗等进展后,律师们告诉他,这些都无法申请专利。施乐公司的施乐之星电脑开发团队提出过12项与用户界面有关的专利。公司的专利委员会驳回大部分专利,只保留了两项与硬件有关的专利——一个是BitBlt,另一个是Star架构。

1988年3月,苹果公司对微软公司和惠普公司提起诉讼。苹果公司声称惠普的新浪潮(New Wave)界面(需要有微软公司Windows 2.03版本软件)未经允许就包含麦金塔电脑获得专利的视听计算机显示”技术。同时Windows 2.03版本非法复制了麦金塔电脑的视听专利技术。

1989年3月,美国联邦地区法院法官威廉 · 施瓦策尔(William W. Schwarzer)裁定,微软公司创造Windows 2.03时超出专利许可范围,但法官又在同年7月驳回苹果公司的大部分索赔项,只留下11个索赔项。

最终,这场法律诉讼直到1994年才见分晓。法官们并未支持苹果公司,认为“按照版权法,苹果公司无法为图形用户界面的构思获得类似的专利保护”。

回顾图形用户界面的诞生历史,我们可以认为,图形用户界面是前仆后继的众多科研工作者共同智慧的结晶,将它归功于任何一家公司都是不妥当的。

资料来源 IEEE Spectrum