当前位置: 首页 > 科技观察

与世界上早期的UI设计师对话:我们创造的不仅仅是汉堡包图标

时间:2023-03-12 14:03:29 科技观察

编者按:汉堡包图标一直很火。问题是,谁创造了汉堡图标?这就是它有趣的地方:创建汉堡包图标的人不是某个无名之辈,相反,它的创造者是图形界面的创造者,最早的UI设计师是一群远不如比起那些科技巨头出名,却真正改变了世界。几年前,用户体验和产品设计师GeoffAlday就开始很好奇汉堡图标是怎么来的,随后他做了一些深入的“考古工作”,一些非常有趣的东西逐渐在他身上浮现。在眼前。他在1990年一次设计会议的Vimeo视频中追溯了汉堡包图标的最早踪迹,在该视频中,一位分享者正在演示如何在XeroxStar计算机的窗口标题栏中找到菜单按钮。而这个按钮是由三个长方形叠在一起组成的。△最早的汉堡包图标藏在施乐之星中。XeroxStar搭载了最早的图形界面,是当今无所不在的UI界面的鼻祖。于是Geoff找到了当年的负责人之一NormCox。“你确实做了功课,”NormCox在一封电子邮件中回复Geoff。“我是适合你的人。”汉堡图标无处不在。去年12月,Reddit和麦当劳联手重新设计了这两个网站上的汉堡包图标,使其看起来像一个汉堡包。与此同时,汉堡偶像的缔造者诺姆·考克斯迎来了自己的67岁高龄。生日,收到一份特别的生日礼物:巨无霸汉堡。大家对这个小图标的名字由来的兴趣并没有减少。最重要的是,没想到它诞生几十年后,竟然如此火爆。现在大家做手机网站或者APP开发,基本都会在产品中使用汉堡包图标。每个称职的用户体验设计师都会想知道为什么像Chrome和亚马逊这样大的产品没有汉堡包图标。一些评论家认为汉堡包图标降低了产品的吸引力和效率,但更多人将汉堡包图标的无处不在视为事情变得更好的重要标志。著名的软件开发人员和用户体验总监MichaelJ.Fordham在Medium上写道:“(汉堡包图标)正在变得纯粹的力量,纯粹的功能,让设计师有理由在这种设计上偷懒。”汉堡图标绝对是个不错的选择,因为全世界的人都知道这三横线是什么意思。然而,很多人还不知道这三道横线是如何进入数字世界的。一切都有一个开始。如果汉堡icon也是在产房出生的,那我应该和当时负责接生的医生好好聊一聊。所以我找到了当时在场的三个人,NormCox、DavidCanfieldSmith和RalphKimball,我和他们聊了聊汉堡图标是如何诞生的,以及XeroxStar的诞生(已经结束了40年),以及他们认知中最好的设计理念是什么。△一台完整的施乐之星电脑(XeroxStar),第一台具有图形界面的电脑NormCox,第一位视觉设计师,属于施乐系统开发部门,DavidCanfieldSmith和RalphKimball是该部门的两位首席设计师。NormCox:当GeoffAlday找到我时,他对我说的第一句话是“当整个设计行业都在关注这个小菜单图标的工作原理时,我意识到你创造了它。”当我盯着它看时,我满脑子想的是,“天哪,我可能是在周二的8:30创造了这个小东西,但从来没有想过设计完它会是什么样子。”DaveCanfieldSmith:汉堡包的图标实在是微不足道。我们最引以为豪的事情之一是XeroxStar,这台计算机需要的命令比同时代的任何其他计算机都要少得多,但它几乎可以做任何事情,远比我们在时间。事情太多了。汉堡菜单是我们当时用来承载冗余命令和操作的载体和方法,当时我们找不到更好的方法。天哪,我可能在星期二的8:30创造了这个小东西,但从来没有想过我设计它之后会是什么样子。──NormCoxNormCox:与施乐之星本身的革命性相比,汉堡包图标的流行和流行有点荒谬。缺少符号。RalphKimball:我从1972年到1982年在Xerox工作。首先在Xerox的PaloAlto研究中心(著名的PARC,图形界面和XeroxStar的诞生地)担任研究科学家,专注于用户界面的设计,然后参与研发的施乐星工。我们在那里的工作是整合并产生一致的、有创意的GUI解决方案和解决方案,主要是1976年之前在帕洛阿尔托研究中心,早期阶段是在SRI和犹他大学(AlanKay的Dynabook项目)开发的。DaveCanfieldSmith:1975年,SRI在斯坦福聘用了我,那是我第一次见到CharlesIrby。Charles后来成为UI团队的首席设计师,与DougEnglebart一起工作。在SRI不到一年后,Charles离开去PARC工作,他告诉我这份工作非常棒,希望我能加入。因此,我随后在AlanKay的指导下在PARC实习。在那里,我使用了我的第一台真正的个人电脑Alto,并用Kay设计的编程语言SmallTalk写了我的论文。与SRI相比,PARC规模不大,但它的门槛其实更高。除非你有博士学位,否则你根本不会被邀请和录用。NormCox:我第一次去PARC,穿着全新的三件套涤纶套装,接待员叫CharlesIrby来找我,他已经在领导XeroxStargroup的用户界面和功能设计。他走下楼梯迎接我,穿着套穿式短裤、凉鞋和手工染色的T恤。我这时候才注意到,他脑后的马尾已经及腰,胡须蓬乱,整个人比较消瘦。我很快意识到我不应该穿着西装来PARC。办公园区还有一个哥们,肩上站着一只真鹦鹉,在园区里转来转去。在办公室里,每个人都有懒人沙发,有人有霓虹灯和熏香。想想70年代的加利福尼亚。办公园区还有一个哥们,肩上站着一只真鹦鹉,在园区里转来转去。──DaveCanfieldSmith,NormCox和PARC的企业文化:当时我们最先在PARC开发Alto电脑(其实主要是用来研发的,一共才几百台制作),突然我们团队有了这个位图屏幕,分辨率为700×1000像素,每个像素都可以单独关闭和打开。这个展示瞬间点燃了我们的想象力和创造力。NormCox:在XeroxStar项目之前,我正在管理另一个设计团队,为Xerox当时生产的电子打字机开发字体。然后,他带着鼠标和黑白像素显示器出现在我们的办公室。我一直对各种新鲜事物着迷,绘画、水彩、木工,任何创意设计和新媒体。所以我开始不停地玩它。DaveCanfieldSmith:当我在1976年加入Xerox的系统设计和开发团队时,我的办公桌在办公室的一个偏远角落。当时公司计划将施乐之星推向市场,目标使用场景是办公室。那时候的传统办公室,大部分人都不懂电脑,管理不需要打字,但是需要秘书。因此,我的想法是逐步将办公场景的很多元素融入到整个计算机视觉系统中,包括文件柜、垃圾桶、文件、文件夹,这样会更容易学习和理解,而不是仅仅提供一个简单的使用说明书就可以了。做的伎俩。我们使用PARC的所有技术来创造这些东西。RalphKimball:在XeroxStar中,它不再依赖键盘发出操作指令,而是使用图形界面进行直观操作。这是它最具革命性的一点。DaveCanfieldSmith:我自己隔间的墙壁上贴满了图标属性及其功能的打印输出。这包括文档、文件柜、打印机、时钟、邮箱、图书馆(这是一个类似谷歌的搜索界面,我还不够聪明,无法发明谷歌)……激光打印机和使用互联网的电子邮件,两者都是这些都是PARC的发明,我会尽可能的用PARC的技术做一个综合的办公系统。RalphKimball:NormCox是XeroxStar开发团队真正的瑰宝,因为他能够如此有效地利用媒体的力量,将其转化为有效的设计。在遇到Norm之前,CharlesIrby和我在旧金山见过很多著名的平面设计师并与之交谈过,但他们对设计图形界面一无所知。DaveCanfieldSmith:我曾经画过第一版设计稿(图3),在我看来真的很垃圾。感谢上帝,我们有NormCox,我们可以拥有一个今天看起来仍然非常舒服的图形界面。Charles对我的设计非常宽容,他从来没有说过“Dave的设计很糟糕”之类的话,而是以一种更隐秘的方式推动事情向前发展。有一天他来到我的办公室,对我说“我认为举办一场图标设计比赛会很好”。NormCox:Bowman负责程序开发。他写了一个非常粗糙的图形程序,使我们能够在显示器上创建图形。WallaceJudd是人因工程方面的专家(更接近今天的交互设计领域),他在这方面写了很多论文,但他在视觉设计方面的造诣并不深。于是,最终我受邀参加了图标设计“征稿大赛”,我们每人设计了一个,然后大家争论哪个更好。△DaveCanfieldSmith,最早的UI图标设计稿:当我的设计稿被退回的时候,再看的时候,感觉有人在指着我的鼻子指责我。它清晰而令人印象深刻。NormCox:你要知道,这件事其实是对我们设计思维的启迪。在那一刻,我们学到了重要的一课:我们必须制造出不仅要好看,还要实用的东西。通过可用性测试,我们开始关注更多的事情。在那之后,鲍曼、戴夫和华莱士对我说,“好吧,诺姆,你来做吧。”所以,我成为了官方的主要设计,但我们都知道,整件事一直都是团队努力的结果。.DaveCanfieldSmith:其实,我还是不理解汉堡包图标的魅力,因为在我看来,它连图标都算不上,它只是一个符号。图标应该兼具视觉表现力和功能机器语义,而这个菜单图标只有前者。它并不暗示任何其他与菜单相关的信息,它只是静静地出现在屏幕上。你戳它,弹出一个菜单,光标移开,菜单消失,就是这样。一个图标应该包含一个隐喻,它应该映射到世界上一个客观存在的、可操作的对象。这件事其实是对我们设计思维的启示。──NormCoxNormCox:在XeroxStar上,每英寸屏幕有72个像素,你需要能够在这个范围内传达你的想法。我们从Xerox现有的打印机和复印机符号系统以及道路标志中获得了很多灵感……DaveCanfieldSmith:对于大多数计算机需要执行的指令和操作,在此之前,这是通过手动输入命令行来完成的,但我们想到了一种更好的呈现方式。我们的大脑很聪明,但基本上厌倦了花费大量时间来挑选最佳实施方案。因此,我们将大部分功能以图标的形式直接呈现在屏幕上,而额外的操作则通过下拉菜单隐藏起来,只需要多点击一次即可触发,这就是汉堡包图标的来源.NormCox:在任何车库里,总会有一桶螺母和螺栓、钉子和破布,以及难以分类的东西。这是汉堡菜单图标的隐喻。就像没有完美的系统,没有完美的界面,就像Dave刚才说的,你总会遇到各种不合适的事情。DaveCanfieldSmith:当时典型的操作命令是“Paginate”。由于当时电脑的速度和容量不够,在文档界面,电脑无法实时显示文字和图片的排版,需要点击“分页”才能预览整个文档。这是一个明显受到时代和能力限制的命令,你应该能感觉到它有多么愚蠢。我们不喜欢它,但它需要在那里,所以我们将它隐藏在一个偏僻的菜单中,这样用户就不必一直在主屏幕上看到它。我们想把真正有用的、重要的命令放在用户面前。NormCox:我想了很多关于这个菜单符号使用什么符号,包括加号、省略号和下拉箭头。但是仔细想想,我们要表达的意思是“杂”,或者说“其他”、“额外”。以上三个符号本身与此意义相去甚远。我想找到一些直观的、可解释的和令人难忘的东西来象征这个菜单。DaveCanfieldSmith:三个横线呈现的是一个抽象的图像,它对应的图像就是你点击它之后看到的图像:菜单。NormCox:还有一个你现在看到的广泛使用的符号,三个垂直排列的点,更像是汉堡包图标的简化版。DaveCanfieldSmith:从设计的角度来看,它非常国际化,因为它是非语义化的。你不希望你的产品在其他国家和地区需要额外的语言翻译这个图标,因为翻译需要额外的空间,因为别人看不懂。NormCox:我们开始逐渐意识到用户对信息的认可程度。用户在看屏幕的时候,会快速扫描寻找特定的形状,当形状匹配时,会比较仔细地看细节。就像当你注意到一个菱形路标时,你首先会看到路标本身,然后你会注意到其中的详细文字。因此,我们需要确保您在扫描界面时不必扫描太多内容。屏幕上的每一个像素点都很重要,无关的信息不要放在上面,一切都应该有明确的目的,不需要额外的装饰。这些限制意味着我们必须设计一些优雅而简单的东西:一种永恒的设计风格。DaveCanfieldSmith:我们正在竭尽所能避免混淆。我们希望它具有独特的视觉吸引力,这样人们就会花更多的时间在界面上。NormCox:如果你关注过图标设计的全过程,尤其是苹果和微软的用户界面,你会发现图标从一开始的简单线条,逐渐演变为像素密度的**增加。*逼真的照片图标,带有阴影、高光和各种东西,回到极简的线条和形状,这背后的原因其实和我们之前说的一样。DaveCanfieldSmith:在今天的Mac系统中,到处都是各种菜单。但是在最初的XeroxStar中,我们只有一个下拉菜单,而且大多数菜单都是单一的命令。并不是我们当时设计的功能太少。我们那时候的媒体文档软件包括文本编辑、字体选择、排版工具、图片甚至嵌入音频,内容非常非常丰富(想一想,那是70年代中期)。然而,我们基本上不需要那么多菜单。你不觉得这是一件很了不起的事情吗?为什么?因为我们正在尽最大努力“概括”和集成命令,而不是消除功能。使用按钮命令完成任务,这是我发明的!苹果用户可以使用剪切、复制、粘贴、撤消等功能完成任务,而在此之前,在施乐之星上,已经有了移动、复制、删除、撤消、显示属性等一系列基础核心操作,和复制属性。你会发现图标从一开始的简单线条,随着像素密度的增加,逐渐演变为最逼真的照片般的图标,包括阴影、高光等等各种东西,然后再回到极其简单的线条和shapes,这背后的原因其实和我们之前说的一样。──NormCoxRalphKimball:我们一直在努力构建一个非常简单的用户界面,尽量不使用让用户感到困惑的所谓高级命令,以便有经验的用户可以提高工作效率。在XeroxStar的开发过程中,我们需要针对各种问题做出非常具体的决定。DaveCanfieldSmith:我们希望人们使用XeroxStar来做有用的事情,而不是让它变得复杂。让复杂的事情变得简单并不容易,我们竭尽全力让事情变得更简单。NormCox:我认为我们当时没有意识到那是一个多么特别的时刻。我们认为自己是一群嬉皮士,正在做我们感兴趣的事情,但现在看来我们正在利用技术的力量在全世界的耳边低语并永远改变它。结语施乐之星背后的故事是乔布斯和比尔盖茨关于图形界面操作系统的争论。很多地方都可以读到这段历史的故事,但这与今天的采访无关。我们应该向最早的图形界面的创造者致敬,向最早的UI设计师致敬——如果一个行业需要有一个清清楚楚的祖师爷,那么采访中的三位应该是最早的UI设计师老师,就是那个人开创了UI设计师这个职业(应该也是设计稿的“牺牲品”)。