編者按：漢堡圖標一直都很火。問題是，到底是誰創(chuàng)造了漢堡圖標?事情有意思的地方就在這里：創(chuàng)造漢堡圖標的人并不是某個無名之輩，恰恰相反，它的創(chuàng)造者是圖形界面的創(chuàng)造者，是世界上早期的 UI 設計師，是一群如今名聲遠不如那些科技巨頭，但是真正改變世界的人。

用戶體驗和產(chǎn)品設計師 Geoff Alday 在幾年前就開始對漢堡圖標到底是怎么來的這件事情非常好奇，隨后他做了一些深入的「考古工作」，一些非常有意思的事情逐漸展現(xiàn)在了他的眼前。他在一個 Vimeo 視頻中追蹤到了最早的漢堡圖標的蹤跡，這是一個 1990 年的某個設計大會的視頻，其中一個分享者正在演示如何在施樂之星電腦的窗口標題欄中找到菜單按鈕。而這個按鈕，則是由三個長方形堆疊在一起的。 

施樂之星承載了最早的圖形化界面，它是如今無處不在的 UI 界面的鼻祖。因此，Geoff 找到了當年的負責人之一 Norm Cox。

「你確實沒少做功課，」Norm Cox 在郵件中回復 Geoff ：「找我你就找對人了?！?/p>

漢堡圖標無處不在。去年 12 月， Reddit 和麥當勞聯(lián)手在兩家網(wǎng)站上重新設計了漢堡圖標，讓它看起來真的就像漢堡一樣，而與此同時，這個漢堡圖標的創(chuàng)造者 Norm Cox 迎來了自己的 67 歲生日，并且收到了一個特殊的生日禮物：一個巨無霸漢堡。大家對于這個小圖標的名字的來源歷史興趣并沒有減弱，最主要是壓根沒有預料到它能在它誕生了幾十年之后，會流行成這樣。

如今每一個正在制作開發(fā)移動端網(wǎng)站或者 APP 的人，基本上都會在自己的產(chǎn)品中用上漢堡圖標。而每一個稱職的用戶體驗設計師也都會很想知道，像 Chrome 和 Amazon 這樣體量的產(chǎn)品為什么不用漢堡圖標。

有批評者認為漢堡圖標讓產(chǎn)品的參與度和效率變低了，但是更多的人眼中，漢堡圖標無處不在正是事情變得更好的一個重要的標志。著名的軟件開發(fā)者和 UX 社教司 Michael J.Fordham 在 Medium 上寫道：「(漢堡圖標)正在成為純粹的力量、純粹的功能并且讓設計師有理由在這個設計上偷點懶。」?jié)h堡圖標肯定是不錯的選擇，因為全世界人民都知道這三條橫線的含義是什么。

不過依然有很多人不知道，這三條橫線是怎么進入數(shù)字世界的。每一個東西都有起點。如果說漢堡圖標也是從一個產(chǎn)房里面出生的話，那么我應該跟當時負責接生的醫(yī)生好好聊聊。所以我找到了當時在場的三個人，Norm Cox、David Canfield Smith以及 Ralph Kimball ，并且跟他們好好聊了一下漢堡圖標是怎么誕生的，以及施樂之星誕生時的往事(已經(jīng)40多年了)，還有他們認知中***的設計思想是怎樣的。 

Norm Cox，***視覺設計師，隸屬于施樂系統(tǒng)開發(fā)部門，而 David Canfield Smith 和 Ralph Kimball，則是部門的兩位主設計師。

Norm Cox ：當 Geoff Alday 找到我的時候，跟我說的***句話是「整個設計行業(yè)都在關(guān)注這個菜單小圖標怎么用的時候，而我才意識到是你創(chuàng)造了它?！苟叶⒅吹臅r候，滿腦子想的是「天哪，我可能是在一個星期二玩上八點半創(chuàng)造了這個小東西，但是設計完之后從來沒想過它會怎樣?！?/p>

Dave Canfield Smith：漢堡圖標這個真的是太微不足道了。我們最自豪的事情之一是施樂之星這臺電腦，和同時代的其他電腦相比，操控所需要的命令要少太多了，但是它幾乎可以做任何事情，比我們當時所呈現(xiàn)出來的東西要多太多了。漢堡菜單是我們當時用來承載多余命令和操作的一個載體和方法，我們當時暫時無法找到更好的方法。

• 天哪，我可能是在一個星期二玩上八點半創(chuàng)造了這個小東西，但是設計完之后從來沒想過它會怎樣。──Norm Cox

Norm Cox ：相比于施樂之星本身的革命性，漢堡圖標的流行和火爆顯得略有一點荒謬，它其實是整個產(chǎn)品中實際上最微不足道的部分，不過它現(xiàn)在確實成為了無處不在的符號。

Ralph Kimball：從 1972 年到 1982 年，我一直在為施樂工作。首先是在施樂的帕羅奧托研究中心(著名的PARC，圖形化界面和施樂之星誕生的地方)作為研究科學家，專注于用戶界面的設計，然后是參與施樂之星工作者的研發(fā)。我們在那里的工作是整合并制作出一致的、富有創(chuàng)意的圖形化界面解決方案和方案，這些東西主要是 1976 年之前在帕羅奧托研究中心做的，早期階段則是在 SRI 和猶他大學(Alan Kay 的 Dynabook 項目)開發(fā)完成的。

Dave Canfield Smith：在 1975 年的時候，SRI 雇傭了還在斯坦福大學的我，這也是我***次同 Charles Irby 碰面。Charles 是后來 UI 團隊的***設計師，與 Doug Englebart 一同合作。在 SRI 工作不到一年時間，Charles 就離職去 PARC 工作，并且跟我說這里的工作到底有多好，并且希望我能過去。所以我隨后就去 PARC 實習了，Alan Kay 是我的主管。在那里，我用上了真正意義上的***臺個人計算機 Alto，并且使用 Small Talk (Kay所設計的編程語言)來撰寫我的論文。相比于 SRI，PARC 并沒有那么大，但是它門檻其實更高。除非你擁有博士學位，否則你壓根不會被邀請和雇傭。

Norm Cox ：我***次去 PARC 的時候，穿了一套全新的滌綸西裝三件套，接待員替我把 Charles Irby 叫出來了，他當時已經(jīng)負責領導施樂之星的用戶界面和功能設計小組。當時他穿著防滑短褲和涼鞋，以及手工染色的T恤，走下樓梯來迎接我。我這個時候才注意到，他腦后的馬尾辮都已經(jīng)及腰長了，邋遢的胡須，整個身形都比較瘦小。我迅速意識到我就不該穿西裝來 PARC。辦公園區(qū)里面還有個哥們肩頭上站著一只真的鸚鵡，滿園區(qū)瞎溜達。在辦公室里面，每個人都有懶人沙發(fā)，還有人帶了霓虹燈和薰香。想想吧，20 世紀 70 年代的加里福利亞。

• 辦公園區(qū)里面還有個哥們肩頭上站著一只真的鸚鵡，滿園區(qū)瞎溜達。──Norm Cox 和 PARC 的企業(yè)文化

Dave Canfield Smith：當時我們在 PARC 先研發(fā)了 Alto 電腦(其實最主要是作研發(fā)之用，一共才制造了幾百臺)，突然之間我們的團隊就有了這個位圖屏幕，分辨率是 700×1000 像素，每個像素都可以單獨的控制關(guān)閉和開啟。這個顯示器一下子點燃了我們的想象力和創(chuàng)造力。

Norm Cox：在施樂之星項目之前，我正在管理另外一個設計團隊，為施樂當時生產(chǎn)的電子打字機開發(fā)字體。隨后，帶著鼠標和黑白像素顯示器出現(xiàn)在我們辦公室。我一直都非常迷戀各種新事物，繪畫，水彩，木工，任何創(chuàng)意設計和新媒體。所以我開始不停地玩兒它。

Dave Canfield Smith：當我在 1976 年加入施樂的系統(tǒng)設計開發(fā)團隊的時候，我的工位在辦公室很偏僻的角落。當時公司打算將施樂之星推向市場，目標使用場景是辦公室。當時傳統(tǒng)的辦公室當中，絕大多人并不了解電腦，而且管理層是不需要打字輸入的，相反秘書是需要的。所以，我的想法是將辦公室場景下的很多元素逐漸融入到整個計算機的視覺系統(tǒng)當中，包括文件柜、垃圾桶、文檔、文件夾，這樣會更易于學習和理解，并不是像之前那樣僅僅提供一個簡單的說明手冊就完事了。我們在 PARC 利用全部所有的技術(shù)來創(chuàng)造這些東西。

Ralph Kimball：在施樂之星中，不再依托鍵盤來發(fā)出操作指令，相反使用圖形化界面來進行直覺操作，這才是它***有革命性的一點。

Dave Canfield Smith：當時在我自己的小隔間的墻壁上貼滿了各種打印文檔，上面全都是各種圖標的屬性，以及它們能夠做什么。這包括文檔、文件柜、打印機、時鐘、郵箱、圖書館(這是一個類似谷歌一樣的檢索界面，我確實沒有聰明到發(fā)明谷歌)……激光打印機和使用因特網(wǎng)的電子郵箱，這兩種東西都是 PARC的發(fā)明，我會盡可能利用 PARC 的技術(shù)來制作綜合辦公系統(tǒng)。

Ralph Kimball：Norm Cox 確實是施樂之星開發(fā)團隊挖到的寶，因為他能夠如此高效地利用媒體的力量來轉(zhuǎn)化為有效的設計。在遇到 Norm 之前，Charles Irby 和我在舊金山和很多著名的平面設計師碰頭聊過了，但是他們對于設計圖形化界面完全沒有思路。

Dave Canfield Smith：我曾經(jīng)畫過***版的設計稿(圖3)，在我看來真的是垃圾。真得感謝上帝我們有 Norm Cox，我們才能擁有一套直到今天看著依然很舒適的圖形化界面。Charles 對于我的設計真的很寬容了，他從未說過「Dave 的設計稿真糟糕」這樣的話，相反他以一種更隱晦的方式來推進事情。有天他來我的辦公室并且對我說「我想要是能夠為設計圖標做一個設計競賽倒是挺不錯的」。

Norm Cox：Bowman 是負責程序開發(fā)的，他寫了一個非常粗糙的圖形化的程序，讓我們可以能夠在顯示器上創(chuàng)建圖形。Wallace Judd 是一個人因工程學專家(更加接近如今的交互設計領域)，他寫過很多關(guān)于這方面的論文，但是他在視覺設計上并沒有太深的造詣。所以，最終我被邀請過去參與圖標設計「比稿」，我們每個人都設計了一套，然后所有人都圍著爭論到底哪套更好。 

△ 最早的UI圖標設計比稿

Dave Canfield Smith：當我的設計稿被退回來的時候，我再看到它的時候，感覺像是有人指著我的鼻子在指責我一樣，清晰，印象深刻。

Norm Cox：你要知道，這件事其實是我們設計思考的啟蒙。我們在那一刻學到了重要的一課：我們做的東西不僅要好看，還要確保功能。通過可用性測試，我們開始關(guān)注更多的事情。之后，Bowman、Dave 和 Wallace 對我說「好吧，Norm，你去做吧?！褂谑?，我就成為了官方的主設計，但是我們都很清楚，整件事情，從來都是團隊努力的結(jié)果。

Dave Canfield Smith：其實我到現(xiàn)在還不明白漢堡圖標的魅力到底在哪里，因為在我看來，它甚至不是一個圖標，它只是一個符號。圖標應該既具有視覺表現(xiàn)力，也應該有功能性的機器語義，而這個菜單圖標僅僅只擁有前者。它并沒有暗示任何其他和菜單相關(guān)的信息，它只是靜靜地在屏幕上。你捅一下它，然后彈出一個菜單，光標移開，菜單消失，就這樣而已。圖標應該包含隱喻，它應當映射到這個世界上一個客觀存在的可操作的對象。

• 這件事其實是我們設計思考的啟蒙。──Norm Cox

Norm Cox：在施樂之星上，每英寸屏幕有 72 個像素點，這個范圍內(nèi)你要能夠傳達你的想法。我們從施樂所制造的打印機和復印機的既有符號系統(tǒng)，以及道路上的各種標志中獲得了很多靈感……

Dave Canfield Smith：對于電腦需要執(zhí)行的絕大多數(shù)的指令和操作，在此之前是通過手動輸入命令行來操作的，但是我們想到了更好的呈現(xiàn)方式。我們的大腦雖然很聰明，但是本質(zhì)上是厭倦花費大量的時間來挑選***的執(zhí)行方案的。所以，我們將絕大多數(shù)的功能以圖標的形式直接呈現(xiàn)在屏幕上，而額外的操作則通過下拉菜單隱藏起來，你只需要額外多點一下就能將它們觸發(fā)出來，而這就是漢堡圖標的來源。 

Norm Cox：在任何一個車庫當中，總會有一個放置各種雜物的桶，里面有螺母和螺栓，釘子和抹布，以及一些難以分類的雜物。這就是漢堡菜單圖標所對應的隱喻。就像沒有***的系統(tǒng)一樣，也不存在***的界面，就像 Dave 剛剛說的那樣，你總會遇到各種各樣不合適的東西。

Dave Canfield Smith：在當時，有一個典型的操作命令是「分頁」(Paginate)。由于當時計算機的速度和容量不足，在文檔界面中，電腦無法實時地顯示文字和圖片排版，所以你需要通過點擊「分頁」來預覽整個文檔。這是一個明顯受限于時代和功能的操作命令，它有多愚蠢你應該能夠感受到。我們并不喜歡它，但是它必須存在，所以我們把它藏在一個偏僻的菜單當中，這樣用戶就不用一直在主界面上看到它。我們想在用戶面前展示真正有用的、重要的命令。

Norm Cox：對于這個菜單符號要使用什么符號來呈現(xiàn)，我想了很多，包括加號，省略號，下拉箭頭。但是你仔細想想看，我們想要表達的含義是「雜項」，或者是「其他」和「額外」，上面三個符號本身和這個含義是相去甚遠的。我想找到一個直觀、易于解釋且令人難忘的事物，來作為這個菜單的符號。

Dave Canfield Smith：三條橫線所呈現(xiàn)出來的是一個抽象的圖像，而它所對應的意象是你點擊它之后所看到的東西的形象：菜單。

Norm Cox：如今你還會看到另外一個廣泛使用的符號，三個垂直排列的小圓點，它更像是漢堡圖標縮短之后的版本。

Dave Canfield Smith：從設計的角度上來看，它非常的國際化，因為它是非語義化的。你不希望你產(chǎn)品在其他的國家地區(qū)還需要針對這個圖標進行額外的語言翻譯，因為翻譯還需要額外的占用空間，因為別人不理解。

Norm Cox：我們開始因此逐漸意識到用戶在識別信息時的層次，用戶在看屏幕的時候，他們會快速掃視尋找特定的形狀，在形狀匹配的情況下，再相對仔細地查看細節(jié)。就像當你注意到一個鉆石形狀的路標的時候，你是先看到路標本身，然后才注意到其中的細節(jié)文本。所以，我們需要確保你在界面中掃視的時候，不用掃視太多的內(nèi)容。屏幕上每一個像素都很重要，不應該將無關(guān)的信息放上去，一切都應該有清晰的目標，額外的裝飾是沒有必要的。這些限制意味著我們必須設計一些優(yōu)雅而簡單的東西：永恒經(jīng)典的設計風格。

Dave Canfield Smith：我們在竭盡全力避免混亂。我們希望它具備有一種獨特的視覺吸引力，這樣人們會花費更多的時間在界面上。

Norm Cox：如果你曾經(jīng)關(guān)注過圖標設計的整個歷程，尤其是在蘋果、微軟兩家的用戶界面當中，你會發(fā)現(xiàn)圖標從最初的簡單的線條，隨著像素密度的增加，逐漸演變成為***真實感的寫實照片一樣的圖標，包含陰影、高光和各種各樣東西，再重新回到極為簡約的線條和形狀，這背后的原因其實和我們前面所說的是一樣的。

Dave Canfield Smith：如今的 Mac 系統(tǒng)中，遍布著各式各樣的菜單。但是在最初的施樂之星當中，我們只有一個下拉菜單，并且菜單中大多是單個命令。并不是我們當時所設計的功能太少了，我們當時的媒體文檔軟件中，包括了文本編輯、字體選取、布局工具、圖片甚至嵌入式音頻，內(nèi)容非常非常豐富(你想想看吧，那是70年代中期)。然而我們在很大程度上并不需要那么多菜單。你難道不覺得這是一件非常奇妙的事情嗎?為什么?因為我們在竭盡所能地去「概括」和整合命令，而不是去消除功能。使用按鈕指令來完成任務，這是我發(fā)明的!Apple 的用戶可以使用剪切、復制、粘貼、撤銷這樣的功能來完成任務，而在此之前，在施樂之星上，已經(jīng)存在移動、復制、刪除、撤銷、顯示屬性、復制屬性等一系列的基本的核心操作了。

• 你會發(fā)現(xiàn)圖標從最初的簡單的線條，隨著像素密度的增加，逐漸演變成為***真實感的寫實照片一樣的圖標，包含陰影、高光和各種各樣東西，再重新回到極為簡約的線條和形狀，這背后的原因其實和我們前面所說的是一樣的。──Norm Cox

Ralph Kimball：我們一直在努力構(gòu)建一個非常簡單的用戶界面，竭盡全力不去使用讓用戶感到迷惑的所謂的高級指令，讓有經(jīng)驗的用戶能夠具備更高的工作效率。在施樂之星的開發(fā)過程中，我們需要為各種各樣的問題作出非常具體的決策。

Dave Canfield Smith：我們希望人們能用施樂之星來做有用的事情，而不是讓它成為一個復雜的東西。讓復雜的事情變簡單并不容易，我們?yōu)閯?chuàng)造更簡單的界面而竭盡全力去做事情。

Norm Cox：我認為我們當時并沒有意識到當年那是怎樣一個特殊的時刻。我們覺得自己是一群做著自己感興趣事情的嬉皮士，但是如今來看，我們仿佛是借用技術(shù)的力量在整個世界的耳邊低語，然后徹底改變整個世界。

結(jié)語

施樂之星后面的故事，是喬布斯和比爾·蓋茨之間關(guān)于圖形化界面操作系統(tǒng)的糾紛，你可以在很多地方讀到關(guān)于這段歷史的故事，但是這和今天的訪談內(nèi)容無關(guān)。

我們應該向這幫最早的圖形界面的創(chuàng)造者致敬，向這批最早的 UI 設計師致敬──如果一個行業(yè)需要有一個清晰明確的祖師爺?shù)脑?，那么訪談中的三位應該是最早的 UI 設計師，是創(chuàng)造 UI 設計師這個職業(yè)的人(應該也是設計比稿的「受害者」)。