图标与设计札记

从 Apple 到 Pinterest 的图标背后:极简设计 × 跨时代的思维工具

图标与设计札记

原文:Notes on Icons and Design with Susan Kare

Susan  Kare|Letterform|2019.11.05


大家好,非常感谢今晚你们的到来。 
其实,我最自在的状态,是弓着背趴在电脑前,而不是站在台上讲话(笑),但我还是很感激,也很珍惜今晚和大家分享的机会。 
我想谈谈我曾经做过的一些工作,不过,这绝不是“全都是我多厉害”这样的主题,而是想和大家聊聊——无论我们做什么样的设计,都值得思考的一些点、那些别人教会我的东西,以及我一路上的一些领悟。希望这些能带给你们些许启发。

我从事设计的时间,说起来就像地球刚刚冷却不久(笑)。很幸运,我有机会在苹果工作。那时候,我是典型的文科美术专业学生,对计算机一无所知。但我高中同学Andy Hertzfeld,是苹果的系统软件工程师,他跟我说需要一些平面设计的帮助。彼时我还在商店打工,虽说商店不错,但做的不是设计相关的事。所以,这个机会让我很兴奋。

到了苹果时,其实相关的广告还没发布,但当时内部流行的理念是:也许计算机也可以有点人性化。后来,我为很多公司设计过图标,但今晚不会全部展开,只挑几个重点说说。

我曾在费城的富兰克林科学博物馆干过平面设计助理,老板Harry Loux是个很棒的设计师,毕业于Art Center,还曾为Charles Eames工作。这才让我意识到,原来平面设计真的是一份职业。我很擅长用那台照片排字机,也算攒了一点自信,准备去苹果面试,告诉自己“我确实有排版经验”。因为那份工作描述就是——为电脑做字体和一些图片。 
所以,我去Palo Alto的图书馆借了所有能找到的字体书,带着去面试,假装自己很专业。其实对方根本没让我打开那些书(笑)。Andy还建议我,去买点最小格子的方格纸,因为实际工作大概就那样。虽然我玩过Apple II,但并没什么感觉,但还是想试试看。

有趣的是,那次面试我带去的东西,完全没人指定让我做,全是我自己琢磨出来的。也许正是这些,为后来的Mac工作打下了一点基础。 
我一直觉得,每个人都有那么一两样古怪的本事(也许不像我这么古怪),你未必认为那些是“正经资格”,但你要相信自己的能力。当时我超级兴奋,也特别珍惜那本素描本——顺便提醒一句,搬家时千万别让你妈把你的东西扔掉(笑)!那本素描本现在竟然藏在旧金山现代艺术博物馆和纽约现代艺术博物馆里,这对当时的我来说简直难以想象,真的非常感激。

刚到苹果时,Mac的屏幕就是这个样子,我的任务很简单:让它“看起来更好”。那会儿其实已经有点魔法的感觉了:你能用鼠标拖动这些圆圈。最开始有个“do it”按钮,但看着像“dolt”,后来就改了(笑)。 
其实,最幸福的工作莫过于,刚入职时看到的“前”的样子越糟糕,后面就越容易做出“好的效果”来。那时候的屏幕其实就是一格一格的黑白像素——每英寸32个像素。我做的第一个字体,就是Chicago,因为大家说需要一个醒目的字体,用在窗口里。 
我看了下当时的字体,都有点锯齿状,其实也不是什么火箭科学——只要把斜线保持45度,垂直和水平笔画拉直就行了。是的,X永远有点怪怪的,但大部分还是凑合了。后来我还设计了San Francisco字体,真的正宗的San Francisco(不是现在苹果系统那个重名的),还有等宽字体。我只是对着字体书自己琢磨,这里图片里的M有点怪,别介意。 
Chicago后来作为系统字体撑了很久,还在最初的iPod上“回光返照”了一下。我们做计算器时,还没想到有一天会有iPod。

我们在软件组讨论设计时,常常说一句话(我写在笔记本上)——理想状态是“哪怕最天真的用户也能用上手,最好连说明书都不要,整个界面要友好”。对我来说,这一切都很合理,因为我自己就是那个“最天真的用户”,Apple II我都觉得挺难的。

这是我刚到苹果时做的那些小图标。可以肯定的是,这颗按钮的灵感来源,是我十四岁时迷恋的一个小玩意儿。当时觉得它太酷了,应该就是它的“后裔”吧。

Scott McCloud有本讲漫画的书,没打算讲UI设计,但我觉得超级适用。他讲到一个很妙的观点:画得越简单,越像所有人,不管是一支笔还是一张脸,越接近本质的“卡通感”,任何人都能代入自己。加细节反而减少共通性,这其实跟现在很多emoji的思路相反——我们拼命增加肤色、细节,以为那样“足够包容”,但有时候反倒是越简单越不排除任何人。

我们当年还做过一些本来以为“没人会看到”的东西,比如Mac的错误提示图标,本来是拿来当“灾难性故障”用的,结果后来成了彩蛋,还被人发现在瑞典的地铁站里,和我给MoMA画的明信片卡片长得很像,挺有趣的。

刚入职没多久,我就摆脱了方格纸。Andy写了一个像素图标编辑器,顶部能看到为什么需要系统字体,因为本来用的只是个随便拉的。 
你可能已经忘了,在PS里几十层撤销、工具一大堆的今天,当年能同时看到大图小图,能直接点亮像素,而不用用橡皮擦方格纸,这已经是魔法了。 
最早我还要靠数像素写十六进制代码,后来自动化了很多,但要让自己做的图像出现在屏幕上,还得手工录入。这些不是“哭脸”,只是我统计用掉多少纸而已。

在苹果我学到一点:纸上留存的极少。程序员们很厉害,每天都在“敢做、敢试”,一有想法就上手,能尽快让大家试用。我们不是只是在会议室讨论,所以能很快发现什么想法好,什么不行。比如这个标题栏,就是个糟糕的点子(笑)。

不过,我一直喜欢在32×32的格子里画人像,因为哪怕像素这么有限,只要有心,还是能让人认出“这是谁”。我总说,要多做迭代,多试、多改,这就是创作最大的礼物。

那时只有五个应用,想过用“手”来表现动词,用“纸”来表示文档,从没想到有一天会有成千上万的应用,这套系统能不能撑得住。当时做字体,觉得有255个数字编号,肯定够用了,实际上后来只用了一小部分。现在想想,实在太天真了(笑)。

我还试图让图标别有性别或年龄,比如头像只画一截,不画全脸。可惜我离开苹果后,有些人画成了方脸,把整个脸都画上了。比如沙漏,我觉得可以淘汰掉,换成别的符号。

有一点体会是:别把任何具体设备画得太像,因为很快就会过时。比如我曾经画了个很像imagewriter打印机的图标,还有侧边的旋钮和走纸孔,结果这个图标生命周期很短。如果我当时做得更简化一些,或许还能用更久。细节够用就好。

有时我会想到路口的交通标志——只有两个小孩牵着手,并不是因为技术不能让他们背着格子书包、绑蝴蝶结,只是那些细节反而让它一眼难认。图标的核心是易辨识。

Mac开发期间,菜单的command键一开始的占位符是个苹果,结果有一天Steve Jobs进来,说“这是我们的标志,是皇冠上的明珠,不能随便用在每个菜单里”,于是我们不得不另想办法。我甚至想过用十诫命,后来发现太傻了,也不国际化。

后来我查了本符号词典,发现了今天大家熟悉的“⌘”,它代表“特色”或“feature”,也是北欧露营地常见的标志。我去瑞典旅行时,真的在哥德堡机场门口看到了这个标志,特别开心。后来还有人发邮件跟我说,这个符号的原意其实是“有塔楼的城堡”,用来标识地标。虽然当时没想那么多,但回头一看,还是觉得挺巧的。

原始Mac的第一个控制面板,目标是尽量不用文字,有文章说它像婴儿床玩具,可能不是褒义,但我觉得也没什么不好。我们用动画给用户反馈,比如按键、光标闪烁,都有些小生命力。虽然没法百分百扩展,但不需要翻译,挺好。

在苹果工作的日子,我几乎包揽了Mac的平面图形设计,也做了不少包装和市场推广材料。这幅木刻画,是Bill Atkinson早期测试扫描仪时用的——是Steve带来的一幅版画,虽然人脸细节没扫出来,但花倒是没问题(笑)。

我和Bill合作很多,他是个天才,对细节极其苛刻。我们总想让用户哪怕不懂电脑,也能凭图形猜到功能。今天看来,很多原始的图片其实分辨率很低,但传递的概念和今天的高分图标一样。 有人常说,艺术史告诉我们,世上没有新鲜事。早在二十世纪以前,人们就在用图像和符号交流,用“比特”拼字母、用图画讲故事。

我喜欢民间艺术,也深知我的成长环境影响了我的创作。因为母亲患有小儿麻痹,行动不便,我们小时候经常做手工、缝纫。许多字体设计的灵感,都是源于早年的这些体验。 
说起来,我最早的“数字项目”,可能就是小时候捏泥巴、做烟灰缸(现在孩子都不能这么玩了)。

我的设计生涯始于像素。但其实无论什么媒介,设计方法都类似。比如给Swatch手表画一个20×20像素的“闹钟”图标,我从一个闹钟开始,逐步简化、抽象化,有的加上噪点,有的试着更形象,有的直接变成小动物。最后你会发现,“钟表上的钟表”其实挺奇怪,就像手机上的“电话”图标永远是座机,没人用那种电话了。后来许多应用都用铃铛做提醒,我一直觉得铃铛其实代表“警报”,未必是个“好消息”,但大家用得很开心。

设计并非精确科学,每次我都会做出很多方案给客户看。如果对方有很具体的需求,我会按要求来,但也会加点自己的想法进去。

离开苹果后,我去微软工作,第一次可以用彩色作图,激动得不行。色彩是全新的维度,虽然很多配色都很糟糕,但总算有更多表达手法了。最喜欢的是纸牌游戏的卡片设计,所有必需的颜色都在,不需要那些刺眼的颜色。 
我还记得,每次要卸载纸牌,因为太容易上瘾了(笑)。后来Areaware在布鲁克林把它做成了实体纸牌,还特别做了个“像素记忆”的剪角,这很有趣。

Windows的一些项目没有最终上线,但我试过用底色点阵做出不那么刺眼的背景图案。这些想法都很有意思。

其实,早在Mac发布时,我们就做了一套能插入图片的字体,可以在文本中加入小图标,增加乐趣。还有一款叫Taliesin的字体,灵感源自建筑师用的转印贴纸——我喜欢在字体里藏彩蛋,比如输入某些特殊组合能出现一个“惊喜小图案”。

我没参与clipart的制作,但那是早期Mac的一个超火爆的图片库应用,很多教堂小报都爱用。

后来还参与了Magic Link,一个由索尼、摩托罗拉和苹果合作的“早期掌上通讯设备”。那时手机还没普及,这设备能给别人发电子明信片,我们还做了很多像“橡皮章”一样可以拖拽装饰的图案。其实,插图和文本的结合一直都很迷人,形式在变,本质未变。

这么多年,我其实一直在做“同一个项目”的不同版本(笑)。在Facebook我做过虚拟礼物,用户花一美元给朋友送个小图案,最初说是慈善项目,后来演变成产品。 
四年多,每天午夜上线一张新图标,一美元一个。说实话,如果我孩子问我要信用卡“买个数字蛋糕送人”,我大概率会说不(笑)。但有趣的是,挑战在于——怎么在64×64像素的方格里,画出让人愿意花钱的图案?

有些艺术感强的设计,卖得反而不好,最受欢迎的永远是熊和企鹅!我们出过成千上万只限量企鹅。如果说画什么图能挣钱,那一定是企鹅(笑)。

Facebook后来放弃了虚拟礼物,让第三方去做了。做了几年,每逢节日你就要绞尽脑汁,“罐头蔓越莓酱”怎么还能画出新花样? 
为Path做过复古风格贴纸,向量还是像素,其实流程都类似。 
任何项目都要先搞清楚所有信息和约束——每份工作都有约束条件,哪怕是黑白像素大格子,不管是预算、工艺还是大小,只要搞清楚,就可以在限制里发挥创意。

如前所述,没有唯一解答,除非你是Paul Rand那种“一稿定终身”的大神。我总是先做很多版本,再筛选、迭代,直到大家都满意。 
比如这个“curbside”标志,最初我以为要做交通、路标相关,最后客户想要一只会飞的购物袋。自由职业者的好处就是:你可以全心投入,最后客户选什么,自己都能释然。相比之下,公司里的设计更有长期压力,有时候晚上都睡不着。

我现在在Pinterest工作,快五年了。Pinterest是“灵感的家”,我很自豪,能在这个相对温暖的角落做点好事。我做过很多项目,一开始是图标,再发展成完整的设计语言。和动画师合作,让极简图标也能富有生命力。我喜欢画咖啡、做年卡、设计主题别针——推针是Pinterest的名字,也是“在意某事”的好隐喻。

最后,总结四点体会: 1 要有信心,哪怕你的技能组合看起来很“杂”。 2 别害怕约束,很多创意正是被限制激发出来的。 3 反复迭代,是设计之礼。 4 你若觉得有什么前所未见的东西,不妨去字形档案馆走一走,灵感无处不在。

我今晚特别高兴来这里,因为我热爱字形档案馆,那里就像被低估的宝藏,各种平面资料,很多东西甚至闻所未闻,现场和线上都能看到,让人大开眼界。

——非常感谢大家!

【Q&A 环节】

Q:能分享一次失败和你的收获吗?


A:这是个好问题,我也想不出特别好的答案。其实我经常会努力让客户满意,绞尽脑汁,但有时候对方最后就是不用你的方案。有一次客户看了我们的logo初稿,CEO说“每个都喜欢,难以选择”,结果过了几天,他说“我们觉得都不像未来的经典”。我心里暗想“那你们的产品是未来经典吗?”(笑)虽然有些难过,但后来我明白,遇到否定要学会“move on”,尤其当决策权分散时,沟通难度很大。我还是更喜欢和小团队深度交流。

Q:如何看待“有约束”和“无约束”的创作?


A:做艺术可以无约束,自己设题自己解。但做平面设计总有约束——无论是logo还是界面。现在有一百万种颜色,但你不必每个项目都用尽全部色彩。有限的“格子”,反而让人更安心,也更有纪律。

Q:能谈谈你如何看待包容性设计和无障碍吗?


A:其实我不是专业的无障碍设计师,但我的本能就是:图形不要带发型或性别特征,越中性越好,越多人能代入。符号尤其如此,尽量用剪影、别加细节。用户可以是任何人,图像应尽可能包容。

Q:为什么“电话”图标总是老式话机?有更好的替代方案吗?


A:这是个难题。很多抽象名词和动词都很难找到完美图形,比如“主意”还是用灯泡,其实爱迪生之后好主意也很多(笑)。电话图标的问题是,老电话的识别性太高了,新设备(遥控器、iPod)形状相近,难以替换。像Rolodex也早被淘汰。我们还没找到更合适的新符号。

Q:现在高分屏时代,设计师的挑战和以前有何不同?你如何评价苹果现在的设计?


A:我不会给分(笑),我也是苹果用户。高分屏容易让人加很多细节,渐变、阴影、3D……但越复杂,越容易让界面变得杂乱,信息过载。现在的好处是微妙的高光和阴影可以丰富表达,但要控制克制。总的来说,不要让屏幕上二十五个东西争抢你的注意力。

Q:你学过艺术史,对你的设计有何影响?


A:艺术史让我相信“灵感无处不在”。不是我会打开书找Bosch的猴子画图标,而是我习惯广泛吸收灵感。很多科技公司的设计只看同行的样板,比如表情符号的“wow脸”,只是嘴再大一点。其实完全可以看更广的资料,比如流浪汉符号、古籍刻版,去触发更有趣的联想。

Q:如果你能为Unicode增加一个emoji,会选什么?


A:我还真没想过(笑)。我喜欢最简单的表情,比如键盘输入的 :) ,或是扑克牌的♥,看起来更纯粹。我养了只澳大利亚牧羊犬,所以也许最“烂俗”的答案就是——我的狗呢?

Q:MacPaint曾让每个人都能成为“艺术家”,你怎么看现在的“人人创作”?


A:我经常想这个。就像文字处理器未必让你变成好作家,但编辑变容易了。现在每天我都在鼠标、屏幕、笔记本间切换,文字与图像、矢量的结合让创作更流畅。这些工具的进步确实让表达更自由,但“创意”还是靠人本身。就像有了织补软件,织补不会更有创意,工具只是工具,灵感还是靠你。

Q:你后来还做字体吗?