您现在的位置:首页 > 用户体验

80 年代以来的操作系统 GUI 设计进化史(上)

时间:2009-03-16  来源:webdesignerdepot.com  作者:webdesignerdepot.com  点击数:32

70年代,施乐公司Xerox Palo Alto Research Center (PARC) 的研究人员开发了第一个 GUI 图形用户界面,开启了计算机图形界面的新纪元,80年代以来,操作系统的界面设计经历了众多变迁,OS/2, Macintosh, Windows, Linux, Symbian OS ,各种操作系统将 GUI 设计带进新的时代。本文介绍了80年代以来各种操作系统 GUI 界面设计的进化史。ZMUBeautyCss.org - 前端教程网

第一个使用现代图形界面的个人电脑是 Xerox Alto,设计于1973年,该系统并未商用,主要用于研究和大学。ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
Source: toastytech.comZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
1981-1985ZMUBeautyCss.org - 前端教程网
Xerox 8010 Star (1981年推出) ZMUBeautyCss.org - 前端教程网
这是第一台全集成桌面电脑,包含应用程序和图形用户界面(GUI),一开始叫 The Xerox Star,后改名为 ViewPoint, 最后又改名为 GlobalView。ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
Xerox 8010 Star, Source: toastytech.comZMUBeautyCss.org - 前端教程网
Apple Lisa Office System 1 (1983) ZMUBeautyCss.org - 前端教程网
又称 Lisa OS,这里的 OS 是 Office System 的缩写,苹果开发这款机器的初衷是作为文档处理工作站。不幸的是,这款机器的寿命并不长,很快被更便宜的 Macintosh 操作系统取代。Lisa OS 几个升级包括 1983年的 Lisa OS2, 1984年的 Lisa OS 7/7 3.1。ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
Apple Lisa OS 1, Source: GUIdebookZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
Apple Lisa OS 1, Source: GUIdebookZMUBeautyCss.org - 前端教程网
VisiCorp Visi On (1984) ZMUBeautyCss.org - 前端教程网
Visi On 是为 IBM PC 开发的第一款桌面 GUI,该系统面向大型企业,价格昂贵,使用基于鼠标的 GUI,它内置安装程序与帮助系统,但尚未使用图标。ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
VisiCoprt Visi On, Source: toastytech.comZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
VisiCoprt Visi On, Source: toastytech.comZMUBeautyCss.org - 前端教程网
Mac OS System 1.0 (1984) ZMUBeautyCss.org - 前端教程网
System 1.0 是最早的 Mac 操作系统 GUI,已经拥有现代操作系统的几项特点,基于窗体, 使用图标。窗体可以用鼠标拖动,文件与文件夹可以通过拖放进行拷贝。ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
Apple Mac System 1.0, Source: toastytech.comZMUBeautyCss.org - 前端教程网
Amiga Workbench 1.0 (1985) ZMUBeautyCss.org - 前端教程网
一经发布,Amiga 就领先时代。它的 GUI 包含诸如彩色图形(四色:黑,白,蓝,橙),初级多任务,立体声以及多状态图标(选中状态和未选中状态)ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
Amiga Workbench 1.0, Source: GUIdebookZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
Amiga Workbench 1.0, Source: GUIdebookZMUBeautyCss.org - 前端教程网
Windows 1.0x (1985) ZMUBeautyCss.org - 前端教程网
1985年,微软终于在图形用户界面大潮中占据了一席之地,Windows 1.0 是其第一款基于 GUI 的操作系统 。使用了 32x32 像素的图标以及彩色图形,其最有趣的功能是模拟时钟动画图标。ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
Microsoft Windows 1.01, Source: makowski-berlin.deZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
Microsoft Windows 1.01, Source: makowski-berlin.deZMUBeautyCss.org - 前端教程网
1986 - 1990 IRIX 3 (released in 1986, first release 1984) ZMUBeautyCss.org - 前端教程网
64为 IRIX 操作系统是为 Unix 设计的,它的一个有趣功能是支持矢量图标,这个功能远在 Max OS X 面世前就出现了。ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
Silicon Graphics IRIX 3.0, Source: osnews.comZMUBeautyCss.org - 前端教程网
Windows 2.0x (1987) ZMUBeautyCss.org - 前端教程网
这个版本的 Windows 操作系统中对 Windows 的管理有了很大改进,Windows 可以交叠,改变大小,最大化或最小化。ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
Microsoft Windows 2.03, Source: guidebookgallery.orgZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
Microsoft Windows 2.03, Source: guidebookgallery.orgZMUBeautyCss.org - 前端教程网
OS/2 1.x (released in 1988) ZMUBeautyCss.org - 前端教程网
OS/2 最早由 IBM 和微软合作开发,然而1991年,随着微软将这些技术放到自己的 Windows 操作系统,两家公司决裂,IBM 继续开发 OS/2,OS/2 使用的 GUI 被称为 “Presentation Manager (展示管理)”,这个版本的 GUI 只支持单色,以及固定图标。ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
Microsoft-IBM OS/2 1.1, Source: pages.prodigy.netZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
Microsoft-IBM OS/2 1.1, Source: pages.prodigy.netZMUBeautyCss.org - 前端教程网
NeXTSTEP / OPENSTEP 1.0 (1989) ZMUBeautyCss.org - 前端教程网
Steve Jobs 心血来潮,想为大学和研究机构设计一款完美的电脑,他的这个设想后来造就了一家叫做 NeXT Computer 的公司。ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
第一台 NeXT 计算机于1988年发布,不过到了1989年随着 NeXTSTEP 1.0 GUI 的发布才取得显著进展,该 GUI 后来演变成 OPENSTEP。ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
该 GUI 的图标很大,48x48像素,包含更多颜色,一开始是单色的,从1.0开始支持彩色,下图中已经可以看到现代 GUI 的影子。ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
NeXTSTEP 1.0, Source: kernelthread.comZMUBeautyCss.org - 前端教程网
OS/2 1.20 (1989) ZMUBeautyCss.org - 前端教程网
OS/2 的下一个小版本在很多方面都做了改进,图标看上去更好看,窗体也显得更平滑。ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
OS/2 1.2, Source pages.prodigy.netZMUBeautyCss.org - 前端教程网
Windows 3.0 (1990) ZMUBeautyCss.org - 前端教程网
到 Windows 3.0, 微软真正认识到 GUI 的威力,并对之进行大幅度改进。该操作系统已经支持标准或386增强模式,在增强模式中,可以使用640K以上的扩展内存,让更高的屏幕分辨率和更好的图形成为可能,比如可以支持 SVGA 800x600 或 1024x768。ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
同时,微软聘请 Susan Kare 设计 Windows 3.0 的图标,为 GUI 注入统一的风格。ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
Microsoft Windows 3.0, Source: toastytech.comZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
Microsoft Windows 3.0, Source: toastytech.comZMUBeautyCss.org - 前端教程网
1991 - 1995 Amiga Workbench 2.04 (1991) ZMUBeautyCss.org - 前端教程网
该版 GUI 包含很多改进,桌面可以垂直分割成不同分辨率和颜色深度,在现在看来似乎有些奇怪。默认的分辨率是 640x256,不过硬件支持更高的分辨率。ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
Commodore Amiga Workbench 2.04, Source: guidebookgallery.orgZMUBeautyCss.org - 前端教程网
Mac OS System 7 (released in 1991) ZMUBeautyCss.org - 前端教程网
Mac OS 7 是第一款支持彩色的 GUI,图标中加入了微妙的灰,蓝,黄阴影。ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
Apple Mac OS System 7.0, Source: guidebookgallery.orgZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
Apple Mac OS System 7.0, Source: guidebookgallery.orgZMUBeautyCss.org - 前端教程网
鸣谢ZMUBeautyCss.org - 前端教程网

延伸阅读 ZMUBeautyCss.org - 前端教程网
苹果的设计演化史:1977-2008ZMUBeautyCss.org - 前端教程网
ZMUBeautyCss.org - 前端教程网
本文国际来源:http://www.webdesignerdepot.com/2009/03/operating-system-interface-design-between-1981-2009/ZMUBeautyCss.org - 前端教程网
中文翻译来源:COMSHARP CMS 官方网站
来顶一下