数字图形界面设计001

1、咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design Copyright by ARTCOM PT All rights reserved. www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 2 界面界面 l 界面(Interface)又称接口。“现代汉语词典”给的定义是“物体与物体间 的接触面”，词义较广。在现代科学领域，界面的意义很多，光是我们所要探 讨的计算机应用层面，有以下几种不同的含义。 l 对硬件工程师而言，它指机器设备

2、问连接时拔插的方式，又称接口，比 如1394接口、USB接口、网口等； l 对一个系统集成商而言，它指数据传输的标准； l 对图形设计师(也包括软件程序员)而言，是指你在计算机上看到的一切， 例如屏幕文字、图形、窗口、图标等等，这也是本课程主要探讨的内容。 l 计算机屏幕显示界面通常又称为用户界而，是人与机器进行交互的操作方式， 即用户与机器互相传递信息的媒介，其中包括信息的输入和输出。 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 3 l用户界面现在看来

3、似乎是指计算机以及与计算机相关的各种事物，实 际情况远非如此。人们的日常工作以及生活中天天要借助用户界面来 获取以及发送信息，例如语音用户界面，是语音邮件以及其他自动电 话系统通过语音方式传达信息，用户又通过按键反馈信息；另一个与 计算机无关的用户界面的例子是汽车用户界面，汽车通过刻度表和度 量器与用户交流，用户则通过方向盘、脚踏及其他控制器控制汽车。 所以应该说，任何需要与人交互的设备都有某种形式的用户界面。 l 现代计算机上帮助用户与计算机交流的设备有屏幕、键盘和点按 设备如鼠标和轨迹球。在过去的这些年，人机交互的这种格局并未改 变，然而人们正在翘首期盼更自然的交互方式的出现，尤其在汉语输

4、 入的过程中，由于输入字母之后并不直接出现结果(五笔也是如此， 它还需要拆字思考的过程)，还需要短暂的思考和选择，在实际使用 中常常造成思维中断，让用户觉得非常不方便。未来，像语音输人、 手写输入等一些多通道的输入方式可能是更好的选择。 用户界面用户界面 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 4 l图形用户界面图形用户界面 l 把界面分为硬件界面和软件界面是日本人的首创，依据是界面的 不同存在方式。但人机之间不仅有硬件或软件界面，很多情况下是并 存

5、的。早期计算机用户以计算机专业人员为主，随着应用领域的不断 拓展以及计算机性能的不断提高，非专业用户成为用户的主体。因此 设计能够实现非专业用户与计算机之间良好交流的软件界面，成为计 算机能否普及以及软件能否流行的关键。 l 当前在软件界面领域，图形界面占据了绝对的主流。通常人们又 把图形界面分为图形化软件用户界面、网页用户界面、移动媒体用户 界面等。 l 1软件用户界面 l 图形软件用户界面有时被称为WIMP，表现了它的四种特有属性， 即窗口(Window)、图标(Icon)、菜单(Menu)、鼠标指针(Pointing De vice)。它的特点是操作直观、提供指针支持及界面图形化。目前图

6、 形用户界面虽然不能达到较好的易用性，但是通过对特定项目和任务 的精心没计，在效果和满意度上还是绝对优于非图形界面。 图形用户界面图形用户界面 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 5 l 窗口是交互的基础区域，主要包括标题栏、菜单栏、 工具栏以及操作区，它能够支持移动和大小缩放，用户可 以直观地通过工具和菜单命令作用于对象，并且直接观看 到所产生的效果。 l 一般说来，窗口是矩形的。但是现在很多软件都把它 做成不规则形，例如一些音乐的播放器，看上

7、去会更有活 力和个性。 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 6 l图标，是具有明确指代含义的计算机图形，使一个标题或功能可以有 更直观的操作。广义角度是指具有指代意义的图形符号，具有高度浓 缩并快捷传达信息、便于记忆的特性。应用范围很广，软硬件、网页、 社交场所、公共场合无所不在，例如，各种交通标志、空气级别标识、 国土安全标识等；狭义角度来说是指计算机软件方面的应用，包括程 序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。 l 我们

8、制作的图标有很大一部分来源于术语符号，例如最小化、关 闭等，初次接触的用户可能并不理解其含义，需要去记忆；另一部分 图标则是来源于生活，比较象形的，比如喇叭就是调节音量，房子表 示HOME，信封表示邮件等。我们在设计时应尽量避免创造新的符号， 尽量使用象形的图形。 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 7 l菜单，是供用户选择的动作命令集合。在一个软件中，所有的用户命 令都应包含在菜单中。菜单通常要通过窗口来显示，常见类型有工具 栏(包括图形工栏)

9、 下拉式、弹出式(右键菜单)和级联式(多层次的菜 单)。 l 一般情况下，基于图形用户界面的菜单选项是供用户选择的、对 对象执行动作的命令。菜单的一个典型例了是文件菜单，位于文件菜 单中的一个命令选项是Print(打印)。所有用户命令集合都包含在菜 单中。相反地，非图形用户界而系统则需要通过分级对话框技术所实 现的整体显示来使用菜单。 l 菜单是基于能见能点的原则而设计的。用户不用记住众多的命令 名称，因为他们可以在任何需要的时候看到所有的选择，同时也能从 中选择。菜单设计一般有选中状态和未选中状态；现在通行的做法是 左边为功能名称，右边应为快捷键；如果有下级菜单应该有下级箭头 符号；不同功能

10、区间应该用线条分割。 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 8 l 指针，是一个图形，用以对指点设备(鼠标或轨迹球)输 入到系统的位置进行可视化描述。图形界面的指针常用的 有系统的箭头、“十”字、文本输入“I”、等待沙漏等。 l 图形系统一般都有通过鼠标或轨迹球来实现的指点设备。 与指点设备相关的是屏幕上的某个位置，用户可以在那里 通过指点设备进行输入。 www.art-Copyright by ARTCOM PT All rights reser

11、ved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 9 l2网页用户界面 l 网页用户界面非常类似图形软件用户界面，它是信息呈现的一种 重要方式，主要采用导航、链接等手段。无论用哪种手段设计的网页 用户界面，都必须通过像IE、Netscape或者safari这样的浏览器来观 看，所以网页界而的窗口不过是位于浏览器窗口内的窗口；菜单(如 果要这么称呼)也是浏览器下的菜单，但又不同于软件界面中的菜单。 尽管有的网页也喜欢通过鼠标滑过菜单名称再停留一会就显示下级内 容，其实菜单点击的结果是显示一个窗口而不足执行一个命令，所以 在网页中极少按照菜单的真正概念来设

12、计，我们一般还是称为栏目； 在网页中的确经常使用图标，但是除了用房子表示首页外几乎没有约 定俗成的图标；而指针最常见的是用于表示链接的手形指针，鼠标双 击的使用被忽略，右键的行为通常是受限制的。 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 10 l3移动媒体用户界面 l 移动媒体(如手机、个人数字助理)用户界而主要分两大 类，一种是真正的图形界面风格的外观和行为(现在比较 通用，多个应用程序并存)，另一种是图形界面子集(在没 有窗口的情况下，同时只能显示

13、一个对象，类似手机操 作)。 l 手持设备用户界面的设计难点在于要求更加简化用户 需求，更便于输人和交互操作，还要克服显示区域过小的 困难，能够方便随时查阅机器内的信息，特别是通讯录、 记事本等软件的设计更要求良好的易用性，此外还要能够 实现个人电脑和个人数字助理之间信息同步。 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 11 l最初的计算机用户界面却没有今天用起来那么简单。 l 1981年，个人电脑用户打开第一台IBM个人电脑时见到的是如下的画 面 人

14、机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 12 l 后来在1984年的苹果电脑屏幕启动画而中采纳了由设计师Susan Kare所设计 的笑脸和哭脸界面，代替MsDos环境下那一堆密集的文字界面。 l这个3232不到1000个象素点所构成的小小的画而具有Dos文本描述一样的精 确性，又省却了由于技术和术语给普通用户带来的莫名恐惧。 l 苹果取得了巨大的成功!这一设计也成为人机界面发展的转折点。苹果电脑就 是易用

15、的代名词，直到今天它仍然是关注用户、体贴用户的典范。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 13 l图形用户界面现在已经被大多数操作系统所采用，其美观大方、简单易用深受广大用户所喜爱，大 大加速了计算机的普及应用，冰冷的机器也有了人情味。 l 1起初 l 最早提出图形用户界面的是Vannevar Bush。他在1945年提出“用户可以通过简单的机械装置 以及容易识别的图形与计算机进行交互”。 而据说视窗

16、系统的最初概念则始于第个名J,jSAGE项目的计算机实时图形显示系统。 l 2Augmerltatiorl 0f Human lltellect项目 l 20世纪60年代，【)oug Engelbalt在SRI的“人类智力增长”的项目引发了在线系统，其中 引入了鼠标驱动的光标以及多重视窗。【)oug据说受到1945年Vanne_arBush有关基于桌面的信息 机器这一概念的启发。早期的研究集中在探讨年轻人怎样学习。 l 3XetOx PARC l Doug勺工作直接导致了Xerox PARC的发展。20世纪70年代早期，一些在SRI工作的人转到Xel ox PARc。Xerox PARc小组编

17、写了wIMP的范例，并首次发布在Xerox Alto试验计算机上(图l一4)， 但是直到1981年才逐渐商业化到其Xetox 80 JO l4Apple的Lisa以及Maci rtosl1电脑 l 始于1979年，由Jef Raskin领导的苹果电脑Llsa以及，Macintosh小组(其中也包含了以前： fXerox Parc小组中工作的成员)继续发展了这样的构想(图l一6)。发布敞l卞l嗍l形1群ll艺l 术l垃l计于1984年的Macllltosh电脑是第一个成功使用GuI的商业电膳i。桌面隐喻得到贯彻：文件 看起米像一张纸；目录做成文件夹的样子；此外还有一牦套睹如汁算器、便笺簿、闹钊，

18、等用户可 以随意在桌面上放罱的附件；用户可以简单地将文件和文件夹拖动到垃圾椭就可以删除文件；下拉 菜单电引入了 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 14 l关于xerOx Parc的工作对Apple的Lisa以及MacIll【o巾的影响有多大，还存 在一些与先前的学术研究相左的争论，但是很清楚，这个影响是广泛的。关 注一下Apple曾经被PARc邀请观看他们的研究这一细节，还有，一定数量的PA Rc雇

19、员随后来到Apple在Lisa以及Macintosh的GuI项目上工作。当然，Apple 的工作极大地拓展了PARc，例如_JJlJ上了可以层叠的视窗、可控的图标、固 定的菜单栏以及文件系统巾直接操控的对象等。我们知道当今的GuI较多或更 多受到Apple影响，因此声称Apple拷贝了PARC的工作是不正确的。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 15 l从1984年以来Macjntosh的Gul一直

20、在频繁地修订，苹果操作系统从 单调的黑白界面变成8色、l 6色、真彩色，在稳定性、应用程序数量、 界面效果等各方面，苹果都在向人们展示着自己日益成熟和长大的笑 脸(彩图l一1)。系统7是一次主要的升级，从76版开始，苹果操作 系统更名为Mac 0S，此后的Mac0s 8(图l_8)和Mac 0s 9，直至Mac0S 922以及今天的Mac OS 103，采用的都是这种命名方式。 l 在2000年，Apple发布了其Aqua界面的Mac Os x，“Aqua”界面 是其经历的最大一次修订(图卜9)。它使用PDF作为图形布局，借助Op enGL作为硬件加速。此外，它还利用Exl90se在窗口之问迅

21、速导航。 从101、lO 2、10 3】Panther以及即将面世的lO4 Tige r苹果 为MacOS x投入了大量的热情和精力，而且也 lMac OS 8发布，其中最显著的提高是3-d的窗口显示效果。在两周内 销售125万套，是那个时期销售最好的操作系统 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 16 l第1页：1973年4月 图形操作系统鼻祖Alto l 1973年4月，第一个可操作的Alto电脑在Xerox PARC完成。Alto是第一个把

22、计算机所有元素结合到一起的图形界面操作系统。它使用3键鼠标、位运算显 示器、图形窗口、以太网络连接。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 17 l第2页：1980年 元老级的图形工作站Perq l ThreeRiversComputerCorporation推出Pe rq图形工作站 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All ri

23、ghts reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 18 l1981年7月 Alto的商用版本Star系统 l 1981年7月，Xerox推出Star系统，它是Alto的商用版本 l特点：双击图标技术、多窗口、对话框概念、1024768的分辨率。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 19 l第4页：1983年1月 苹果（Apple）Lisa系

24、统 l 1983年1月，Apple推出Lisa系统。 l 特点：下拉菜单和菜单条技术。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 20 l第5页：1983年 首款IBM PC图形软件环境Visi On l 1983年，Visi推出Visi On，它是第一款为IBM PC设计的集成图形软件环境。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All

25、 rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 21 l1983年 微软为IBM PC设计的Windows程序 l 1983年，微软宣布它为IBM PC设计的Windows程序，不过这个系统到1985年 才发布。 l 特点：多窗口、可改变大小窗口。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 22 l第7页：1984年 Apple推出Mac

26、intosh图形系统 l Apple推出的Macintosh图形系统 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 23 l第8页：1984年9月 GEM icon/desktop用户界面系统 l 1984年9月，Digital Research针对8086和DOS计算机推出GEM icon/deskto p用户界面系统，这个系统稍后演变为AtariST。 人机交互界面的历史沿革人机交互界面的历史沿革 www.

27、art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 24 l第9页：1984年7月 MIT推出“Window System X” l 1984年7月，MIT推出“Window System X”。 l 它16个版本使用单色画，使用DEC VS100显示器。810个版本开始使用 彩色显示。VAXstation II/GPX.X10是第一个被广泛使用的版本。第11个版本 被设计成一个很高性能的系统，有很好的窗口管理风格，良好的图形表现和 系统扩展能力。 www.art-Co

28、pyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 25 l第10页：1985年 先有Commodore 64 后来Apple II l 1985年，Geos发布Commodore 64，稍后又发布了Apple II。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 26 l第11页：1985年7月

29、Commodore推出Amiga 100 开始艳了 l 1985年7月，Commodore推出Amiga 100（Amiga Workbench Version 1.0）。 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 27 l第12页：1985年8月 微软终于发布了首个Windows版本 l 1985年8月，微软最终发布第一个Windows版本。 l 特点：窗口不可重叠，但可平铺；窗口不会覆盖屏幕下方的图标区域。 人机交互界面的历史沿革人机交互界面的历史

30、沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 28 l第13页：1986年 Apple表示会控告Digital Research l 1986年，Apple表示会控告Digital Research，因为其GEM桌面系统跟自己的Macinto sh非常相像。 l Digital Reseach最终修改了自己的桌面系统。新的GEM桌面系统现在只有用两个无 法移动、无法改变大小的窗口来浏览文件。 人机交互界面的历史沿革人机交互界面的历史沿革 www.ar

31、t-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 29 l第14页：1987年 首款彩色Mac系统Macintosh II l 1987年，Apple推出Macintosh II，它是第一款彩色Mac系统。 l 特点：640480，56色，24位显卡。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & De

32、sign 30 l第15页：1987年 微软发布第二个Windows版本V2.03 l 1987年，微软发布第二个Windows版本，V2.03。 l 特点：可改变大小/可重叠的窗口、加进了其他窗口控制功能。 l 为今后图形化交互界面的发展奠定了基础。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 31 l第16页：1987年 RISC系统的基础Arthur系统 l 1987年，Acorn发布应用于Acorn电

33、脑的Arthur系统，它是RISC系统的基础， RISC OS 2和3和它有类似的外观，但有很大的改善。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 32 l第17页：1988年9月 为苹果IIGS设计的16位系统GS/OS l 1988年9月，Apple发布GS/OS，是为Apple IIGS设计的16位操作系统，这个 系统跟Macintosh的外观很相像 人机交互界面的历史沿革人机交互界面的历史沿革 ww

34、w.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 33 l第18页：1988年10月 IBM发布OS/2 1.10 标准版 l 1988年10月，IBM发布OS/2 1.10 Standard Edition。OS2增加了叫做“Pres entation Manager”的图形用户界面。1.10 GUI是由微软开发的，看上去有点 像Windows 2。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT Al

35、l rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 34 l第19页：1988年10月 元老品牌机NeXT Computer l 1988年10月，NeXT Computer发布了，价格为6500美元。 l 它使用： l 25MHz 30 processor l 8MB RAM l 250MB optical disk drive， l 数字处理器， l 声卡 l fax modem l 17寸显示器 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All right

36、s reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 35 l第20页：1990年 Amiga Workbench 2 for A3000 l 1990年，Commodore发布Amiga Workbench 2 for A3000。 l 特点：新3D效果，可定制菜单。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 36 l第21页：1990年5月 微软发布W

37、indows 3.0 l 1990年5月，微软发布Windows 3.0。 l 特点：程序管理SHELL。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 37 l第22页：1990年11月 GeoWorks发布PG-GEOS l 1990年11月，GeoWorks发布PG-GEOS。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights

38、 reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 38 l第23页：1992年春 真正的32位操作系统OS/2 V2.0 l 1992年春，IBM发布OS/2 version2.0，真正的32位操作系统。 l 特点：Workplace SHELL、面向对象的用户界面。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 39 l第24页：1992年3月 微软Win

39、dows 3.1 支持多媒体 l 熟悉的三维曲线 l 1992年3月，微软推出Windows 3.1，界面跟3.0差不多，但这个版本包含了 多媒体支持。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 40 l第25页：1992年5月 绝对炫Amiga Workbench 3发布 l 1992年5月，Amiga Workbench 3发布。 l 颜色很丰富了 l 特点：使用图片做背景、色彩调节。 人机交互界面的历

40、史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 41 l第26页：1993年5月 微软发布 首个WindowsNT版本 l 1993年5月，微软发布Windows NT的第一个版本，是32位操作系统。同样使 用3.1的版本号，它为Intel，Power PC，Alpha和MIPS系统设计。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reser

41、ved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 42 l第27页：1994年 首个微核心窗口系统Photon microGUI l 1994年，QNX Software Systems发布他们第一个微核心窗口操作系统：Pho ton microGUI 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 43 l第28页：1995年8月24日 值得纪念 微软发布Windows

42、 95 是微软公司在界面 设计发展历史上迈出的最大一步。 l 特点：第一次为每个窗口加上关闭按钮、“开始”按钮第一次出现。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 44 l第30页：1996年 New Deal发布New Deal Office 2.5 l 1996年，New Deal发布New Deal Office 2.5，它的前身是PC-GEOS。 人机交互界面的历史沿革人机交互界面的历史沿革 ww

43、w.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 45 l第31页：1996年 蓝色巨人IBM发布OS/2 Warp 4 l 1996年，IBM发布OS/2 Warp 4，这个系统上Workplace Shell技术有重大应 用。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 46

44、 l第32页：1996年 基于WIN95 微软发布Windows NT 4.0 l 1996年，微软发布Windows NT 4.0，它使用和Windows 95相同的用户界面。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 47 l第33页：1997年6月 当时销售最好的系统MacOS 8 l 1997年6月，Mac OS 8发布。在两周内销售125万套，是那个时期销售最好 的操作系统 人机交互界面的历史沿革

45、人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 48 l第34页：1998年7月25日 熟悉的温酒吧来了Windows98 l 1998年7月25日，微软发布Windows 98。 l 别跟我说，你不知道它！ l 特点：IE，浏览器取代了Windows shell和帮助系统。 l 1998年11月22日，Shane Brooks发布98 Lite，这个版本移去了IE。 l 特点：没有IE，与win98相同的硬件支持，快速启动。 人机交

46、互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 49 l第35页：1999年 基于UNIX Apple发布Mac OS X Server l 1999年，Apple发布Mac OS X Server，是基于UNIX的操作系统，使用Macint osh GUI。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺

47、术学院咸宁学院艺术学院Art & DesignArt & Design 50 l第36页：1999年7月 RISC OS Ltd发布RISC OS 4 l 1999年7月，RISC OS Ltd发布RISC OS 4，使用于RiscPC A7000 或 A7000+。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 51 l第37页：2000年1月5日 Apple发布Aqua 唯美风格开始 l 2000年1月5日

48、，Apple发布Aqua，界面风格有很大改善。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 52 l第38页：2000年2月17日 迄今最稳定的系统Windows2000 l 2000年2月17日，微软发布Windows 2000（AKA Windows NT 5）。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserv

49、ed. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 53 l第39页：2001年10月25日 WindowsXP登场 l 2001年10月25日，微软发布Windows XP（AKA Windows NT 5.1）。 l 特点：激活技术 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 54 l第40页：2003年4月24日 微软发布Windows Server 2003 l

50、2003年4月24日，微软发布Windows Server 2003（AKA Windows NT 5.2，也 叫Windows.NET SERVER）。 l 传说中的“长牛角” l 特点：只发布服务器版本。 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 55 lLinux分支LindowsLive! 4.5 lLindowsLive! 4.5 l 感觉上是仿苹果的风格 人机交互界面的历史沿革人机交互界面的历史

51、沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 56 l蓝色巨人IBMAIX上的CDE lAIX上的CDE桌面系统 l 蓝色巨人IBM的图形操作系统 人机交互界面的历史沿革人机交互界面的历史沿革 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 57 l当前，以Windows为代表的GUI已有了很大的发展，但还存在着操

52、作较麻烦、 l响应较慢、对资源要求较高及剩余的工作区域较小等不足，这些还需进一步 改进。 l今后的发展趋势主要有以下几方面。 l 1与超文本技术结合，支持Internet浏览 l 采用超文本(Hypertext)技术，便于用户“联想”搜索有关内容。Naviga te、Mosaic、Yahoo及Hotjava等许多浏览器的出现，极大地方便了Internet 的使用。GUI与超文本技术相结合将进步丰富用户界面的功能。 发展趋势发展趋势 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignAr

53、t & Design 58 l2支持三维及多媒体技术 l 人们的生活空间是三维的，而屏幕却是二维的。虽然Gul已提供了一些仿三 l维的按钮等界面元素，但界面仍难进行三维操作。要解决三维的问题，还需 从三维交互设备着手。语音、图像和动画等多媒体的支持，也是当今的趋向。 l 3应用对象的可视化 l 目前，Gul支持的是与应用无关的通用界面元素，如菜单、对话框等。对于 l应用来说，使处理的数据易于操作并直观显示是十分重要的问题。当前科学 计算可视化、信息可视化和商业数据可视化已引起广泛重视，各种数据可以 用直观形式显示，并可进行一、二、三维的操作，这将大大方便用户。 发展趋势发展趋势 www.art

54、-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 59 l 4界面构造工具及语言 l 开发GuI的工作量及难度十分可观，普通用户已很难自行开发，必须依靠熟 l练的程序员或方便的工具。现在已有一些GuI开发工具，如Visual Basic：、 VisualC+、及Visual FoxPro等。但这些开发工具要为广大用户所掌握或要 适应不同的应用，还有待于改进。 发展趋势发展趋势 www.art-Copyright by ARTCOM PT All rights reserve

55、d. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 60 l当今，重视用户界而没计具有重要的意义。从宏观来看， 当今时代是信息产业高度发展高度繁荣的时代，“信息爆 炸”、“信息阻塞”、“信息恐惧”、“信息过载” 是 这个时代不断响起的“急救声”、“筒报声”，如何设计 易用、高效、舒适的信息交互界而成为各行各业都在关注 的问题，必将吸引一大批新型设计人才参与到这个领域， 必将具有很高的社会效应、经济效应和美好前景；从微观 而言，用户界面设计得越直观、越易用，用户使用起来就 越方便、越少求助，培训用户、维护系统的成本就越低， 降低了客户支持成本，因而软件也越便宜

56、，企业的效益就 会更好。 发展趋势发展趋势 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 61 l苹果公司有关界面设计原则与方法 l 1设计原则 l 作为图形用户界面设计领域的创始者以及领潮人，苹 果公司一直致力于研究和推广图形用户界面的设计。 l 早在1 987年，苹果公司就首次发表三项一般性设计 原则：在计算机环境里，若是能有现实的隐喻(Metapho r)将会带给使用者熟悉的预期。立即的回馈(Feed back) 将会带给使用者似乎直接操纵现实世界物

57、体的感觉，也提 供使用者有价值的事实信息。必须看到点到的感觉，如 此可以获得使用者的信任而相信自己的记忆。 l 发展趋势发展趋势 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 62 l 2)直接操控 l 直接操控让使用者产生“操作”的感觉。为了满足这 个原则，当使用者操作某个对象时，必须让使用者始终能 在屏幕上看得见该对象，且执行动作对该对象的影响必须 能实时呈现。例如将文件由一个文件央拖曳到另一个文件 夹，或是将选取的文字片段由一份文件拖曳到另一份文件。

58、 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 63 l 3)能见能点 l 在软件的使用者界面中，使用者通过像鼠标之类的设备，点取屏幕上所 见的对象与界面产生互动。Macintosh的操作系统操作区分成两种基本典型， 不论是哪一种典型，皆假定使用者不论何时皆能看到他们在屏幕上所做的动 作，且能指(点)到他们所看见的地方。这两种操作典型皆建立在“对象搭配 动作”的基本形式上。 l 在第一种操作典型中，使用者先点选一个对象，然后选择要对该对象执 行的动作。所有

59、该对象可以执行的动作皆显示在选单中，使用者无须记忆动 作指令，只需由选单中检选即可。 l 在另一个操作典型中，使用者透过直接拖曳对象来执行动作，最常见的 例子就是直接拖曳档案到文件夹的情境。将一个对象放置到另一个对象上代 表执行什么动作是很明确的，使用者无须由选单中选取。在这种操作典型中， 使用者必需清楚地知道对象所代表的意义为何；像常见的垃圾桶图像就比较 容易与现实生活中的意义产生连结。 www.art-Copyright by ARTCOM PT All rights reserved. 咸宁学院艺术学院咸宁学院艺术学院Art & DesignArt & Design 64 l4)一致性 l 保持界面的一致性能让使用者将对界面的认知与操作 技能转移到其他界面上。利用系统标准组件建构界面除了 能让产品界面产生一致性之外，亦能获致相异产品间界面 一致性的好处。 l 每一件