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

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

往期回顧：

《用Airbnb 的產(chǎn)品，幫你快速理解尼爾森10大可用性原則薄嫡！》

《設(shè)計(jì)師應(yīng)該知道的 iOS 設(shè)備常見差異化設(shè)計(jì)》

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

一、GUI的發(fā)展

1973 Xerox Alto

1973年第一個(gè)可視化操作的 Alto計(jì)算機(jī)在施樂帕洛阿爾托研究中心（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è)上沒有取得成功蒜埋，但當(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ì)聽到一個(gè)詞，就是「所見即所得」的可視化交互體驗(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)用砂碉、傳輸文檔，也可以通過網(wǎng)絡(luò)將文檔打印出來刻两。

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

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

他們（PARC）給我看了三樣?xùn)|西偏瓤，但我被第一件東西亮瞎了杀怠，以至于我甚至沒有看到另外兩個(gè)椰憋。他們向我展示的東西之一是面向?qū)ο缶幊烫恕Ｋ麄兘o我看了，但我沒 get到橙依。他們給我看的另一個(gè)實(shí)際上是一個(gè)聯(lián)網(wǎng)的計(jì)算機(jī)系統(tǒng)证舟。有超過一百個(gè) Alto計(jì)算機(jī)在使用電子郵件等等，我也沒 get到窗骑。那個(gè)亮瞎我的第一件東西就是圖形用戶界面（Graphical User Interface）女责，我認(rèn)為這是我這輩子見過的最好的東西〈匆耄——Steve 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)造刷喜，后來由 IBM 單獨(dú)開發(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 開始一較高下盖腿。

1995-2018 Windows VS Mac

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

回顧完 GUI 發(fā)展歷史中的重要時(shí)刻，我們回到本文的主題：不論是當(dāng)年的底層系統(tǒng)還是桌面應(yīng)用奸忽，它們 GUI 的基本要素相比今天并沒有大的變化堕伪，表現(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)行操作摄欲。——維基百科

窗口是桌面應(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ī)界面中的元素之一剿另◇锎福——維基百科

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

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

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

工具欄

與菜單一樣，工具欄也是一種有關(guān)聯(lián)動(dòng)作的集合赠摇，用戶可以通過工具欄提供的功能固逗，對(duì)于數(shù)據(jù)、文檔進(jìn)行功能性操作蝉稳。工具欄更多從屬于應(yīng)用軟件抒蚜，用戶可以通過菜單調(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帐要，用戶最熟悉的打開桌面應(yīng)用的方式都是通過鼠標(biāo)點(diǎn)擊圖標(biāo)來啟動(dòng)應(yīng)用把敞。

對(duì)于桌面應(yīng)用本身來說，應(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è)人電腦挥萌，沒有發(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ī)編程語言和技術(shù)的核心思想可能沒變。（我不了解計(jì)算機(jī)編程求豫，這條是猜的）

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

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