苹果第一代设计师有多厉害？

本文来自微信公众号：APPSO（ID：appsolution），原文标题：《Mac 笑脸、微软纸牌、像素字体……苹果第一代设计师有多厉害？》，作者：木斯，头图：Susan Kare

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

图片来自：Anthony Boyd

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

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

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

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

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

就像乔布斯所说的，图形界面，能够显示位图的屏幕，代表的是计算机产业的未来。

苏珊·卡雷（Susan Kare），苹果最早的设计师之一

但今天我们要聊的，并不是电脑本身，或是乔布斯往事，而是这些界面、图标和字体的幕后设计者：苏珊·卡雷（Susan Kare）。在苹果内部，她也被称为“图标之母”。

微笑的 Mac

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

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

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

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

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

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

1977 年上市的 Apple II 电脑

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

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

由于没有专门的绘图软件，卡雷只能先在网格纸上画图标

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

卡雷在网格纸上画好的图标，以及对应的电子版

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

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

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

卡雷为苹果设计的各种图标。图片来自：Susan Kare

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

现在 Mac 系统中某些图标，仍延续了当年的样式。图片来自：Susan Kare Exhibition

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

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

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

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

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

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

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

现在，我们仍然能在 macOS 系统中的“访达”图标上，看到双面人笑脸的存在。

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

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

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

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

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

漂亮的字体和奶牛狗

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

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

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

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

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

苏珊·卡雷为苹果设计过的字体，以及在不同字号下的样式

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

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

比如在 1984 到 1997 年间，麦金塔电脑系统所有的界面和对话框，都使用了 Chicago 作为默认字体，之后它也出现在了 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 字体中看中了一只小狗，它本身是一种杂锦字型，由各种图形符号组成。瓦格纳把它从原来的 26x24 像素，放大至 41x32 像素，可这么一改，也造成了之后的误解。

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

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

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

图片来自：512pixels

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

友好型设计

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

在 NeXT 担任创意总监的卡雷。图片来源：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”一样，简约、友好型的设计。

本文来自微信公众号：APPSO（ID：appsolution），作者：木斯