欢迎光临GGAMen游戏资讯




Mac 笑脸、字体、微软接龙,Apple 初代设计师苏珊·凯尔与她创造的位图风格

2024-11-26 258


一台会跟你“Say Hello”的电脑,在 2021 年已不算新鲜,但在个人电脑还处于被程式码命令行支配的 1984 年,能够在屏幕上看到一张笑脸,以及直观的图形文字,那绝对是个异类产品。

苹果的第一代麦金塔电脑,便是当时最典型的代表。

▲ 1984 年麦金塔发布会的展示片段。

回看当年的发布会影片,当乔布斯从上衣口袋抽出磁片,插到电脑内后,大屏幕紧接着开始展示系统界面──有图画软件、电子表格、象棋游戏、不同的字体,甚至还有一张乔布斯自己的位图。

▲ 苹果为麦金塔电脑制作的广告。

所有的界面都是直观可见的,配合鼠标,轻轻点按图示,你也能迅速获得想要的功能,无需再输入枯燥的程式码命令。

就像乔布斯所说的,图形界面,能够显示位图的屏幕,代表的是电脑产业的未来。

▲苏珊·凯尔(Susan Kare),苹果最早的设计师之一。

但我们要聊的,并不是电脑本身,或是乔布斯往事,而是这些界面、图示和字体的幕后设计者:苏珊·凯尔(Susan Kare)。在苹果内部,她也被称为“图示之母”。

微笑的 Mac

很多人以为,麦金塔电脑的发布,开启了电脑图形界面的时代,可事实上在 1983 年,从施乐“偷师”归来的乔布斯,就已经将部分成果应用在了 Apple Lisa 上。

▲ Lisa 是苹果第一台采用了图形界面的个人电脑。

只不过,当时 Lisa 的系统界面仍十分简陋,没有给大众留下深刻印象,加上有不少设计都藉鉴自施乐,甚至连字体都不是自家的,显然也不符合乔布斯想要追求的结果。

▲ 第一代麦金塔开发小组核心成员,后排左数第三位便是安迪·赫茨菲尔德。

为了打破现状,麦金塔开发小组的核心成员安迪·赫茨菲尔德(Andy Hertzfeld)开始寻求外援,此时他想起了自己的高中同学,也就是苏珊·凯尔。

此时凯尔刚从纽约大学毕业没多久,因为她主修的是美术,拥有一定的平面设计经验,所以赫茨菲尔德希望她入伙,为麦金塔电脑做一些系统视觉设计。

▲ 1977 年上市的 Apple II 电脑。

做为回报,赫茨菲尔德会赠送她一台价值两千美元的 Apple II 电脑,凯尔随即答应下来,表示愿意以兼职身份参与到苹果专案中。

在那个时代,电脑图形设计尚未成体系,就连苹果,都还没开发出完整一套设计工具。迫于无奈,赫茨菲尔德只能先让凯尔花几美刀买一本网格笔记本,把图示手绘出来,再让工程师转化为位图。

▲ 由于没有专门的绘图软件,凯尔只能先在网格纸上画图示。

第一代麦金塔电脑系统中的“剪切”、“黏贴”功能,就是在这些网格纸上诞生的,它们分别对应了剪刀手和手指图案,而毛刷,则用在了苹果的绘图软件 MacPaint 中。

▲ 凯尔在网格纸上画好的图示,以及对应的电子版。

凯尔还手绘了一个炸弹的图案,要是用户在麦金塔电脑上看到它,就证明碰到“当机”了。

▲ 这张经典的麦金塔电脑宣传图,屏幕中的“hello”就是用 MacPaint 画出来的。

到了 1983 年,凯尔从兼职身份转为苹果正式员工,主要工作就是参与麦金塔人机界面的设计。此时苹果的绘图软件 MacPaint 也已经制作完成,让凯尔能够直接在电脑上创作位图图示。

▲ 凯尔为苹果设计的各种图示。(Source:Susan Kare)

许多经典图示也是在这个阶段出现的。比如用来放置删除文件的垃圾筒,折了一角的纸张,用于提示“Loading”的手表符号,以及苹果键盘上的“Command”功能键。

▲ 现在 Mac 系统中某些图示,仍延续了当年的样式。(Source:Susan Kare Exhibition)

虽然它们都只是些很简单的位图,但胜在直观,而且都带有功能隐喻,让人一看就懂,这也让凯尔获得了乔布斯的认可。

至今,仍然有相当一部分图示,可以在 Mac 系统中看到。

但如果要说最为大众所知的设计,应该就是这个自带笑脸的“Happy Mac”了。

▲ 麦金塔电脑开机时会出现一个微笑的 Mac。

当你启动麦金塔电脑后,就能看到一个对你微笑的电脑。

▲ 应用在“访达”上的双面人笑脸图示,之后还迭代了数版,下图则是毕加索的双面人草稿画。

我们熟知的笑脸形像还有另一种样式,那就是双面人。有人说它的设计灵感来源于 DC 漫画中的反派双面人,但更多人认为,它其实是毕加索画作的还原。

现在,我们仍然能在 macOS 系统中的“Finder”图示上,看到双面人笑脸的存在。

随着时间的发展,Mac 笑脸以及其衍生表情,也沿用到了其他苹果硬件上,逐渐演变成苹果文化的具象呈现。

▲“Happy Mac”的反面便是“Sad Mac”,之后 iPod 也应用该设计。

比如早期的 iPod 里,假如播放器当机了,就会出现“Sad iPod”的图案,类似于麦金塔电脑硬件故障后出现的“Sad Mac”。

▲ Face ID 的笑脸也源自于当年的设计。

今天我们接触最多的,应该就是 Face ID 设定项里的辨识图,它也采用了笑脸的轮廓。这也是迄今为止,最高分辨率的“Happy Mac”笑脸图了。

▲ 苏珊·凯尔(Susan Kare)绘制的乔布斯的位图大头像,那一抹微笑可说是惟妙惟肖。

漂亮的字体和乳牛狗

乔布斯还在里德学院时,曾旁听过不少书法课,这也令他对各种衬线、无衬线字体钟爱有加。

为了发挥出麦金塔电脑的图形化界面,以及配合打印机印出精美的字型,凯尔应乔布斯要求,为第一代麦金塔电脑设计了好几种字体,让用户不再只有单一的选择。

另外,凯尔还负责了系统的界面排版。得益于技术进步,麦金塔电脑上的字体字距不再是固定不变,而是能根据比例进行调整,这使得人们可以在屏幕上看到更清晰、自然的文字内容。

在字体开发期间,也发生过一段和命名有关的趣事。

最开始,凯尔其实是选用费城火车线上的车站,来为字体命名的,但之后乔布斯改成了世界知名的大城市,因为他觉得这样“人们才能记住”。

▲ 苏珊·凯尔为苹果设计过的字体,以及在不同字号下的样式。

也因如此,我们现在看到的苹果字体,名称都是这个风格的:芝加哥(Chicago)、纽约(New York)、日内瓦(Geneva)、旧金山(San Francisco)和摩纳哥(Monaco),而且每个字体都有不同的应用场景。

▲ 早期麦金塔电脑系统的控制面板,还有之后的 iPod,都应用了 Chicage 字体。

比如在 1984 到 1997 年间,麦金塔电脑系统所有的界面和对话框,都使用了 Chicago 做为预设f字体,之后它也出现在了 iPod 播放器上。

▲ Geneva 和 Chicago 字体对比,前者会更细一些,主要应用在文件夹名称等较小的界面上。

但在一些小号的界面上,比如说文件夹名称,选用的则是 Geneva 字体,这是凯尔基于经典无衬线字体 Helvetica 修改而成的。

▲ 上图为凯尔设计的旧版,下图为 2019 年新版。

New York,是麦金塔早期系统的点阵衬线字体。2019 年,苹果还发布了一个同名的新版,供开发者在苹果平台上免费使用,此举也被视为向凯尔设计的字体致敬。

▲ Monaco 字体受到了很多工程师的喜爱。

Monaco,则是一种无衬线等宽字体,开发者们应该比较熟悉。因为其清晰、高辨识度的字型,它曾是苹果开发工具 Xcode 的预设字体,之后才被 Menlo 字体替换。

▲ 凯尔设计的旧版 San Francisco 字体。

最后是 San Francisco,这是凯尔模拟剪贴风格设计的字体,就像是从报纸上把标题剪下来然后拼凑到一起,但它也在苹果早期的内部宣传单和海报中出现过。

▲ 为 Apple Watch 而生的新版 San Francisco 字体。

2014 年,苹果还发布了一个新版 San Francisco 字体,主要是针对Apple Watch 的小尺寸屏幕设计的,风格完全不同,但易读性很高。

可以说,各种漂亮字体的出现,为麦金塔电脑的图形界面增添了别样的风情。你既可以选择代表现代主义的 Chicago,也可以回归到古典雅致的 New York 之上,不同人都可以有不同的选择。

▲ 当年的麦金塔宣传资料中,也重点介绍了直观的文本编辑以及打印功能。

更重要的是,这些字体还可以由苹果的第一台激光打印机 LaserWriter 打印出来,这意味着用户可以直接在麦金塔电脑上完成文本输入、编辑和打印的全套工作,快速制作出实体化的印刷品。

这一工作流的实现,也推动了之后桌面出版产业的发展。

▲ 杂锦字体 Cairo,设计之初只是为了装饰用。

另外,在凯尔设计过的字体中,还诞生过一只“吉祥物”。

事情起因自苹果工程师安妮特·华格纳(Annette Wagner),当时她正在设计麦金塔系统的打印程式,需要找一个预览页面的参照物,以帮助用户正确辨识纸张的方向。

▲ 小狗做为打印预览时的参照物,以辨认纸张朝向。

她从凯尔的 Cairo 字体中看中了一只小狗,它本身是一种杂锦字型,由各种图形符号组成。瓦格纳把它从原来的 26×24 画素,放大至 41×32 画素,可这么一改,也造成了之后的误解。

有人就说,他在打印预览页面看到的并不是小狗,而是一头乳牛,之后更是有人帮这只“半狗半牛”的生物起了个名字,叫“Clarus”。

▲ 苹果为“乳牛狗”制作的徽章,啤酒标签,以及隐藏在代码中的彩蛋,让它成为了一个非官方的吉祥物。

“Clarus, the Dogcow”的说法应运而生,并随即成为了苹果技术团队的黑话之一。大家把它做成徽章,印在衣服上,或是当作聚会啤酒的标签名。

另外,在苹果的旧总部还有过一座图示花园,其中就竖立着一座乳牛狗的雕塑,可见当时苹果员工对这只奇特生物的喜爱。

友好型设计

1986 年,凯尔跟随乔布斯离开苹果,以创意总监的身份成为了 NeXT 公司的第 10 号员工。当时她向乔布斯引荐了另一位知名设计师保罗·兰德(Paul Rand),为 NeXT 公司操刀设计了 LOGO。

▲ 在 NeXT 担任创意总监的凯尔。(Source:Stanford University)

再之后,乔布斯重返苹果,但凯尔并没有返回老东家。她发现,自己还是怀念画画素图、做设计的时光,随后便决定成为一名独立设计师,还创办了自己的设计公司 Susan Kare Design。

▲ 凯尔为 Path 和 Facebook 设计的小贴图。

凭借著多年在苹果积累下的设计经验,单飞后的凯尔收到了众多设计委托,其中就包括了微软、IBM 以及 FaceBook 等大公司的订单。

其中最知名的,应该要数凯尔为 Windows 系统设计的纸牌卡面了。

▲ 最早的 Windows 纸牌游戏,卡面就是凯尔设计的。

1990年,微软开始在 Windows 3.0系统中内置纸牌游戏,而最早一批的纸牌卡面,便是由凯尔在一台 IBM PC 上绘制的。

那个时候,凯尔直接使用了 Windows 自带的画图软件,以及传统的 16 色 VGA 调色盘,以画素化的形式在屏幕上还原出现实世界的纸牌。

凯尔说,直到今天,这些卡面的原始文件还保存在一张 5.25 吋的磁片中。

▲ 实体化的画素风格纸牌。

在微软纸牌诞生 25 周年的节点,凯尔还和设计品牌 Areaware 合作,补全了 Windows 原本不存在的两张王牌,凑成完整的扑克,并推出实体版化的画素卡牌。

很多设计师认为,苏珊·凯尔的设计是简单、友好且极具亲和力的。她为苹果电脑树立了新的形象,并赋予它人格化的一面,让电脑从原本只有游标和枯燥代码的时代,转变成为一个连 3 岁小孩都愿意使用的产物。

就像这个 Happy Mac 的图案一样。根据凯尔的回忆,她当时希望用一个微笑,为麦金塔注入积极、友好的形象,这也符合乔布斯“制作外形友好的产品”的目标。

因为只有这样,才能让枯燥的电脑真正吸引到大众用户。

另一方面,凯尔简洁的设计风格,也符合乔布斯的美学要求。

她曾说过,一个出色的图示,其实和交通标志类似,只展示必要资讯即可,不需要加入多余的细节。

▲ 据了解,这个标识发源于瑞典 Borgholm 城堡,它的俯视图就是一个“⌘”的设计。

Mac 上的“Command”功能键便是如此。凯尔从标志辞典上找到了一个回环符号“⌘”,印在了键位字母上方,而在一些北欧国家,比如瑞典,这个符号也指代了景点、名胜古迹。

2000 年,凯尔接受访问时还聊到了图示的“隐喻设计”。她认为一个优秀的图示是可以被立即辨识的——比如“复制”、“撤销”等抽象化的功能,即便用户从未见过它,也可以从形象化的图示来理解,这也使得她为麦金塔设计了一批具有高辨识度的图示。

如今,苏珊·凯尔在 Pinterest 担任创意总监,同时也开设了个人网站,上面保留了她过往的大多数设计作品,而手稿则留在了纽约现代艺术博物馆内。

去年 5 月,她还帮一家拼图公司 Magic Puzzle 设计了 LOGO,同样也包含了笑脸的元素。

或许,凯尔的图示设计就像是一个个小惊喜那样,看似简单,可一旦看过后,它就深深的烙印在了你的脑海里。

希望在未来的日子里,我们还能在苹果产品上看到更多和“Happy Mac”一样,简约、友好型的设计。

(本文由 爱范儿 授权转载;首图来源:Flickr/Nobuyuki Hayashi CC BY 2.0)

2021-01-18 02:01:00

标签:   游戏头条 资讯头条 ggamen科技资讯 ggamen科技 ggamen科技资讯头条 科技资讯头条 ggamen游戏财经 新闻网 科技新闻网 科技新闻 ggamen ggamen游戏新闻网 科技新闻 ggamen游戏财经 科技资讯头条 ggamen科技资讯头条 ggamen科技 ggamen科技资讯 资讯头条 游戏头条 ggamen游戏新闻网 科技新闻 科技新闻网 新闻网 ggamen游戏财经 科技资讯头条 ggamen科技资讯头条 ggamen科技 ggamen科技资讯 游戏头条
0