世界太吵,來原聲聽播客

Y Combinator

Mac 圖標不是像素問題,是隱喻問題

少畫幾筆,用戶才能把自己放進圖標裡。16×16 的黑白限制不是設計遺憾,而是逼出好想法的約束。

圖標設計設計方法論早期 Mac品牌與 LogoSteve Jobs
限制如何逼出好隱喻、Paul Rand 怎樣用一句話拿下定價權、一美元禮品裡「可愛打敗一切」——三段都能直接帶走。

核心論點 · 點時間戳可跳到原聲

1:05

設計的難點是想法,形式會自己跟上

開場先給方法論:Paul Rand 告訴 Susan Kare,設計要「有意義、讓人記得住」,而實現它的關鍵是先有一個好想法,形式隨後自然跟上。Susan 說自己不是計算機出身,去 Apple 之前還在阿肯色州焊一隻真豬大小的野豬雕塑;正因為沒有像素或圖形學的包袱,她更把 icon 當成溝通問題。她強調,Paul Rand 這句話放在今天 AI 產品的語感裡依然成立。

— Susan Kare
7:28

限制不是創意的反面,而是創意的前提

當年 Macintosh 的圖標規格只有 16×16 像素、黑白兩色。Susan Kare 的態度是:限制不是創意的反義詞,先認清限制、再為它興奮,總比抱怨沒有一千種顏色強。為了讓文字在這麼小的格子裡不顯得鋸齒,她用橫線、豎線和 45 度斜線整理字形。像素越少,越迫使你把一個對象畫到只剩能被認出的那一點點。

— Susan Kare
9:35

字母不等寬,Mac 的字才好看得多

當時很多設備上的文字是等寬的:M 被壓扁,I 被拉寬。Mac 是少數能做比例字體的機器,字母按自己的形狀佔寬度,所以她一眼就看出「這樣好看很多」。她為系統設計了 9 像素高的 Chicago,又按 Times 類和 Helvetica 類的思路做了 New York 和 Geneva。原本名字用的是她和 Andy 高中附近費城郊區的小鎮,Steve Jobs 看到後說:城市名不差,但至少用世界級城市的名字。

— Susan Kare
17:04

圖標畫得越細,用戶越進不去

她用 Scott McCloud 關於漫畫的理論解釋圖標為什麼不能畫滿:一張臉細節越多,越像某一個具體的人;畫得極簡,每個用戶才能把自己的表情投射上去。鉛筆同理:一支簡單鉛筆可以代表「書寫」,而帶高光的金屬筆是一種特定型號的筆,不是人人都用。她認為圖標只保留一兩個突出特徵就夠,就像學校路牌上的兩個孩子不必有格子午餐盒或鞋帶。

— Susan Kare
22:11

把產品實物畫進圖標,註定過時

在做 ImageWriter 打印圖標時,她畫出了帶孔紙等真實細節,因為那臺打印機確實長這樣;但她復盤認為「細節太多」是錯誤,更簡潔一點反而能讓符號活得更久。3.5 吋軟盤被當作「保存」圖標也是同一個教訓:再通用的產品實物也會過時。她的替代方案是使用隱喻,並只畫到足夠被理解的細節。

— Susan Kare
31:52

虛擬禮物賣的是可愛,不是貴价

她為 Facebook 做過一美元虛擬禮物:每天午夜上架一個新禮物,大約 15 分鐘後就能根據銷量判斷會不會成為爆款。Susan 原本以為畫鑽石耳環、Rolex 這類貴价物品會顯得「花 1 美元很值」,但真實規律是可愛打敗一切:心形、泰迪熊、kiss mark 是最暢銷的,企鵝的限量款也每次都賣完。買一個笑點或萌點,比買昂貴物品的想像更即時。

— Susan Kare
38:24

好設計師不參加比稿,只報一個價

Steve Jobs 最初想為 NeXT 的標誌做招標:請 5 家或 5 人參賽,各付 1.5 萬美元,選中一家再繼續。Paul Rand 卻說:你會付我 10 萬美元,我只做一個標誌,而且你會喜歡它。最後事實就是如此。Rand 反對花大錢把一個毫無關聯的隨機符號變成品牌,更主張在品牌名本身做文章——就像他把 NeXT 放進盒子裡,也給 UPS 做了女兒一看就說是「禮物」的標誌。

— Susan Kare
48:58

只拿一個方案見老闆,等於逼他說不

Andy Hertzfeld 教她怎麼給 Steve Jobs 看方案:不要只拿一個東西去,因為只有一個選項時他只能說不喜歡,這也許會逼你回去做得更好;拿幾個選項去,他才能參與進來,指出其中一個很糟,然後仍然挑走一個。她把這個當成給決策者展示創意的通用方法——給判斷留出空間,別讓一次反饋變成全盤否定。

— Susan Kare

原話 · 已逐字校驗

always focus on making things meaningful and memorable. And I think the heart of that is have a good idea. And then the form will follow.

永遠專注於讓東西有意義、讓人記得住;這件事的核心是有一個好想法,形式隨後自然會跟上。

Susan Kare1:05

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 Kare7:28

there's not a technical reason that they couldn't have plaid lunch boxes and shoelaces or be singing a song, but it would probably be more distracting and just take away from that instant recognition that you're aiming for.

沒有技術上的理由不能給他們畫上格子午餐盒、鞋帶,甚至讓他們唱歌;但這些很可能只會更分散注意力,破壞你想達到的一眼識別。

Susan Kare18:04

it kind of looks like a four leaf clover. That's sort of lucky. And it kind of looks like a clover leaf highway, which might be a way to get somewhere fast.

它看起來有點像四葉草,這有點幸運;又有點像苜蓿葉式立交橋,可能是快速到達某處的路線。

Susan Kare23:12

what I learned was that cute trumped everything.

我學到的教訓是:可愛打敗了一切。

Susan Kare32:59

you will pay me $100,000. I will do one logo and you will like it.

你會付我十萬美元。我只做一個標誌,而且你會喜歡它。

Susan Kare38:24

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.

不要只給他看一個方案。因為只有一個方案時他會說不喜歡;這也許會逼你回去重做,做得更好。

Susan Kare48:58

數字與實體

Macintosh 圖標畫布16×16 像素,黑白兩色7:28
Chicago 字體字高9 像素(cap height)8:32
icon editor 預覽分辨率72 dpi12:52
開機圖形畫布(128K Macintosh)32×32 像素15:01
Facebook 虛擬禮物單價1 美元31:52
判斷新禮物是否暢銷的窗口上新約 15 分鐘32:59

術語

iconographer圖標畫師
Susan 自稱的職業稱謂;把「畫圖標」當作一門溝通手藝。
bitmap graphics位圖圖像
以像素網格形式存儲的畫面;早期 Mac 圖標就是 16×16 的位圖。
proportionally spaced fonts比例字體
字符按自身形狀佔不同寬度,而不是每個字等寬。
cap height大寫高度
字體度量中,從基線到大寫字母頂部的距離。
Letraset轉印字
計算機排版出現前,用乾式轉印把字母貼到紙上的工具。
desktop metaphor桌面隱喻
用文件、文件夾、垃圾桶等桌面物件傳達電腦操作概念的比喻體系。

收聽指南

誰該聽

給界面上一個圖標反覆掙扎的設計師,以及想搞懂 Steve Jobs 和 Paul Rand 式創意定價的創業者。

可跳過

作品回顧段(約 25:20–37:16)可跳過;核心在開頭、17:04、38:24。