用一篇文章,帶你回顧桌面GUI 的設計發展史

很高興你能打開標題,進來閱讀這篇關於桌面應用設計的文章。

閱讀過我前兩篇文章的朋友可以看出那兩篇其實分享的是交互設計裡非常基礎的設計原則和跨平臺規範。沒錯,在我寫作計劃的開始,我會努力整理和總結一些行業內知名的設計原則和平臺規範,和大家一起「迴歸設計本源」。

往期回顧:

  • 《用Airbnb 的產品,幫你快速理解尼爾森10大可用性原則!》
  • 《設計師應該知道的 iOS 設備常見差異化設計》

前幾天被 YouTube 推薦了一個視頻:《 1984: young Steve Jobs introduces the Macintosh》,仔細看了一下喬布斯當時演示的 Demo,發現:34年前的個人電腦,在硬件、兼容、功能、性能、交互細節、視覺表現等方面與今天的個人電腦有著非常明顯的差別,但不論是當年的底層系統還是桌面應用,它們 GUI 的基本要素相比今天並沒有大的變化。好,下面就從 GUI 的誕生和進化來看桌面應用設計有哪些基本要素。

一、GUI的發展

1973 Xerox Alto

1973年第一個可視化操作的 Alto計算機在施樂帕洛阿爾託研究中心(Xerox PARC)完成。Alto 是第一個把計算機所有元素集合到一起的圖形界面操作系統。它使用了3鍵鼠標、位運算顯示器、圖形窗口、以太網絡連接。——維基百科

Alto 的繼承者 Xerox Star 在1981年首次使用了窗口化設計,Xerox Star 雖然在商業上沒有取得成功,但當時研發團隊在計算機交互界面和方式的創新,為日後的普及做出了卓越的貢獻,比如:鼠標、矩形窗口、滾動條、按鈕、桌面、面向對象編程、多任務處理等。

在人機交互界面設計裡,我們經常會聽到一個詞,就是「所見即所得」的可視化交互體驗,它最早被運用在 Alto計算機的設計理念之中,當時被稱為WYSIWYG(What You See Is What You Get)。Alto 的系統 GUI,可以對文檔進行創建、編輯和查看,還可以在不同工作站之間以電子化的形式存儲、調用、傳輸文檔,也可以通過網絡將文檔打印出來。

第一個擁有 GUI 操作系統的計算機 Xerox Alto 及繼承者 Xerox Star,首次使用了窗口設計。

用一篇文章,帶你回顧桌面GUI 的設計發展史

1979年12月,喬布斯在施樂 PARC 參觀了 Alto,由此產生了深刻的印象並獲得非常有價值的啟發。

用一篇文章,帶你回顧桌面GUI 的設計發展史

他們(PARC)給我看了三樣東西,但我被第一件東西亮瞎了,以至於我甚至沒有看到另外兩個。他們向我展示的東西之一是面向對象編程。他們給我看了,但我沒 get到。他們給我看的另一個實際上是一個聯網的計算機系統。有超過一百個 Alto計算機在使用電子郵件等等,我也沒 get到。那個亮瞎我的第一件東西就是圖形用戶界面(Graphical User Interface),我認為這是我這輩子見過的最好的東西。——Steve Jobs

1983 Apple Lisa

1983年蘋果計算機公司推出 Apple Lisa 個人計算機,是全球第一款搭載圖形用戶界面(GUI)的個人計算機。

用一篇文章,帶你回顧桌面GUI 的設計發展史

1984 Macintosh

用一篇文章,帶你回顧桌面GUI 的設計發展史

1986 X Windows System

1986年首款用於 Unix 的窗口系統X Window System 發佈。

用一篇文章,帶你回顧桌面GUI 的設計發展史

1988 OS/2

OS/2是由微軟和 IBM 公司共同創造,後來由 IBM 單獨開發的一套操作系統。OS/2是「Operating System/2」的縮寫,是因為該系統作為 IBM 第二代個人計算機PS/2系統產品線的理想操作系統引入的。

用一篇文章,帶你回顧桌面GUI 的設計發展史

1990 Microsoft Windows 3.0

微軟在1990年發行 Windows 3.0非常成功。除了改進應用程序的能力之外,利用虛擬內存,Windows 容許 MS-DOS 軟件有更好的多任務表現。加上個人電腦的圖像處理能力改良(使用VGA圖像卡),和使用保護模式記憶模式,應用程序能比較容易運用更多的存儲器。從此,PC 和 Macintosh 開始一較高下。

用一篇文章,帶你回顧桌面GUI 的設計發展史

1995-2018 Windows VS Mac

用一篇文章,帶你回顧桌面GUI 的設計發展史

用一篇文章,帶你回顧桌面GUI 的設計發展史

用一篇文章,帶你回顧桌面GUI 的設計發展史

用一篇文章,帶你回顧桌面GUI 的設計發展史

用一篇文章,帶你回顧桌面GUI 的設計發展史

用一篇文章,帶你回顧桌面GUI 的設計發展史

用一篇文章,帶你回顧桌面GUI 的設計發展史

用一篇文章,帶你回顧桌面GUI 的設計發展史

用一篇文章,帶你回顧桌面GUI 的設計發展史

用一篇文章,帶你回顧桌面GUI 的設計發展史

用一篇文章,帶你回顧桌面GUI 的設計發展史

用一篇文章,帶你回顧桌面GUI 的設計發展史

二、桌面應用UI設計的基本要素

回顧完 GUI 發展歷史中的重要時刻,我們回到本文的主題:不論是當年的底層系統還是桌面應用,它們 GUI 的基本要素相比今天並沒有大的變化,表現在:窗口、菜單、工具欄、圖標。

窗口

應用程序為使用數據而在圖形用戶界面中設置的基本單元。應用程序和數據在窗口內實現一體化。在窗口中,用戶可以在窗口中操作應用程序,進行數據的管理、生成和編輯。通常在窗口四周設有菜單、圖標,數據放在中央。

在窗口中,根據各種數據/應用程序的內容設有標題欄,一般放在窗口的最上方,並在其中設有最大化、最小化(隱藏窗口,並非消除數據)、最前面、縮進(僅顯示標題欄)等動作按鈕,可以簡單地對窗口進行操作。——維基百科

窗口是桌面應用的上層(操作系統是它的底層),也是桌面應用UI 的核心元素。窗口可以被移動、放大、縮小的,用於放置內容和功能的容器。

從 GUI 的發展歷程可以看出,底層系統和桌面應用一直在以窗口這個對象和數據的載體,向用戶傳達信息。

用一篇文章,帶你回顧桌面GUI 的設計發展史

菜單

菜單,又稱選單或功能表,在計算機應用中是指圖形使用者界面(GUI)中的可以讓用戶在數個有關聯選項中選擇自己需要功能的組件,它是人機界面中的元素之一。——維基百科

菜單通常由可供選擇的一組文字和符號組成,是一系列命令的列表。用戶用鼠標單擊其中一個選項後,就指定計算機執行一個特定動作或功能。

菜單一般用來提供指向各種操作和功能的快捷途徑,比如打開和儲存文檔、退出程序、操作數據等。應用可以將它當作是一系列常用命令的快捷鍵,而不需要用戶詳細瞭解這些命令的使用語法。

大多數應用提供了下拉樣式和彈出樣式的菜單,位置通常出現在應用的頂部。

用一篇文章,帶你回顧桌面GUI 的設計發展史

工具欄

與菜單一樣,工具欄也是一種有關聯動作的集合,用戶可以通過工具欄提供的功能,對於數據、文檔進行功能性操作。工具欄更多從屬於應用軟件,用戶可以通過菜單調出或取消它們。

工具欄如果處於活動狀態,就會以一組可視圖標的形式呈現,可視圖標通常還會配以小的文本標籤。

桌面應用的工具欄發展到今天,位置通常出現在應用主窗口的頂部。很多應用允許用戶根據個人需要自定義工具欄,對工具欄中的按鈕等對象進行添加、刪除、調整位置。

用一篇文章,帶你回顧桌面GUI 的設計發展史

圖標

在桌面中,圖標常常用於表示計算機系統中的程序、功能、數據或數據集。應用程序的啟動圖標依靠別具一格和顯著的風格,一直被作為產品品牌的一個重要部分。

不論是1984年的 Macintosh 還是如今的 macOS 和 Windows,用戶最熟悉的打開桌面應用的方式都是通過鼠標點擊圖標來啟動應用。

用一篇文章,帶你回顧桌面GUI 的設計發展史

對於桌面應用本身來說,應用窗口內的工具欄和功能集合也會以圖標的形式表達信息。

用一篇文章,帶你回顧桌面GUI 的設計發展史

總結

瞭解完 GUI 的發展史,我們可以清楚地發現桌面應用 UI設計的基本要素包括:窗口、菜單、工具欄、圖標。寫完這篇文章後,我一直在思考這4項桌面 UI設計的基本要素,乃至像鼠標、鍵盤這兩種信息輸入工具,為什麼一直適用今天的個人電腦,沒有發生質的變化。基於我目前的認知,我個人認為有這樣幾個因素:

圖形化的界面可能是目前最友好最成熟的人機交互信息的載體,因為我們能看到的物,其實都是由二維空間的形,和三維空間的體所構成的(可能還存在其他維度表現形式,就不扯遠了)。我們之所以認識文字,那是因為我們在識字時是先記住了形,再將形與意匹配、記憶。因此,圖形化用戶界面是符合人類本能的存在。

人類和動物最根本的差別是什麼?是人類會製造工具從事生產勞動,而動物不會。因此,圖形化用戶界面裡的工具欄也是符合人類本能的存在。

計算機編程語言和技術的核心思想可能沒變。(我不瞭解計算機編程,這條是猜的)

從用戶心智模型的角度來看,圖形化用戶界面處於用戶心智的平穩期,已經長時間被我們接受,我們已經習以為常,想要被打破,那就得等到下一個輪迴。

本文涵蓋的個人觀點比較多,如果你在這類話題上有不一樣的想法或觀點,非常歡迎一起交流。


分享到:


相關文章: