導(dǎo)語(yǔ)

上一篇文章 咱們聊了 logo 設(shè)計(jì)，這次聊聊圖標(biāo)。

上期回顧：

不知大家有無(wú)注意過(guò)我的賬號(hào)頭像，圖案就是 Mac 上 Command 命令符號(hào)的變體，我加粗了圖形并給它的四角填充了不同色值。

為什么用 ? 做頭像？首先，Command 是設(shè)計(jì)軟件中使用頻率最高的快捷命令，極致百搭，有想不起來(lái)的操作，就摁著它再去敲一敲其他按鍵，總會(huì)收獲小驚喜。

再者 ? 的設(shè)計(jì)出自我所喜歡的——Apple 初代設(shè)計(jì)師、字體設(shè)計(jì)師和像素女王、圖標(biāo)設(shè)計(jì)教母、獨(dú)立設(shè)計(jì)師、策展人、藝術(shù)家、GUI 設(shè)計(jì)先驅(qū) Susan Kare（原諒這里套用權(quán)游龍媽的介紹模式，畢竟她在 GUI 設(shè)計(jì)史上也可以說(shuō)是龍媽般的存在）。

知往鑒今，這篇文章就先一起來(lái)回顧下圖標(biāo)設(shè)計(jì)往事，再論一論當(dāng)下。

正文開(kāi)始前，先提幾個(gè)問(wèn)題：

1. 圖標(biāo)設(shè)計(jì)有沒(méi)有獨(dú)立價(jià)值？
2. 圖標(biāo)設(shè)計(jì)到底有沒(méi)有技術(shù)含量？
3. 圖標(biāo)設(shè)計(jì)有沒(méi)有原創(chuàng)這一說(shuō)？

這些問(wèn)題是否有標(biāo)準(zhǔn)答案，我們就「知往」之后再說(shuō)。

一、圖標(biāo)設(shè)計(jì)溯源

圖形用戶界面，Graphical User Interface，簡(jiǎn)稱 GUI。

它的出現(xiàn)最早可以追溯到上世紀(jì) 60 年代，從計(jì)算機(jī)圖形學(xué)之父 Ivan Sutherland 開(kāi)發(fā)了 Sketchpad 系統(tǒng)，被廣泛認(rèn)為是 GUI 的前身；

到鼠標(biāo)之父 Doug Engelbart 首創(chuàng)了 NLS 系統(tǒng)并明確 GUI 的概念；

再到面向?qū)ο缶幊讨?個(gè)人計(jì)算機(jī)先驅(qū) Alan Kay 提出 Smalltalk 原型和桌面隱喻并在 PARC（施樂(lè)公司實(shí)驗(yàn)室）進(jìn)行了系列研究實(shí)踐，就基本確定了 GUI 在計(jì)算機(jī)上的應(yīng)用形態(tài)。

而圖標(biāo)（icon），則是 GUI 最基本的組成元素。

1. 圖標(biāo)誕生

上世紀(jì) 70 年代，施樂(lè)公司 PARC 匯聚了一批頂尖信息技術(shù)專家，其中有四位圖靈獎(jiǎng)獲得者，這里孵化了眾多世界上最前沿的計(jì)算機(jī)技術(shù)，世界上最早的計(jì)算機(jī)圖標(biāo)就是誕生于此地。

1981 年，由 PARC 研發(fā)的 Xerox Star（施樂(lè)之星）發(fā)布，它繼承并優(yōu)化了 Xerox Alto（1973），是世界上第一款集成了 GUI 的商用個(gè)人計(jì)算機(jī)。

計(jì)算機(jī)從此不再只是依靠 CLI（命令行界面）交互，有了更為直觀的圖形界面，通過(guò)圖標(biāo)交互可以執(zhí)行各種命令操作。

下圖可以看到最早的文件夾、文檔、漢堡/菜單圖標(biāo)等。

但由于公司的戰(zhàn)略問(wèn)題，這款計(jì)算機(jī)和實(shí)驗(yàn)室的很多先創(chuàng)技術(shù)都沒(méi)有受到公司高層的重視。施樂(lè)所擁有的一切本可以助其稱霸整個(gè)計(jì)算機(jī)行業(yè)（喬布斯說(shuō)的）。

不過(guò)，施樂(lè) GUI 雖生不逢時(shí)，卻被喬布斯成功偷師，最終得以在 Apple 轉(zhuǎn)世重生。

2. 圖標(biāo)面市

時(shí)間來(lái)到 1983 年，這一年 Apple Lisa 被推出，這是世界上首款具備 GUI 并配備鼠標(biāo)的商用計(jì)算機(jī)，界面包括圖標(biāo)、彈出窗、下拉菜單，可以進(jìn)行多任務(wù)操作。

可惜因價(jià)格過(guò)于昂貴，幾經(jīng)迭代都沒(méi)能取得市場(chǎng)成功。但它的出現(xiàn)在 80 年代引起了 GUI 討論熱潮，眾廠商也紛紛開(kāi)始研究效仿。

早在 1979 年，喬布斯以 Apple 的股票作為交換，得以在施樂(lè)實(shí)驗(yàn)室兩次觀看其最新的研發(fā)成果演示，內(nèi)容包括鼠標(biāo)驅(qū)動(dòng) GUI，Smalltalk 編程語(yǔ)言、以及以太網(wǎng)技術(shù)。

在看到 GUI 演示的十分鐘內(nèi)，喬布斯就預(yù)見(jiàn)到——這就是未來(lái)！以后的每一臺(tái)計(jì)算機(jī)都會(huì)是這樣操作。

Lisa 的圖標(biāo)雖增加了不少細(xì)節(jié)，但仍可以看出是基于對(duì)施樂(lè)的模仿，缺乏創(chuàng)新顯然并不符合喬布斯的作風(fēng)。

3. 圖標(biāo)發(fā)展

一年后喬布斯發(fā)布了 Macintosh（Macintosh 128K），也就是最早的 Mac。這款個(gè)人計(jì)算機(jī)繼承了 Lisa 的先進(jìn)技術(shù)，但價(jià)格更為低廉，面向大眾消費(fèi)市場(chǎng)，定位在低成本、易使用。

Macintosh 的用戶界面不僅包括基礎(chǔ) GUI，還配置了多種字體及幾款預(yù)置的應(yīng)用程序，而視覺(jué)設(shè)計(jì)基本都被 Susan Kare（以下稱 Kare）包辦。

可以明顯看出，這時(shí)候的圖標(biāo)更具設(shè)計(jì)美感，也更簡(jiǎn)約，可識(shí)別性也更強(qiáng)。

一方面喬布斯對(duì) Macintosh 寄予厚望，把個(gè)人對(duì)藝術(shù)和創(chuàng)新的追求全然傾注于其中；kare 個(gè)人的藝術(shù)背景則發(fā)揮著主要作用，據(jù)稱她在 Apple 的工牌標(biāo)注的不是設(shè)計(jì)師，而是「Macintosh Artist」。

kare 的設(shè)計(jì)是突破性的，她的圖標(biāo)大膽而友好，從她開(kāi)始，圖標(biāo)設(shè)計(jì)才認(rèn)真思考與用戶產(chǎn)生共鳴。她為 Macintosh 設(shè)計(jì)的一系列圖標(biāo)都成為 Apple 的經(jīng)典，并沿用至今。

二、Macintosh 的微笑

Kare 是學(xué)藝術(shù)出身，在進(jìn)入 Apple 之前主業(yè)在做雕塑，她沒(méi)有任何數(shù)字設(shè)計(jì)經(jīng)驗(yàn)，對(duì)計(jì)算機(jī)也一竅不通。

不過(guò)，她覺(jué)得「理想的工作雖是全職從事藝術(shù)工作，但做雕塑太孤獨(dú)」，于是她抓住機(jī)會(huì)走進(jìn)了數(shù)字世界。

圖片攝影：Norman Seeff - Susan Kare 與 Macintosh，1984 年

受高中好友的 Andy Hertzfeld（Apple 早期軟件工程師）的引薦，她于 1983 年通過(guò)面試入職 Apple，上來(lái)就被要求通過(guò)藝術(shù)手段賦予 Macintosh 親和力——怎樣讓它看起來(lái)不是冷冰冰的機(jī)器（早期的計(jì)算機(jī)僅面向企業(yè)和專業(yè)人士），想辦法拉近普通消費(fèi)者與計(jì)算機(jī)的距離，畢竟這是一臺(tái)面向大眾市場(chǎng)的個(gè)人計(jì)算機(jī)。

直白一點(diǎn)說(shuō)，她需要設(shè)計(jì)出讓不懂計(jì)算機(jī)的人都可以輕易操作的可視化界面，甚至不需要使用說(shuō)明手冊(cè)。

在此之前，Hertzfeld 曾讓 Kare 嘗試設(shè)計(jì)圖標(biāo)和字體，并建議她使用 32 × 32（格子）的方格紙來(lái)繪制圖像，一個(gè)格子代表 1 像素，通過(guò)這 1024 個(gè)格子來(lái)模擬 Apple 早期的計(jì)算機(jī)位圖顯示（早期屏幕分辨率低，計(jì)算機(jī)成像都是像素化）。

于是 Kare 買來(lái)格子本，開(kāi)始手繪了第一批 Macintosh 圖標(biāo)，包括「剪切」、「粘貼」和「筆刷」圖標(biāo)等，原稿被 MoMA 藝術(shù)館收藏。

這些圖標(biāo)的繪制靈感完全來(lái)自刺繡針腳、馬賽克、點(diǎn)陣畫(huà)技法，那時(shí)的 Kare 還不懂什么是像素藝術(shù)，但已冥冥中奠定了其日后成為「像素女王」的基礎(chǔ)。

1. Happy Mac

基于以上經(jīng)驗(yàn)，Kare 開(kāi)始思考 Macintosh 的 GUI 目標(biāo)，她總結(jié)了三點(diǎn)：

1. 要讓自己的媽媽會(huì)用
2. 像街機(jī)游戲一樣好上手，不需要說(shuō)明書(shū)
3. 體驗(yàn)友好

如何讓所有人都可以接受 Macintosh？那就需要考慮到大眾化和通用性。

那怎樣的設(shè)計(jì)才會(huì)具備通用性？

必然就是細(xì)節(jié)越少通用性越強(qiáng)，而卡通化的形象會(huì)更有親和力，更容易讓人心情愉悅并放松。

那這個(gè)形象應(yīng)該是什么樣子？

蒙娜麗莎的微笑眾人皆知，那 Macintosh 的微笑人們會(huì)不會(huì)喜歡？

Happy Mac，1984 年，Macintosh 啟動(dòng)圖標(biāo)

上圖模擬了最早的 Macintosh 啟動(dòng)畫(huà)面，屏幕中心是經(jīng)典的 Happy Mac 圖標(biāo)，Kare 用這個(gè)設(shè)計(jì)來(lái)給用戶傳達(dá)友好的第一印象，通過(guò)把 Macintosh 擬人化，來(lái)消除用戶對(duì)計(jì)算機(jī)/機(jī)器的先天恐懼。

Kare 明確說(shuō)該圖標(biāo)的直接靈感來(lái)自于 Smiley，就是我們常見(jiàn)的黃色笑臉圖案（最早由 Harvey Ross Ball 設(shè)計(jì)于 1963 年，70 年代初被人在法國(guó)注冊(cè)商標(biāo)并成立品牌公司 The Smiley Company，以該笑臉 IP 授權(quán)發(fā)家，現(xiàn)已是時(shí)尚界知名潮牌）。

Happy Mac 圖標(biāo)也是后來(lái) Mac 上 Finder 圖標(biāo)的靈感所在，而 iPhone 上 Face ID 圖標(biāo)靈感則基于前面二者。

2. 第一批 Mac 圖標(biāo)

我從 Mac 時(shí)代開(kāi)始，（就致力于）與用戶產(chǎn)生共鳴，并嘗試開(kāi)發(fā)一致且易于理解的設(shè)計(jì)系統(tǒng)。

Kare 喜歡天馬行空，嘗試各種想法來(lái)把命令操作轉(zhuǎn)化為視覺(jué)提示，她的設(shè)計(jì)往往直觀又吸引人。

她在 1983～1984 年間為 Macintosh 設(shè)計(jì)了第一批像素圖標(biāo)，比如「炸彈」代表出錯(cuò)，「手表」是告知用戶等待加載，「軟盤」代表存?。凰矁?yōu)化了諸如廢紙簍、文檔、箭頭光標(biāo)等初代 Lisa 用過(guò)的圖標(biāo)。

當(dāng)然有時(shí)也不免用力過(guò)猛，比如那個(gè)「炸彈」圖標(biāo)就曾讓用戶擔(dān)憂自己的 Mac 會(huì)爆炸。

由于工程師開(kāi)發(fā)了可視化的圖標(biāo)編輯器，Kare 可以在原型機(jī)上操作鼠標(biāo)來(lái)繪制電子版圖標(biāo)，繪制原理也很簡(jiǎn)單，就是在 32 X 32 像素的畫(huà)布內(nèi)，點(diǎn)擊或關(guān)閉像素點(diǎn)就可以了，這讓 Kare 十分興奮。

幾十年后，使用復(fù)雜的繪畫(huà)工具和多級(jí)撤消操作已經(jīng)司空見(jiàn)慣，人們很容易忘記體驗(yàn)最基本的數(shù)字工具時(shí)是多么愉快。

她甚至還在這個(gè)狹小的空間里繪制出了逼真的喬布斯像素肖像。

3. Hello 字體圖標(biāo)

經(jīng)典的「hello」手寫(xiě)字體圖標(biāo)，最早是 Kare 為了宣傳 Macintosh 的推出而設(shè)計(jì)，沿用至今，仍被廣泛用于 Apple 的產(chǎn)品營(yíng)銷物料。

4. MacPaint 應(yīng)用程序

Lisa 推出時(shí)就已內(nèi)置了繪圖應(yīng)用程序 MacSketch，GUI 由設(shè)計(jì)師 Bill Atkinson 負(fù)責(zé)，但圖標(biāo)少，界面都還比較簡(jiǎn)陋。

到了 Macintosh 版本，Kare 就對(duì)該應(yīng)用進(jìn)行了升級(jí)，設(shè)計(jì)了應(yīng)用圖標(biāo)，優(yōu)化了界面，設(shè)計(jì)了諸如「套索」、「抓手」和「油漆桶」等工具圖標(biāo)，這些圖標(biāo)也一直沿用至今，幾乎沒(méi)有過(guò)大的變化。

MacPaint 應(yīng)用界面和圖標(biāo)

圖中的女性肖像是掃描了喬布斯買的木刻版畫(huà)復(fù)制品后繪制，被印在產(chǎn)品外包裝和手冊(cè)上用做宣傳。

5. Chicago 字體

Kare 在 Apple 的工作，圖標(biāo)和其他界面設(shè)計(jì)并不是全部。其實(shí)她還給 Macintosh 設(shè)計(jì)了多款位圖字體，都成為 Apple 的經(jīng)典字體。

Susan Kare 為 Macintosh 設(shè)計(jì)的所有字體

其中 Chicago 字體是她設(shè)計(jì)的第一款系統(tǒng)字體，也是 Apple 第一款比例字體（此前計(jì)算機(jī)上都是等寬字體），使文本在早期狹小的低分辨率顯示屏上更易識(shí)別和閱讀。

這款字體在 1984～1997 年間用于歷代 Macintosh 的系統(tǒng)字體。另外，擁有過(guò)第 1～4 代 iPod 的朋友應(yīng)該也會(huì)眼熟這款字體。

Chicago 字體及應(yīng)用

Kare 還設(shè)計(jì)了 一款圖形字體——Cairo，靈感來(lái)自古埃及象形文字。細(xì)節(jié)豐富，仿若古早版 emoji 或者 SF 符號(hào)。

所有字體都在喬布斯的授意下按世界級(jí)城市命名，目前，Apple 設(shè)備上默認(rèn)（無(wú)襯線英文）字體是 SanFrancisco，但并不是 Kare 設(shè)計(jì)的那一款。

6. 與喬布斯

喬布斯對(duì)字體設(shè)計(jì)極為重視，Kare 說(shuō)她應(yīng)對(duì)喬布斯的苛刻時(shí)有一個(gè)秘訣：不要問(wèn)他「你喜歡這個(gè)設(shè)計(jì)嗎？」，要提供多個(gè)方案給到他，然后問(wèn)「你喜歡哪一個(gè)？」。

看來(lái)喬布斯確實(shí)喜歡多方案，但 上篇文章 也講過(guò)，他向保羅·蘭德要求多方案時(shí)卻吃癟。一山更比一山高，Kare 說(shuō)她記得保羅·蘭德曾幾乎拍著桌子說(shuō)「我已經(jīng)做了五十五年了，我知道你應(yīng)該做什么！」。

盡管 Kare 沒(méi)有對(duì)外講什么，但可以確定喬布斯是很欣賞她的，不然也不會(huì)讓她全程參與了 Macintosh 的發(fā)售預(yù)熱活動(dòng)，包括雜志拍攝、專訪、電視廣告以及在電視節(jié)目中演示如何操作計(jì)算機(jī)。而且，1985 年喬布斯離開(kāi) Apple 后帶走了幾名核心員工，Kare 也在列，并在新公司 NeXT 擔(dān)任創(chuàng)意總監(jiān)。

只不過(guò)幾年后，Kare 還是選擇離開(kāi)了喬布斯，成為獨(dú)立設(shè)計(jì)師。

她在 Apple 工作的時(shí)間并不算太長(zhǎng)，但卻給 Apple 提供了第一個(gè)完整的視覺(jué)語(yǔ)言，奠定了其 GUI 設(shè)計(jì)基礎(chǔ)。

三、拙工抄，巧匠盜

我們都有個(gè)有錢的鄰居，叫施樂(lè)，我闖進(jìn)他們家準(zhǔn)備偷電視機(jī)的時(shí)候，發(fā)現(xiàn)你已經(jīng)把它盜走了。

這是經(jīng)典的喬布斯訴微軟抄襲時(shí)，比爾·蓋茨給予的靈魂反駁。

到底抄沒(méi)抄襲？法律上并沒(méi)有認(rèn)定。

Apple 當(dāng)年起訴微軟 GUI 侵權(quán)時(shí)，施樂(lè)也起訴了 Apple，只是最終都沒(méi)能勝訴，眾多理由中有一條大概是當(dāng)時(shí)法院認(rèn)定：想法本身不受版權(quán)保護(hù)，只要沒(méi)有復(fù)制源代碼就不算侵權(quán)。

這段亂斗最終讓各家都更加重視專利和版權(quán)，甚至一定程度上也對(duì) GUI 開(kāi)源起到正向作用。。

喬布斯曾在采訪中引用畢加索的「Good artists copy; great artists steal.」（拙工抄，巧匠盜）來(lái)回應(yīng)抄襲與借鑒的區(qū)別。

設(shè)計(jì)師不是藝術(shù)家，能為「巧匠」已屬高階，我們不妨來(lái)看看高階的圖標(biāo)設(shè)計(jì)是怎么個(gè)「盜」法。

1. Command 符號(hào)

Command 命令最初的占位符就是復(fù)用 Apple 的 logo，點(diǎn)開(kāi)命令菜單欄就會(huì)看到一列蘋果，但喬布斯覺(jué)得 logo 獨(dú)一無(wú)二，不應(yīng)該在產(chǎn)品中被濫用，所以需要再設(shè)計(jì)一個(gè)專屬符號(hào)。

Kare 嘗試了各種隱喻，但最后還是決定找一個(gè)完全抽象的圖案來(lái)代替。

她在翻閱手頭的圖案畫(huà)冊(cè)時(shí)，在目錄上看到這個(gè) ? 圖形，據(jù)稱是瑞典露營(yíng)地的標(biāo)識(shí)。后來(lái)又發(fā)現(xiàn)這個(gè)圖案起源于古代斯堪的納維亞半島，鳥(niǎo)瞰瑞典的博里霍爾姆城堡也會(huì)得到這個(gè)圖案。

這個(gè)圖形也有專稱——Looped square，它是一種起源于北歐的古老符號(hào)，民間刻在建筑或物品上有辟邪之意。

在 Unicode 中，? 被編碼為 PLACE OF INTEREST SIGN (U+2318)。

人類文明源遠(yuǎn)流長(zhǎng)，提供給設(shè)計(jì)從業(yè)者的素材可太多了，從傳統(tǒng)圖案、紋樣、或者古老符號(hào)里尋求借鑒是常見(jiàn)的設(shè)計(jì)思路，如果考據(jù)到來(lái)源一般是沒(méi)有問(wèn)題的。但參考的如果是素材網(wǎng)站或者網(wǎng)絡(luò)圖片上二創(chuàng)圖案，就一定要注意版權(quán)信息。

2. 警示圖標(biāo)

警示圖標(biāo)包括在 Kare 最早設(shè)計(jì)的一批 Mac 圖標(biāo)里面，圖形是人臉側(cè)面剪影加氣泡提示，看起來(lái)就像是有人在提醒你要注意什么，而非系統(tǒng)或機(jī)器。

但圖標(biāo)里的人臉剪影圖形，跟上世紀(jì) 20 年代初包豪斯藝術(shù)與工藝學(xué)院的 logo 很相似。

要在 32 X 32 像素甚至 16 X 16 像素的狹小空間，規(guī)避像素作圖的技術(shù)限制并體現(xiàn)帶有人性化色彩的功能，就需要一點(diǎn)巧思，靈感不會(huì)憑空而來(lái)，這時(shí)候就要考驗(yàn)審美積累。

Kare 是學(xué)藝術(shù)出身，熟諳美術(shù)史，擅長(zhǎng)平面設(shè)計(jì)，另外，她還是保羅·蘭德的鐵桿粉絲，深受立體主義思潮影響，其審美積累自不一般。

3. Finder 圖標(biāo)

Mac 上的 Finder 圖標(biāo)很經(jīng)典，一直被誤認(rèn)為初始設(shè)計(jì)者是 Kare，但她本人予以否認(rèn)。

真正的設(shè)計(jì)者是 AlbenFaris 設(shè)計(jì)公司的 Lauralee Alben 和 Jim Faris，他們?cè)谏鲜兰o(jì) 90 年代初為 Macintosh 的操作系統(tǒng)設(shè)計(jì)了這個(gè) logo，幾經(jīng)演變成為 Finder 的經(jīng)典圖標(biāo)。

前文講過(guò)，它的靈感來(lái)自 Kare 設(shè)計(jì)的 Happy Mac 圖標(biāo)，雙面人的設(shè)計(jì)（靈感是不是也來(lái)自蝙蝠俠？）代表用戶的臉和 Macintosh 結(jié)合，突出個(gè)人對(duì)計(jì)算機(jī)的掌控權(quán)力。

因?yàn)閱滩妓贡救耸钱吋铀鞯膿碥O，Apple 的產(chǎn)品設(shè)計(jì)本來(lái)就自帶藝術(shù)氣質(zhì)，所以人們普遍猜測(cè)該經(jīng)典設(shè)計(jì)受到畢加索的畫(huà)作影響。

所以，盜亦有道，會(huì)「盜」也是設(shè)計(jì)師的必修課之一。

四、獨(dú)立設(shè)計(jì)生涯

Kare 今年 69 歲，她職業(yè)生涯最青春的幾年都貢獻(xiàn)給了 Apple。離開(kāi)喬布斯之后，她又為微軟、IBM、英特爾和 Facebook 等眾多科技互聯(lián)網(wǎng)公司提供過(guò) GUI 設(shè)計(jì)服務(wù)。

比如，1988 年為微軟操作系統(tǒng) Windows 3.0 設(shè)計(jì)的圖標(biāo)組及其他界面。

為 Windows 3.0 經(jīng)典的紙牌游戲（玩過(guò)的年紀(jì)都到位了）設(shè)計(jì)視覺(jué)元素。

1989 年為 IBM 計(jì)算機(jī)操作系統(tǒng) OS/2 設(shè)計(jì)的圖標(biāo)。

1990 年 Kare 曾短暫加入由幾位 Macintosh 初創(chuàng)工程師成立的軟件公司 General Magic，設(shè)計(jì)了 logo 和一些 GUI。

2008～2010 年間，Kare 為 Facebook 設(shè)計(jì)了數(shù)百個(gè) 64 X 64 像素的矢量圖虛擬禮物，該項(xiàng)目曾為 Facebook 創(chuàng)下百萬(wàn)美元營(yíng)收。

一個(gè)小彩蛋，其中的「Big Kiss」圖標(biāo)至今仍出現(xiàn)在 Mac 賬戶的預(yù)置頭像選項(xiàng)里。

2012 年為 MetaWatch 設(shè)計(jì) GUI。

2015 年她出任 Pinterest 的產(chǎn)品設(shè)計(jì)主管，然后轉(zhuǎn)任創(chuàng)意總監(jiān)，2018 年，她在 Pinterest 舊金山總部負(fù)責(zé)設(shè)計(jì)了 The Point 咖啡館。

2019 年她被授予美國(guó)國(guó)家設(shè)計(jì)獎(jiǎng)終身成就獎(jiǎng)。

目前 Kare 依然活躍在設(shè)計(jì)和藝術(shù)領(lǐng)域，也熱心致力于慈善和公益事業(yè)，其作品曾在各大博物館展出或被收藏，她也在線上銷售限量印刷制品。

回顧數(shù)十年職業(yè)生涯，Kare 仍為她在 Apple 時(shí)期的開(kāi)創(chuàng)性工作感到自豪，始終懷念那段與世界上最富創(chuàng)造力和敬業(yè)精神的工程師們合作的時(shí)光。

攝影：Norman Seeff - Susan Kare 與 Macintosh，1984 年

五、圖標(biāo)設(shè)計(jì)理念

我相信好的圖標(biāo)更像是路標(biāo)而不是插畫(huà)，應(yīng)該以清晰，簡(jiǎn)潔和令人難忘的方式呈現(xiàn)好一個(gè)想法。

Kare 自己對(duì)好圖標(biāo)的定義繼承了保羅·蘭德對(duì)一個(gè)好 logo 的定義（可參考 上一篇文章 中有關(guān)保羅·蘭德的介紹）。

保羅·蘭德不僅是 Kare 的偶像，二人還實(shí)實(shí)在在有過(guò)合作。1985 年，Kare 跟隨喬布斯離開(kāi) Apple 并成為了 NeXT 的創(chuàng)意總監(jiān)，正是由她牽線（最強(qiáng)事業(yè)粉），喬布斯請(qǐng)到了保羅·蘭德來(lái)負(fù)責(zé) NeXT 的品牌設(shè)計(jì)。

作為后輩，Kare 經(jīng)常在保羅·蘭德的書(shū)中尋求設(shè)計(jì)建議。

而她給自己后輩的建議除了「思考圖像含義，不止關(guān)注外觀」，還有自己一直堅(jiān)持的設(shè)計(jì)原則：

1. 簡(jiǎn)單、清晰和美觀
2. 重視上下文和隱喻
3. 易于理解、便于記憶
4. 確保一致性和可讀性
5. 人性化

如果你去查閱 Apple 最新的用戶界面指南，圖標(biāo)那一欄第一句話就是：

作為圖形資源的有效圖標(biāo)能以用戶立即理解的方式表達(dá)單個(gè)概念。

Apple 的圖標(biāo)設(shè)計(jì)規(guī)范關(guān)鍵詞包括：隱喻、易于識(shí)別、簡(jiǎn)單、快速易讀、與用戶建立情感連接、趣味性、不輕易更改應(yīng)用圖標(biāo)等。

而 Google 的圖標(biāo)設(shè)計(jì)規(guī)范則提供了更為細(xì)致的圖示說(shuō)明，除了一貫的更強(qiáng)調(diào)基準(zhǔn)，關(guān)鍵詞也大同小異：簡(jiǎn)單、友好、保持一致性和可讀性、遵循基準(zhǔn)尺寸但不缺少特征等。

Kare 在職業(yè)生涯中一直恪守設(shè)計(jì)原則，致力于 GUI 的可讀性，她不僅為 Apple 提供了用戶體驗(yàn)設(shè)計(jì)范本，同時(shí)也定義了行業(yè)標(biāo)準(zhǔn)。

Susan Kare 是圖標(biāo)的設(shè)計(jì)者，而她本身也是一枚閃亮的 icon。

六、圖標(biāo)設(shè)計(jì)當(dāng)下

到這里，「知往」的部分就結(jié)束了，該「鑒今」了，我們就從導(dǎo)語(yǔ)拋出的三個(gè)問(wèn)題入手，聊聊圖標(biāo)設(shè)計(jì)的現(xiàn)狀。

1. 圖標(biāo)設(shè)計(jì)有沒(méi)有獨(dú)立價(jià)值？

先來(lái)看看圖標(biāo)的定義：

圖標(biāo)（icon），GUI 中的圖形符號(hào)，其形式即含義，代表應(yīng)用程序、對(duì)象和功能。

比起 logo 的定義，會(huì)覺(jué)得圖標(biāo)的壓力小很多。但也正因如此，圖標(biāo)設(shè)計(jì)的世界更加肆無(wú)忌憚。

如今的圖標(biāo)分類有大的應(yīng)用圖標(biāo)（側(cè)重品牌性），有小的功能圖標(biāo)（側(cè)重功能性），有系統(tǒng)級(jí)圖標(biāo)，有可定制圖標(biāo)，有可交互的，有純展示的。

風(fēng)格更是五花八門，在 Figma 社區(qū)搜一下：扁平的、擬物的、線性的、填充的、單色的、雙調(diào)的、2.5D 的、3D 的、靜置的、動(dòng)態(tài)的……總之，你想到想不到的圖標(biāo)它都有，而且很多很多。

因?yàn)?GUI 的系統(tǒng)通用特性，大的模塊不太可能做得花里胡哨，但怎么在視覺(jué)上體現(xiàn)與其他應(yīng)用的差異性呢？那就得是在圖形符號(hào)——圖標(biāo)上做文章。

那么圖標(biāo)又是否可以脫離整套 GUI 的范疇，單獨(dú)作為一個(gè)設(shè)計(jì)門類具備獨(dú)立價(jià)值呢？就像同為圖形符號(hào)的 logo 設(shè)計(jì)。

如果一個(gè)設(shè)計(jì)師在圖標(biāo)設(shè)計(jì)上有所建樹(shù)，是否也值得被書(shū)寫(xiě)，值得載入互聯(lián)網(wǎng)設(shè)計(jì)史冊(cè)呢？

放眼 GUI 設(shè)計(jì)史，像素圖標(biāo)的標(biāo)桿有本文所講的 Susan Kare，擬物風(fēng)盛行時(shí)期的代表有 David Lanham、Everaldo Coelho、Jon Hicks，包括國(guó)內(nèi)當(dāng)年的錘子科技的 Paco 也是把擬物圖標(biāo)做到極致。

但歷史總歸是歷史，隨著技術(shù)的不斷發(fā)展，設(shè)備的升級(jí)換代，設(shè)計(jì)風(fēng)格的日新月異，但圖標(biāo)設(shè)計(jì)的獨(dú)立價(jià)值卻日漸落寞。

如今主打圖標(biāo)的優(yōu)秀設(shè)計(jì)師也不是沒(méi)有，像 Michael Flarup、Bonnie Kate、Helena Zhang、Gavin Nelson，但影響力不可同日而語(yǔ)。

其實(shí)，除了時(shí)代演進(jìn)因素，還有關(guān)鍵的兩點(diǎn)原因：

2. 圖標(biāo)設(shè)計(jì)到底有沒(méi)有技術(shù)含量？

所謂的技術(shù)含量，既包括審美、也包括技能，技能又包括分析能力和作圖能力。

技能是可以練就的，審美也可以培養(yǎng)，藝術(shù)天賦則強(qiáng)求不得。

不過(guò)現(xiàn)實(shí)來(lái)看，圖標(biāo)設(shè)計(jì)要比 logo 更依賴技能，因?yàn)樗鼮楫a(chǎn)品功能需求服務(wù)，要遵循一定規(guī)范體現(xiàn)操作邏輯。

而且圖標(biāo)作圖也有統(tǒng)一標(biāo)準(zhǔn)和模式，軟件功能強(qiáng)大到恨不得讓你用意念就可以做設(shè)計(jì)，再不濟(jì)還有大把現(xiàn)成的圖標(biāo)庫(kù)和模版可供使用。

有強(qiáng)大的互聯(lián)網(wǎng)資源加持，非科班出身普遍自學(xué)一下做個(gè)圖標(biāo)都很容易，但設(shè)計(jì) logo 就沒(méi)這么簡(jiǎn)單，所以圖標(biāo)設(shè)計(jì)門檻并不高，甚至可以說(shuō)沒(méi)有門檻。

再者，體現(xiàn)技藝的設(shè)計(jì)是需要一定時(shí)間和自由去打磨的。

天下武功唯快不破，現(xiàn)在應(yīng)用產(chǎn)品更新迭代快，發(fā)版恨不得三天一小版，七天一大版，哪里有時(shí)間給你用匠心慢慢去打磨那小小的圖標(biāo)？

更別說(shuō)現(xiàn)在的設(shè)計(jì)師不光要關(guān)注視覺(jué)呈現(xiàn)，還要思考頁(yè)面邏輯，設(shè)計(jì)大小界面、控件、動(dòng)效甚至運(yùn)營(yíng)圖，還要適配設(shè)備出不同尺寸，還要跟進(jìn)走查與開(kāi)發(fā)人員極限拉扯，就算這些你都做完了，還有日?qǐng)?bào)周報(bào)季度報(bào)排隊(duì)等著你，「匠心」從何生發(fā)？

在互聯(lián)網(wǎng)中大廠，設(shè)計(jì)師也一樣是產(chǎn)品流水線上的一環(huán)，如果說(shuō)頭幾年，設(shè)計(jì)師還可以占領(lǐng)審美高地標(biāo)榜自己的設(shè)計(jì)特權(quán)（曾呆過(guò)某個(gè)神仙團(tuán)隊(duì)，就有諸如設(shè)計(jì)師不加班、需求不確定不開(kāi)工、改需求就等新排期、非設(shè)計(jì)人員不得干涉設(shè)計(jì)決策等文化），那么如今的產(chǎn)品團(tuán)隊(duì)，很多甚至都沒(méi)有「設(shè)計(jì)部門」這一說(shuō)了。

小團(tuán)隊(duì)如果資金充足，會(huì)給設(shè)計(jì)師時(shí)間去自由打磨設(shè)計(jì)細(xì)節(jié)不斷精進(jìn)，但前提是得資金充足；而獨(dú)立設(shè)計(jì)師也并不完全自由，真正自由的都是少數(shù)，不管在不在職。

所以，圖標(biāo)設(shè)計(jì)到底還有沒(méi)有技術(shù)含量？

以前當(dāng)然有，現(xiàn)在……有是有，但上限極高，曲高和寡；下限極低，門檻沒(méi)得。

如今再要講究圖標(biāo)的技術(shù)含量，拋去炫技之嫌，那就只能算是一種精致的復(fù)古情懷，跟李子柒的視頻差不多一個(gè)意思。

3. 圖標(biāo)設(shè)計(jì)有沒(méi)有原創(chuàng)這一說(shuō)？

是設(shè)計(jì)就有原創(chuàng)這一說(shuō)，但圖標(biāo)設(shè)計(jì)，我覺(jué)得不能簡(jiǎn)單回答有還是沒(méi)有。

大家都知道 logo 是需要注冊(cè)商標(biāo)的，應(yīng)用圖標(biāo)（app icon）作為一種新式 logo 也是需要注冊(cè)商標(biāo)。

那應(yīng)用內(nèi)的那些圖標(biāo)呢？有沒(méi)有版權(quán)受不受保護(hù)？

上一題也講了，有大把現(xiàn)成的圖標(biāo)庫(kù)可供免費(fèi)使用，尤其是系統(tǒng)級(jí)圖標(biāo)，往往都是拿來(lái)微調(diào)一下就可以直接切圖交付了。

圖形方面，搜索圖標(biāo)用放大鏡，下載圖標(biāo)用箭頭，刪除就是垃圾桶，過(guò)往這些約定俗成的東西沒(méi)有原不原創(chuàng)一說(shuō)。圖形創(chuàng)新的出現(xiàn)是一定和功能創(chuàng)新綁定的，沒(méi)有新功能也就沒(méi)有新圖形。

至于設(shè)計(jì)風(fēng)格和手段，因?yàn)槠脚_(tái) GUI 開(kāi)源，同類型應(yīng)用的圖標(biāo)同質(zhì)化是很正常的，真要較真，運(yùn)營(yíng)類比較個(gè)性化的圖標(biāo)還好，通用性圖標(biāo)就很難講原不原創(chuàng)，除非風(fēng)格極為特殊。

太陽(yáng)底下沒(méi)有新鮮事，無(wú)非是看你怎么利用和升華。收藏圖標(biāo)，你不用五角星非用三角形也不是不行，但無(wú)甚必要，總歸還是要讓用戶看得懂。

如果一個(gè)圖標(biāo)圖形已經(jīng)在用戶心里形成固定認(rèn)知，你非要去創(chuàng)新，那也不是不行，但還是沒(méi)有必要，教育用戶的成本是很高的。

尼爾森交互原則中有一條「雅各布定律」說(shuō)得很清楚，用戶希望你的產(chǎn)品跟別人的有相同的操作方法和使用模式。為什么？因?yàn)槭⌒?，不用再學(xué)新的。創(chuàng)新意味著改變，破壞習(xí)慣再重建習(xí)慣要冒很大的風(fēng)險(xiǎn)。

既然電商 app 都采用購(gòu)物車圖形作為加購(gòu)圖標(biāo)，那你就不要非創(chuàng)一個(gè)新式樣出來(lái)，以標(biāo)榜原創(chuàng)與不俗，除非是功能所需，不要為了設(shè)計(jì)而設(shè)計(jì)，把設(shè)計(jì)資源用在更有意義的事情上，不做無(wú)用功。

不必刻意原創(chuàng)，只要做到優(yōu)秀?！Ａ_·蘭德

不過(guò)，使用圖標(biāo)素材時(shí)還是要注意版權(quán)信息，沒(méi)有注明免費(fèi)可商就不要隨便拿來(lái)主義，畢竟這個(gè)世界上版權(quán)流氓網(wǎng)站也是存在的。

參考優(yōu)秀設(shè)計(jì)時(shí)也要懂得「拙工抄，巧匠盜」。而且，參考了就參考了，大家都是要參考的，好東西難道不要被學(xué)習(xí)嗎？只要不是無(wú)底線抄襲。

另外，做應(yīng)用設(shè)計(jì)，系統(tǒng)平臺(tái)提供的設(shè)計(jì)素材都可以直接用，但不要跨平臺(tái)用，不同平臺(tái)的交互形式不同，設(shè)計(jì)風(fēng)格不同，GUI 也不同。比如 Android 和 iOS 的原生分享圖標(biāo)就大不相同，若不想采用原生且不想分別適配，可以重新設(shè)計(jì)一款兩端通用圖標(biāo)，切不可張冠李戴。

Google Fonts 中包括的分享圖標(biāo)

其實(shí)圖標(biāo)設(shè)計(jì)當(dāng)下還有一種趨勢(shì)就是——卷特效。

這可能跟 B 端產(chǎn)品（尤其 SaaS 產(chǎn)品）的熱門有關(guān)系，而 B 端產(chǎn)品的強(qiáng)服務(wù)屬性決定了其本就缺乏視覺(jué)表現(xiàn)的空間，能大做文章的無(wú)非就是圖標(biāo)和一些運(yùn)營(yíng)圖，畢竟你也不能把表單做得花里胡哨。

但不管如何卷，終究還是別忘了 Susan Kare 那句老話「思考圖像含義，不止關(guān)注外觀」。

七、動(dòng)手時(shí)間到

到這，看也看了，聊也聊了，該活動(dòng)活動(dòng)手腳了。不忙的話，學(xué)著 Kare 的樣子，我們也來(lái)試試?yán)L制像素圖標(biāo)，刷一刷情懷。

先來(lái)做個(gè)圖標(biāo)試試手：

之前收到了一個(gè) Macintosh 的小充電頭，可可愛(ài)愛(ài)的，就畫(huà)它吧，也切題。

如果手頭沒(méi)有方格紙，拿尺子畫(huà)一下也可以，畫(huà)之前先用鉛筆打打草稿，心中有數(shù)了就可以開(kāi)始數(shù)格子。

我的紙面積不夠大，圖標(biāo)容器尺寸就按 4 點(diǎn)網(wǎng)格基準(zhǔn)框定 28 X 28 個(gè)格子，當(dāng)然格子越多可容納細(xì)節(jié)就越多。

圖形需要居中，先把內(nèi)邊距數(shù)出來(lái)，上下格子數(shù)量是 2，左右是 3，就定好了圖形的基本范圍。

線段占一個(gè)格子寬度，然后就邊數(shù)格子邊定出圖形各個(gè)組成部分的比例。

我會(huì)先把線段的每個(gè)接口先涂好，然后長(zhǎng)線段要縱向涂會(huì)更順手。

涂格子是一個(gè)很治愈的過(guò)程，可以拋除雜念，進(jìn)入心流。

手繪部分完成，直接在設(shè)計(jì)軟件里照樣復(fù)刻就可以了，在 28 X 28 像素的畫(huà)布上拉直線或者用鋼筆工具，亦或者用矩形直接拼接，一個(gè)格子就是 1 像素，畫(huà)就完了。

Kare 習(xí)慣使用 Illustrator 的網(wǎng)格工具操作，都一樣，總之手稿完成后，軟件里繪制就是分分鐘。

順手畫(huà)一個(gè)小水獺。

另外學(xué)著 Kare 給喬布斯畫(huà)像素肖像，我也畫(huà)了一幅 Kare 的小像以示致敬，不過(guò)我這是偷懶版。

首先處理照片，F(xiàn)igma 里可以使用 pixels、Ruri Pixel 這類位圖像素化的插件，更省事就用在線工具如 Pixelicious。

新建畫(huà)布并添加網(wǎng)格，把已像素化的位圖置于畫(huà)布底層，

給畫(huà)布添加網(wǎng)格，調(diào)整位圖比例，對(duì)齊單個(gè)像素塊尺寸，

新建一個(gè)正方形，尺寸對(duì)齊單個(gè)像素塊，批量復(fù)制以鋪滿畫(huà)面，然后整體調(diào)一下不透明度。

接著就像前面畫(huà)圖標(biāo)是涂格子，這里是要?jiǎng)h格子。

對(duì)照底層的位圖，刪除基本形之后，隱藏位圖層，后面就可以隨意發(fā)揮創(chuàng)意了，因?yàn)槊恳粋€(gè)像素塊都是可編輯的

繪制步驟圖

好了，復(fù)古情懷刷完，涂格子真挺解壓的，大家可以試試。

最后

寫(xiě)完這篇文章，也算了卻自己一樁心事，更希望大家看得愉快。

最后的最后， 附上 Susan Kare 關(guān)于「你聽(tīng)到過(guò)最好的建議是什么？」的回答，一點(diǎn)生活小哲學(xué)，分享給大家。

幸福的秘訣是降低預(yù)期！

我在成長(zhǎng)過(guò)程中被告知，你常常會(huì)在「行」之前先聽(tīng)到 100 個(gè)「不行」，所以每次聽(tīng)到「不行」，你離你的目標(biāo)其實(shí)就更近了一點(diǎn)。

……有時(shí)我會(huì)重復(fù)馬克·吐溫的話「拿不準(zhǔn)，就說(shuō)實(shí)話」。

就是這樣了，辛苦閱讀，下篇再見(jiàn)。

歡迎關(guān)注作者微信公眾號(hào)：「米可的體驗(yàn)筆記」