UI小史

了解領域歷史的益處不必多說，最核心的作用是提供上下文(Historical Context)，以獲取對事件更完整的理解。回顧UI發展的歷史，最大的範式【1】轉變恐怕就是從計算密集型（computation-intensive）轉向表現密集型（presentation-intensive）了，基本上可以分為三個時期。

Batch時代（1945-1968）

也就是批處理計算時代，當時現代意義上的計算機剛被發明出來，給人類提供了歷史上從未有過的計算能力，這些計算能力自然是非常珍貴，註定只能用於科研、軍事等活動，比如炮彈軌跡, 核武器研製等都涉及到大量的計算任務。當時的情況現在看起來可以說一目了然：

• 計算機

  • 性能差（相對於現在），但仍然提供了前所未有的計算能力

• 使用者

  • 科學家，Raymond(《大教堂與集市》一書的作者)稱這類人為Wizard【2】

• 應用

  • 軍事，科研

• User Interface

  • 紙帶打孔
  • 離realtime相去甚遠，一次性只能運行同一個程序，坐等輸出，如果你的程序輸出了錯誤信息，那得重新打孔再輸入一遍

不過在當時計算機和程序的製造者、使用者都是一批人，有共同的語義空間，互相理解起來不成問題，UI設計並無太多用武之地，一切的資源都往壓榨計算能力和改進這種計算能力上傾斜。值得一提的是在技術約束如此之強的情況下，採用廉價的紙作為存儲材料，不得不說真是奇思妙想，這種思想至今仍然在運用，比如說高考中的答題卡，條形碼可以說是這種思想的延伸。不用說也可以想像「如何更有效的打孔」之類的問題，在當時肯定是UI的中心議題之一【3】。

CLI時代（1969-1983）

CLI，Command-line Interface， 也即是我們熟知的命令行交互，以Unix的誕生為代表。所謂的Batch時代、CLI時代、和後面要提到的GUI時代並沒有嚴格的時間分割點，它們之間的邊界是模糊的，CLI時代所需要的條件在Batch時代就已經多少具備了，同樣在CLI時代也為GUI時代準備了條件。

• 計算機

  • 性能逐漸增強
  • 材料的相繼發明和改進，一些關鍵的輸入輸出設備（主要是顯示器和鍵盤）開始正式使用
  • 高級編程語言
  • 分時（timesharing）操作系統出現

• 使用者

  • 科學家，工程師，相關專業的學生，這類人仍然是 Wizard & Expert團體

• 應用

  • 軍事，科研，教學
  • 後期開始出現文字編輯等業務

• User Interface

  • 命令行
  • 採用特定辭彙的request-response模型
  • 實時性（realtime）增強，輸入很快就能看到輸出（取決於問題複雜度和計算能力）

從Batch時代到CLI時代，計算機UI可以說是在計算機科學家，程序員這個亞文化群體中走到了巔峰。對於Batch時代沒有什麼好說，對於CLI時代可以說工程師們給自己找到了一種直接高效而且優雅的交互模型，這種模型下，程序之間可以實現非常高效的通信，前一個程序的輸出可以無縫成為後一個程序的輸入，豐富的腳本化能力，一切的一切都帶著一股極客范。這種超強的開放性是後來的GUI所不具備的。

如果不是一些關鍵技術的發明迅速將計算機推向商業市場，那UI可能到此會告一段落了，圖形界面對於普通消費者是個驚喜，但是對於當時那個精英雲集的亞文化集團並不是個高效的操作方式。當然我們現在知道，歷史上計算機很快走出了科學家和工程師的亞文化團體，個人電腦時代來臨了，原來以為的結果反過來變成了原因，GUI成為推動這股潮流的關鍵因素之一。

GUI時代（1984之後）

GUI，Graphic User Interface，也即用戶圖形介面。UI從原始的二進位語言，到文本語言，最終迎來了視覺語言。

Xerox & Macintosh & Windows

同前面所說的一樣，GUI所需要的技術，思想準備也是從CLI時代就開始醞釀了。但它們的第一次完整的亮相是在Xeror PARC（施樂研究中心，1973~1981），施樂的工程師天才般的發明了二維平面上的視覺界面模型，以及使用了滑鼠這種精確二維指向性設備。

• 1973年的Xerox Alto計算機桌面：

• 1981年的Xerox Star

Xerox研究中心這兩款產品所採用的桌面隱喻和WIMP模型為GUI奠定了基礎：

WIMP模型

WIMP stands for "windows（窗口）, icons（圖標）, menus（菜單）, pointer（游標，滑鼠箭頭那種指向性標示，不是命令行下的輸入提示游標）"

與WIMP相對應的有一套「操作原語」，也就是說不可分割的基本操作方式，主要包括Click（單擊），Drag（拖拽），Point（指向），Press（按鍵）等。【4】

桌面隱喻（Desktop metaphor）

In computing, the desktop metaphor is an interface metaphor which is a set of unifying concepts used by graphical user interfaces to help users interact more easily with the computer

桌面隱喻被GUI用來統一概念集，以幫助用戶更容易的和計算機進行交互。

隱喻的概念在Material Design中提到過，關於這種修辭法可以參考「維基百科隱喻詞條」。正如Material Design的核心隱喻是「material」一樣，桌面隱喻將電腦界面隱喻為現實中的工作桌面，桌面上的內容都是用於工作的工具，以構建用戶頭腦中的概念模型。對比之下，可以看看Windows 95中的Microsoft Bob工具套裝模型：

微軟試圖以一種更貼近真實也更人性化的方式來組織UI，將日曆等放在一個更真實的房間內，如果需要使用就直接去對應的位置點擊，但顯然這有些生搬硬套，這種程度的模擬限制了表達能力，也跟計算機桌面的特性不符，結果自然是一片差評。這也說明了尋求一個好的隱喻並不容易。

而WIMP模型隨著GUI範式的走向成熟，又加入了下拉框等組件，變得更為完整，一直使用到現在。如果問「觀察你的電腦，看看都有哪些基本組件？」，原來你可能覺得眼花繚亂，但仔細觀察就會發現基礎的結構就那麼幾種。

再往後比爾蓋茨和喬布斯都從Xerox吸收了圖形界面帶來的革命性思想，並且相繼推出了Macintosh（make 1984 not "1984"）和 windows1.01（注意不是微軟更早的DOS）。

• windows 95 & mac OS 9 桌面圖

另一方面，隨著個人電腦市場的增大和GUI的發展還促使了一些新職位的出現，why？

因為計算機開始從工程師亞文化團體走出，需要尋求普通消費者的理解，這正是設計所擅長的事情。在80，90年代湧現了一批計算機領域的用戶體驗專家，這些先驅將傳統工業設計，平面設計的成果引入到數字領域中，取得了非常好的效果，最為人熟知的是一些增強可用性的設計原則。

GUI和之前的CLI，Batch有什麼區別？

後面的事相比大家都知道了，微軟和蘋果的產品席捲了全世界。雖然是GUI促使了計算機走進普通用戶的生活，但CLI並未因此而消失，而是在主流操作系統上都保留了下來或是在一些特定場景下當做主要的UI形式，這也說明了CLI的生命力之強。

那麼GUI跟CLI區別是什麼？

• 人腦對圖像的模式識別
• 受限UI和非受限UI

第一個重大區別在於，GUI採用圖像傳遞信息，而人腦認知圖像採用的是更高效的模式識別(Pattern recognition), 簡而言之大腦通過辨別視覺模式，對所看到的事物建立優先順序來處理。大腦視覺系統在具有視覺提示（visual cue）的基礎上，將視野內的部分裝配成模式的能力。 比如你回眸一次就能記住她的樣貌，或是一眼能識別出對你有威脅的生物。這種能力或許來自長期的進化，視覺畢竟是最主要的信息獲取渠道，如果沒有高效的處理方式，大腦很快會被信息淹沒。相較之下，命令行使用的語言則是一種後天習得能力，並沒有非常高效的處理模式。【5】

另一個重大區別是，GUI擁有更強的受限辭彙集而CLI則不然，所謂「受限辭彙集」，意思是GUI使用的圖形組件基本是固定的，用戶所做的操作是一系列規範化的滑鼠活動（在圖標上點擊，從菜單中選擇）。正如Donald Norman所說的「知識不僅存在於頭腦之中，還存在於外部世界」，這些可視化信息具有對新手的教學作用，信息能直接從視覺上反應出來，減輕了大腦的記憶負擔，使UI變得簡單易用。

CLI模型的優點正如前文所提到的那樣：直接，高效，定製性強，無可匹敵的腳本化能力等。但即便如此，由於命令行輸入的非限定性（輸入文本可以有無限種組合）要求用戶記憶大量的文本命令，註定只能存活於工程師亞文化團體之間，不能為普通用戶所接受。同時可以看到雖然今天的操作系統同時具備GUI和CLI，但也僅僅是把它們放在一起而已，二者仍然是相對獨立的，並沒有一種從圖形界面逐漸深入到命令行的引導方法。

事實上，有一種CLI的變種已經深刻的影響了UI形式，那就是搜索框。GUI這種限定式交互並不擅長處理海量數據，很難想像通過無數控制項來過濾信息是何種場面。而新版本的命令行卻可以更容易的做到，就像你跟一個真實的人對話時，不需要了解其知識結構的細節一樣，搜索引擎的複雜性隱藏在搜索框背後，只需要在其中輸入非限定性的自然語言辭彙組合（正如CLI那樣，自然語言儘管要求低，但想用好仍需要技巧）就可以得到相關信息。搜索可以說正在成為一種非常非常非常重要的UI形式，除了各大引擎的搜索框外，mac上的spotlight和alfred也是這種形式的代表之作。

成為新媒介的計算機

上世紀末PC和GUI的出現解放了計算機的能力，計算機行業開始分流，大型機承擔仍然承擔日趨複雜的科研計算，而PC則開始走向工作和娛樂，這成為了Internet的基礎，最典型的代表是World Wide Web，也即萬維網（互聯網和萬維網的區別可以參考維基百科）。

僅從GUI上說的話，Web時代（注意Web不是瀏覽器）相比桌面軟體時代倒退了十年不止，大量的桌面UI特性難以在Web上實現，Request & Response模型，無狀態，這些Batch時代的東西似乎又復活了，光速的限制也似乎讓互聯網語境下真正的realtime成為鏡中之花。但這種倒退只不過是新技術約束條件的表現，縱觀歷史可以發現，UI設計總是與當時的Historical Context保持一致的，這些上下文主要包括：技術約束條件，計算機所執行的事務類型等（一個有趣的小例子是「多圖殺貓」這個辭彙，精彩的描述了帶寬限制下用戶設備的表現）

當UI從計算密集轉向表現密集時，其承載的功能變化事後看來也是非常符合邏輯的，史上沒有任何一種技術和手段能像計算機這樣具有表現力——聯網的計算機自然成為了最佳的媒介。這種媒介自然也被一路看好，尤其是電子商務，媒體，社交搬到Web上來之後，現實開始消解並且在互聯網中重構，永久地改變了人類的信息傳達，商業交流方式。而UI設計的重心自然而然的開始轉向內容，信息，業務，一切都順理成章。這個時候可以說計算機從人們的視野中消失了，雖然無處不在，但人們很少在關注它，成為一種「消失的存在」。

07年出世的IPhone和移動互聯網的興起，進一步深化了互聯網的特性，而GUI設計的擬物化，扁平化的演進背後是互聯網文化的成熟，新時代的人們已經掌握了互聯網帶來的新辭彙（廣義的），就像人類不會一直停留在象形文字階段，具有更強表義能力的抽象文字最終成了主流。無須再用擬物化來減少認知的難度，而且設備的增多需要設計有適應能力，發展到現在就成為了我們如今看到的樣子。

未來會如何呢？

近十年的變化之迅速導致今日與十年前放佛是兩個世界，這種隔離感讓很多人都忘了我們是從怎樣一個時代走過來的。在回顧UI或其他工程歷史的時候，認為過去的設計師或工程師非常愚蠢，以致做出了一些神坑決策，一般都是不明智的看法。儘管工程師和設計師有時候會犯傻，但是絕大多數時候，他們所作出的選擇是當時各種約束條件下最優秀的權衡結果。

一種新技術出現之後，往往會有一種U型曲線：複雜——簡單——複雜。新技術的產生一般為解決問題而出現，但是粗糙的設計有時候會增加新技術帶來的負擔。以手機為例，當智能機剛出現時，UI不成熟，所以操作起來會複雜。一些相對先進的廠商，改進用戶體驗，讓其變得簡單，同時也因為這種簡單而成為受追捧的對象。然而當改進用戶體驗成為一種常態，不再是差異點後，又會回到拼特性的道路上，直到下一個範式的到來。

注釋

【1】：這個辭彙出自thomas kuhn的神作《科學革命的結構》，它大致指某個領域在一個特定時代所持有的假設，採用的研究方法，人們的信念，標準等構成的範例集合，Kuhn用這個詞描述科學發展的內在結構，後來被借鑒到各個領域。

【2】：人類對於當前事物的認知受過去經驗的影響，根據用戶經驗進行劃分是UI領域的一種常用方式，比如一種常見的分類模型是將受眾分為新手，中間用戶，專家。

【3】：打孔卡片的思想可以追溯到Basile Bouchon和Jacquard loom的織布機

【4】：設計領域喜歡使用語言學科的術語來說明事情，像什麼視覺語言，產品語義等等，這本質上也是一種隱喻式表達

【5】：Robert L.Solso等. 認知心理學

其他參考文獻

Eric Steven Raymond & Rob W. Landley. The Art of Unix Usability

Alan Cooper. About Face:The Essentials of Interaction Design

Wikipedia. User Interface

知乎live.用戶界面 40 年演變史