萬字干貨！一篇文章完整梳理圖標設計史

導語

上一篇文章 咱們聊了 logo 設計，這次聊聊圖標。

上期回顧：

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

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

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

知往鑒今，這篇文章就先一起來回顧下圖標設計往事，再論一論當下。

正文開始前，先提幾個問題：

1. 圖標設計有沒有獨立價值？
2. 圖標設計到底有沒有技術含量？
3. 圖標設計有沒有原創(chuàng)這一說？

這些問題是否有標準答案，我們就「知往」之后再說。

一、圖標設計溯源

圖形用戶界面，Graphical User Interface，簡稱 GUI。

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

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

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

而圖標（icon），則是 GUI 最基本的組成元素。

1. 圖標誕生

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

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

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

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

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

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

2. 圖標面市

時間來到 1983 年，這一年 Apple Lisa 被推出，這是世界上首款具備 GUI 并配備鼠標的商用計算機，界面包括圖標、彈出窗、下拉菜單，可以進行多任務操作。

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

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

在看到 GUI 演示的十分鐘內(nèi)，喬布斯就預見到——這就是未來！以后的每一臺計算機都會是這樣操作。

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

3. 圖標發(fā)展

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

Macintosh 的用戶界面不僅包括基礎 GUI，還配置了多種字體及幾款預置的應用程序，而視覺設計基本都被 Susan Kare（以下稱 Kare）包辦。

可以明顯看出，這時候的圖標更具設計美感，也更簡約，可識別性也更強。

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

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

二、Macintosh 的微笑

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

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

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

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

直白一點說，她需要設計出讓不懂計算機的人都可以輕易操作的可視化界面，甚至不需要使用說明手冊。

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

于是 Kare 買來格子本，開始手繪了第一批 Macintosh 圖標，包括「剪切」、「粘貼」和「筆刷」圖標等，原稿被 MoMA 藝術館收藏。

這些圖標的繪制靈感完全來自刺繡針腳、馬賽克、點陣畫技法，那時的 Kare 還不懂什么是像素藝術，但已冥冥中奠定了其日后成為「像素女王」的基礎。

1. Happy Mac

基于以上經(jīng)驗，Kare 開始思考 Macintosh 的 GUI 目標，她總結了三點：

1. 要讓自己的媽媽會用
2. 像街機游戲一樣好上手，不需要說明書
3. 體驗友好

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

那怎樣的設計才會具備通用性？

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

那這個形象應該是什么樣子？

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

Happy Mac，1984 年，Macintosh 啟動圖標

上圖模擬了最早的 Macintosh 啟動畫面，屏幕中心是經(jīng)典的 Happy Mac 圖標，Kare 用這個設計來給用戶傳達友好的第一印象，通過把 Macintosh 擬人化，來消除用戶對計算機/機器的先天恐懼。

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

Happy Mac 圖標也是后來 Mac 上 Finder 圖標的靈感所在，而 iPhone 上 Face ID 圖標靈感則基于前面二者。

2. 第一批 Mac 圖標

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

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

她在 1983～1984 年間為 Macintosh 設計了第一批像素圖標，比如「炸彈」代表出錯，「手表」是告知用戶等待加載，「軟盤」代表存取；她也優(yōu)化了諸如廢紙簍、文檔、箭頭光標等初代 Lisa 用過的圖標。

當然有時也不免用力過猛，比如那個「炸彈」圖標就曾讓用戶擔憂自己的 Mac 會爆炸。

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

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

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

3. Hello 字體圖標

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

4. MacPaint 應用程序

Lisa 推出時就已內(nèi)置了繪圖應用程序 MacSketch，GUI 由設計師 Bill Atkinson 負責，但圖標少，界面都還比較簡陋。

到了 Macintosh 版本，Kare 就對該應用進行了升級，設計了應用圖標，優(yōu)化了界面，設計了諸如「套索」、「抓手」和「油漆桶」等工具圖標，這些圖標也一直沿用至今，幾乎沒有過大的變化。

MacPaint 應用界面和圖標

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

5. Chicago 字體

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

Susan Kare 為 Macintosh 設計的所有字體

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

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

Chicago 字體及應用

Kare 還設計了 一款圖形字體——Cairo，靈感來自古埃及象形文字。細節(jié)豐富，仿若古早版 emoji 或者 SF 符號。

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

6. 與喬布斯

喬布斯對字體設計極為重視，Kare 說她應對喬布斯的苛刻時有一個秘訣：不要問他「你喜歡這個設計嗎？」，要提供多個方案給到他，然后問「你喜歡哪一個？」。

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

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

只不過幾年后，Kare 還是選擇離開了喬布斯，成為獨立設計師。

她在 Apple 工作的時間并不算太長，但卻給 Apple 提供了第一個完整的視覺語言，奠定了其 GUI 設計基礎。

三、拙工抄，巧匠盜

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

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

到底抄沒抄襲？法律上并沒有認定。

Apple 當年起訴微軟 GUI 侵權時，施樂也起訴了 Apple，只是最終都沒能勝訴，眾多理由中有一條大概是當時法院認定：想法本身不受版權保護，只要沒有復制源代碼就不算侵權。

這段亂斗最終讓各家都更加重視專利和版權，甚至一定程度上也對 GUI 開源起到正向作用。。

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

設計師不是藝術家，能為「巧匠」已屬高階，我們不妨來看看高階的圖標設計是怎么個「盜」法。

1. Command 符號

Command 命令最初的占位符就是復用 Apple 的 logo，點開命令菜單欄就會看到一列蘋果，但喬布斯覺得 logo 獨一無二，不應該在產(chǎn)品中被濫用，所以需要再設計一個專屬符號。

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

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

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

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

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

2. 警示圖標

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

但圖標里的人臉剪影圖形，跟上世紀 20 年代初包豪斯藝術與工藝學院的 logo 很相似。

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

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

3. Finder 圖標

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

真正的設計者是 AlbenFaris 設計公司的 Lauralee Alben 和 Jim Faris，他們在上世紀 90 年代初為 Macintosh 的操作系統(tǒng)設計了這個 logo，幾經(jīng)演變成為 Finder 的經(jīng)典圖標。

前文講過，它的靈感來自 Kare 設計的 Happy Mac 圖標，雙面人的設計（靈感是不是也來自蝙蝠俠？）代表用戶的臉和 Macintosh 結合，突出個人對計算機的掌控權力。

因為喬布斯本人是畢加索的擁躉，Apple 的產(chǎn)品設計本來就自帶藝術氣質(zhì)，所以人們普遍猜測該經(jīng)典設計受到畢加索的畫作影響。

所以，盜亦有道，會「盜」也是設計師的必修課之一。

四、獨立設計生涯

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

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

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

1989 年為 IBM 計算機操作系統(tǒng) OS/2 設計的圖標。

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

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

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

2012 年為 MetaWatch 設計 GUI。

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

2019 年她被授予美國國家設計獎終身成就獎。

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

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

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

五、圖標設計理念

我相信好的圖標更像是路標而不是插畫，應該以清晰，簡潔和令人難忘的方式呈現(xiàn)好一個想法。

Kare 自己對好圖標的定義繼承了保羅·蘭德對一個好 logo 的定義（可參考 上一篇文章 中有關保羅·蘭德的介紹）。

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

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

而她給自己后輩的建議除了「思考圖像含義，不止關注外觀」，還有自己一直堅持的設計原則：

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

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

作為圖形資源的有效圖標能以用戶立即理解的方式表達單個概念。

Apple 的圖標設計規(guī)范關鍵詞包括：隱喻、易于識別、簡單、快速易讀、與用戶建立情感連接、趣味性、不輕易更改應用圖標等。

而 Google 的圖標設計規(guī)范則提供了更為細致的圖示說明，除了一貫的更強調(diào)基準，關鍵詞也大同小異：簡單、友好、保持一致性和可讀性、遵循基準尺寸但不缺少特征等。

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

Susan Kare 是圖標的設計者，而她本身也是一枚閃亮的 icon。

六、圖標設計當下

到這里，「知往」的部分就結束了，該「鑒今」了，我們就從導語拋出的三個問題入手，聊聊圖標設計的現(xiàn)狀。

1. 圖標設計有沒有獨立價值？

先來看看圖標的定義：

圖標（icon），GUI 中的圖形符號，其形式即含義，代表應用程序、對象和功能。

比起 logo 的定義，會覺得圖標的壓力小很多。但也正因如此，圖標設計的世界更加肆無忌憚。

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

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

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

那么圖標又是否可以脫離整套 GUI 的范疇，單獨作為一個設計門類具備獨立價值呢？就像同為圖形符號的 logo 設計。

如果一個設計師在圖標設計上有所建樹，是否也值得被書寫，值得載入互聯(lián)網(wǎng)設計史冊呢？

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

但歷史總歸是歷史，隨著技術的不斷發(fā)展，設備的升級換代，設計風格的日新月異，但圖標設計的獨立價值卻日漸落寞。

如今主打圖標的優(yōu)秀設計師也不是沒有，像 Michael Flarup、Bonnie Kate、Helena Zhang、Gavin Nelson，但影響力不可同日而語。

其實，除了時代演進因素，還有關鍵的兩點原因：

2. 圖標設計到底有沒有技術含量？

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

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

不過現(xiàn)實來看，圖標設計要比 logo 更依賴技能，因為它為產(chǎn)品功能需求服務，要遵循一定規(guī)范體現(xiàn)操作邏輯。

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

有強大的互聯(lián)網(wǎng)資源加持，非科班出身普遍自學一下做個圖標都很容易，但設計 logo 就沒這么簡單，所以圖標設計門檻并不高，甚至可以說沒有門檻。

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

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

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

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

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

所以，圖標設計到底還有沒有技術含量？

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

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

3. 圖標設計有沒有原創(chuàng)這一說？

是設計就有原創(chuàng)這一說，但圖標設計，我覺得不能簡單回答有還是沒有。

大家都知道 logo 是需要注冊商標的，應用圖標（app icon）作為一種新式 logo 也是需要注冊商標。

那應用內(nèi)的那些圖標呢？有沒有版權受不受保護？

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

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

至于設計風格和手段，因為平臺 GUI 開源，同類型應用的圖標同質(zhì)化是很正常的，真要較真，運營類比較個性化的圖標還好，通用性圖標就很難講原不原創(chuàng)，除非風格極為特殊。

太陽底下沒有新鮮事，無非是看你怎么利用和升華。收藏圖標，你不用五角星非用三角形也不是不行，但無甚必要，總歸還是要讓用戶看得懂。

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

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

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

不必刻意原創(chuàng)，只要做到優(yōu)秀。——保羅·蘭德

不過，使用圖標素材時還是要注意版權信息，沒有注明免費可商就不要隨便拿來主義，畢竟這個世界上版權流氓網(wǎng)站也是存在的。

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

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

Google Fonts 中包括的分享圖標

其實圖標設計當下還有一種趨勢就是——卷特效。

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

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

七、動手時間到

到這，看也看了，聊也聊了，該活動活動手腳了。不忙的話，學著 Kare 的樣子，我們也來試試繪制像素圖標，刷一刷情懷。

先來做個圖標試試手：

之前收到了一個 Macintosh 的小充電頭，可可愛愛的，就畫它吧，也切題。

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

我的紙面積不夠大，圖標容器尺寸就按 4 點網(wǎng)格基準框定 28 X 28 個格子，當然格子越多可容納細節(jié)就越多。

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

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

我會先把線段的每個接口先涂好，然后長線段要縱向涂會更順手。

涂格子是一個很治愈的過程，可以拋除雜念，進入心流。

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

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

順手畫一個小水獺。

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

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

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

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

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

接著就像前面畫圖標是涂格子，這里是要刪格子。

對照底層的位圖，刪除基本形之后，隱藏位圖層，后面就可以隨意發(fā)揮創(chuàng)意了，因為每一個像素塊都是可編輯的

繪制步驟圖

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

最后

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

最后的最后， 附上 Susan Kare 關于「你聽到過最好的建議是什么？」的回答，一點生活小哲學，分享給大家。

幸福的秘訣是降低預期！

我在成長過程中被告知，你常常會在「行」之前先聽到 100 個「不行」，所以每次聽到「不行」，你離你的目標其實就更近了一點。

……有時我會重復馬克·吐溫的話「拿不準，就說實話」。

就是這樣了，辛苦閱讀，下篇再見。

歡迎關注作者微信公眾號：「米可的體驗筆記」