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

2021-01-15 新浪科技

來源:愛範兒

新品拿到手軟,好物天天推薦,新浪眾測等你加入。在這裡,你也能成為數碼大V;在這裡,產品好壞你說了算。【玩轉新奇好物,來新浪眾測】

一臺會跟你『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』一樣,簡約、友好型的設計。

相關焦點

  • 蘋果Mac超實用軟體,讓你的MAC效率倍增
    眾所周知,mac系統跟windowns系統的一些軟體和一些操作習慣大大不同。相信很多第一次接觸蘋果電腦小夥伴們一定覺得非常的不順手,甚至有些夥伴還在猶豫安裝哪些軟體。今天macdown小編為大家推薦一些mac必裝軟體,希望在以後的工作中以及日常操作上對大家有所幫助!言歸正傳,進入正題!
  • 微軟《紙牌》迎來30周年紀念
    有些遊戲的火熱程度是無法用銷量計算的,因為微軟Windows自帶的幾款遊戲是每個Windows用戶都躲不掉的經典。今天就是微軟《紙牌》(Solitaire)的30周年生日。微軟《紙牌》最初內置於Windows 3.0,從1990年到現在剛好30年,象徵著PC遊戲最有代表性的歷史。微軟表示,雖然《紙牌》已經有30歲高齡,但並不妨礙3500萬玩家時不時拿出來解悶。去年,微軟《紙牌》被選入「世界電子遊戲名人堂」,成為一段歷史的見證。同時獲此殊榮的還有《馬裡奧賽車》和《真人快打》。
  • MAC版藝術字體插件 Art Text for mac 使用指南
    每一代蘋果作業系統的更新都會在視覺上進修改和優化,追求極致美學的蘋果自然也不會放過字體這一重要的傳遞工具。有良好清晰度和識別度的字體有利於人們從背景中獲得信息。今天世紀man給大家推薦一款MAC端的藝術字體插件軟體——Art Text for mac。
  • 今天是Windows《紙牌》的30歲生日
    因此,Wes儘管是Windows紙牌的實際開發者,這麼多年來卻從沒拿到過一分錢。作為無薪的補償,微軟給了當時的他一臺IBM TX。 在CNN的訪談裡,Wes還提到了微軟把Windows紙牌加進系統附件裡的目的:拋開娛樂的部分,紙牌其實承擔了利用遊戲訓練用戶使用滑鼠的目的。
  • 「微軟雅黑」字體侵權你中招了嗎?索賠150萬
    大家都知道,微軟雅黑有「萬能字體」的稱號,兼容性強,可讀性又很好,很多人以為是微軟系統自帶的,認為在使用時沒有風險。實際上,「微軟雅黑」是由「北大方正電子有限公司」設計開發的字體作品,方正公司通過協議的形式授權微軟公司使用。
  • XS的顯示內容沒有XR多?蘋果手機的邏輯解析度,到底是什麼意思?
    這樣說好像比較枯燥,用講故事的形式來打個比方吧故事的主人公是蘋果和微軟。iPhone取得了巨大成功之後,微軟也在App Store上架了iOS版的outlook。此時市面上的iPhone是3GS,解析度為320×480,那麼微軟寫的軟體顯示的時候就是寬度320個像素,長度480個像素,在iPhone3GS上面是滿屏幕運行的,效果很好。
  • 蘋果M1 Mac 竟然可以運行 Win10,想不想試試?
    運行 MacOS 的蘋果 M1 的 Geekbench 5 跑分: 單核 1737; 多核 7549 ; 單核 1288; 多核 5449;
  • 如何繞過版權字體的坑?
    4、實習生用微軟雅黑致公司損失千萬  5、《我是歌手3》因使用造字工房5款字體,而被要求支付15萬使用費。—前方有坑嗎?· 站酷高端黑:  是2014年聖誕發布的第一款由站酷冠名的公益字體,字體設計師胡曉波、劉兵克在站酷網發起「漢字百人舞」的徵集設計師集體造字,前後參與設計師近百人。
  • 字體字體 ! iOS系統裡的老炮們!
    小編逛了逛iOS7的英文字體列表,就像逛了趟怡紅院,再也不想用中文黑體啦!大家都知道,平面設計裡,除了方方正正的漢字(漢子),英文和數字(妹子)就像圖形一樣,鶯鶯燕燕地支撐著畫面,蘋果官網發布的iOS7字體列表一共列出了200多款字體(iOS8字體列表尚未發布)!收錄了一些經久不衰的經典英文字體,讓我們來看看這些老炮吧!哦哦哦翻滾吧!老炮!!老炮!!1.
  • 「 像素 」發明者Russell A. Kirsch病逝,他更是第一代電腦締造者
    但是,它把新聞圖片從倫敦傳到紐約的時間從一周多減少到了3個小時,這維護了新聞的尊嚴。 一直到1950年,美國麻省理工學院製造的第一臺配有圖形顯示器的電子計算機——旋風I號(Whirlwind I)誕生後,數字圖像才和電腦扯上關係。
  • APP界面的字體規範!
    常規字體界面中的每一個文字、每一個字符都很重要。好的文本就是好的設計,文本是最根本的界面,需要我們設計師來塑造和打磨這些信息。字體之間最大的差異並不在於有無襯線,而在於字體與字體之間形體的差異。Times New Roman是默認的s帶襯線字體,中文字體的話,是宋體、仿宋之類的字體。②無襯線字體。默認的sans serl字體,中文字體中微軟雅黑、黑體等都是這類字體。③等寬字體。這個字體裡面的每個字母都有相同的寬度,通常用於顯示程序代碼等。
  • 教你如何在Mac或Windows電腦上使用微軟重新設計的Edge瀏覽器
    微軟的IE和Edge瀏覽器分別位居第三和第四位,前者佔據了7.42%的市場份額,後者則佔全球網頁瀏覽器使用量的5.65%。 想想這有多瘋狂。微軟的Windows作業系統為全球87.37%的桌上型電腦和筆記本電腦提供支持,所有這些機器上都預裝了微軟網絡瀏覽器中的一個或兩個版本。
  • 字體使用的正確姿勢——微軟雅黑(方正蘭亭黑)的合規使用及下載平臺
    敬請關注網絡管理部年度巨獻《字體使用的正確姿勢》,讓我們跟隨著鏡頭走進字體的世界.以下為一部集驚悚、懸疑、犯罪於一體的教育圖片《一次違規差點搞垮一家公司》,請未成年人在成人的陪同下欣賞。微軟雅黑不是免費使用的嗎?我現在的使用會不會影響公司呢?」不知現在的你是否虎軀一震,惶恐不安,內牛滿面。真相只有一個!是時候開始科普了!微軟雅黑是美國微軟公司委託中國北大方正電子有限公司設計的一款全面支持ClearType技術的字體。微軟公司只擁有微軟雅黑的使用權,版權屬於方正,所有商業用途的微軟雅黑字體應用,如果沒有提前獲得授權,都屬於侵權行為。
  • 蘋果或在11月發布會上推出自研Mac晶片
    據新浪科技報導,11月份蘋果或許還有一次發布會,屆時將推出搭載自研的A系列晶片的Mac電腦。OFweek電子工程網曾報導過,蘋果公司在WWDC 2020上宣布自研Mac晶片,在Mac電腦上改用自研ARM 處理器來取代英特爾的晶片。
  • 有哪些好看的字體可以免費用?看完這篇就知道了(附字體安裝包) |...
    有哪些好看的字體可以免費用?看完這篇就知道了(附字體安裝包) 蘋果曾在 iOS 9 發布之時帶來了新的字體,包括 San Francisco 和蘋方。
  • 新媒體運營入門第一課:免費商用字體(附下載)
    尊重版權,是每一位運營/設計師入行時都必須上的第一課。本文內容適用對象:新媒體運營、設計師等。每個新媒體從業人員都多少需要學習一點PS技能,但有沒有想過,你做的海報也許字體是有問題的!字體侵權不僅容易被舉報,嚴重的也可能會面臨高額的罰款。所以,初入新媒體行業你需要掌握的第一項技能就是熟悉每一款免費商用字體。#免費商用字體#有哪些?今天,Vicky主要給大家分享一些常用的免費商用字體。有需要的小可愛趕緊收藏起來吧!
  • 蘋果貼字笑臉果選圖立意簡介
    第一套笑臉圖是編號為92的由8個不同笑臉組成的套圖,上線於2011年,當時很多追求新意的客戶提出這個笑臉果的概念,我們的設計師設計了好幾稿最終定稿了這一版圖案,當年上線後深受果農喜愛
  • 可口可樂、阿迪耐克、蘋果微軟……大品牌的logo演進史
    每天我們都活在形形色色的logo中,那些經典的標誌設計仿佛像種子一樣深深紮根於我們內心,每個品牌logo的背後都有不盡相同的故事和內涵。logo已經逐漸融入了我們的生活中,「貨比三家」、「一分價錢一分貨」的時代已經過去,現在越來越多的人更願意花錢選擇logo產品或服務,logo也逐漸脫離標誌的定義,上升到社會地位、個人品味的層次。
  • 10000多種字體字庫資源整合分享:設計師都在收藏!
    1988年華康推出PC多字型卡,發表細明體、中楷體、中黑體3套基礎字體,開啟中文數字字體開發的新紀元。90年代初,隨著個人計算機的普及,公司及個人使用者日益激增,對屏幕字體的需求也不斷提升。1992年,中文Windows 3.1、Lotus 1-2-3皆採用華康細明體;後1994年微軟Word中文版也以華康字體為其系統字;1996年Apple也選用了華康儷系列字體。
  • 能跨3種語言的字體設計有多複雜?
    作為一款針對電子設備閱讀設計的開源字體,「免費」這個標籤讓它更有吸引力。Google想用這個字體覆蓋多種語言文字,「Noto Sans CJK的設計目標要跟Noto家族英文字體(Noto Sans)協調統一,找Adobe主要因為Adobe有一流的CJK字體專家。」Google向《第一財經周刊》回復。Google為這次項目提供了資金支持。