跨国深谈← 返回←Macintosh 原始图标设计师谈像素设计的本质

Macintosh 原始图标设计师谈像素设计的本质

关联

人物 Susan Kare

公司 Apple

概念 Macintosh · icon · font · Chicago · bitmap · Happy Mac

Susan Kerr 是一位图标设计师和艺术专业背景的人，被高中同学 Andy Hertzfeld 拉进 Apple 的 Macintosh 团队，负责为这台新电脑设计系统字体和小图标。她去面试时夹着一堆从图书馆借来的排版书假装内行，还用方格纸画了一些位图图形当作品——没人问她任何字体设计的问题，但她还是拿到了这份工作 。她带去面试的那个画着早期图标的笔记本，后来被 MoMA 永久收藏了 。

第一天到 Apple，她看到的屏幕上只有粗糙的字体和可以拖拽的圆角矩形，任务是让这些东西变得任何人都能看懂、不需要读手册 。限制极其严苛：图标只有 16×16 的黑白像素，启动画面只有 32×32 。但她没把这当成坏事——“你可以在任何限制下发挥创造力，最好明白限制是什么，然后对此感到兴奋，而不是因为你没有一千种颜色而感到沮丧” 。

她设计的第一个系统字体叫 Chicago，大写字母高度只有 9 个像素。诀窍是只用水平线、垂直线和 45 度角来消除锯齿感 。

当时很多电脑显示器的字体是等宽的，M 被挤得扁扁的、I 却很宽，Macintosh 能做比例间距字体（每个字母宽度不同，像印刷体一样）是一个很大的进步，虽然她当时没意识到 。Chicago 被用在标题栏和计算器里，后来第一台 iPod 也用了这个字体，她觉得这算是一种延续 。

Andy 给她写了一个图标编辑器——没有画形状的工具，没有撤销，只能一个个切换像素的黑白，但可以同时看到放大版和实际 72 DPI 的效果，而且自动生成十六进制代码 。“你可以在没有橡皮擦的情况下进行迭代。

这有多好简直难以言表” 。她甚至用 32×32 的像素给同事画肖像，一千个点如果迭代足够多次，就能得到一张有几分像的图 。

最出名的图标是 Happy Mac——电脑启动时显示的笑脸。灵感来自她 14 岁时得到的一个微笑按钮 。

她从漫画家 Scott McCloud 的书里找到理论支撑：当一张脸细节很多时，它看起来像某个具体的人；但如果你把它做得非常简单，每个人都可以把自己投射上去 。这成了她的图标设计原则——“一两个显著细节，但不要给它填塞很多额外的东西” 。类似学校过马路标志上两个手牵手孩子的剪影：技术上完全可以加上格子午餐盒和鞋带，但那只会让人分心，夺走你追求的瞬间识别 。

她也犯过错。打印图标画了一台带链轮孔的 ImageWriter 打印机，细节太多，很快就过时了 。

“在图标中展示特定产品设计的图片不好，比如那个用于保存的三点五英寸软盘，它经不起时间的考验，最好使用一个隐喻，只要足够的细节” 。还有炸弹图标——本意是给”完全系统故障”用的，设计时被告知”没人会看到这个”，所以她画了一个兔八哥风格的卡通炸弹。结果真有用户打来电话，问屏幕上出现炸弹是不是电脑要爆炸了 。

Command 键（⌘）的符号也出自她手。本来想用苹果标志做快捷键，Steve Jobs 有一天过来说”我们的标志是珍贵的，我们不能有一堆苹果” 。

她去图书馆翻书，找到一张叫”feature”的图片，觉得像四叶草也像苜蓿叶式公路立交桥，而且在 16×16 里很好画 。后来她去瑞典才发现，那个符号其实来自一座 1200 年的城堡废墟的俯瞰图——四座塔楼 。

离开 Apple 后她做了很多项目：给 Windows 3.0 用 16 色抖动做不那么俗气的界面 ；在 Facebook 做了差不多四年的”礼品店”，每天午夜上架一个新礼物卖一美元，她发现”可爱胜过一切，吻痕标记是有史以来最畅销的，如果我的性命取决于卖出一幅一美元的画，我会画企鹅” 。

后半段她分享了几条影响她很深的建议。Paul Rand——她后来在 Next 公司请他做 logo，Rand 开价 10 万美元做一个，“你会喜欢的，而这就是实际发生的事” ——告诉她字体不用多，“你只需要知道如何很好地使用它们” 。

做 logo 时 Rand 反对花大钱搞一个跟产品名无关的抽象符号，主张直接对产品名称本身做文章，比如他把 Next 放进一个立方体里 。他还把 UPS logo 拿给六岁女儿看，女儿说”这是一个礼物”，Rand 就认为这证明了它是可理解的 。

建筑师 Daniel Nord 说：“让它视觉化。展示，而不是讲述” 。

Alan Kay 关于用户界面的一句话她也一直记着——不要把所有东西放在同一层级，要嵌套，让东西可以自然地出现 。Andy Hertzfeld 教她怎么向 Steve Jobs 展示方案：“不要给他看一样东西，因为他会说他不喜欢，迫使你重做；给他看几样，他可以说某个很糟糕，但仍然能挑出一个” 。

本集带走

• 限制是朋友，不是敌人：16×16 黑白像素看似极端，但搞清楚边界后兴奋地创作，比抱怨没有一千种颜色有效得多
• 图标要一两个显著细节，不要堆：铅笔比镀铬反光笔更适合代表”写作”，因为越简单越普适，越多细节越像某个特定东西
• 别画具体产品：软盘保存图标、带链轮孔的打印机图标都因为绑定了特定硬件而快速过时，用隐喻比用写实图更耐久
• 给决策者看多个选项，不是一个：只给一个，对方只能说”不喜欢”；给几个，对方可以骂烂的但挑出好的，你也省了重做
• 可爱胜过一切：在 Facebook 礼品店四年的数据里，泰迪熊、心形、吻痕、企鹅全部碾压钻石和 Rolex

你可以发挥创造力，但最好明白限制是什么，然后对此感到兴奋，而不是因为你没有一千种颜色而感到沮丧。
You can be creative, but it’s good to understand what the constraints are and then be excited about that as opposed to being upset that you don’t have a thousand colors.
—— Susan Kare · [07:44]

你可以在没有橡皮擦的情况下进行迭代。这有多好简直难以言表。
You could iterate without an eraser. It’s hard to overstate how great this was.
—— Susan Kare · [13:34]

我学到的是可爱胜过一切。
What I learned was that cute trumped everything.
—— Susan Kare · [33:22]

我想说的是，如果我的性命取决于卖出一幅一美元的画，我现在知道我会画一只企鹅，因为我们有过多个企鹅限量版，而且它们都卖光了。
I would say if my life depended on selling a drawing for a dollar, I now know I would draw a penguin because we had multiple limited editions of penguins and they all sold out.
—— Susan Kare · [33:36]

不要给他看一样东西，因为他会说他不喜欢它，因为这可能会迫使你去尝试再做一次并做得更好。但如果你给他看几样东西，那么他就可以参与进来，说某个东西很糟糕，但仍然挑选一样。
Don’t show him one thing because he’ll say he doesn’t like it because it maybe forces you to go try and do it again and be better. But if you show a few things, then he can be involved and say that something is terrible but still pick something.
—— Susan Kare · [49:17]

它看起来像别人。但如果你把它做得非常简单，每个人都可以把自己投射到它上面。
It looks like somebody else. But if you make it really simple, everyone can project themselves onto it.
—— Susan Kare · [16:59]

命运有着有趣的转折，尽管我如此想成为一名艺术家，现在那个我带去面试的、带有早期图标的笔记本已经被 MoMA 永久收藏。
In a funny twist of fate, as much as I had wanted to be an artist, now that notebook with those early icons that I took to my interview is in the permanent collection of MoMA.
—— Susan Kare · [05:17]