我们来聊聊世界上最早的UI设计师:我们不仅创造了汉堡包图标
最早的汉堡图标隐藏在施乐之星中
Xerox Star 拥有最早的图形界面,是当今无处不在的UI 界面的祖先。于是杰夫找到了当年的负责人之一诺姆·考克斯。
“你确实做了功课,”诺姆·考克斯在给杰夫的电子邮件中回复道,“当你来找我时,你就找到了合适的人。”
如今,每个开发移动网站或APP的人在他们的产品中基本上都会使用汉堡包图标。而每一位称职的用户体验设计师也会想知道,为什么Chrome和亚马逊这样规模的产品不使用汉堡包图标。
一些评论家认为,汉堡包图标让产品吸引力降低、效率降低,但在更多人看来,汉堡包图标的无处不在是事情正在变得更好的重要标志。著名软件开发人员和用户体验教育家Michael J. Fordham 在Medium 上写道:“(汉堡包图标)正在变得纯粹的力量、纯粹的功能,给了设计师在设计上偷懒的理由。”汉堡图标。图标绝对是一个不错的选择,因为全世界的人都知道这三条水平线的含义。
然而,很多人仍然不知道这三条水平线是如何进入数字世界的。一切都有一个起点。如果汉堡包偶像也是在产房里出生的,那我应该和负责接生的医生好好聊聊。于是我找到了当时在场的三个人,Norm Cox、David Canfield Smith和Ralph Kimball,和他们好好聊了聊汉堡图标是如何诞生的,施乐之星诞生时的往事(40多年了)之前),以及他们认为最好的设计理念是什么?
一台完整的Xerox Star计算机,第一台具有图形界面的计算机
首席视觉设计师Norm Cox 隶属于施乐系统开发部门,而David Canfield Smith 和Ralph Kimball 是该部门的两位主要设计师。
Norm Cox:当Geoff Alday 找到我时,他对我说的第一句话是,“当整个设计行业都在关注如何使用这个小菜单图标时,我意识到是你创造了它。”当我盯着它的时候,我所能想到的就是,“天哪,我可能在周二的8:30 创造了这个小东西,但从未想过设计后它会是什么样子。”
戴夫·坎菲尔德·史密斯:汉堡的图标是如此微不足道。我们最引以为傲的事情之一是Xerox Star,这是一台比同时代其他计算机所需的命令少得多的计算机,但它几乎可以做我们当时能做的任何事情。还有很多事情。汉堡菜单是我们用来承载冗余命令和操作的一个载体和方法。我们当时无法找到更好的方法。
天哪,我可能在周二八点半创造了这个小东西,但从未想过设计后它会变成什么样子。 诺姆·考克斯
诺姆·考克斯:与施乐之星本身的革命性相比,汉堡图标的受欢迎程度和受欢迎程度似乎有点可笑。它实际上是整个产品中最不起眼的部分,但现在它确实已经成为一个无处不在的符号。
Dave Canfield Smith:1975 年我在斯坦福大学时,SRI 聘用了我,那是我第一次见到Charles Irby。 Charles 后来成为UI 团队的首席设计师,与Doug Englebart 合作。在SRI 工作不到一年后,查尔斯就离开去帕洛阿尔托研究中心工作,他告诉我这里的工作有多棒,他希望我去那里。所以我后来在PARC 实习,艾伦·凯(Alan Kay) 是我的主管。在那里,我使用了第一台真正的个人计算机Alto,并使用Small Talk(Kay 设计的一种编程语言)来撰写论文。与SRI相比,PARC规模不大,但门槛其实更高。除非你有博士学位,否则你根本不会被邀请和雇用。
办公园区里还有一个哥们,肩膀上站着一只真正的鹦鹉,在公园里闲逛。 Norm Cox与PARC的企业文化
Dave Canfield Smith:当时我们首先在PARC开发了Alto计算机(实际上主要用于研发,总共只生产了几百台)。突然我们的团队有了这个分辨率为7001000像素的位图屏幕,每个像素都可以单独控制开关。这个展示瞬间点燃了我们的想象力和创造力。
Norm Cox:在施乐之星项目之前,我管理着另一个设计团队,为施乐当时生产的电子打字机开发字体。然后带着鼠标和黑白像素显示器出现在我们的办公室。我一直对各种新事物着迷,绘画、水彩、木工、任何创意设计和新媒体。于是我就开始不停地玩它。
Dave Canfield Smith:当我于1976 年加入Xerox 的系统设计和开发团队时,我在办公室的一个偏远角落工作。当时,该公司计划将Xerox Star推向市场,目标使用场景是办公室。当时的传统办公室,大多数人对电脑了解不多,管理人员也不需要打字。相反,秘书们却这么做了。因此,我的想法是逐步将办公场景中的很多元素融入到整个计算机视觉系统中,包括文件柜、垃圾桶、文档、文件夹等。这将使学习和理解变得更容易,而不是仅仅提供一个简单的说明手册就可以了。我们使用帕洛阿尔托研究中心的所有技术来创造这些东西。
Ralph Kimball:在Xerox Star中,我们不再依赖键盘来发出操作指令。相反,我们使用图形界面进行直观操作。这是其最具革命性的一点。
Dave Canfield Smith:我的小隔间的墙上贴满了有关各种图标的属性及其功能的印刷文档。这包括文件、文件柜、打印机、时钟、邮箱、图书馆(这是一个类似谷歌的搜索界面,我实在是没有聪明到发明谷歌)……激光打印机和使用互联网的电子邮件,这两者都是这是PARC的发明,我会尽可能地利用PARC的技术来创建一个全面的办公系统。
Ralph Kimball:Norm Cox 确实是Xerox Star 开发团队的瑰宝,因为他能够如此有效地利用媒体的力量进行有效的设计。在遇到Norm之前,我和Charles Irby在旧金山会见并交谈了许多著名的图形设计师,但他们对设计图形界面一无所知。
Dave Canfield Smith:我曾经画过第一个版本的设计稿(图3),对我来说它看起来就像垃圾。感谢上帝,我们有Norm Cox,我们可以拥有一个今天看起来仍然很舒服的图形界面。查尔斯对我的设计非常宽容。他从来没有说过“戴夫的设计很糟糕”这样的话。相反,他以更微妙的方式推动事情向前发展。有一天,他来到我的办公室,对我说:“我认为举办一场设计图标的设计比赛会很好。”
Norm Cox:鲍曼负责程序开发。他编写了一个非常粗糙的图形程序,使我们能够在显示器上创建图形。华莱士·贾德(Wallace Judd) 是人因工程学专家(更接近当今的交互设计领域)。他写过很多这方面的论文,但对视觉设计并没有太深的了解。所以,我最终被邀请参加一个图标设计“比稿”。我们每个人设计一套,然后大家争论哪一套更好。
最早的UI图标设计间距
戴夫·坎菲尔德·史密斯:当我的设计稿被退回时,当我再次看到它时,感觉就像有人指着我的鼻子批评我。这是清晰且令人印象深刻的。
Dave Canfield Smith:其实我还是不明白汉堡图标的魅力是什么,因为在我看来,它甚至不是一个图标,它只是一个符号。图标应该同时具有视觉表达和功能机器语义,而这个菜单图标只具有前者。它不暗示任何其他与菜单相关的信息,只是安静地出现在屏幕上。你戳它,弹出一个菜单,光标移开,菜单消失,就是这样。图标应该包含一个隐喻,它应该映射到世界上存在的可操作对象。
这件事其实是对我们设计思维的启示。 诺姆·考克斯
Norm Cox:在Xerox Star 上,每英寸屏幕有72 像素,您必须能够在这个范围内传达您的想法。我们从施乐制造的打印机和复印机的现有符号系统以及道路上的标志中汲取了很多灵感.
Norm Cox:在任何车库里,总有一个桶可以装各种杂物。有螺母和螺栓、钉子和抹布以及其他难以分类的杂物。这是汉堡菜单图标的隐喻。就像没有完美的系统一样,也没有完美的界面,就像戴夫刚才说的,你总是会遇到各种不合适的事情。
Dave Canfield Smith:当时,一个典型的操作命令是“Paginate”。由于当时计算机的速度和容量不足,计算机无法在文档界面中实时显示文本和图像布局,因此需要通过单击“分页符”来预览整个文档。这是一个明显受到时代和功能限制的操作命令,你应该能感觉到它有多么愚蠢。我们不喜欢它,但它必须在那里,所以我们将它隐藏在远程菜单中,这样用户就不必一直在主屏幕上看到它。我们希望将真正有用、重要的命令放在用户面前。
Norm Cox:我想了很多关于使用什么符号来呈现这个菜单符号,包括加号、省略号和下拉箭头。但仔细想一想,我们要表达的意思是“杂”,或者“其他”、“额外”。上述三个符号本身与这个意义相去甚远。我想找到一些直观、易于解释且令人难忘的东西来用作此菜单的符号。
Dave Canfield Smith:这三条水平线呈现的是一个抽象的图像,它对应的图像就是你点击它后看到的图像:菜单。
Norm Cox:今天广泛使用的另一个符号是垂直排列的三个小点,这更像是汉堡包图标的缩短版本。
Dave Canfield Smith:从设计的角度来看,它非常国际化,因为它是非语义的。你不希望你的产品在其他国家和地区需要对这个图标进行额外的语言翻译,因为翻译会占用额外的空间,因为其他人不会理解它。
Norm Cox:由此,我们开始逐渐意识到用户识别信息的水平。当用户看屏幕时,他们会快速扫描以找到特定的形状。如果形状匹配,他们会相对仔细地查看细节。就像当您注意到菱形路标时,您首先看到路标本身,然后注意到其中的详细文字。因此,我们需要保证你在扫描界面的时候,不需要扫描太多的内容。屏幕上的每个像素都很重要,不应在其上放置不相关的信息。一切都应该有明确的目的,不需要额外的装饰。这些限制意味着我们必须设计一些优雅而简单的东西:永恒的设计风格。
戴夫·坎菲尔德·史密斯:我们正在尽一切努力避免混乱。我们希望它具有独特的视觉吸引力,这样人们就会在界面上花费更多时间。
Norm Cox:如果你曾经关注过图标设计的整个过程,特别是苹果和微软的用户界面,你会发现图标已经从简单的线条随着像素密度的增加逐渐演变为极其复杂的图标。逼真的照片般的图标,包括阴影、高光和各种东西,然后回归到极其简单的线条和形状。这背后的原因其实和我们之前说的一样。
你会发现图标逐渐从一开始的简单线条,随着像素密度的增加,变成极其逼真的照片般的图标,包括阴影、高光和各种东西,然后又回到极其简单的图标。线条和形状,这背后的原因其实和我们之前说的一样。 诺姆·考克斯
Ralph Kimball:我们一直在努力构建一个非常简单的用户界面,尽量不使用让用户感到困惑的所谓高级指令,以便有经验的用户能够更高效地工作。在Xerox Star 的开发过程中,我们需要针对各种问题做出非常具体的决策。
Dave Canfield Smith:我们希望人们能够使用Xerox Star 做有用的事情,而不是让它变得复杂。让复杂的事情变得简单并不容易,我们不遗余力地创建更简单的界面。
诺姆·考克斯:我认为我们没有意识到那是一个多么特别的时刻。我们认为自己是一群嬉皮士,做着我们感兴趣的事情,但现在看来,我们正在利用技术的力量在世界耳边低语,然后彻底改变它。
以下是1982 年Xerox Star 用户界面的运行视频:
结论
施乐之星背后的故事是乔布斯和比尔盖茨之间关于图形界面操作系统的争论。这个历史故事你可以在很多地方读到,但和今天的采访无关。
用户评论
灵魂摆渡人
哇,没想到最早的UI设计师竟然和汉堡包图标有关!我一直以为这只是一个现代的产物呢。
有6位网友表示赞同!
|赤;焰﹏゛
这个标题太吸引人了!我一直很好奇,汉堡包图标背后的故事原来这么有趣。
有8位网友表示赞同!
你的眸中有星辰
哈哈,没想到UI设计的历史这么有趣,汉堡包图标居然是这么来的,太有创意了!
有12位网友表示赞同!
凉话刺骨
读完这个,我对UI设计的起源有了全新的认识。汉堡包图标确实是个经典。
有13位网友表示赞同!
见朕骑妓的时刻
这个博文让我想起了小时候玩的游戏机,那时候的菜单设计也很有趣。
有16位网友表示赞同!
一样剩余
竟然是汉堡包图标,这个比喻太形象了,设计师们真会玩。
有10位网友表示赞同!
该用户已上天
看完这个,我觉得UI设计其实并不简单,它背后的故事让人肃然起敬。
有13位网友表示赞同!
。婞褔vīp
设计师们真是太有才了,连一个图标都能设计得如此生动有趣。
有5位网友表示赞同!
念安я
这个博文让我对UI设计有了更深的理解,原来它和我们的生活这么紧密。
有12位网友表示赞同!
╭摇划花蜜的午后
汉堡包图标,这个设计太经典了,让人一看到就想起那个年代。
有13位网友表示赞同!
oО清风挽发oО
没想到UI设计的历史这么丰富多彩,真是大开眼界。
有9位网友表示赞同!
慑人的傲气
这个标题太吸引人了,让我忍不住一口气读完了整篇文章。
有7位网友表示赞同!
志平
原来UI设计的历史这么悠久,设计师们的创意无穷无尽。
有13位网友表示赞同!
青瓷清茶倾城歌
汉堡包图标,这个设计真是深入人心,让人一下子就记住了。
有6位网友表示赞同!
念旧情i
读完这个,我对设计师们充满了敬意,他们真的是在用设计改变世界。
有10位网友表示赞同!
昂贵的背影
这个博文让我对UI设计有了更深的兴趣,真想学习一下这方面的知识。
有9位网友表示赞同!
墨城烟柳
设计师们的创意真是太棒了,一个简单的图标都能让人产生共鸣。
有7位网友表示赞同!
■□丶一切都无所谓
汉堡包图标,这个设计让我想起了小时候的麦当劳,满满的回忆。
有5位网友表示赞同!