GUI进化史

87
GUI 进化史 拔赤 [email protected] http://jayli.github.com 2010-11-26

description

桌面操作系统的进化史

Transcript of GUI进化史

Page 1: GUI进化史

GUI 进化史拔赤 [email protected]

http://jayli.github.com2010-11-26

演示者
演示文稿备注
各位同学,我今天的分享话题是“GUI进化史”,GUI是Graphic User Interface的简称,在这里特指桌面操作系统。在计算机的发展过程中,硬件在不断更新换代,操作系统也在进化,当然这也包括桌面操作系统。
Page 2: GUI进化史

物竞天择,适者生存—— 达尔文(英)

演示者
演示文稿备注
这里不得不提及伟大的达尔文和他的进化论,进化论不仅适用于物种的演化,在计算机领域,尤其是桌面系统的演化也或多或少遵循着这条真理:物竞天择、适者生存。只是在计算机领域,择优条件不是自然环境,而是用户。
Page 3: GUI进化史

不断进化的硬件/操作系统

演示者
演示文稿备注
这里是祖孙三代苹果机的进化历程,随着硬件的提升,操作系统也随之不断进步,桌面操作系统中很多优秀元素也在很好的传承,所以,现代桌面操作系统的模样不是某一个公司、一个人创造发明的,是通过几十年的不断筛选和尝试得来的,是历史的沉淀,比尔盖茨和乔布斯都只是这种优秀传统的传承者而已,我们真正崇拜和尊敬的,不应是英雄主义,而应当是那铿锵的历史步伐。
Page 4: GUI进化史

Graphic User Interface

图形用户界面

演示者
演示文稿备注
Graphic User InterFace,直译图形用户界面,这里特指桌面操作系统。
Page 5: GUI进化史

始自 1980’的 PC 时代

IBM5150�(1981)

演示者
演示文稿备注
操作系统的历史可以追朔到上世纪60年代,但桌面操作系统的历史则延后将近20年,因为真正的个人电脑时代缘起自20世纪八十年代,这里不得不提到这场浪潮的先锋者 IBM,正是IBM 将电脑从实验室带入公众的视野。
Page 6: GUI进化史

• 拓荒时代(80年代)• 进化中的优胜劣汰(90年代初)• 经典的年代(90年代末)• 三大阵营(21世纪)

19901980 2000 2010

演示者
演示文稿备注
从20世纪八十年代开始,个人电脑开始兴起,这时也诞生了一大批最初的桌面操作系统,我称之为桌面系统的拓荒时代,一直到90年代初,以微软和苹果为首,接连出品了一些强势的桌面操作系统,淘汰了一大批老旧的系统,再到后来白热化的竞争和开源社区的加入,桌面系统开始风靡全球,直至今日形成三大体系。
Page 7: GUI进化史

• 拓荒时代(80年代)• 进化中的优胜劣汰(90年代初)• 经典的年代(90年代末)• 三大阵营(21世纪)

19901980 2000 2010

Page 8: GUI进化史

Xerox�8010�Star(1981)第一台集成桌面系统的电脑

演示者
演示文稿备注
在拓荒的起始阶段,最先走向公众的是Xerox 8010,这是全球第一款继承桌面系统的电脑,因为Xerox是生产打印机和复印机的公司,所以这款操作系统主要面向办公室打印和印刷排版领域,因此并未有广泛的传播。
Page 9: GUI进化史

Xerox�8010�Star(1981)

演示者
演示文稿备注
虽然是最早的桌面系统,但也具备了“桌面系统”的一些通用的特点,比如开始有了文件夹、应用程序、菜单、程序面板等概念,以及一些小控件,滚动条和列表等等。
Page 10: GUI进化史

文件夹应用程序

菜单程序面板

GUI�基本的组成单元

演示者
演示文稿备注
尽管这些概念非常模糊,并未有十分准确的定义,也没有附带更丰富的交互,但对于当时从未见过图形界面电脑的人们来说已然十分进步了。
Page 11: GUI进化史

Mac�OS�System�1.0�(1984)是最早的 Mac�操作系统 GUI

演示者
演示文稿备注
在1984年,苹果出品了最早的Mac OS GUI,就是这款Mac OS System 1.0,在这个系统中,桌面的概念被强化,增加了引导菜单,程序面板演化成了窗体,具有统一的样式(虽然很丑)。然而这款桌面系统带来最大的变化是鼠标的加入,极大的丰富了桌面系统的交互模式。
Page 12: GUI进化史

程序面板 =>�窗体丰富的鼠标操作

图标桌面

Mac�OS�System�1.0�带来了:

演示者
演示文稿备注
当然,Mac系统中的图标做了微妙的处理,让他们一眼看去就能分辨出属于不同的文档类型,在当时也是一个不小的进步。
Page 13: GUI进化史

Amiga�Workbench�1.0�(1985)�“彩色”时代的来临

演示者
演示文稿备注
在1985年的时候,Amiga Workbench的诞生给了大家一个惊喜,黑白变彩色。尽管彩色显像管十分昂贵,这款系统还是大胆创新的应用了黑白蓝橙作为四原色,黑白的UI看起来没有那么冷冰冰了。
Page 14: GUI进化史

四原色(黑白蓝橙)图标多状态

立体声多任务

Amiga�的创新:

演示者
演示文稿备注
除了彩色的应用,Amiga在诸多方面都颇具创新精神,图标增加了点击、释放、选中的状态,硬件方面,这款操作系统支持了多声道和立体声,同时,最值得一提的创新当属“多任务”在桌面系统的实现。
Page 15: GUI进化史

Windows�2.0�(1987)�“窗口的世界!”

演示者
演示文稿备注
1987年,刚成立不久的微软发布了windows 2.0,在UI设计方面,窗口的运用开始让用户对鼠标产生依赖。窗口的设计也很讲究,所有窗口都带有导航菜单,这种设计一直延续到20年后的vista中。
Page 16: GUI进化史

可变的窗口尺寸更多窗口的状态统一的窗口菜单

Windows�2.0�的窗口设计:

演示者
演示文稿备注
当然,windows 2.0 多来自窗口的设计,包括可变的窗口尺寸,窗口的选中状态,和统一的窗口菜单。
Page 17: GUI进化史

Apple�Macintosh�II�(1987)�第一个“真彩色”

演示者
演示文稿备注
在彩色显像管技术突飞猛进的时代,计算机领域自然仅仅跟随其发展脚步,而第一款“真彩色”GUI系统则是来自于苹果Macintosh 2,当然这也得益于苹果公司在硬件技术上做的努力,16位的色值存储第一次升级到24位,也就是真彩色。
Page 18: GUI进化史

OS/2�1.20�(1989)微软 和 IBM�的联姻

演示者
演示文稿备注
在创业之初,微软和IBM有着千丝万缕的联系,他们之间的联姻有过很多美好时光,其中最具代表性的就是 OS/2 1.2,IBM强悍的硬件技术外加微软颇具特色的窗口设计,就组成了 OS/2 1.2,可以看到,有着立体感的按钮,和蓝色的窗口样式,无不印着windows的烙印。
Page 19: GUI进化史

窗体更细致图标更平滑

摆脱不掉的 windows�的烙印…

OS�/�2�的特色:

演示者
演示文稿备注
然而在用户抉择的时代,对于微软和IBM都有失公平,用户往往更加追随惯于做“表面文章”的微软,而忽视在硬件性能和操作系统稳定性方面更胜一筹的IBM,殊不知若没有IBM的底层技术的支撑,微软是不可能如此轻松的步入90年代的。
Page 20: GUI进化史

• 拓荒时代(80年代)

• 进化中的优胜劣汰(90年代初)• 经典的年代(90年代末)• 三大阵营(21世纪)

19901980 2000 2010

演示者
演示文稿备注
因此,在进入90年代后,IBM和微软的关系发生了微妙的变化,这个时期苹果趁机发迹,也正是在这个桌面操作系统竞争的关键时期,IBM 被残酷的淘汰掉,微软的步伐瞬间被拖慢,以至于到2001年windowsXP中才渐渐摆脱了稳定性问题(windows臭名昭著的蓝屏)。
Page 21: GUI进化史

Windows�3.0�(1990)启动画面

演示者
演示文稿备注
1990年,windows 3.0 发布,从这时起,微软给大家带来的印象也越来越统一,很多经典的设计开始传承,有的甚至可以延续20年之久。
Page 22: GUI进化史

Windows�3.0�(1990)形成独特的窗口风格

演示者
演示文稿备注
Windows 3.0 更加细致的设计了窗口,几乎所有的button都具有一致的立体风格。
Page 23: GUI进化史

Windows�3.0�(1990)专业设计师的参与,使Windows形成独有的主题风格

演示者
演示文稿备注
在windows 3.0的研发中,除了工程师之外,微软开创性的邀请了专业设计师的才与,所以图标更加美观,窗口的尺寸比例更加和谐,这一切,都形成了windows独有的主题风格,让人很容易辨识。
Page 24: GUI进化史

Windows�3.0�(1990)内置游戏:纸牌游戏

演示者
演示文稿备注
在这一款系统中,微软放置了一些内置游戏,其中就包含这款纸牌游戏。在之后的windows系统所有版本中,都内嵌这款游戏。
Page 25: GUI进化史

另类的 GeoWorks (1992)

GeoWorks 的欢迎窗口,可以看到大量的像素画

演示者
演示文稿备注
在这个时期,也有一些另类的桌面系统,比如GeoWOrk,在视觉设计上有了很多独具匠心的尝试,比如像素画的大量运用,大大的button,关闭按钮和帮助按钮的放置等等。
Page 26: GUI进化史

GeoWorks 交互设计有很多新的尝试

演示者
演示文稿备注
像素画太大太多,颜色就多,以至于用户经常找不到鼠标的位置,所以GeoWorks就搞了一个小程序:右下角的“一对小眼睛”,如果找不到鼠标,可以顺着眼睛的方向去找,这个小眼睛后来被用于linux的桌面系统中,并一直保留下来。
Page 27: GUI进化史

GeoWorks 中的文件管理器

演示者
演示文稿备注
这时GeoWorks的文件管理器,上下各有一排大大的按钮,并配有一些有意思的像素画,其实这种安排除了占用大面积的空间,而且并不是所有的按钮都很常用,所以这种设计是由一些浪费的。
Page 28: GUI进化史

32位桌面 OS / 2 2.0(1992)

演示者
演示文稿备注
随着硬件的性能提升,第一款32位桌面操作系统也随之诞生,这个性能上的创新依然来自IBM,这个是他的启动画面。
Page 29: GUI进化史

OS�/�2�中引入可用性测试,消灭OS调用盲区

演示者
演示文稿备注
在这款操作系统中,IBM的工程师们创造性的引入了工程化的开发流程,包括第一次引入可用性测试,更大范围的提升了桌面系统的能力,毕竟,桌面系统作为OS内核的一层shell,并不是对硬件的所有操作都可以通过“界面”完成,比如一个程序运行缓慢,GUI必须提供接口给用户让其能终止这个程序的运行,也正是这种创新,被之后的微软和苹果消防,资源管理器和更丰富的内存管理软件营运而生。而这种对于影响GUI生产厂商的创新在开始则并不好用,只是能用而已。
Page 30: GUI进化史

革命性的 Windows 3.1 (1992)

演示者
演示文稿备注
1992年,微软发布了革命性的Windows 3.1,这个经典的logo开始深入人心。
Page 31: GUI进化史

Windows�3.1�中的窗口的拖拽

演示者
演示文稿备注
Windows3.1中增加了鼠标拖拽等大量新的交互模式。
Page 32: GUI进化史

Windows�3.1�增加大量的(错误)提示

演示者
演示文稿备注
而且其纠错能力有了进一步的提升,微软开始初尝和IBM决裂的苦果,大量的系统错误使得微软不得不用错误弹窗提示来解决,这是一种极其糟糕的用户体验,然而在当时,这种海量的弹窗却加深了大家对windows的印象。
Page 33: GUI进化史

多种配色主题(色弱和色盲)引入 TrueType�字体(点阵+矢量)

可用于印刷领域(针式打印->喷墨打印)

演示者
演示文稿备注
除了大量的错误提示,windows3.1在设计上提供了配色主题,当然都比较丑,因为多种配色主要提提供给色盲和色弱者,从这方面可见微软的细致用心之处。此外,微软开创性的引入truetype字体,这种点阵+矢量字体不但适合显示器呈现,而且适用于更加精细的喷墨打印。
Page 34: GUI进化史

轻巧的QNX (1994)

体积超小、无需硬盘第一版嵌入式桌面 OS

演示者
演示文稿备注
在1994年的时候,出现了一款轻巧的GUI——QNX,它体积小,可以直接放到软盘之中,这也是全球第一款嵌入式的桌面系统。
Page 35: GUI进化史

QNX特点:右侧的快捷启动列表

演示者
演示文稿备注
这款操作系统的特点是右侧的快捷启动列表。
Page 36: GUI进化史

QNX�自带经典的“The�Matrix”�屏保

演示者
演示文稿备注
QNX的诸多创新之中最经典的当属这款屏保。
Page 37: GUI进化史

二次革命 Windows 95(1995)

Windows�95�启动画面

演示者
演示文稿备注
1995年,微软对windows做了全新设计,出品了windows95,这里是经典的启动画面。
Page 38: GUI进化史

全新的 UI�设计/多种按钮状态“开始”按钮 (GUI真正走向平民)

演示者
演示文稿备注
全新的UI设计瞬间征服了更加傻瓜化的平民用户,开始按钮的创新,让操作系统的使用更加简单,也正是windows95大量UI设计上的创新,剥离了操作系统对于普通用户的神秘感,让GUI真正走向大众。
Page 39: GUI进化史

颇具野心的 BeOS(1996)

BeOS�logo

演示者
演示文稿备注
在专业操作系统领域,依然有很多不同的尝试,BeOS就是其中之一,这是一款专门针对多媒体设计的操作系统。
Page 40: GUI进化史

专门为多媒体设计第一版跨平台桌面 OS(PowerPC�和 Interl)

演示者
演示文稿备注
在视频播放方面,BeOS可以支持微软的wma格式和苹果的quicktime格式,同样支持标准的mpg和mp3等格式。在基础架构方面,这款操作系统并不依赖于某种硬件,他可以运行在苹果的PowerPC和Inter的个人电脑上,操作系统从此也不再绑定在某一款机型上,而是变成了可以安装可以卸载的“软件”。
Page 41: GUI进化史

最后的反击 OS/2 Wrap4(1996)

OS/2�Wrap4�启动画面

演示者
演示文稿备注
IBM和微软的决裂不仅影响了微软,也极大影响了IBM在桌面操作系统上的份额,为了挽回败局,IBM在1996年发布了Wrap4。
Page 42: GUI进化史

针对商务办公用途设计;开发鼠标右键(右键单双击/右键拖拽);�多桌面

演示者
演示文稿备注
这款操作系统针对办公室的白领设计,专门用户办公用途,它开发了更多的鼠标行为,包括右键的双机,右键的拖拽,另外,它还应用了多桌面的设计。
Page 43: GUI进化史

• 拓荒时代(80年代)• 进化中的优胜劣汰(90年代初)

• 经典的年代(90年代末)• 三大阵营(21世纪)

19951980 2000 20101990

演示者
演示文稿备注
IMB短暂的春天并没有持续太久,在90年代末微软和苹果的白热化的竞争中败下阵来。这个时期是创造奇迹的时期,因为90年代末,PC机和苹果机开始大量普及,更多从未接触过计算机的人开始使用电脑,所以微软和苹果开了始争夺用户的战役。
Page 44: GUI进化史

风靡一时的 Mac OS 8 (1997)

2�周安装量 125�万!

演示者
演示文稿备注
首先发力的是苹果,Mac OS 8 在1997年发布,奇迹般的创造了2周125万的安装量,在没有网络的时代,这个数字是很了不起的。
Page 45: GUI进化史

默认安装 IE增加窗口动画特效

演示者
演示文稿备注
Mac OS 8 默认安装了IE,尽管苹果和微软是竞争关系,但第三方浏览器的疲软使得苹果不得不做出这个艰难的选择。此外,Mac OS 8增加了大量的窗口动画特效,在当时大受欢迎。
Page 46: GUI进化史

永远经典的 Windows 98 (1998)

Windows�98�启动画面

演示者
演示文稿备注
紧接着,微软发布了windows 98,98的UI设计和95保持一致,微软用了不止3年的时间来完善windows的底层架构,以追赶早就开始在硬件和底层软件方面做原始积累的苹果,但依然无法摆脱那让人诟病的蓝屏。
Page 47: GUI进化史

默认安装 IE�(IE根深蒂固的源头)我们的第一次都献给了 Win98

演示者
演示文稿备注
Win98的关机屏幕,增加了待机和重启。
Page 48: GUI进化史

一线光明? KDE (1998)

Linux�准桌面系统,受限制的自由?

演示者
演示文稿备注
在微软和苹果激战正酣的时候,在开源社区中的桌面系统也已经开始萌芽,KDE作为第一款linux中的桌面系统,收到开源社区的追捧。不过KDE基于QT实现,QT并不是纯粹的自由软件,所以KDE在开源社区的进一步传播受版权法律方面的影响。
Page 49: GUI进化史

无处不在的单击 +�丰富的定制!

演示者
演示文稿备注
KDE中大量使用了单击,因为开源社区的开发者们习惯了命令行的方便快捷,所以根本不愿意多花一次点击,得益开源精神的庇佑,KDE自诞生伊始就可以做丰富的定制。
Page 50: GUI进化史

默默无闻的 GNOME (1999)

开源! 自由!吸引了开源社区大量优秀设计师的参与

演示者
演示文稿备注
由于KDE的版权枷锁,开源社区发起了Gnome项目,这个GUI完全自由,排除了版权的障碍,Gnome吸引了大量优秀设计师的参与。
Page 51: GUI进化史

GNOME�出色的美工基础 &�比KDE更加自由

演示者
演示文稿备注
因此,GNOME的美工基础要比KDE强很多。最重要的,GNOME是非常自由的软件,可以使用、修改、甚至用于商用。
Page 52: GUI进化史

• 拓荒时代(80年代)• 进化中的优胜劣汰(90年代初)• 经典的年代(90年代末)

• 三大阵营(21世纪)

19901980 2000 2010

演示者
演示文稿备注
IBM被淘汰掉之后,微软和苹果的竞争也进入二十一世纪,此外,开源社区的活跃也为GUI添彩许多。
Page 53: GUI进化史

MacOS X 10.1 (2000)

演示者
演示文稿备注
2000年,苹果发布了MacOS X 10.1,“X”即是10的意思。
Page 54: GUI进化史

颠覆性的交互设计晶莹剔透的图标独一无二的苹果特色!

演示者
演示文稿备注
风格统一且美观的图标,大量交互设计上的创新,外加出色的硬件支持,使得苹果的人气一度超越微软。
Page 55: GUI进化史

Windows XP (2001)告别蓝屏

演示者
演示文稿备注
微软还在费牛劲的完善windows底层架构,终于在2001年发布了windows xp,摆脱了蓝屏的微软一身轻松。
Page 56: GUI进化史

Windows XP (2001)

演示者
演示文稿备注
Windows XP经典的登录界面。
Page 57: GUI进化史

经典的蓝天白云

演示者
演示文稿备注
Windows XP 经典的蓝天白云。
Page 58: GUI进化史

更多主题风格

演示者
演示文稿备注
Windows XP支持更丰富的主题定制。
Page 59: GUI进化史

可爱的路虎 Rover

演示者
演示文稿备注
那个导航帮助的小狗路虎也由像素画变成更加可爱。
Page 60: GUI进化史

第三阵营 KDE 3.x (2002)

运行于64位操作系统大量新技术的应用(硬件加速,3D桌面)

更多开源应用程序!

演示者
演示文稿备注
在开源社区,依然涌现着大量新技术的应用,随着64位操作系统的发展,KDE开始支持了64位操作系统,同时,大量的硬件加速、3D桌面和更多开源应用程序,将KDE的档次瞬间提升数倍。
Page 61: GUI进化史

KDE�3.x�的美工有了长足的进步

演示者
演示文稿备注
在KDE3.x中,UI设计有了长足的进步,KED更注重图标风格的统一。
Page 62: GUI进化史

KDE�中开启 3D�桌面(3D桌面诞生自2006年)

演示者
演示文稿备注
2006年,3D桌面应用致KDE中,虽然不实用,但的确很炫。
Page 63: GUI进化史

华丽的 GNOME 2.x (2004)

惊艳的GNOME遵守 GPL�自由软件协议!

演示者
演示文稿备注
KDE表现如此出色,GNOME自然不甘落后。
Page 64: GUI进化史

更丰富的主题定制:控件样式+窗口+图标

演示者
演示文稿备注
GNOME给用户开放了更加灵活的主题定制,控件样式窗口图标的样式都可以定制,你可以吧Gnome打扮成MacOS,也可以打扮成KDE,也可以打扮成windows,甚至他们的交互都可以模拟出来。最重要的,GNOME是开源加免费的。
Page 65: GUI进化史

Fedora�7�自带的3D桌面 (2006)

演示者
演示文稿备注
Fedora 7 中自带的3D桌面。
Page 66: GUI进化史

更丰富的 3D�桌面特效

演示者
演示文稿备注
3D桌面在gnome中有了更多的花样。
Page 67: GUI进化史

更丰富的 3D�桌面特效

演示者
演示文稿备注
3D桌面在gnome中有了更多的花样。
Page 68: GUI进化史

Mac OS X Leopard (2007)

3�天 安装量 200�万!More�than�GUI…

演示者
演示文稿备注
苹果在07年发布了Mac OS 雪豹,3天安装量200万又一次创造了奇迹。
Page 69: GUI进化史

全面超越…

演示者
演示文稿备注
Aqua的主题风格非常漂亮。
Page 70: GUI进化史

时光机…

演示者
演示文稿备注
有意思的时光机。
Page 71: GUI进化史

特效…

演示者
演示文稿备注
窗口效果非常炫。
Page 72: GUI进化史

设计不仅仅要关注产品的外观和感觉

更重要的是考虑产品怎样工作

—— 乔布斯

演示者
演示文稿备注
乔布斯语录
Page 73: GUI进化史

Windows 7(2008)

光影效果的应用“越简单越好”的理念

演示者
演示文稿备注
08年,微软为了挽回vista的颓势,发布了window7
Page 74: GUI进化史
演示者
演示文稿备注
Windows7的UI设计师来自于80后,光影效果的运用更吸引80后
Page 75: GUI进化史

“纸牌游戏”见证了Windows�的代代演变

演示者
演示文稿备注
又是这个纸牌游戏
Page 76: GUI进化史
演示者
演示文稿备注
切换程序
Page 77: GUI进化史

Windows7�是微软出品的最好的一款 Windows�操作系统

——“华尔街日报”

演示者
演示文稿备注
对windows7的评价
Page 78: GUI进化史

KDE 4.x(2009)“我的系统我做主”

用户才是最好的“设计师”

演示者
演示文稿备注
在开源社区,KDE又发布了KDE4.
Page 79: GUI进化史
演示者
演示文稿备注
KDE默认主题 air
Page 80: GUI进化史

KDE�4.2�默认主题 AIR

演示者
演示文稿备注
KDE默认主题 air
Page 81: GUI进化史

完全免费的操作系统…

演示者
演示文稿备注
开源的东西真不错,好玩且免费。
Page 82: GUI进化史

真正无价的,是自由!

—— Open�Source�Community

Page 83: GUI进化史

Three�Gods!

演示者
演示文稿备注
你信哪个神呢?
Page 84: GUI进化史

总有一款适合你~

演示者
演示文稿备注
不管怎么样,总有一款操作系统适合你
Page 85: GUI进化史

To�Be�Continue…

演示者
演示文稿备注
除了个人电脑领域,在手持终端上,桌面操作系统的竞争也刚刚开始。
Page 86: GUI进化史

• GUI�Gallery– http://toastytech.com/guis/

• 80年代以来 GUI�进化史(上)– http://www.cnbeta.com/articles/79181.htm

• 80年代以来 GUI�进化史(下)– http://www.cnbeta.com/articles/79262.htm

相关链接

Page 87: GUI进化史