编辑指南：无论是产品的启动徽标还是界面的标签栏，图标随处可见。那么图标是什么？一开始是什么样子？我们应该什么时候使用它？这篇文章的作者对图标的发展做了总结分析，我们一起看看吧。

作为设计师，图标是我们从入门开始就能接触到的老生常谈的东西。无论是产品的起始标志，界面上的标签栏，甚至是我们的日常生活，随处可见。

但是你有没有想过图标是什么？它最初是什么样的？我们什么时候应该使用它，什么时候不应该使用它？我应该用哪个？具体要怎么画？图标集应该如何保持一致性？如果有疑问，请继续阅读。希望在阅读中能得到一些东西。)。

一、古代时代

维基百科广泛地将图标定义为apictogram or ideo gram displayed on a computer screen。

翻译成中文的话，是电脑屏幕上的象形图或表意文字。

要深入研究这两者，就要追溯到几千年前的苏美尔和古埃及文明，那时文字还没有出现，人类发明了一系列有意义的图形和符号，使信息更容易识别、表达和交换。

象形图其实是表意文字的一种。他们之间最简单的区别是前者代表具体的东西，后者代表抽象的概念。为了更好地理解，我画了一幅画来举例。

左侧图标为pictogram属于的“香烟”是指构思和现实的东西。加上圈斜线表示“禁烟”的抽象概念，属于ideogram。

这种概念是我们今天熟悉的图标(icon)，直到今天仍在广泛使用。例如各种电子设备的图标、地铁站的箭头、厕所的标记、道路的人行横道的标记等。

与文本相比，图标不仅横跨语言，人脑对图标(图形)的识别能力和记忆力也远高于文字，因此使用图标代替长文字信息可以加快信息收集速度，人们一眼就能快速获得信息。

二、图形用户界面的诞生

提到图标时，应该提到我们熟悉的图形用户界面——图形用户界面(GUI)。与以前需要手动输入命令的CLI相比，引入视觉语言的GUI的信息显示方式更直观、更易于理解，在人机交互中也可以使用鼠标非常简单、高效地完成此过程。

命令行界面(CLI)是一个命令行界面，如古代DOS。要避免混淆的是终端用户界面(TUI)，即最终用户界面，我们在重新安装计算机时使用的BIOS程序是最常见的TUI。

GUI不是乔布斯创作的，而是20世纪70年代施乐PARC研究所发明的阿尔托电脑。阿尔托不仅第一次实施了Windows窗口(WIMP)。

当年乔布斯去参观PARC实验室，被Alto电脑屏幕中牛逼的图形界面给彻底征服，和Alto比起来，自己的Apple II真的太逊色了。

乔布斯借走这个优秀的想法，挖来施乐的员工来研发具备GUI的个人电脑，也就是我们熟知的Lisa和Macintosh（后改名为Mac），乔布斯还邀请盖茨来开发应用，但是盖茨看到了这玩意儿的钱途，招呼不打直接自己照葫芦画瓢搞了一套，推出了Windows一代，赚的盆满钵满。

而亲手创造GUI的施乐呢？由于高层太猪头，没有抓住市场机会而导致施乐错失了这块到嘴的肥肉，纵使后面研发了施乐之星，也因为过慢的速度和过高的价格被Macintosh和Windows按在地上摩擦。在施乐退隐后，市场理所当然得被苹果和微软称霸，直至今日，我们最常用的依然是macOS和Windows这两类操作系统（linux另说）。

虽然施乐给别人做了价值不菲的嫁衣，但是，施乐第一台个人电脑的GUI依然是值得称道的伟大灵感，对于互联网乃至世界的影响都极为深远。试想一下，如果实验室的天才们没有研发出Alto，或者施乐没有同意乔布斯的拜访，那很可能不会出现改变世界的Mac、iPhone和Windows。

图标发展史（Star to XP）：图标第一次为大众所接触应该是从决定商用的施乐之星开始。从简陋的像素线性到现如今的丰富多彩，其间历经了近半个世纪。这半个世纪到底发生了啥？图标最早长啥样？拟物图标是怎么来的？别急，且听我一一道来。

下图就是施乐之星的GUI（1981年），David Canfield Smith博士创作了成套图标的设计，所有的图标都是由矩形和圆角矩形组成，并且文件夹和文档的折角样式被沿用至今。

Macintosh的GUI（1984年），由Susan Kare所设计的图标在保持高度辨认性的同时显得更生动有趣，她很好得结合了ideogram来创作较为抽象的事物。那个带有表情的电脑icon是不是很熟悉？这就是macOS中「访达」功能的最早原型。

微软的Window（1985年），不得不说，它的设计让人一言难尽，撇开系统所预设的配色，不论是图标的阴影、细节还是风格都高度缺乏一致性，让人不得不怀疑是不是Steve Ballmer为节省预算亲自操刀。

Window（1990年）的界面去除了以往的配色，并且图标部分由前苹果设计师Susan Kare进行了重新绘制，不得不说整个界面都有了相当大的改观。

Windows95（1995年）算是和我们目前桌面最相似的一版系统了，这版的GUI进行了更大胆的重设计，并且在左下角首次加入了熟悉的Start按钮，结合任务栏和桌面的布局一直沿用至今，图标部分也更为精致易懂。而微软的帝国之路也从win95开始正式打开。

Mac os8（1997年）中引入了大量的等轴测彩色图标，也就是我们现在常说的2.5D图标，但是这种立体风格的导致图标辨识度受到很大的影响，后面也很难见到这种风格的影子了。不过，目前这种风格常用在一些引导页、banner的插画中，空间感的塑造让这个风格有了有无之地。相比常规视角，往往更能抓住眼球。

Windows98（1998年），也就是我们小时候上微机课最常见的系统。图标相比95更加精致了，并且首次使用了渐变色来增强视觉层级。

而Mac os x（2001年）的界面堪称经典，相比上一代可以用巨变两个字来形容。

它首次定义了“拟物”这个迷人的概念，所有图标都进行了照片级的超精细绘制，并且所有按钮加入了水晶般的质感和拉近用户距离的大圆角，这个版本也首次加入了DOCK来让用户快速进入一个程序，同时也赋予了大量的动画。

可以说，它的影响是颠覆性的，后续的所有拟物风格（不分pc和移动端）全部源自这版GUI！同时，它也影响了数代UI设计师。（想起了Andrew自己入门时练到吐血的拟物图标。。）虽然十余年的拟物时代已经不在，但苹果这一款经典之作无疑是设计界的标杆。

btw，大量的半透明和反射效果让这个版本界面有一个很好听的名字，Aqua，翻译过来是水的意思。

而盖茨在2001年正式推出的Windows XP，也正是受Mac os x精致的拟物风的影响。虽然同样是拟物风，但是过于绚丽的色彩和粗糙的质感总感觉有点买家秀的意思。

三、总结

每个改变世界的产品背后都有一段耐人寻味的故事～不论是古埃及文明中古老的象形文字，施乐之星中的黑白线性图标，亦或是Mac os中精致浪漫的拟物图标，撇去主观视觉上的满足，本质上其实都是为了更高效、快捷得展示和传达信息。

下半部分，我将为你带来XP之后的图标史，包括了移动端、扁平时代、material design等我们熟知的内容~

我是Andrew，我们下期见。

参考资料

[1]wikipedia.

[2]Operating System Interface Design Between 1981-2009,Wdd Staff.

[3]趣话电脑图标的前世今生, Marcin Wichary.

[4]苹果用户界面Aqua背后的故事,周兆熊.

[5]”Apple rattles lawyers at DesktopX over Aqua”. Lettice John.

[6]”Interview of Susan Kare” of Making at Macintosh.

#专栏作家#

Andrewchen；微信公众号：转行人的设计笔记，人人都是产品经理专栏作家。中科院硕士自学转行，擅长通过文字帮助年轻设计师成长和提效。延迟满足、长期主义。

本文原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于CC0协议。