# Mac 笑脸、像素字体、微软纸牌…苹果第一代设计师有多厉害？ - 作者：木斯 - 发布时间：2021-01-12 21:02 - 分类：公司 - 原文：https://www.ifanr.com/1393371 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/susankare.jpg) 一台会跟你「Say Hello」的电脑，在 2021 年已不算新鲜，但在个人电脑还处于被代码命令行支配的 1984 年，能够在屏幕上看到一张笑脸，以及直观的图形文字，那绝对是个异类产品。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/04edac102980781.5f4354dbc786c.jpg) ▲ 图片来自：[Anthony Boyd](https://www.behance.net/anthonyboyd?tracking_source=search_projects_recommended%7CMacintosh) 苹果的第一代麦金塔电脑，便是当时最典型的代表。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/Steve-Jobs.gif) ▲ 1984 年麦金塔发布会的展示片段 回看当年的发布会视频，当乔布斯从上衣口袋抽出软盘，插到电脑内后，大屏幕紧接着开始展示系统界面——有图画软件，电子表格，象棋游戏，不同的字体，甚至还有一张乔布斯自己的像素图。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/macintosh.gif) ▲ 苹果为麦金塔电脑制作的广告 所有的界面都是直观可见的，配合鼠标，轻轻点按图标，你也能迅速获得想要的功能，无需再输入枯燥的代码命令。 就像乔布斯所说的，图形界面，能够显示位图的屏幕，代表的是计算机产业的未来。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/susan-kare-3-1290x715-1-1290x715.jpg) ▲苏珊·卡雷（Susan Kare），苹果最早的设计师之一 但今天我们要聊的，并不是电脑本身，或是乔布斯往事，而是这些界面、图标和字体的幕后设计者：苏珊·卡雷（Susan Kare）。在苹果内部，她也被称为「图标之母」。 ### 微笑的 Mac 很多人以为，麦金塔电脑的发布，开启了计算机图形界面的时代，可事实上在 1983 年，从施乐「偷师」归来的乔布斯，就已经将部分成果应用在了 Apple Lisa 上。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/Apple-Lisa-1983-03.jpg) ▲ Lisa 是苹果第一台采用了图形界面的个人电脑 只不过，当时 Lisa 的系统界面仍十分简陋，没有给大众留下深刻印象，加上有不少设计都借鉴自施乐，甚至连字体都不是自家的，显然也不符合乔布斯想要追求的结果。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/f85d511077be6576d04bd9da75db1465.jpg) ▲ 第一代麦金塔开发小组核心成员，后排左数第三位便是安迪·赫茨菲尔德 为了打破现状，麦金塔开发小组的核心成员安迪·赫茨菲尔德（Andy Hertzfeld）开始寻求外援，此时他想起了自己的高中同学，也就是苏珊·卡雷。 此时卡雷刚从纽约大学毕业没多久，因为她主修的是美术，拥有一定的平面设计经验，所以赫茨菲尔德希望她入伙，为麦金塔电脑做一些系统视觉设计。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/35247-64974-000-lead-Apple-II-xl.jpg) ▲ 1977 年上市的 Apple II 电脑 作为回报，赫茨菲尔德会赠送她一台价值两千美元的 Apple II 电脑，卡雷随即答应下来，表示愿意以兼职身份参与到苹果项目中。 在那个时代，计算机图形设计尚未成体系，就连苹果，都还没开发出完整一套设计工具。迫于无奈，赫茨菲尔德只能先让卡雷花几美刀买一本网格笔记本，把图标手绘出来，再让工程师转化为点阵图标。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/ER2fxDrWsAAsJX6.jpeg) ▲ 由于没有专门的绘图软件，卡雷只能先在网格纸上画图标 第一代麦金塔电脑系统中的「剪切」、「粘贴」功能，就是在这些网格纸上诞生的，它们分别对应了剪刀手和手指图案，而毛刷，则用在了苹果的绘图软件 MacPaint 中。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/boom.jpg) ▲ 卡雷在网格纸上画好的图标，以及对应的电子版 卡雷还手绘了一个炸弹的图案，要是用户在麦金塔电脑上看到它，就证明碰到「死机」了。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/Macintosh-gran-exit-companyia-anys_542355832_14495362_1500x1000.png) ▲ 这张经典的麦金塔电脑宣传图，屏幕中的「hello」就是用 MacPaint 画出来的 到了 1983 年，卡雷从兼职身份转为苹果正式员工，主要工作就是参与麦金塔人机界面的设计。此时苹果的绘图软件 MacPaint 也已经制作完成，让卡雷能够直接在电脑上创作位图图标。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/83f58d81132387.5cf61d6a01cd4.jpg) ▲ 卡雷为苹果设计的各种图标。图片来自：[Susan Kare](https://www.behance.net/susankare) 许多经典图标也是在这个阶段出现的。比如用来放置删除文件的废纸篓，折了一角的纸张，用于提示「Loading」的手表符号，以及苹果键盘上的「Command」功能键。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/sure.jpg) ▲ 现在 Mac 系统中某些图标，仍延续了当年的样式。图片来自：[Susan Kare Exhibition](https://www.youtube.com/watch?v=mffJT-Ob2DM) 虽然它们都只是些很简单的像素图，但胜在直观，而且都带有功能隐喻，让人一看就懂，这也让卡雷获得了乔布斯的认可。 至今，仍然有相当一部分图标，可以在 Mac 系统中看到。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/mac-face-copy.jpg) 但如果要说最为大众所知的设计，应该就是这个自带笑脸的「Happy Mac」了。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/mac.gif) ▲ 麦金塔电脑开机时会出现一个微笑的 Mac 当你启动麦金塔电脑后，就能看到一个冲你微笑的电脑。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/dims.jpg) ▲ 应用在「访达」上的双面人笑脸图标，之后还迭代了数版，下图则是毕加索的双面人草稿画 我们熟知的笑脸形象还有另一种样式，那就是双面人。有人说它的设计灵感来源于 DC 漫画中的反派双面人，但更多人认为，它其实是毕加索画作的还原。 现在，我们仍然能在 macOS 系统中的「访达」图标上，看到双面人笑脸的存在。 随着时间的发展，Mac 笑脸以及其衍生表情，也沿用到了其它苹果硬件上，逐渐演变成苹果文化的具象呈现。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/fd.jpg) ▲ 「Happy Mac」的反面便是「Sad Mac」，之后 iPod 也应用该设计 比如早期的 iPod 里，假如播放器死机了，就会出现「Sad iPod」的图案，类似于麦金塔电脑硬件故障后出现的「Sad Mac」。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/kpg29-30.jpg) ▲ Face ID 的笑脸也源自于当年的设计 今天我们接触最多的，应该就是 Face ID 设置项里的识别图，它也采用了笑脸的轮廓。这也是迄今为止，最高清的「Happy Mac」笑脸图了。 ### 漂亮的字体和奶牛狗 乔布斯还在里德学院时，曾旁听过不少书法课，这也令他对各种衬线、无衬线字体钟爱有加。 为了发挥出麦金塔电脑的图形化界面，以及配合打印机印出精美的字型，卡雷应乔布斯要求，为第一代麦金塔电脑设计了好几种字体，让用户不再只有单一的选择。 另外，卡雷还负责了系统的界面排版。得益于技术进步，麦金塔电脑上的字体字距不再是固定不变，而是能根据比例进行调整，这使得人们可以在屏幕上看到更清晰、自然的文字内容。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/FG_03_29948.jpeg) 在字体开发期间，也发生过一段和命名有关的趣事。 最开始，卡雷其实是选用费城火车线上的车站，来为字体命名的，但之后乔布斯改成了世界知名的大城市，因为他觉得这样「人们才能记住」。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/19.jpg) ▲ 苏珊·卡雷为苹果设计过的字体，以及在不同字号下的样式 也因如此，我们现在看到的苹果字体，名称都是这个风格的：芝加哥（Chicago）、纽约（New York）、日内瓦（Geneva）、旧金山（San Francisco）和摩纳哥（Monaco），而且每个字体都有不同的应用场景。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/chicago.jpg) ▲ 早期麦金塔电脑系统的控制面板，还有之后的 iPod，都应用了 Chicage 字体 比如在 1984 到 1997 年间，麦金塔电脑系统所有的界面和对话框，都使用了 Chicago 作为默认字体，之后它也出现在了 iPod 播放器上。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/geneva2.jpg) ▲ Geneva 和 Chicago 字体对比，前者会更细一些，主要应用在文件夹名称等较小的界面上 但在一些小号的界面上，比如说文件夹名称，选用的则是 Geneva 字体，这是卡雷基于经典无衬线字体 Helvetica 修改而成的。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/new.jpg) ▲ 上图为卡雷设计的旧版，下图为 2019 年新版 New York，是麦金塔早期系统的点阵衬线字体。2019 年，苹果还发布了一个同名的新版，供开发者在苹果平台上免费使用，此举也被视为向卡雷设计的字体致敬。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/1_kwvJJhdoDqTTCh9PFqfMyw-1.png) ▲ Monaco 字体受到了很多程序员的喜爱 Monaco，则是一种无衬线等宽字体，开发者们应该比较熟悉。因为其清晰、高辨识度的字型，它曾是苹果开发工具 Xcode 的默认字体，之后才被 Menlo 字体替换。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/font1.jpg) ▲ 卡雷设计的旧版 San Francisco 字体 最后是 San Francisco，这是卡雷模拟剪贴风格设计的字体，就像是从报纸上把标题剪下来然后拼凑到一起，但它也在苹果早期的内部宣传单和海报中出现过。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/Apple-WAtch-San-Francisco-font.jpg) ▲ 为 Apple Watch 而生的新版 San Francisco 字体 2014 年，苹果还发布了一个新版 San Francisco 字体，主要是针对 Apple Watch 的小尺寸屏幕设计的，风格完全不同，但易读性很高。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/1984-MacWrite-word-prcessor-WYSIWYG-fonts.jpg) 可以说，各种漂亮字体的出现，为麦金塔电脑的图形界面增添了别样的风情。你既可以选择代表现代主义的 Chicago，也可以回归到古典雅致的 New York 之上，不同人都可以有不同的选择。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/mac1.jpg) ▲ 当年的麦金塔宣传资料中，也重点介绍了直观的文本编辑以及打印功能 更重要的是，这些字体还可以由苹果的第一台激光打印机 LaserWriter 打印出来，这意味着用户可以直接在麦金塔电脑上完成文本录入、编辑和打印的全套工作，快速制作出实体化的印刷品。 这一工作流的实现，也推动了之后桌面出版产业的发展。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/CleanShot-2021-01-08-at-14.28.16.jpg) ▲ 杂锦字体 Cairo，设计之初只是为了装饰用 另外，在卡雷设计过的字体中，还诞生过一只「吉祥物」。 事情起因自苹果工程师安妮特·瓦格纳（Annette Wagner），当时她正在设计麦金塔系统的打印程序，需要找一个预览页面的参照物，以帮助用户正确识别纸张的朝向。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/cairo.jpg) ▲ 小狗作为打印预览时的参照物，以辨认纸张朝向 她从卡雷的 Cairo 字体中看中了一只小狗，它本身是一种杂锦字型，由各种图形符号组成。瓦格纳把它从原来的 26×24 像素，放大至 41×32 像素，可这么一改，也造成了之后的误解。 有人就说，他在打印预览页面看到的并不是小狗，而是一头奶牛，之后更是有人帮这只「半狗半牛」的生物起了个名字，叫「Clarus」。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/dogcow.jpg) ▲ 苹果为「奶牛狗」制作的徽章，啤酒标签，以及隐藏在代码中的彩蛋，让它成为了一个非官方的吉祥物 「Clarus, the Dogcow」的说法应运而生，并随即成为了苹果技术团队的黑话之一。大家把它做成徽章，印在衣服上，或是当作聚会啤酒的标签名。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/InfiniteLoop6.jpg) ▲ 图片来自：[512pixels](https://512pixels.net/dogcow/) 另外，在苹果的旧总部还有过一座图标花园，其中就竖立着一座奶牛狗的雕塑，可见当时苹果员工对这只奇特生物的喜爱。 ### 友好型设计 1986 年，卡雷跟随乔布斯离开苹果，以创意总监的身份成为了 NeXT 公司的第 10 号员工。当时她向乔布斯引荐了另一位知名设计师保罗·兰德（Paul Rand），为 NeXT 公司操刀设计了 logo。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/0768_09A_SM.jpg) ▲ 在 NeXT 担任创意总监的卡雷。图片来源：[Stanford University](http://insight.stanford.edu/luna/servlet/detail/Stanford~11~1~4829~100911:NeXT-Creative-Director-Susan-Kare,-) 再之后，乔布斯重返苹果，可卡雷并没有返回老东家。她发现，自己还是怀念画像素图，做设计的时光，随后便决定成为一名独立设计师，还创办了自己的设计公司 Susan Kare Design。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/kare2.jpg) ▲ 卡雷为 Path 和 Facebook 设计的小贴图 凭借着多年在苹果积累下的设计经验，单飞后的卡雷收到了众多设计委托，其中就包括了微软、IBM 以及 FaceBook 等大公司的订单。 其中最知名的，应该要数卡雷为 Windows 系统设计的纸牌卡面了。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/classic-solitaire.jpg) ▲ 最早的 Windows 纸牌游戏，卡面就是卡雷设计的 1990 年，微软开始在 Windows 3.0 系统中内置纸牌游戏，[而最早一批的纸牌卡面](https://www.fastcompany.com/3047409/indulge-in-90s-nostalgia-with-these-susan-kare-playing-cards)，便是由卡雷在一台 IBM PC 上绘制的。 那个时候，卡雷直接使用了 Windows 自带的画图软件，以及传统的 16 色 VGA 调色盘，以像素化的形式在屏幕上还原出现实世界的纸牌。 卡雷说，直到今天，这些卡面的源文件还保存在一张 5.25 英寸的软盘中。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/2015.jpg) ▲ 实体化的像素风格纸牌 在微软纸牌诞生 25 周年的节点，卡雷还和设计品牌 Areaware 合作，补全了 Windows 原本不存在的两张王牌，凑成完整的扑克，并推出实体版化的像素卡牌。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/56b7f5343c54c96c71504d505484ca5e.jpg) 很多设计师认为，苏珊·卡雷的设计是简单、友好且极具亲和力的。她为苹果电脑树立了新的形象，并赋予它人格化的一面，让计算机从原本只有光标和枯燥代码的时代，转变成为一个连 3 岁小孩都愿意使用的产物。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/1_zBYdxLO-1UpLxpTa88pURw.png) 就像这个 Happy Mac 的图案一样。[根据卡雷的回忆](https://web.stanford.edu/dept/SUL/library/mac/primary/interviews/kare/trans.html)，她当时希望用一个微笑，为麦金塔注入积极、友好的形象，这也符合乔布斯「制作外形友好的产品」的目标。 因为只有这样，才能让枯燥的计算机真正吸引到大众用户。 另一方面，卡雷简洁的设计风格，也符合乔布斯的美学要求。 她曾说过，一个出色的图标，其实和交通标志类似，只展示必要信息即可，不需要加入多余的细节。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/command.jpg) ▲ 据悉这个标识发源于瑞典 Borgholm 城堡，它的俯视图就是一个「⌘」的设计 Mac 上的「Command」功能键便是如此。卡雷从标志辞典上找到了一个回环符号「⌘」，印在了键位字母上方，而在一些北欧国家，比如瑞典，这个符号也指代了景点、名胜古迹。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/susankare01_apple_macintosh_computer_icons_examples.jpg) 2000 年，卡雷接受采访时还聊到了图标的「隐喻设计」。她认为一个优秀的图标是可以被立即识别的——比如「复制」、「撤销」等抽象化的功能，即便用户从未见过它，也可以从形象化的图示来理解，这也使得她为麦金塔设计了一批具有高辨识度的图标。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/kare1.jpg) 如今，苏珊·卡雷在 Pinterest 担任创意总监，同时也开设了[个人网站](http://kare.com/)，上面保留了她过往的大多数设计作品，而手稿则留在了纽约现代艺术博物馆内。 ![](https://s3.ifanr.com/wp-content/uploads/2021/01/savetweetvid_EYGEz0tUwAE5pWL.gif) 去年 5 月，她还帮一家拼图公司 Magic Puzzle 设计了 logo，同样也包含了笑脸的元素。 或许，卡雷的图标设计就像是一个个小惊喜那样，看似简单，可一旦看过后，它就深深的烙印在了你的脑海里。 希望在未来的日子里，我们还能在苹果产品上看到更多和「Happy Mac」一样，简约、友好型的设计。