本文主要是從GUI的誕生和進化，來看桌面應(yīng)用設(shè)計有哪些基本要素。

很高興你能打開標題，進來閱讀這篇關(guān)于桌面應(yīng)用設(shè)計的文章。

閱讀過我前兩篇文章的朋友，可以看出那兩篇其實分享的是交互設(shè)計里非?；A(chǔ)的設(shè)計原則和跨平臺規(guī)范。沒錯，在我寫作計劃的開始，我會努力整理和總結(jié)一些行業(yè)內(nèi)知名的設(shè)計原則和平臺規(guī)范，和大家一起“回歸設(shè)計本源”。

前幾天被YouTube推薦了一個視頻：《 1984: young Steve Jobs introduces the Macintosh》，仔細看了一下喬布斯當時演示的Demo，發(fā)現(xiàn)：34年前的個人電腦，在硬件、兼容、功能、性能、交互細節(jié)、視覺表現(xiàn)等方面與今天的個人電腦有著非常明顯的差別，但不論是當年的底層系統(tǒng)還是桌面應(yīng)用，它們GUI的基本要素相比今天并沒有大的變化。

好，下面就從GUI的誕生和進化來看桌面應(yīng)用設(shè)計有哪些基本要素。

一、GUI的發(fā)展

1973 Xerox Alto

1973年第一個可視化操作的Alto計算機，在施樂帕洛阿爾托研究中心（Xerox PARC）完成。Alto是第一個把計算機所有元素，集合到一起的圖形界面操作系統(tǒng)。它使用了3鍵鼠標、位運算顯示器、圖形窗口、以太網(wǎng)絡(luò)連接?！S基百科

Alto的繼承者Xerox Star在1981年首次使用了窗口化設(shè)計，Xerox Star雖然在商業(yè)上沒有取得成功，但當時研發(fā)團隊在計算機交互界面和方式的創(chuàng)新，為日后的普及做出了卓越的貢獻，比如：鼠標、矩形窗口、滾動條、按鈕、桌面、面向?qū)ο缶幊獭⒍嗳蝿?wù)處理等。

在人機交互界面設(shè)計里，我們經(jīng)常會聽到一個詞，就是“所見即所得”的可視化交互體驗，它最早被運用在Alto計算機的設(shè)計理念之中，當時被稱為WYSIWYG（What You See Is What You Get）。

Alto的系統(tǒng)GUI，可以對文檔進行創(chuàng)建、編輯和查看，還可以在不同工作站之間以電子化的形式存儲、調(diào)用、傳輸文檔，也可以通過網(wǎng)絡(luò)將文檔打印出來。

第一個擁有GUI操作系統(tǒng)的計算機Xerox Alto及繼承者Xerox Star，首次使用了窗口設(shè)計。

1979年12月，喬布斯在施樂PARC參觀了Alto，由此產(chǎn)生了深刻的印象并獲得非常有價值的啟發(fā)。

他們（PARC）給我看了三樣?xùn)|西，但我被第一件東西亮瞎了，以至于我甚至沒有看到另外兩個。他們向我展示的東西之一是面向?qū)ο缶幊?。他們給我看了，但我沒get到。他們給我看的另一個實際上是一個聯(lián)網(wǎng)的計算機系統(tǒng)。有超過一百個Alto計算機在使用電子郵件等等，我也沒get到。那個亮瞎我的第一件東西就是圖形用戶界面（Graphical User Interface），我認為這是我這輩子見過的最好的東西。

——Steve Jobs

1983 Apple Lisa

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

1984 Macintosh

1986 X Windows System

1986年首款用于Unix的窗口系統(tǒng)X Window System發(fā)布。

1988 OS/2

OS/2是由微軟和IBM公司共同創(chuàng)造，后來由IBM單獨開發(fā)的一套操作系統(tǒng)。OS/2是”Operating System/2″的縮寫，是因為該系統(tǒng)作為IBM第二代個人計算機PS/2系統(tǒng)產(chǎn)品線的理想操作系統(tǒng)引入的。

1990 Microsoft Windows 3.0

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

1995-2018 Windows VS Mac

二、桌面應(yīng)用UI設(shè)計的基本要素

回顧完GUI發(fā)展歷史中的重要時刻，我們回到本文的主題：不論是當年的底層系統(tǒng)還是桌面應(yīng)用，它們GUI的基本要素相比今天并沒有大的變化，表現(xiàn)在：窗口、菜單、工具欄、圖標。

窗口

應(yīng)用程序為使用數(shù)據(jù)而在圖形用戶界面中設(shè)置的基本單元，應(yīng)用程序和數(shù)據(jù)在窗口內(nèi)實現(xiàn)一體化。在窗口中，用戶可以在窗口中操作應(yīng)用程序，進行數(shù)據(jù)的管理、生成和編輯。通常在窗口四周設(shè)有菜單、圖標，數(shù)據(jù)放在中央。

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

窗口是桌面應(yīng)用的上層（操作系統(tǒng)是它的底層），也是桌面應(yīng)用UI的核心元素。窗口可以被移動、放大、縮小的，用于放置內(nèi)容和功能的容器。

從GUI的發(fā)展歷程可以看出，底層系統(tǒng)和桌面應(yīng)用一直在以窗口這個對象和數(shù)據(jù)的載體，向用戶傳達信息。

菜單

菜單，又稱選單或功能表，在計算機應(yīng)用中是指圖形使用者界面（GUI）中的可以讓用戶在數(shù)個有關(guān)聯(lián)選項中選擇自己需要功能的組件，它是人機界面中的元素之一?！S基百科

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

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

大多數(shù)應(yīng)用提供了下拉樣式和彈出樣式的菜單，位置通常出現(xiàn)在應(yīng)用的頂部。

工具欄

與菜單一樣，工具欄也是一種有關(guān)聯(lián)動作的集合，用戶可以通過工具欄提供的功能，對于數(shù)據(jù)、文檔進行功能性操作。工具欄更多從屬于應(yīng)用軟件，用戶可以通過菜單調(diào)出或取消它們。

工具欄如果處于活動狀態(tài)，就會以一組可視圖標的形式呈現(xiàn)，可視圖標通常還會配以小的文本標簽。

桌面應(yīng)用的工具欄發(fā)展到今天，位置通常出現(xiàn)在應(yīng)用主窗口的頂部。很多應(yīng)用允許用戶根據(jù)個人需要自定義工具欄，對工具欄中的按鈕等對象進行添加、刪除、調(diào)整位置。

圖標

在桌面中，圖標常常用于表示計算機系統(tǒng)中的程序、功能、數(shù)據(jù)或數(shù)據(jù)集。應(yīng)用程序的啟動圖標依靠別具一格和顯著的風格，一直被作為產(chǎn)品品牌的一個重要部分。

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

對于桌面應(yīng)用本身來說，應(yīng)用窗口內(nèi)的工具欄和功能集合也會以圖標的形式表達信息。

總結(jié)

了解完GUI的發(fā)展史，我們可以清楚地發(fā)現(xiàn)桌面應(yīng)用UI設(shè)計的基本要素包括：窗口、菜單、工具欄、圖標。

寫完這篇文章后，我一直在思考這4項桌面UI設(shè)計的基本要素，乃至像鼠標、鍵盤這兩種信息輸入工具，為什么一直適用今天的個人電腦，沒有發(fā)生質(zhì)的變化。

基于我目前的認知，我個人認為有這樣幾個因素：

• 圖形化的界面可能是目前最友好最成熟的人機交互信息的載體，因為我們能看到的物，其實都是由二位空間的形，和三維空間的體所構(gòu)成的（可能還存在其他維度表現(xiàn)形式，就不扯遠了）。我們之所以認識文字，那是因為我們在識字時是先記住了形，再將形與意匹配、記憶。因此，圖形化用戶界面是符合人類本能的存在。
• 人類和動物最根本的差別是什么？是人類會制造工具從事生產(chǎn)勞動，而動物不會。因此，圖形化用戶界面里的工具欄也是符合人類本能的存在。計算機編程語言和技術(shù)的核心思想可能沒變。（我不了解計算機編程，這條是猜的）
• 從用戶心智模型的角度來看，圖形化用戶界面處于用戶心智的平穩(wěn)期，已經(jīng)長時間被我們接受，我們已經(jīng)習以為常，想要被打破，那就得等到下一個輪回。

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

感謝你的閱讀，我們下期再見

作者：王晗陵，微信公眾號：「從你的視界路過」（ID：wanghlnj1）

本文由 @王晗陵 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議