Mac 圖標不是像素問題,是隱喻問題
少畫幾筆,用戶才能把自己放進圖標裡。16×16 的黑白限制不是設計遺憾,而是逼出好想法的約束。
原視頻在 YouTube 上放不出來,用音頻聽:
核心論點 · 點時間戳可跳到原聲
設計的難點是想法,形式會自己跟上
開場先給方法論:Paul Rand 告訴 Susan Kare,設計要「有意義、讓人記得住」,而實現它的關鍵是先有一個好想法,形式隨後自然跟上。Susan 說自己不是計算機出身,去 Apple 之前還在阿肯色州焊一隻真豬大小的野豬雕塑;正因為沒有像素或圖形學的包袱,她更把 icon 當成溝通問題。她強調,Paul Rand 這句話放在今天 AI 產品的語感裡依然成立。
— Susan Kare限制不是創意的反面,而是創意的前提
當年 Macintosh 的圖標規格只有 16×16 像素、黑白兩色。Susan Kare 的態度是:限制不是創意的反義詞,先認清限制、再為它興奮,總比抱怨沒有一千種顏色強。為了讓文字在這麼小的格子裡不顯得鋸齒,她用橫線、豎線和 45 度斜線整理字形。像素越少,越迫使你把一個對象畫到只剩能被認出的那一點點。
— Susan Kare字母不等寬,Mac 的字才好看得多
當時很多設備上的文字是等寬的:M 被壓扁,I 被拉寬。Mac 是少數能做比例字體的機器,字母按自己的形狀佔寬度,所以她一眼就看出「這樣好看很多」。她為系統設計了 9 像素高的 Chicago,又按 Times 類和 Helvetica 類的思路做了 New York 和 Geneva。原本名字用的是她和 Andy 高中附近費城郊區的小鎮,Steve Jobs 看到後說:城市名不差,但至少用世界級城市的名字。
— Susan Kare圖標畫得越細,用戶越進不去
她用 Scott McCloud 關於漫畫的理論解釋圖標為什麼不能畫滿:一張臉細節越多,越像某一個具體的人;畫得極簡,每個用戶才能把自己的表情投射上去。鉛筆同理:一支簡單鉛筆可以代表「書寫」,而帶高光的金屬筆是一種特定型號的筆,不是人人都用。她認為圖標只保留一兩個突出特徵就夠,就像學校路牌上的兩個孩子不必有格子午餐盒或鞋帶。
— Susan Kare把產品實物畫進圖標,註定過時
在做 ImageWriter 打印圖標時,她畫出了帶孔紙等真實細節,因為那臺打印機確實長這樣;但她復盤認為「細節太多」是錯誤,更簡潔一點反而能讓符號活得更久。3.5 吋軟盤被當作「保存」圖標也是同一個教訓:再通用的產品實物也會過時。她的替代方案是使用隱喻,並只畫到足夠被理解的細節。
— Susan Kare虛擬禮物賣的是可愛,不是貴价
她為 Facebook 做過一美元虛擬禮物:每天午夜上架一個新禮物,大約 15 分鐘後就能根據銷量判斷會不會成為爆款。Susan 原本以為畫鑽石耳環、Rolex 這類貴价物品會顯得「花 1 美元很值」,但真實規律是可愛打敗一切:心形、泰迪熊、kiss mark 是最暢銷的,企鵝的限量款也每次都賣完。買一個笑點或萌點,比買昂貴物品的想像更即時。
— Susan Kare好設計師不參加比稿,只報一個價
Steve Jobs 最初想為 NeXT 的標誌做招標:請 5 家或 5 人參賽,各付 1.5 萬美元,選中一家再繼續。Paul Rand 卻說:你會付我 10 萬美元,我只做一個標誌,而且你會喜歡它。最後事實就是如此。Rand 反對花大錢把一個毫無關聯的隨機符號變成品牌,更主張在品牌名本身做文章——就像他把 NeXT 放進盒子裡,也給 UPS 做了女兒一看就說是「禮物」的標誌。
— Susan Kare只拿一個方案見老闆,等於逼他說不
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 dpi | 12: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。