Mac 笑臉、字體、微軟接龍,Apple 初代設計師蘇珊·凱爾與她創造的點陣圖風格

作者 | 發布日期 2021 年 01 月 17 日 0:00 | 分類 Apple , 數位內容 , 科技趣聞 line share follow us in feedly line share
Mac 笑臉、字體、微軟接龍,Apple 初代設計師蘇珊·凱爾與她創造的點陣圖風格


一台會跟你「Say Hello」的電腦,在 2021 年已不算新鮮,但在個人電腦還處於被程式碼命令行支配的 1984 年,能夠在螢幕上看到一張笑臉,以及直觀的圖形文字,那絕對是個異類產品。

蘋果的第一代麥金塔電腦,便是當時最典型的代表。

▲ 1984 年麥金塔發布會的展示片段。

回看當年的發布會影片,當賈伯斯從上衣口袋抽出磁片,插到電腦內後,大螢幕緊接著開始展示系統介面──有圖畫軟體、電子表格、象棋遊戲、不同的字體,甚至還有一張賈伯斯自己的點陣圖。

▲ 蘋果為麥金塔電腦製作的廣告。

所有的介面都是直觀可見的,配合滑鼠,輕輕點按圖示,你也能迅速獲得想要的功能,無需再輸入枯燥的程式碼命令。

就像賈伯斯所說的,圖形介面,能夠顯示點陣圖的螢幕,代表的是電腦產業的未來。

▲蘇珊·凱爾(Susan Kare),蘋果最早的設計師之一。

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

微笑的 Mac

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

▲ Lisa 是蘋果第一台採用了圖形介面的個人電腦。

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

▲ 第一代麥金塔開發小組核心成員,後排左數第三位便是安迪·赫茨菲爾德。

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

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

▲ 1977 年上市的 Apple II 電腦。

做為回報,赫茨菲爾德會贈送她一台價值兩千美元的 Apple II 電腦,凱爾隨即答應下來,表示願意以兼職身分參與到蘋果專案中。

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

▲ 由於沒有專門的繪圖軟體,凱爾只能先在網格紙上畫圖示。

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

▲ 凱爾在網格紙上畫好的圖示,以及對應的電子版。

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

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

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

▲ 凱爾為蘋果設計的各種圖示。(Source:Susan Kare

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

▲ 現在 Mac 系統中某些圖示,仍延續了當年的樣式。(Source:Susan Kare Exhibition

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

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

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

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

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

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

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

現在,我們仍然能在 macOS 系統中的「Finder」圖示上,看到雙面人笑臉的存在。

隨著時間的發展,Mac 笑臉以及其衍生表情,也沿用到了其他蘋果硬體上,逐漸演變成蘋果文化的具象呈現。

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

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

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

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

▲ 蘇珊·凱爾(Susan Kare)繪製的賈伯斯的點陣圖大頭像,那一抹微笑可說是惟妙惟肖。

漂亮的字體和乳牛狗

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

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

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

在字體開發期間,也發生過一段和命名有關的趣事。

最開始,凱爾其實是選用費城火車線上的車站,來為字體命名的,但之後賈伯斯改成了世界知名的大城市,因為他覺得這樣「人們才能記住」。

▲ 蘇珊·凱爾為蘋果設計過的字體,以及在不同字號下的樣式。

也因如此,我們現在看到的蘋果字體,名稱都是這個風格的:芝加哥(Chicago)、紐約(New York)、日內瓦(Geneva)、舊金山(San Francisco)和摩納哥(Monaco),而且每個字體都有不同的應用場景。

▲ 早期麥金塔電腦系統的控制面板,還有之後的 iPod,都應用了 Chicage 字體。

比如在 1984 到 1997 年間,麥金塔電腦系統所有的介面和對話框,都使用了 Chicago 做為預設f字體,之後它也出現在了 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」的說法應運而生,並隨即成為了蘋果技術團隊的黑話之一。大家把它做成徽章,印在衣服上,或是當作聚會啤酒的標籤名。

另外,在蘋果的舊總部還有過一座圖示花園,其中就豎立著一座乳牛狗的雕塑,可見當時蘋果員工對這只奇特生物的喜愛。

友好型設計

1986 年,凱爾跟隨賈伯斯離開蘋果,以創意總監的身分成為了 NeXT 公司的第 10 號員工。當時她向賈伯斯引薦了另一位知名設計師保羅·蘭德(Paul Rand),為 NeXT 公司操刀設計了 LOGO。

▲ 在 NeXT 擔任創意總監的凱爾。(Source: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」一樣,簡約、友好型的設計。

(本文由 愛范兒 授權轉載;首圖來源:Flickr/Nobuyuki Hayashi CC BY 2.0)