她創造了Mac 笑臉、像素字體、微軟紙牌…蘋果第一代設計師蘇珊‧卡雷(Susan Kare)有多厲害?

她創造了Mac 笑臉、像素字體、微軟紙牌…蘋果第一代設計師蘇珊‧卡雷(Susan Kare)有多厲害?

 

當年麥金塔發布的時候,賈伯斯從上衣口袋抽出磁碟片,插到電腦內後,大螢幕緊接著開始展示系統介面——有圖畫軟體,電子表格,象棋遊戲,不同的字體,甚至還有一張賈伯斯自己的像素圖。

1984 年麥金塔發佈會的展示片段

不像DOS文字介面,所有的介面都是直觀可見的,配合滑鼠,輕輕點按圖標,你也能迅速獲得想要的功能,無需再輸入枯燥的程式碼命令。賈伯斯說:圖形介面,代表的是電腦產業的未來。

Mac 笑臉、像素字體、微軟紙牌…蘋果第一代設計師有多厲害?

今天我們要聊的,並不是電腦本身、或是賈伯斯,而是這些介面、圖標和字體的幕後設計者:蘇珊‧卡雷(Susan Kare)。在蘋果內部,她也被稱為「圖標之母」。

微笑的 Mac

很多人以為,麥金塔電腦的發布,開啟了電腦圖形介面的時代,可事實上在 1983 年,從全錄「偷師」歸來的賈伯斯,就已經將部分成果應用在了 Apple Lisa 上。

Mac 笑臉、像素字體、微軟紙牌…蘋果第一代設計師有多厲害?

只不過,當時 Lisa 的系統介面仍十分簡陋,沒有給大眾留下深刻印象,加上有不少設計都借鑑自全錄,甚至連字體都不是自家的,顯然也不符合賈伯斯想要追求的結果。

Mac 笑臉、像素字體、微軟紙牌…蘋果第一代設計師有多厲害?

為了打破現狀,麥金塔開發小組的核心成員安迪‧赫茲菲爾德(Andy Hertzfeld)開始尋求外援,此時他想起了自己的高中同學,也就是蘇珊‧卡雷。

此時卡雷剛從紐約大學畢業沒多久,因為她主修的是美術,擁有一定的平面設計經驗,所以赫茲菲爾德希望她入夥,為麥金塔電腦做一些系統視覺設計。

Mac 笑臉、像素字體、微軟紙牌…蘋果第一代設計師有多厲害?

作為回報,赫茲菲爾德會贈送她一台價值兩千美元的 Apple II 電腦,卡雷隨即答應下來,表示願意以兼職身份參與到蘋果計畫中。

在那個時代,電腦圖形設計尚未成體系,就連蘋果,都還沒開發出完整一套設計工具。迫於無奈,赫茲菲爾德只能先讓卡雷買一本有網格的記事本,把圖標手繪出來,再讓工程師轉化為點陣圖標。

Mac 笑臉、像素字體、微軟紙牌…蘋果第一代設計師有多厲害?

第一代麥金塔電腦系統中的「剪切」、「粘貼」功能,就是在這些網格紙上誕生的,它們分別對應了剪刀手和手指圖案,而毛刷,則用在了蘋果的繪圖軟體 MacPaint 中。

卡雷在網格紙上畫好的圖標,以及對應的電子版

卡雷還手繪了一個炸彈的圖案,要是使用者在麥金塔電腦上看到它,就證明碰到「當機」了。

這張經典的麥金塔電腦宣傳圖,螢幕中的「hello」就是用 MacPaint 畫出來的

到了 1983 年,卡雷從兼職身份轉為蘋果正式員工,主要工作就是參與麥金塔人機介面的設計。此時蘋果的繪圖軟體 MacPaint 也已經製作完成,讓卡雷能夠直接在電腦上創作位圖圖標。

卡雷為蘋果設計的各種圖標。圖片來自:Susan Kare

許多經典圖標也是在這個階段出現的。比如用來放置刪除文件的廢紙簍,折了一角的紙張,用於提示「Loading」的手錶符號,以及蘋果鍵盤上的「Command」功能鍵。

現在 Mac 系統中某些圖標,仍延續了當年的樣式。圖片來自:Susan Kare Exhibition

雖然它們都只是些很簡單的像素圖,但勝在直觀,而且都帶有功能隱喻,讓人一看就懂,這也讓卡雷獲得了賈伯斯的認可。

至今,仍然有相當一部分圖標,可以在 Mac 系統中看到。

Mac 笑臉、像素字體、微軟紙牌…蘋果第一代設計師有多厲害?

但如果要說最為大眾所知的設計,應該就是這個自帶笑臉的「Happy Mac」了。

麥金塔電腦開機時會出現一個微笑的 Mac

當你啟動麥金塔電腦後,就能看到一個衝你微笑的電腦。

應用在「訪達」上的雙面人笑臉圖標,之後還迭代了數版,下圖則是畢加索的雙面人草稿畫

我們熟知的笑臉形象還有另一種樣式,那就是雙面人。有人說它的設計靈感來源於 DC 漫畫中的反派雙面人,但更多人認為,它其實是畢加索畫作的還原。

現在,我們仍然能在 macOS 系統中看到雙面人笑臉的存在。隨著時間的發展,Mac 笑臉以及其衍生表情,也沿用到了其它蘋果硬體上,逐漸演變成蘋果文化的具象呈現。

「Happy Mac」的反面便是「Sad Mac」,之後 iPod 也應用該設計

比如早期的 iPod 裡,假如播放器當機了,就會出現「Sad iPod」的圖案,類似於麥金塔電腦硬體故障後出現的「Sad Mac」。

Face ID 的笑臉也源自於當年的設計

今天我們接觸最多的,應該就是 Face ID 設定裡的辨識圖,它也採用了笑臉的輪廓。這也是迄今為止,最高解析度的「Happy Mac」笑臉圖了。

漂亮的字體和奶牛狗

賈伯斯還在里德學院時,曾旁聽過不少書法課,這也令他對各種襯線、無襯線字體鍾愛有加。

為了發揮出麥金塔電腦的圖形化介面,以及配合印表機印出精美的字型,卡雷應賈伯斯要求,為第一代麥金塔電腦設計了好幾種字體,讓使用者不再只有單一的選擇。

另外,卡雷還負責了系統的介面排版。得益於技術進步,麥金塔電腦上的字體字距不再是固定不變,而是能根據比例進行調整,這使得人們可以在螢幕上看到更清晰、自然的文字內容。

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 的小尺寸螢幕設計的,風格完全不同,但易讀性很高。

Mac 笑臉、像素字體、微軟紙牌…蘋果第一代設計師有多厲害?

可以說,各種漂亮字體的出現,為麥金塔電腦的圖形介面增添了別樣的風情。你既可以選擇代表現代主義的 Chicago,也可以回歸到古典雅緻的 New York 之上,不同人都可以有不同的選擇。

當年的麥金塔宣傳資料中,也重點介紹了直觀的文字編輯以及打印功能更重要的是,這些字體還可以由蘋果的第一台雷射印表機 LaserWriter 列印出來,這意味著使用者可以直接在麥金塔電腦上完成文字錄入、編輯和列印的全套工作,快速製作出實體化的印刷品。

這一工作流的實現,也推動了之後桌面出版產業的發展。

雜錦字體 Cairo,設計之初只是為了裝飾用

另外,在卡雷設計過的字體中,還誕生過一隻「吉祥物」。

事情起因自蘋果工程師安妮特‧瓦格納(Annette Wagner),當時她正在設計麥金塔系統的列印程式,需要找一個預覽頁面的參照物,以幫助使用者正確辨識紙張的朝向。

小狗作為打印預覽時的參照物,以辨認紙張朝向

她從卡雷的 Cairo 字體中看中了一隻小狗,它本身是一種雜錦字型,由各種圖形符號組成。瓦格納把它從原來的 26×24 像素,放大至 41×32 像素,可這麼一改,也造成了之後的誤解。

有人就說,他在列印預覽頁面看到的並不是小狗,而是一頭奶牛,之後更是有人幫這只「半狗半牛」的生物起了個名字,叫「Clarus」。

Mac 笑臉、像素字體、微軟紙牌…蘋果第一代設計師有多厲害?

「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 原本不存在的兩張王牌,湊成完整的撲克,並推出實體版化的像素卡牌。

Mac 笑臉、像素字體、微軟紙牌…蘋果第一代設計師有多厲害?

很多設計師認為,蘇珊‧卡雷的設計是簡單、友好且極具親和力的。她為蘋果電腦樹立了新的形象,並賦予它人格化的一面,讓電腦從原本只有光標和枯燥程式碼的時代,轉變成為一個連 3 歲小孩都願意使用的產物。

Mac 笑臉、像素字體、微軟紙牌…蘋果第一代設計師有多厲害?

就像這個 Happy Mac 的圖案一樣。根據卡雷的回憶,她當時希望用一個微笑,為麥金塔注入積極、友好的形象,這也符合賈伯斯「製作外形友好的產品」的目標。

因為只有這樣,才能讓枯燥的電腦真正吸引到大眾使用者。

另一方面,卡雷簡潔的設計風格,也符合賈伯斯的美學要求。

她曾說過,一個出色的圖標,其實和交通標誌類似,只展示必要訊息即可,不需要加入多餘的細節。

據悉這個標誌發源於瑞典 Borgholm 城堡,它的俯視圖就是一個「⌘」的設計

Mac 上的「Command」功能鍵便是如此。卡雷從標誌辭典上找到了一個迴環符號「⌘」,印在了鍵位字母上方,而在一些北歐國家,比如瑞典,這個符號也指代了景點、名勝古蹟。

Mac 笑臉、像素字體、微軟紙牌…蘋果第一代設計師有多厲害?

2000 年,卡雷接受採訪時還聊到了圖標的「隱喻設計」。她認為一個優秀的圖標是可以被立即辨識的——比如「複製」、「撤銷」等抽象化的功能,即便使用者從未見過它,也可以從形象化的圖示來理解,這也使得她為麥金塔設計了一批具有高辨識度的圖標。

Mac 笑臉、像素字體、微軟紙牌…蘋果第一代設計師有多厲害?

如今,蘇珊‧卡雷在 Pinterest 擔任創意總監,同時也開設了個人網站,上面保留了她過往的大多數設計作品,而手稿則留在了紐約現代藝術博物館內。

Mac 笑臉、像素字體、微軟紙牌…蘋果第一代設計師有多厲害?

去年 5 月,她還幫一家拼圖公司 Magic Puzzle 設計了 logo,同樣也包含了笑臉的元素。

或許,卡雷的圖標設計就像是一個個小驚喜那樣,看似簡單,可一旦看過後,它就深深的烙印在了你的腦海裡。

希望在未來的日子裡,我們還能在蘋果產品上看到更多和「Happy Mac」一樣,簡約、友好型的設計。

ifanr
作者

ifanr依托於中國移動互聯網的發展大潮,用敏銳的觸覺、出色的內容,聚焦 TMT 領域資訊,迅速成為中國最為出色的新銳科技Blog 媒體。

使用 Facebook 留言
發表回應
謹慎發言,尊重彼此。按此展開留言規則