用一篇文章,带你回顾桌面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,首次使用了窗口设计。

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设计的基本要素,乃至像鼠标、键盘这两种信息输入工具,为什么一直适用今天的个人电脑,没有发生质的变化。基于我目前的认知,我个人认为有这样几个因素:

图形化的界面可能是目前最友好最成熟的人机交互信息的载体,因为我们能看到的物,其实都是由二维空间的形,和三维空间的体所构成的(可能还存在其他维度表现形式,就不扯远了)。我们之所以认识文字,那是因为我们在识字时是先记住了形,再将形与意匹配、记忆。因此,图形化用户界面是符合人类本能的存在。

人类和动物最根本的差别是什么?是人类会制造工具从事生产劳动,而动物不会。因此,图形化用户界面里的工具栏也是符合人类本能的存在。

计算机编程语言和技术的核心思想可能没变。(我不了解计算机编程,这条是猜的)

从用户心智模型的角度来看,图形化用户界面处于用户心智的平稳期,已经长时间被我们接受,我们已经习以为常,想要被打破,那就得等到下一个轮回。

本文涵盖的个人观点比较多,如果你在这类话题上有不一样的想法或观点,非常欢迎一起交流。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • 界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成...
    A梦想才让心跳存在阅读 1,028评论 0 4
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,397评论 25 707
  • 当代桌面应用的界面都源自施乐公司(Xerox)的Alto,它是1973年施乐公司的Palo Alto研究中心(即P...
    江白菜杂货铺阅读 1,332评论 0 0
  • 忙碌的一天,一直到八点半,今天一杯水都没喝,值得吗? 和她聊聊天,感觉还是挺好的,WE CAN!
    13张阅读 124评论 0 0
  • 不破不立,不舍不得,说来容易,当一切已成执念又岂是易行之事?我之所以被情所困,被情所伤,是因不明自己心中...
    爱吃草莓的提拉米苏阅读 165评论 0 0