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

閱讀過(guò)我前兩篇文章的朋友可以看出那兩篇其實(shí)分享的是交互設(shè)計(jì)里非常基礎(chǔ)的設(shè)計(jì)原則和跨平臺(tái)規(guī)范。沒(méi)錯(cuò)，在我寫作計(jì)劃的開(kāi)始，我會(huì)努力整理和總結(jié)一些行業(yè)內(nèi)知名的設(shè)計(jì)原則和平臺(tái)規(guī)范，和大家一起「回歸設(shè)計(jì)本源」。

往期回顧：

• 《用Airbnb 的產(chǎn)品，幫你快速理解尼爾森10大可用性原則！》
• 《設(shè)計(jì)師應(yīng)該知道的 iOS 設(shè)備常見(jiàn)差異化設(shè)計(jì)》

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

一、GUI的發(fā)展

1973 Xerox Alto

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

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

在人機(jī)交互界面設(shè)計(jì)里，我們經(jīng)常會(huì)聽(tīng)到一個(gè)詞，就是「所見(jiàn)即所得」的可視化交互體驗(yàn)，它最早被運(yùn)用在 Alto計(jì)算機(jī)的設(shè)計(jì)理念之中，當(dāng)時(shí)被稱為WYSIWYG（What You See Is What You Get）。Alto 的系統(tǒng) GUI，可以對(duì)文檔進(jìn)行創(chuàng)建、編輯和查看，還可以在不同工作站之間以電子化的形式存儲(chǔ)、調(diào)用、傳輸文檔，也可以通過(guò)網(wǎng)絡(luò)將文檔打印出來(lái)。

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

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

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

1983 Apple Lisa

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

1984 Macintosh

1986 X Windows System

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

1988 OS/2

OS/2是由微軟和 IBM 公司共同創(chuàng)造，后來(lái)由 IBM 單獨(dú)開(kāi)發(fā)的一套操作系統(tǒng)。OS/2是「Operating System/2」的縮寫，是因?yàn)樵撓到y(tǒng)作為 IBM 第二代個(gè)人計(jì)算機(jī)PS/2系統(tǒng)產(chǎn)品線的理想操作系統(tǒng)引入的。

1990 Microsoft Windows 3.0

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

1995-2018 Windows VS Mac

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

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

窗口

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

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

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

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

菜單

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

菜單通常由可供選擇的一組文字和符號(hào)組成，是一系列命令的列表。用戶用鼠標(biāo)單擊其中一個(gè)選項(xiàng)后，就指定計(jì)算機(jī)執(zhí)行一個(gè)特定動(dòng)作或功能。

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

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

工具欄

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

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

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

圖標(biāo)

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

不論是1984年的 Macintosh 還是如今的 macOS 和 Windows，用戶最熟悉的打開(kāi)桌面應(yīng)用的方式都是通過(guò)鼠標(biāo)點(diǎn)擊圖標(biāo)來(lái)啟動(dòng)應(yīng)用。

對(duì)于桌面應(yīng)用本身來(lái)說(shuō)，應(yīng)用窗口內(nèi)的工具欄和功能集合也會(huì)以圖標(biāo)的形式表達(dá)信息。

總結(jié)

了解完 GUI 的發(fā)展史，我們可以清楚地發(fā)現(xiàn)桌面應(yīng)用 UI設(shè)計(jì)的基本要素包括：窗口、菜單、工具欄、圖標(biāo)。寫完這篇文章后，我一直在思考這4項(xiàng)桌面 UI設(shè)計(jì)的基本要素，乃至像鼠標(biāo)、鍵盤這兩種信息輸入工具，為什么一直適用今天的個(gè)人電腦，沒(méi)有發(fā)生質(zhì)的變化。基于我目前的認(rèn)知，我個(gè)人認(rèn)為有這樣幾個(gè)因素：

圖形化的界面可能是目前最友好最成熟的人機(jī)交互信息的載體，因?yàn)槲覀兡芸吹降奈?，其?shí)都是由二維空間的形，和三維空間的體所構(gòu)成的（可能還存在其他維度表現(xiàn)形式，就不扯遠(yuǎn)了）。我們之所以認(rèn)識(shí)文字，那是因?yàn)槲覀冊(cè)谧R(shí)字時(shí)是先記住了形，再將形與意匹配、記憶。因此，圖形化用戶界面是符合人類本能的存在。

人類和動(dòng)物最根本的差別是什么？是人類會(huì)制造工具從事生產(chǎn)勞動(dòng)，而動(dòng)物不會(huì)。因此，圖形化用戶界面里的工具欄也是符合人類本能的存在。
計(jì)算機(jī)編程語(yǔ)言和技術(shù)的核心思想可能沒(méi)變。（我不了解計(jì)算機(jī)編程，這條是猜的）

從用戶心智模型的角度來(lái)看，圖形化用戶界面處于用戶心智的平穩(wěn)期，已經(jīng)長(zhǎng)時(shí)間被我們接受，我們已經(jīng)習(xí)以為常，想要被打破，那就得等到下一個(gè)輪回。

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

歡迎關(guān)注作者的微信公眾號(hào)：「設(shè)計(jì)意志」

圖片素材作者：Alexey Kuvaldin

「豐富知識(shí)，來(lái)看這些發(fā)展史」

• 《不懂服務(wù)設(shè)計(jì)？看看它的演變歷史你就知道了！》
• 《漲姿勢(shì)！可愛(ài)插畫幫你了解Mac OS X的變化發(fā)展史》
• 《1990-2018，可能是最全的 Photoshop 簡(jiǎn)史科普》
• 《從歷代iPhone 官網(wǎng)設(shè)計(jì)，紀(jì)念 iPhone 誕生十周年》