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

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

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

前幾天被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，首次使用了窗口設計。

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

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

——Steve Jobs

1983 Apple Lisa

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

1984 Macintosh

1986 X Windows System

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

1988 OS/2

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

1990 Microsoft Windows 3.0

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

1995-2018 Windows VS Mac

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

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

窗口

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

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

窗口是桌面應用的上層（操作系統是它的底層），也是桌面應用UI的核心元素。窗口可以被移動、放大、縮小的，用于放置内容和功能的容器。

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

菜單

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

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

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

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

工具欄

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

工具欄如果處于活動狀态，就會以一組可視圖标的形式呈現，可視圖标通常還會配以小的文本标簽。

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

圖标

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

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

對于桌面應用本身來說，應用窗口内的工具欄和功能集合也會以圖标的形式表達信息。

總結

了解完GUI的發展史，我們可以清楚地發現桌面應用UI設計的基本要素包括：窗口、菜單、工具欄、圖标。

寫完這篇文章後，我一直在思考這4項桌面UI設計的基本要素，乃至像鼠标、鍵盤這兩種信息輸入工具，為什麼一直适用今天的個人電腦，沒有發生質的變化。

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

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

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

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

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

本文由 @王晗陵 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部