首页 > 名字大全 > 微信名字 正文
【科技微信专栏名字】关于图标的前世今生(第一部分)

时间:2023-02-05 17:05:54 阅读: 评论: 作者:佚名

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

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

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

一、古代时代

维基百科广泛地将图标定义为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)。

口、Icon图标、Menus菜单、Pointer指针)概念,小巧易操作的特征也让它成为了世界真正意义上的第一台个人电脑(emmm那个时代的确是小巧了)。

当年乔布斯去参观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协议。

  • 评论列表

发表评论: