方寸之间见真功—趣话电脑图标的前世今生

caihua

正文：
　　图标在计算机图形界面中起了相当重要的作用，从1981年Xerox Star系统
开始，到2003出现的BeOS Zeta系统，每一系统都有不同的图标。本文通过对
这些系统中的图标的介绍和比较，介绍了图标在几十年来的发展背景和发展历
程；文章还对图标的属性，像尺寸、风格、颜色等等做了一个简单介绍；在文章
的最后，还对图标的将来做了一个展望，未来的图标将不可避免的发展到更注重
视觉效果，功能只能摆第二位。

引子
　　图标已经被广泛使用在计算机、PDA、手机等数码产品上面，人们已经习惯
使用图标来进行相应操作，但人们通常不会对图标是怎样产生、怎样被成熟使用
等方面的东西想太多，也不会去考虑现在的图标跟20年前有什么不同。

　　不过，通过对这些问题的思考，我们会重新审视图标的基础和根本作用，这
些随着技术发展而容易丢失的东西。

　　本文将对这些问题进行思考，文章首先对计算机图标的背景做一个简单介
绍，然后介绍图标的发展历程，包括从1981年的Xerox Star系统到2003年底
还没有发布的BeOS Zeta系统中的图标，之后对各种图标的尺寸、风格、定位等
属性的介绍，在文章的最后还对图标的未来做了一个展望。

一、简介
　　从历史观点上说，图标（icon）是一些只有很小尺寸但很可爱的艺术表现符
号，图标有浮雕、绘画、镶嵌工艺等表现形式。“icon”这个词起源于希腊的
“eikon”，原意为图像。

　　在当代的语言中，图标是一种符号，它象征着一些众所周知的属性、实体或
概念。在某些特定的文化背景里，图标应该非常容易被辨认出来。一些比较出名
的图标有：锤子和镰刀（前苏联）、十字记号（纳粹）、天平和刻度（公平）、
郁金香（荷兰）、导航灯（建议），等等。




美丽的郁金香是荷兰的象征

　　在计算机科学里，图标将文件，目录，应用程序或特定计算机系统中的设备
用图形化的方式表现出来。

　　今天我们所看到的计算机图标最早出现在1970年的Xerox Palo Alto
Research Center实验室。当时的图标有“桌面比喻”的含义在里面，将计算
机系统表现为一个虚拟桌面，使之与人们自然地交互，并与办公桌、文件纸、文
件夹、垃圾桶等办公用品联合使用。

　　经过多年的努力，Xerox PARC实验室完成了Xerox 8010信息系统的开
发，但这个系统在商业上的表现并不好。然而，Apple公司在开发Lisa系统失败
后，采纳了“图标”这个创意，最终在1984年推出广泛应用图标的Macintosh
机。

　　对大多数计算机用户来说，现在的图标及相应操作（单击，双击，选择，拖
动，等等）的概念已经很人性化。但随着图形硬件和软件的发展，图标还在不断
发展。

二、发展历程

　　让我们对重要系统的图标的发展历史做一个总结回顾，并一起来预测一下将
来的图标会是怎么样的。

　　1、Xerox Star（1981年）

　　1981年的Xerox Star系统用的是只有72象素×72象素的黑白图标。当时
的显示器只有72点每英寸（PPI）的分辨率，每一个图标刚好是一平方英寸。（见图1）

　　Xerox Star系统中的图标十分抽象，只用了圆形和矩形。当时制定的一些图
标到今天都还在被使用，比如说，一个折了一角的空白纸张表示一个文档，一个
淡黄色的文件夹表示一个目录，放了一张纸的桶表示一个垃圾回收站。

　　令人惊讶的是，Xerox Star系统中所有图标有很好的一致性，在图标的细节
上也表现的很好。比如说，当收件箱或发件箱有信件未处理时，收件箱或发件箱
的图标的外层就会多了一层；时钟的图标就像我们日常可以见到的时钟；图标的
名称也是图标本身的一部分。


　　2、Apple Lisa （1983年）
　　接下来要介绍的是Apple公司所推出的办公电脑―Lisa系统。尽管多了像垃
圾回收站有条纹和盖子、计算器有数字等等细节，但在某种程度上来说，Lisa系
统中的图标跟Xerox Star信息系统中的图标还是有点相似。（见图2）



　　Lisa系统中的图标也是黑白的，但只有48象素×24象素的尺寸。这是因为
相对Xerox Star系统来说，Lisa系统的分辨率比较低。

　　3、Macintosh （1984年）
　　Macintosh系统有独特和有趣的图标。这套由Susan Kare所设计的32象素
×32象素大小的黑白图标所代表的含义已经不仅仅是一套图标。（见图3）



　　在Macintosh系统中的图标首次区分了文档图标（一张折角的纸）和应用程
序图标（一只手拿着笔在纸上）。在此系统中也包含了一些新的图标，像
“Happy Mac”图标，金属的垃圾回收站，感叹号和疑问号等等。

　　Macintosh系统中的图标很容易被辨认，有很好的一致性，在抽象跟具体之
间把握的很好，在设计时还考虑到不同国籍的人的使用。

　　4、Windows 1.0 （1985年）
　　Windows系统的第一套图标发布于1985年。这是一套丑陋的，功能不全面
的，更像是占位符的图标。（见图4）



　　同是采用了32象素×32象素尺寸的黑白模式，但在细节表现和美观上面，
Windows的图标比Macintosh系统的图标实在差太远。随便拿Windows中的
两个图标来比较，都会发现图标之间的定位、风格和阴影都是不一致的。更糟的
是，尽管在整个Windows系统里面只有为数不多的十几个图标，有些图标还是
很容易被认错。比如说，控制面板和计算器的图标就很相似，都是一个分成几块
的矩形。

　　在早期Windows系统的图标中唯一值得称道的是时钟图标，时钟图标被设
计成一个正在运行的时钟（跟Xerox Star系统中的时钟很像），但在1990年的
Windows 3.0中，这个图标不见了。

　　5、Amiga OS （1985年）
　　很难有人会真正认同Amiga OS系统中的图标，但没人能否认这套图标的独
特性。（见图5）
最早版本的Amiga OS（又叫Workbench）中的图标用了黑、白、蓝、橙四种
颜色。更独特的是，每一个图标的尺寸大小都很随意，整套图标看起来也很混
乱。



　　这套图标的优点在于每一图标都有“选择”和“未选择”两个状态，两个状
态之间有完全不同的外观。


6、TOS （1985年）
　　有些时候，一套图标不仅仅反映了一个计算机系统本身的接口，也反映了系
统里面的某些特性。（见图6）



　　Amiga的系统看起来总是比较混乱，它的操作系统，图形界面，操作设计等
等看起来都是匆匆忙忙赶出来的，可以想象，它在商业上也是失败的。

　　TOS图形界面的图标的优点是很简洁，操作性也很好。这套图标用的是32×
32大小，黑白颜色。

　　7、NeXTSTEP / OPENSTEP（1989年）

　　当Apple公司和Microsoft公司还在它们各自的图形界面上停滞不前时，另外
一个操作系统的大大地推进了图标的发展。这就是NeXTSTEP系统，这是一个面
向对象的系统，后来发展程序OPENSTEP系统。（见图7）



　　NeXTSTEP系统的图标用的是48象素×48象素的尺寸，采用了彩色和阴影
效果。尽管图标的风格并不统一，它在某些地方的创造性设计还是可圈可点。

　　NeXTSTEP系统最初用的显示器是黑白的，但过了不久就能够支持彩色显示
器。

　　8、Windows 3.0 （1990年）

　　当Microsoft公司在Windows 1.0和后来成为拳头产品的Windows 2.0中
采用了一套丑陋的图标之后，Windows 3.0中的图标被很好地改善。（见图8）



　　为了设计Windows 3.0的图标，Microsoft公司特地请了Susan Kare等人
来设计这套系统的图标。由于图标采用了32象素×32象素的尺寸、16色、阴影
效果，整套图标在视觉效果上有很好的表现。

　　9、Macintosh System 7（1991）

　　这次看来是Macintosh系统步了Microsoft Windows系统的后尘。在发布
了7个版本之后，Macintosh系统终于引入了有阴影效果的彩色图标（尽管
Macintosh系统很早就开始支持彩色显示）。（见图9）



　　由于采用了很多蓝色和黄色的阴影效果，这套图标的颜色看起来很精致。

　　10、Windows 3.1 （1992年）

　　跟其它系统的图标一样，Windows 3.1中的图标也出现了一些简单的阴影
效果（虽然大多出现在边框）。整套图标的实用性也因此得到很好的改善。（见
图10）



　　这套图标也出现了一些渐变效果。

　　11、OS / 2 2.0 （1993年）

　　在IBM公司OS / 2系统中，图标的发展经历颇为曲折。和Microsoft公司的
合作导致在OS / 2系统第一个版本中采用了根本就没有图标的图形界面。为了扭
转这一局面，在第三个版本（OS / 2 Wrap）采用了3D效果，在第四个版本中
甚至采用了一些Copland风格。但在所有这些版本中，第二个版本所采用的图标
更为成功，更有特色。（见图11）



　　采用了32象素×32象素的尺寸，只用了16色，整套图标看起来很朴素。但
跟OS / 2其他版本所不同，图标的风格很一致。图标颜色以浅灰色和深绿色为
主，辅以蓝色和黄色。这样的颜色搭配让人看起来很舒服。此外，图标中的渐变
效果也用的很好。

　　12、Copland / Mac OS 8 （1994年－1997年）

　　经过差不多三年的“预览版”之后，Macintosh操作系统（后被改名为
“Mac OS”）的第八个正式版本在1997年发布了。在这个版本中引入了新的图
标风格。这套图标的风格被人们称为“Copland”风格。（见图12）



　　在“Copland”风格中应用了伪3D效果，用了大概26度倾斜的等距栅栏
（isometric grid）。等积的意思是没有透视点，两条平行线在视觉效果上不会
相交与等积空间的某一点上。等积经常被应用在三维空间的表现里面。

　　在Mac OS 8.5中更精美的图标（颜色也从256色扩展到数百万色）在
Macintosh迷中很流行。这套图标与Mac OS的白金外表很好地融合在一起，整
体显得手工精美，独特。

13、Windows 95（1995）

　　在Microsoft公司的重要产品Windows 95系统中，大多数图标被重新绘
制，在图标某些地方也应用了Copland风格。（见图13）



　　这套图标仍然采用了32象素×32象素的尺寸，16色。但如果安装了随后发
布的Microsoft Plus!插件，人们可以使用256色的图标。

　　14、BeOS（1997年）

　　BeOS操作系统中的图标是独特而且一致的图形的很好例子。BeOS的图标也
是等积的，但栅栏是不对称的，左边有30度的倾斜，右边有45度的倾斜。（见图
14）



　　这套有可以迅速辨认出来的颜色配置（应用了很多有旋转渐变效果的褐色、
红色、黄色和灰色）的独特图标的视觉效果很好，功能也很全面。

　　15、IRIX Interactive Desktop（1998年）

　　来自SGI的IRIX Interactive Desktop系统的图形接口比较少人知道，但它
的图标有不少独特的HCI特性。其中一个是图标的矢量性，所以这套图标可以放
大至任何尺寸而不损失图形质量，但这套图标不是很吸引人（虽然它是平滑的，
可以在系统的新版本中重用）。（见图15）



　　整套图标在外观上很一致，使用了Copland风格，在表面使用了阴影效果。
有特色的“魔法地毯”功能可以让人很容易地从程序队列里面找出正在执行的程
序。

　　16、Rhapsody （1999年）

　　Rhapsody系统是一个“短命”的操作系统，它只是为Mac OS系统和
NeXTSTEP系统的接合而存在的，最终它融合在Mac OS X系统里。（见图16）



　　Rhapsody系统的图标有一些传统的Copland风格残留在里面。（“传统”
是相对人们对Copland的理念做出的引申和发展而言的）。在一定意义上，这套
图标也终结了14年前就已经开始使用的Macintosh系统的图标风格。图标采用了
48象素×48象素的尺寸，采用了透明的遮照效果，支持了更多的颜色和更精细的
阴影效果。

　　不过，Rhapsody系统的定位就决定了图标在一致性上的冲突。图标有些是
NeXTSTEP风格的，有些是Macintosh风格的。

　　17、Amiga OS 3.5（1999年）

　　在Amiga OS 3.5操作系统里面有一套全新的等积的图标。图标的不同之处
在于采用了颤动的手法，但整套图标又表现了独特的视觉一致性。（见图17）



　　大多数图标都是48象素×48象素的尺寸，但图标的外边经常围绕着一些大边
框。

　　18、Windows 2000（2000年）

　　Windows系统的图标在每一个后续版本中都变得越来越精致，在Windows 2000
里的图标发展到了一个全新的高度。（见图18）



　　图标使用了32象素×32象素的尺寸，但如果需要，也可以使用48象素×48
象素的尺寸。相对Windows图标的原始版本来讲，这套图标所改进的地方很
多。图标使用了精细的阴影效果，支持24位颜色。

19、Mac OS X （2001年）

　　之前的Mac OS版本的图标都是32象素×32象素的尺寸，图标版本的升级只
是在颜色数量上有很显著的改进（从第一版的2种颜色到第8.5和9版里的超过百
万色）。然而，在2001年推出的Mac OS X系统中已经支持平滑的半透明图形接
口，图标风格相应地也有了很大的改变。由于构成图标的所有要素都改变了，这
次图标风格的改变是一种考验。（见图19）




　　新的图标有128象素×128象素的巨大尺寸，16倍于之前版本的图标面积。
图标采用了24位深度和8位的半透明遮照。

　　新的图标已经具有写实的风格，而不再只是一些象征的符号。这里引用《苹
果电脑人机接口向导》的内容，“系统的图标有一种像照片一样的全新风格。图
标应用了跟照片类似的写实手法。图标有128象素×128象素的足够空间来展示
细节。反锯齿使表现曲面和曲线成为可能。透明和半透明的通道可以表现复杂的
阴影效果。所有的这些特性使图标像华丽的图片成为可能。”图标应用了很多的
透明、半透明以及阴影效果。

　　图标的尺寸会根据系统的需要自动放大缩小，但这个特性让用户很难辨认缩
小后的图标。比如说，缩小成16象素×16象素后的图标跟原始尺寸的图标相比，
看起来就很不一样。
但不少用户批评这套图标浓重的写实手法。图标的尺寸太大，色彩太绚丽，太
“有趣”，导致给人想象的空间不大。一个硬盘的图标就像是一个硬盘，尽管大
多数的用户都不知道系统中的硬盘是什么样子。

　　20、Windows XP （2001年）

　　参考Mac OS X中的图标，Microsoft公司在Windows XP系统中重新设计了图标。（见图20）
这套被称为“Luna”的图标的尺寸比以往版本要大，色彩也更绚丽。尽管图标的
尺寸不像Mac OS系统中的那样大，但相对以前版本来说，尺寸上的变化也算是
惊人的。这套图标是48象素×48象素的尺寸（差不多比Windows 2000里面的
尺寸大两倍），有数百万种颜色，支持8位的透明色彩。
但这套图标中最特别的是视觉效果上的风格改变。让我们引用《Windows XP视
觉效果向导》来说明这一问题：“Windows XP中的图标的定位是更有趣，更多
色彩，更具活力。Windows XP中的图标有32位色的版本，在这个版本中提供
了更平滑的没有锯齿的边缘。所有的图标都是在矢量图形设计工具中设计出来并
在Photoshop里面处理过的。”



　　“……Windows XP风格的图标的特性有：颜色很丰富，与Windows XP
系统的外观很好地结合在一起；透视的使用使图标有动态的活力；边框和细节表
现的很柔和，很融洽；来自左上角的光源使图标之间很容易区分；像计算机和设
备这样的图标具有很好的用户界面。”

　　图标用了两种视图：较大的图标用的是有一定角度的透视；其他的一些图标
像“文档”、“警告或提示中的图标”、“放大镜”等则没有采用透视。

　　跟Mac OS X系统中的图标相比，Windows XP中的图标没有陷入“更大，
更好，更多问题”的怪圈。讽刺的是，Windows 1.0系统中带有蓝色阴影效果
的图标很难辨认，尤其是当图标被缩小的时候，而现在这种情况出现在Mac OS
系统里面，看来是历史一再重现。

　　21、BeOS Zeta （2003）

　　最后是关于BeOS家族中BeOS Zeta系统的图标，这套图标的设计在保留
BeOS原有特性上做了一定的努力。（见图21）



　　这套图标设计的很成功，尺寸是64象素×64象素，采用了阴影效果。4倍的
面积使一些图标看起来很“庞大”。此外，一些图标之间很容易混淆，像控制面
板的图标、传真机的图标、鼠标的图标、网络的图标、打印机的图标就很容易混
淆。

三、图标的属性
　　罗列了超过20种系统的图标后，让我们从各个方面来分析一下它们。

　　1、尺寸

　　由于早期的系统在图形上的功能比较弱，大多数早期的图标采用的都是32象
素×32象素的尺寸。但也有一些例外，像NeXTSTEP系统就采用了48象素×48
象素的尺寸，Amiga OS系统采用了一些很随意的尺寸（随意的尺寸反而损害了
整体效果，很少的系统采用会非正方形的尺寸，尽管Amiga的默认分辨率是640
象素×256象素）。

　　近年来，图标的设计者们慢慢摆脱了图标面积为1024象素的限制。Mac
OS X采用了128象素×128象素的尺寸，Windows XP采用了64象素×64象素
的尺寸。一些流行的操作系统也采用了大的尺寸（GNOME是一个很好的例子，
它的图标采用了96象素×96象素的尺寸），在Longhorn系统中的图标甚至采用
了更大的尺寸。但两方面的原因导致了所有这些系统都支持图标在比较小的尺寸
下显示：保持兼容性，保持通用性。（见图22）



　　很明显，显示器在支持象素密度上的增加而导致图标尺寸的增加。比如说，
Xerox Star系统和Macintosh系统的显示器只支持72 PPI的象素密度，而最新
的LCD显示器已经支持120－130 PPI的象素密度。具有300 PPI象素密度的显
示器已经在试产，在这样的显示器上，Mac OS X的图标看起来就像普通显示器
32象素×32象素的图标差不多大小。

　　值得注意的是，尺寸为16象素×16象素或24象素×24象素的图标也在操作
系统中被使用。

　　2、类型

　　差不多所有的设计者都要衡量是使用位图还是使用矢量。就跟我们在所有的
图形设计的书中看到的一样，使用哪一种类型都有它支持和反对的理由。

　　就如我们所看到的，大多数的图形界面用位图来表现图标，因为位图能更好
地表现细节。只有在IRIX Interactive Desktop系统中才单纯地使用了矢量。

　　然而，高象素密度的显示器在这些年很流行，一些低象素密度的显示器仍然
在使用，在图标设计中使用矢量可能更灵活。使用矢量将不用为同一个图标创建
不同尺寸的版本，使用渐变的效果（像增加倾斜和缩放效果）也更容易，增加其
他的一些视觉效果（像阴影效果）也更容易。反锯齿和其他的一些技术保证了使
用矢量实现的效果跟使用位图实现的效果差不多。

　　在《Windows XP视觉效果向导》中提到，Windows XP的图标是用矢量
工具设计之后用Photoshop加工的。同样，我们看看BeOS系统跟KDE系统中的
图标，也可以看到单纯使用矢量来设计图标也不是不可能的。

　　3、颜色的数量

　　颜色的数量一直在稳定的发展，从最早的1位两种颜色（通常是黑色和白
色），到4位16种颜色，到8位256种颜色。很难想象采用16色、24色、以及远
远超过人类的眼睛所能分辩的百万种颜色的图标会是什么样。（见图23）



　　4、透明效果

　　在最新的图形界面中，透明效果扮演着很重要的角色。我们也可以看到使用
透明效果对表现图标的功能很有帮助。

　　5、图标的倾斜

　　我们可以看到许多不同系统的图标使用了不同的倾斜：Copland，逆
Copland，BeOS，Windows XP，Mac OS X等等。在其中一些图标的应用的
很好。（见图24）



　　图标的倾斜通常会导致图标的不一致。在Windows XP里采用了两种倾斜，
但它们没有很好的融合在一起（看看你的C:\Windows目录就知道了）。在
Mac OS X里面，图标的倾斜应用的比较好，但还算不上是完美。

　　6、阴影效果

　　随着伪3D视图的发展，在图标中也逐渐使用了阴影效果。但在近来系统的图
标中，阴影效果是被设计的不连续和很精细。

　　7、风格

　　最后，我们探讨一下或许在一开始就应该被提及的属性－图标的风格。（见
图25）



　　早期的图标很抽象，可能只是为了表示一些概念。后来，图标渐渐支持更多
的颜色，在“抽象和具体”之间不断平衡。

　　目前，在图标中应用了现实主义的手法。Mac OS X里的图标的内容比之前
版本的图标内容多了512倍。但512倍就足够表现内容了吗？看来我们应该经常
问问自己“我们可以做到，但这样做是必须的吗？”这一类的问题。相比之下，
那些小尺寸的图标看起来只像是一个小斑点。

四、展望图标的未来
　　不管我们乐意不乐意看到，图标已经存在。图标驱动的图形界面接口可能已
经发展到了尽头，但我们除了使用图标之外还没有更好的解决办法。此外，图标
在其他的许多场合中也很有用。看来图标会继续存在于我们的屏幕上。

　　好像只有技术的进步导致了图标的发展。其实图标中仍然有许多其他的东西
可以被发掘。

　　能够根据对象的不同状态而改变的动态图标看来很有发展前途。动态图标已
经有一些应用的例子：Mac OS X中的识别图标，iCal中的日期图标，
Windows XP中的图像预览图标等等。但动态图标应该能够在更多的场合中使用
（接口方面的权威Bruce Tognazzini在2003年文章中有所提及）。而且，高象
素密度的显示器的发展已经是一种趋势，使用矢量的动态图标更让人期待。

　　令一种可能是在图标中使用动画。在图标中使用动画可以达到一些功能上的
目的，而不仅仅只是为了好看，比如用于响应鼠标的动作就可以使用动画。在一
些操作系统中已经有像清空垃圾桶之类的简单动画，但动画在图标中应该还有许
多不同的应用。

五、小结
　　我们可能听说过“图画所表现的东西远非笔墨可以形容”这句话。图标就很
好地验证了这一说法。

　　在最近的图形界面接口中，图标的用法仍然是点击、双击、选择、拖动，这
跟20年前的用法没有多大的差别。但图标的出现使我们能够更方便地使用电脑。

　　从另一个角度来说，图标在视觉效果上也一直在发展着。如果不考虑图标的
功能，我们很难能够找出这么多相似的图片。

　　硬件的发展导致了图标的发展，但看看最新的像Windows XP或Mac OS X
的图标，我们能够发现图标已经有点被“过度设计”。

　　看来，将来的图标有可能回归到它们的原始目的上－增强用户的使用。

　　希望这篇文件对要设计图标的人有用。(原著:Marcin Wichary)

参考文章
[1] “Icon definition” at Wikipedia,
http://en.wikipedia.org/wiki/Icon
[2] “Interview with Susan Kare” at Making of Macintosh,
http://library.stanford.edu/mac/primary/interviews/kare
[3] “Whither Copland” at The Icon Factory,
http://www.iconfactory.com/howto_copland.asp
[4] “IRIX Interactive Desktop User Interface Guidelines,” Chapter 2: Icons,
http://wwweic.eri.u-tokyo.ac.jp/computer/manual/lx/SGI_Developer/books/UI_Glines/sgi_html/ch02.html
[5] “Apple Human Interface Guidelines” at Apple,
http://developer.apple.com/documentation/UserExperience/Conceptual/
OSXHIGuidelines/index.html
[6] “GNOME Human Interface Guidelines,” Chapter 9: Icons,
http://developer.gnome.org/projects/gup/hig/1.0/icons.html
[7] “Windows XP Visual Guidelines,”
http://www.microsoft.com/whdc/hwdev/windowsxp/downloads/default.mspx
[8] “Hard drive icons: now and then” at Acts of Volition,
http://www.actsofvolition.com/archives/2001/june/harddriveicons
[9] “We could just start carrying around pictures of saints or something” at Semifat Sediment,
http://sediment.semifat.net/entry/2003/07/08-175509.html
[10] “Apple Squandering the Advantage” at Ask Tog,
http://www.asktog.com/columns/035SquanAdv.html

dzy

好文！

老飘

我D.....