Mac 笑臉、像素字體、微軟紙牌 蘋果第一代設計師有多厲害？
一台會跟你「Say Hello」的電腦，在 2021 年已不算新鮮，但在個人電腦還處於被代碼命令行支配的 1984 年，能夠在屏幕上看到一張笑臉，以及直觀的圖形文字，那絕對是個異類產品。
▲ 圖片來自：Anthony Boyd
蘋果的第一代麥金塔電腦，便是當時最典型的代表。
▲ 1984 年麥金塔發佈會的展示片段
回看當年的發佈會視頻，當喬布斯從上衣口袋抽出軟盤，插到電腦內後，大屏幕緊接着開始展示系統界面——有圖畫軟件，電子表格，象棋遊戲，不同的字體，甚至還有一張喬布斯自己的像素圖。
▲ 蘋果為麥金塔電腦製作的廣告
所有的界面都是直觀可見的，配合鼠標，輕輕點按圖標，你也能迅速獲得想要的功能，無需再輸入枯燥的代碼命令。
就像喬布斯所説的，圖形界面，能夠顯示位圖的屏幕，代表的是計算機產業的未來。
▲蘇珊·卡雷（Susan Kare），蘋果最早的設計師之一
但今天我們要聊的，並不是電腦本身，或是喬布斯往事，而是這些界面、圖標和字體的幕後設計者：蘇珊·卡雷（Susan Kare）。在蘋果內部，她也被稱為「圖標之母」。
微笑的 Mac
很多人以為，麥金塔電腦的發佈，開啓了計算機圖形界面的時代，可事實上在 1983 年，從施樂「偷師」歸來的喬布斯，就已經將部分成果應用在了 Apple Lisa 上。
▲ Lisa 是蘋果第一台採用了圖形界面的個人電腦
只不過，當時 Lisa 的系統界面仍十分簡陋，沒有給大眾留下深刻印象，加上有不少設計都借鑑自施樂，甚至連字體都不是自家的，顯然也不符合喬布斯想要追求的結果。
▲ 第一代麥金塔開發小組核心成員，後排左數第三位便是安迪·赫茨菲爾德
為了打破現狀，麥金塔開發小組的核心成員安迪·赫茨菲爾德（Andy Hertzfeld）開始尋求外援，此時他想起了自己的高中同學，也就是蘇珊·卡雷。
此時卡雷剛從紐約大學畢業沒多久，因為她主修的是美術，擁有一定的平面設計經驗，所以赫茨菲爾德希望她入夥，為麥金塔電腦做一些系統視覺設計。
▲ 1977 年上市的 Apple II 電腦
作為回報，赫茨菲爾德會贈送她一台價值兩千美元的 Apple II 電腦，卡雷隨即答應下來，表示願意以兼職身份參與到蘋果項目中。
在那個時代，計算機圖形設計尚未成體系，就連蘋果，都還沒開發出完整一套設計工具。迫於無奈，赫茨菲爾德只能先讓卡雷花幾美刀買一本網格筆記本，把圖標手繪出來，再讓工程師轉化為點陣圖標。
▲ 由於沒有專門的繪圖軟件，卡雷只能先在網格紙上畫圖標
第一代麥金塔電腦系統中的「剪切」、「粘貼」功能，就是在這些網格紙上誕生的，它們分別對應了剪刀手和手指圖案，而毛刷，則用在了蘋果的繪圖軟件 MacPaint 中。
▲ 卡雷在網格紙上畫好的圖標，以及對應的電子版
卡雷還手繪了一個炸彈的圖案，要是用户在麥金塔電腦上看到它，就證明碰到「死機」了。
▲ 這張經典的麥金塔電腦宣傳圖，屏幕中的「hello」就是用 MacPaint 畫出來的
到了 1983 年，卡雷從兼職身份轉為蘋果正式員工，主要工作就是參與麥金塔人機界面的設計。此時蘋果的繪圖軟件 MacPaint 也已經制作完成，讓卡雷能夠直接在電腦上創作位圖圖標。
▲ 卡雷為蘋果設計的各種圖標。圖片來自：Susan Kare
許多經典圖標也是在這個階段出現的。比如用來放置刪除文件的廢紙簍，折了一角的紙張，用於提示「Loading」的手錶符號，以及蘋果鍵盤上的「Command」功能鍵。
▲ 現在 Mac 系統中某些圖標，仍延續了當年的樣式。圖片來自：Susan Kare Exhibition
雖然它們都只是些很簡單的像素圖，但勝在直觀，而且都帶有功能隱喻，讓人一看就懂，這也讓卡雷獲得了喬布斯的認可。
至今，仍然有相當一部分圖標，可以在 Mac 系統中看到。
但如果要説最為大眾所知的設計，應該就是這個自帶笑臉的「Happy Mac」了。
▲ 麥金塔電腦開機時會出現一個微笑的 Mac
當你啓動麥金塔電腦後，就能看到一個衝你微笑的電腦。
▲ 應用在「訪達」上的雙面人笑臉圖標，之後還迭代了數版，下圖則是畢加索的雙面人草稿畫
我們熟知的笑臉形象還有另一種樣式，那就是雙面人。有人説它的設計靈感來源於 DC 漫畫中的反派雙面人，但更多人認為，它其實是畢加索畫作的還原。
現在，我們仍然能在 macOS 系統中的「訪達」圖標上，看到雙面人笑臉的存在。
隨着時間的發展，Mac 笑臉以及其衍生表情，也沿用到了其它蘋果硬件上，逐漸演變成蘋果文化的具象呈現。
▲「Happy Mac」的反面便是「Sad Mac」，之後 iPod 也應用該設計
比如早期的 iPod 裏，假如播放器死機了，就會出現「Sad iPod」的圖案，類似於麥金塔電腦硬件故障後出現的「Sad Mac」。
▲ Face ID 的笑臉也源自於當年的設計
今天我們接觸最多的，應該就是 Face ID 設置項裏的識別圖，它也採用了笑臉的輪廓。這也是迄今為止，最高清的「Happy Mac」笑臉圖了。
漂亮的字體和奶牛狗
喬布斯還在裏德學院時，曾旁聽過不少書法課，這也令他對各種襯線、無襯線字體鍾愛有加。
為了發揮出麥金塔電腦的圖形化界面，以及配合打印機印出精美的字型，卡雷應喬布斯要求，為第一代麥金塔電腦設計了好幾種字體，讓用户不再只有單一的選擇。
另外，卡雷還負責了系統的界面排版。得益於技術進步，麥金塔電腦上的字體字距不再是固定不變，而是能根據比例進行調整，這使得人們可以在屏幕上看到更清晰、自然的文字內容。
在字體開發期間，也發生過一段和命名有關的趣事。
最開始，卡雷其實是選用費城火車線上的車站，來為字體命名的，但之後喬布斯改成了世界知名的大城市，因為他覺得這樣「人們才能記住」。
▲ 蘇珊·卡雷為蘋果設計過的字體，以及在不同字號下的樣式
也因如此，我們現在看到的蘋果字體，名稱都是這個風格的：芝加哥（Chicago）、紐約（New York）、日內瓦（Geneva）、舊金山（San Francisco）和摩納哥（Monaco），而且每個字體都有不同的應用場景。
▲ 早期麥金塔電腦系統的控制面板，還有之後的 iPod，都應用了 Chicage 字體
比如在 1984 到 1997 年間，麥金塔電腦系統所有的界面和對話框，都使用了 Chicago 作為默認字體，之後它也出現在了 iPod 播放器上。
▲ Geneva 和 Chicago 字體對比，前者會更細一些，主要應用在文件夾名稱等較小的界面上
但在一些小號的界面上，比如説文件夾名稱，選用的則是 Geneva 字體，這是卡雷基於經典無襯線字體 Helvetica 修改而成的。
▲ 上圖為卡雷設計的舊版，下圖為 2019 年新版
New York，是麥金塔早期系統的點陣襯線字體。2019 年，蘋果還發布了一個同名的新版，供開發者在蘋果平台上免費使用，此舉也被視為向卡雷設計的字體致敬。
▲ Monaco 字體受到了很多程序員的喜愛
Monaco，則是一種無襯線等寬字體，開發者們應該比較熟悉。因為其清晰、高辨識度的字型，它曾是蘋果開發工具 Xcode 的默認字體，之後才被 Menlo 字體替換。
▲ 卡雷設計的舊版 San Francisco 字體
最後是 San Francisco，這是卡雷模擬剪貼風格設計的字體，就像是從報紙上把標題剪下來然後拼湊到一起，但它也在蘋果早期的內部宣傳單和海報中出現過。
▲ 為 Apple Watch 而生的新版 San Francisco 字體
2014 年，蘋果還發布了一個新版 San Francisco 字體，主要是針對 Apple Watch 的小尺寸屏幕設計的，風格完全不同，但易讀性很高。
可以説，各種漂亮字體的出現，為麥金塔電腦的圖形界面增添了別樣的風情。你既可以選擇代表現代主義的 Chicago，也可以迴歸到古典雅緻的 New York 之上，不同人都可以有不同的選擇。
▲ 當年的麥金塔宣傳資料中，也重點介紹了直觀的文本編輯以及打印功能
更重要的是，這些字體還可以由蘋果的第一台激光打印機 LaserWriter 打印出來，這意味着用户可以直接在麥金塔電腦上完成文本錄入、編輯和打印的全套工作，快速製作出實體化的印刷品。
這一工作流的實現，也推動了之後桌面出版產業的發展。
▲ 雜錦字體 Cairo，設計之初只是為了裝飾用
另外，在卡雷設計過的字體中，還誕生過一隻「吉祥物」。
事情起因自蘋果工程師安妮特·瓦格納（Annette Wagner），當時她正在設計麥金塔系統的打印程序，需要找一個預覽頁面的參照物，以幫助用户正確識別紙張的朝向。
▲ 小狗作為打印預覽時的參照物，以辨認紙張朝向
她從卡雷的 Cairo 字體中看中了一隻小狗，它本身是一種雜錦字型，由各種圖形符號組成。瓦格納把它從原來的 26×24 像素，放大至 41×32 像素，可這麼一改，也造成了之後的誤解。
有人就説，他在打印預覽頁面看到的並不是小狗，而是一頭奶牛，之後更是有人幫這隻「半狗半牛」的生物起了個名字，叫「Clarus」。
▲ 蘋果為「奶牛狗」製作的徽章，啤酒標籤，以及隱藏在代碼中的彩蛋，讓它成為了一個非官方的吉祥物
「Clarus, the Dogcow」的説法應運而生，並隨即成為了蘋果技術團隊的黑話之一。大家把它做成徽章，印在衣服上，或是當作聚會啤酒的標籤名。
▲ 圖片來自：512pixels
另外，在蘋果的舊總部還有過一座圖標花園，其中就豎立着一座奶牛狗的雕塑，可見當時蘋果員工對這隻奇特生物的喜愛。
友好型設計
1986 年，卡雷跟隨喬布斯離開蘋果，以創意總監的身份成為了 NeXT 公司的第 10 號員工。當時她向喬布斯引薦了另一位知名設計師保羅·蘭德（Paul Rand），為 NeXT 公司操刀設計了 logo。
▲ 在 NeXT 擔任創意總監的卡雷。圖片來源：Stanford University
再之後，喬布斯重返蘋果，可卡雷並沒有返回老東家。她發現，自己還是懷念畫像素圖，做設計的時光，隨後便決定成為一名獨立設計師，還創辦了自己的設計公司 Susan Kare Design。
▲ 卡雷為 Path 和 Facebook 設計的小貼圖
憑藉着多年在蘋果積累下的設計經驗，單飛後的卡雷收到了眾多設計委託，其中就包括了微軟、IBM 以及 FaceBook 等大公司的訂單。
其中最知名的，應該要數卡雷為 Windows 系統設計的紙牌卡面了。
▲ 最早的 Windows 紙牌遊戲，卡面就是卡雷設計的
1990 年，微軟開始在 Windows 3.0 系統中內置紙牌遊戲，而最早一批的紙牌卡面，便是由卡雷在一台 IBM PC 上繪製的。
那個時候，卡雷直接使用了 Windows 自帶的畫圖軟件，以及傳統的 16 色 VGA 調色盤，以像素化的形式在屏幕上還原出現實世界的紙牌。
卡雷説，直到今天，這些卡面的源文件還保存在一張 5.25 英寸的軟盤中。
▲ 實體化的像素風格紙牌
在微軟紙牌誕生 25 週年的節點，卡雷還和設計品牌 Areaware 合作，補全了 Windows 原本不存在的兩張王牌，湊成完整的撲克，並推出實體版化的像素卡牌。
很多設計師認為，蘇珊·卡雷的設計是簡單、友好且極具親和力的。她為蘋果電腦樹立了新的形象，並賦予它人格化的一面，讓計算機從原本只有光標和枯燥代碼的時代，轉變成為一個連 3 歲小孩都願意使用的產物。
就像這個 Happy Mac 的圖案一樣。根據卡雷的回憶，她當時希望用一個微笑，為麥金塔注入積極、友好的形象，這也符合喬布斯「製作外形友好的產品」的目標。
因為只有這樣，才能讓枯燥的計算機真正吸引到大眾用户。
另一方面，卡雷簡潔的設計風格，也符合喬布斯的美學要求。
她曾説過，一個出色的圖標，其實和交通標誌類似，只展示必要信息即可，不需要加入多餘的細節。
▲ 據悉這個標識發源於瑞典 Borgholm 城堡，它的俯視圖就是一個「⌘」的設計
Mac 上的「Command」功能鍵便是如此。卡雷從標誌辭典上找到了一個迴環符號「⌘」，印在了鍵位字母上方，而在一些北歐國家，比如瑞典，這個符號也指代了景點、名勝古蹟。
2000 年，卡雷接受採訪時還聊到了圖標的「隱喻設計」。她認為一個優秀的圖標是可以被立即識別的——比如「複製」、「撤銷」等抽象化的功能，即便用户從未見過它，也可以從形象化的圖示來理解，這也使得她為麥金塔設計了一批具有高辨識度的圖標。
如今，蘇珊·卡雷在 Pinterest 擔任創意總監，同時也開設了個人網站，上面保留了她過往的大多數設計作品，而手稿則留在了紐約現代藝術博物館內。
去年 5 月，她還幫一家拼圖公司 Magic Puzzle 設計了 logo，同樣也包含了笑臉的元素。
或許，卡雷的圖標設計就像是一個個小驚喜那樣，看似簡單，可一旦看過後，它就深深的烙印在了你的腦海裏。
希望在未來的日子裏，我們還能在蘋果產品上看到更多和「Happy Mac」一樣，簡約、友好型的設計。
資料來源：愛範兒（ifanr）