首页 > 网名大全 正文
「科技微信专栏名字」科技的微信名字

时间:2023-03-21 18:07:38 阅读: 评论: 作者:佚名

编辑指南:无论是产品的启动徽标还是界面的标签栏,图标随处可见。

那么,图标是什么?最初是什么样的?我们该何时使用它?本文作者对图标的发展作了总结分析,一起来看一下吧。

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

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

一、上古时期

wikipedia将图标广泛定义为:Apictogram or ideogram displayed on acomputer screen.

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

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

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

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

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

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

二、图形用户界面的诞生

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

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

GUI并非乔布斯首创,而是诞生在上世纪70年代的施乐公司PARC实验室所发明的Alto电脑。Alto不仅首次了实现WIMP( Windows窗口、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协议。

  • 评论列表

发表评论: