UI 設計進階 2-2：UI 是如何發展的？

04-26

作者：Hindy

原文地址：uicircle.club/a/159

轉載無限歡迎，但請註明「作者」和「原文地址」。感謝您對作者版權的尊重。

前言

本文是 UI 設計進階系列的第 2-2 篇，系列目錄：uicircle.club/a/128。

本文會帶大家回到早期計算機時代，看看人機交互界面是如何從人適應機器，到逐漸轉變為機器適應人的。

電腦是誰發明的？

我在為本文做調研的時候，意外看到一個視頻叫：Who Invented the Computer（見參考閱讀）。而人機交互又可以說是與計算機技術密不可分的，因此讓我們不妨先來了解下電腦的發展。

早在 1834 年，英國機械師查爾斯 · 巴貝奇（Charles Babbage）就構思了分析機（Analytical engine），一台擁有儲存器和能利用打孔卡進行編程的機器。雖然當時從未建成，但在 1991 年，倫敦科學博物館建造了一個完整的巴貝奇分析機模型。

1936 年，艾倫 · 圖靈（Alan Turing）發表論文提出計算機可以計算任何可數字計算的問題。而通用圖靈機（Universal Turing Machine）就是對自動計算的一個概念藍圖。

同時期，德國工程師康拉德 · 楚澤（Konrad Zuse）製作了一系列計算機。1941 年研製出的 Zuse Z3 是世界上第一台可編程的全自動數字計算機，但當時因為戰亂它很少被人所知。

二戰對現代電子計算機的誕生起到了重要的作用，前所未有的軍事計算要求和大量的戰時預算刺激了創新。物理學家約翰 · 莫克里（John Mauchly）於 1942 年提出了一種全新的電子計算機。同時，美國陸軍需要計算複雜的戰時彈道表。其結果就是 1943 年至 1945 年間建成的 ENIAC，第一台完全用電運行而不被任何機械部件拖慢的大型計算機。在 1955 年以前，ENIAC 在當時所做的計算可能比全人類累計起來都多

1945 年 7 月，萬尼瓦爾 · 布希（Vannevar Bush）發表了「As We May Think」。提出了「Memex」儲存器，在某種程度上預言了包括超文本、萬維網、個人電腦、語音識別以及在線百科全書（Wikipedia）的誕生。這篇文章更是直接啟發了道格 · 恩格爾巴特（Doug Engelbart）發明了滑鼠，文字處理器，超文本鏈接等新技術。

所以到底是誰發明了電腦？答案不是一個人，而是一群人，他們互相啟發和改進。人機交互的發展也是如此。

UI 的發展

在系列開始的時候我們就有介紹，人機交互最重要的就是輸入（input）與輸出（output）。因此根據不同的人機交互方式， UI 的發展可以大致分為以下幾個時期：批處理時期、命令行界面時期與圖形用戶界面時期。

批處理

批處理簡介

批處理（Batch processing）就是在計算機上的程序中執行一系列作業，而不需要手動干預，是非互動式的。嚴格來說，這是一種處理模式：處理存儲在打孔卡上（punch card）的數據，而不是單個輸入。

早期的計算機不能像今天的計算機那樣存儲文件。如果你想創建一個數據文件或程序，與其他計算機一起使用該數據，唯一的辦法就是使用打孔卡。

批處理的歷史可以追溯到 19 世紀後期。科學家、工程師、企業和政府機構面臨著越來越繁瑣的計算。1890 年，赫爾曼 · 霍勒里斯（Herman Hollerith）開發了一種機器來記錄和儲存打孔卡上的信息，以便用於記錄當時的美國人口普查。他在後來創建了我們所熟知的 IBM 公司。

直到 20 世紀 50 年代早期電子計算機時期，批處理仍然是大型計算機的主要處理模式。

如何使用打孔卡

使用類似上圖的打卡機，通過對卡的每列上打孔來表示一個字元，就可以將數據輸入到卡中。

一旦卡打完或「回車鍵」（Enter）被按下，卡就完成「儲存」信息了。而因為每張卡只能保存這麼點數據，所以你很可能需要有一堆卡等待連續打孔。

要載入程序或讀取打卡數據時，將每張卡插入讀卡器，就能將卡上的數據輸入到計算機。

批處理時代的問題

在批處理時代，計算能力是非常稀缺和昂貴的。當時最大的計算機每秒處理能力甚至比現在的微波爐還要低。相應地，用戶界面也只能是最基本的，人們不得不適應機器。除了專門訓練過的操作員，人類根本不會與批處理機器進行互動。單個工作的處理時間往往是以日計。如果一個人非常幸運，那可能是幾個小時。至於我們現在的實時響應，更是聞所未聞的。

命令行界面

起源

命令行界面（Command-line interface, CLI）是由人與電傳打字機（Teletype）進行的一種對話形式發展起來的，最初在諸如 ASR-33 Teletype 之類的機器上進行，他們的交互模式是一系列的請求與響應交易，通常是一行文本。響應期遠遠低於先前的批處理系統，從幾天或幾小時降到幾秒。人與機器以前所未有的方式進行交互。

註：電傳打字機最初是作為自動電報發送和接收設備發明的。他們的歷史可以追溯到 1902 年，到 1920 年代就已經在新聞編輯室等其他場所使用了。

發展

視頻顯示終端（VDT）在 1970 年代被廣泛採用，也因此迎來了第二階段的命令行系統。這些顯示技術進一步減少了延遲，字元會比印表機更快地顯示到屏幕上。並且還通過減少墨水和紙張等消耗品，大大提升了人們與計算機的交互體驗。

在 1964 年前後，路易斯 · 普贊（Louis Pouzin）創造了術語 shell（殼層）來描述操作指令，並且寫了一篇關於如何在 Multics 分時操作系統中實現這個想法的文章。它被命名為 shell，是因為它是操作系統內核的最外層。

shell 作為命令語言，它互動式解釋和執行用戶輸入的命令或者自動地解釋和執行預先設定好的一連串的命令；作為程序設計語言，它定義了各種變數和參數，並提供了許多在高級語言中才具有的控制結構，包括循環和分支。

第一個 Unix shell，V6 shell，是由肯 · 湯普森（Ken Thompson）於 1971 年在貝爾實驗室開發，仿照 Multics shell。Bourne shell 在 1977 年推出的，作為 V6 shell 的替代品。Bourne shell 導致了 Korn shell（ksh），Almquist shell（ash）和流行的 Bash 的開發。

在微軟的 Windows 操作系統中也提供了命令行 shell 的功能，它們是 Windows 95 / 98 下的 http://command.com、Windows NT 內核下的 cmd.exe 以及 PowerShell；而圖形界面殼層即為 explorer.exe。

雖然命令行界面大大提升了人機交互效率，但是它仍然給用戶帶來了相當大的學習門檻，需要花費大量的時間和精力來學習計算機語言。

再後來，命令行界面終於受到了來自蘋果公司 1983 年的 Lisa 和 1984 年的 Macintosh 使用的 GUI 的嚴峻挑戰。

現在的互動式命令行界面通常被更高級的用戶使用（主要是開發者們），因為它們可以更快速、精準、強大地控制程序或操作系統。

圖形用戶界面

圖形用戶界面（Grahpic user interface, GUI）離現在的我們最近。

1963 年伊凡 · 蘇澤蘭（Ivan Sutherland）受到布希「As We May Think」一文的啟發，開發了 Sketchpad。它是有史以來第一個利用 GUI 工作的程序，也因此開創了計算機學科的多個領域，諸如計算機圖形學、圖形用戶界面、人機交互系統、CAD 等。Sketchpad 的成功也奠定了蘇澤蘭作為「計算機圖形學之父」的基礎。另外，蘇澤蘭還在 1968 年和他的學生一起創造了第一個虛擬現實和增強現實頭戴顯示系統，還取了個中二的名：「達摩克利斯之劍（The Sword of Damocles）」。也因此他又被冠上了「虛擬現實之父」的名號。

道格 · 恩格爾巴特（Douglas Engelbart）在 1968 年「The Mother of All Demos」的演示中展示了 NLS 系統。它擁有電腦滑鼠、點陣圖屏幕、超文本，這些都奠定了開發現代桌面操作系統的基礎。

而提到早期的 GUI，還有一個繞不開的英雄就是 Xerox PARC（Palo Alto Research Center）。受 Engelbart 演示的啟發，早在 1970 年施樂研究員們就開發了 WIMP 模型，也就是 Windows, Icons, Menus, Pointers（窗口、圖標、菜單和滑鼠指針），這套模型一直沿用至今。而在 1973 年施樂的研究員們創建了一個名為「Alto」的開創性機器，被設計為致力於一個人使用，成為了「個人電腦」的祖先。

Alto 的另一個意義是推廣了點陣圖而不是矢量圖形。大多數較早的圖形硬體被設計成在顯示器上明確地繪製點、線、字元，這種方法相對較慢但是經濟，因為它只要更少的儲存器，如上面提到的 Sketchpad。

施樂公司還在 1981 年推出 Xerox Star，一個包括幾個工作站、存儲器和激光印表機在內的完整辦公系統，圖形界面更加成熟。但是高昂的售價、不穩定的性能及失敗的營銷，令其與 Alto 一樣幾乎沒有市場。

1979 年，史蒂夫 · 喬布斯（Steve Jobs）安排了對 Xerox PARC 的訪問，蘋果公司的員工在施樂公司查看內部技術的演示，以換取施樂公司購買蘋果公司股票期權的機會。蘋果也沒有浪費這次機會，在兩次訪問 Alto 之後，蘋果公司將這些概念應用到了 1983 年的 Lisa 電腦中，使其成為世界上第一台使用 GUI 的個人電腦。蘋果不僅僅是複製了 PARC 的模式而是改進了它，涉及設計和心理學方面的深入研究。蘋果成功地大力推進了 GUI 發展的進程。雖然如此，但因 Lisa 高達近 1 萬美元的售價以及較低的性能、缺乏軟體生態等原因而遭受商業上的失敗。

在 1982 年，喬布斯被迫離開 Lisa 項目後加入了 Macintosh 項目。他重新定位了 Macintosh 團隊：為建立一個更便宜，更好的 Lisa。1984 年 1 月 Macintosh 以 2495 美元的售價發售，迅速超過了 Lisa 的銷售量。Macintosh 的成功是多方面的，但尤其值得一提的是為其製作了在當時史上最昂貴的的廣告，並且在美國超級碗上播出。詳細可以見文末參考資料中的「Apple 1984 Super Bowl Commercial Introducing Macintosh Computer」。

而到了 1985 年，微軟也意識到了 GUI 的魅力，發布了 Windows 1.01。早期的版本是醜陋、不成功的，色彩艷麗，甚至不支持重疊窗口等基本功能，他們很大程度上沒有取代微軟自己的 DOS 產品。當系統啟動時，它還要通過打開 MS-DOS 執行任務。

1987 年 Windows 2 發布，支持重疊和可調整大小的窗口，也增強了鍵盤和滑鼠的使用。

至此，我覺得 GUI 早期的故事可以告一段落了。圖形界面在之後越來越成熟，應用也越來越廣泛，幾乎可以拓展到生活中所有的數字產品顯示上。而回顧歷史，你也可以發現不管是今天的電腦還是手機，在很大程度上，還是沿用了近半個世紀前的發明，如桌面、菜單、導航欄、滾動條、圖標等等。

總結

了解 UI 的發展可以：

提醒我們好的發明不是一蹴而就，而是歷史共同造就的；
提醒我們不該過於妄自尊大，可能你的想法別人早就做過了。因此當你蹦出好點子的時候，應該多做些調研工作，了解別人是否做過，做得怎樣，從歷史中吸取經驗；
幫助我們審視當下正處於怎樣的歷史洪流中，為我們的決策提供依據。

最後以 Alan Kay 的一句名言結束本文：

The best way to predict the future is to invent it.（預言未來最好的方式就是去發明它。）

免費獲取完整 PPT，請關注公眾號 uicircle，回復「UI發展」即可。

系列目錄：uicircle.club/a/128。

如果你想提升設計能力，亦或充實自己的周末，歡迎加入我們的會員社區??

→點這報名

參考閱讀

Computer History Museum：www.computerhistory.org
Birth of the Computer：www.computerhistory.org/revolution/birth-of-the-computer/4/intro
Input & Output：www.computerhistory.org/revolution/input-output/14
Who Invented the Computer：youtube.com/watch?v=d1pvc9Zh7Tg&t=91s
GUIdebook：guidebookgallery.org
As We May Think（誠如我思）原文+中文翻譯：killuayuki.blog.163.com/blog/static/46671595201312033536471/
Apple 1984 Super Bowl Commercial Introducing Macintosh Computer：youtube.com/watch?v=2zfqw8nhUwA
The many names of Apple』s operating systems, from System 1 to macOS：techcrunch.com/timeline/the-many-names-of-apples-operating-systems-from-system-1-to-macos-sierra/slide/2/