体系构建计划——图标的前世今生（上）

你好，我发起了一个计划——“体系构建计划”，它会包括UI设计中所涉及的所有知识，我将自己所学与国内外前辈的经验糅合在了一起以便尽可能完整和正确，它的全面会超乎你的想象，也许这听起来很有野心，但这也是我向自己所发起的挑战——整合和学习所有的碎片化知识帮助自己全面提升，同时也希望帮助到正在阅读的你：）

这是我在“体系构建计划”中的第一类知识——图标类的开场文章。

篇幅原因将分为若干部分进行讲解（具体数量未知依然哈哈）。前面2篇我会着重讲述图标的前世今生，铺垫的比较多，如果你对这段历史感兴趣的话自然极好，不是很感兴趣的话，那请你。。当小说看啊哈哈哈（我不会说出请出门左转那么绝情的话的～）

本文约3500字，预计阅读时间10分钟

前言

作为设计师，图标是从我们入门开始就会接触的老生常谈的东西，不论是产品的一个启动logo，还是界面的标签栏，甚至是我们的日常生活，它随处可见。

但是，你有没有想过，图标到底是什么？它最初是什么样的？我们该何时使用它，何时不使用它？该用什么样的？具体该怎么去绘制？成套图标该怎么保持一致性？如果你有任何一点疑惑，欢迎继续往下阅读。愿你在阅读过程中有所收获：）

上古时期

wikipedia将图标广泛定义为：

A pictogram or ideogram displayed on a computer screen.

翻译成中文就是：计算机屏幕上的象形图（pictogram）或表意文字（ideogram）。

要想深究这俩玩意儿，就需要追溯至数千年前的苏美尔及古埃及文明，那时文字尚未出现，人类为了更方便得识别、表达和交换信息，便发明了一系列具有指代含义的图形和符号。

象形图其实属于表意文字的一种，他们之间最最简单的区别就是，前者代表了具象的事物，后者则代表了抽象的概念，为了让你们更好理解，我画了一幅图来举例：

左图的图标指代了“香烟”这个具象的、现实可见的事物，属于pictogram；而加上一个圈+斜杠后，就指代了“禁烟”这个抽象的概念，属于ideogram。

这些概念也就是我们今天所熟称的图标（icon），并且直至今日我们依然在广泛使用。比如各种电子设备中的图标、地铁站中的箭头、卫生间标识，道路上的人行横道标识等等。

相比文字，图标不仅具有跨越语言的超级优势，我们人脑对于图标（图形）的辨识能力和记忆能力也远远高于文字，因此用图标代替冗长的文字信息可以快速提升信息的获取速度，人们只需要一瞥就可以快速获取信息。

图形用户界面的诞生

提到图标，就不得不提GUI（Graphic User Interface），也就是就是我们熟知的图形用户界面。相比以前需要手动输入指令的CLI，引入视觉语言的GUI的信息呈现方式更加直观易懂，在人机交互上也利用鼠标让这一过程变得极为简单和高效。

CLI（command-line interface）即命令行界面，比如上古时期的DOS。需要避免与之混淆的是TUI（Terminal user interface），即终端用户界面，我们重装电脑时使用的BIOS程序就是最常见的TUI。

Linux中的CLI环境

GUI并非乔布斯首创，而是诞生在上世纪70年代的施乐公司PARC实验室所发明的Alto电脑。Alto不仅首次了实现WIMP（ Windows窗口、Icon图标、Menus菜单、Pointer指针）概念，小巧易操作的特征也让它成为了世界真正意义上的第一台个人电脑。（emmm那个时代的确是小巧了。。）

Xerox Alto

当年乔布斯去参观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来创作较为抽象的事物。

微软的Windows1.0（1985年），不得不说，它非常得。。丑陋，撇开系统所预设的可怕配色，图标简直丑到天际，另外不论是图标的阴影、细节还是风格都高度缺乏一致性，让人不得不怀疑是不是Steve Ballmer为节省预算亲自操刀。

Windows3.0（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设计师。（想想自己转行入门时练到吐血的拟物图标。。）虽然十余年的拟物时代已经不在，但苹果这一款经典之作无疑是设计界的标杆。

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

我们的盖茨兄看到Mac os x精致的拟物风大惊，随后眼睛滴溜一转，笑嘻嘻得说道：“哎嘿，小老弟我又来了～～你，那个戴眼镜的美工，去抄下，呸，是借鉴下老乔刚发布的os，记住了啊，给老乔留点裤底，咱们老吃官司也不优雅。”半年后，就诞生了喜闻乐见的Windows XP（）虽然同样是拟物风，但是过于绚丽的色彩和粗糙的质感总感觉有点买家秀的意思～

总结

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

篇幅原因，图标部分的前世今生讲了一半，下半部分下周继续更新，欢迎各位捧场～

巨人的肩膀：

[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.

=================================================

欢迎加入我的设计笔记，你会在这里获取更多的设计分享/干货/故事，相信对你会有所帮助 ：）