人机界面设计（第二版） 教学课件 作者 王文 周苏 涂嘉庆 第06章 图标设计与fireworks图像制作.ppt

人机界面设计（第二版） 周苏 教授 第6章 图标设计与Fireworks图像制作 6.1 图标设计与Fireworks初步 6.2 Fireworks图像制作技巧 6.1 图标设计与Fireworks初步 6.1.1 图标设计 6.1.2 Fireworks图像制作初步 6.1.1 图标设计 图标是人类记录、交流信息的主要手段之一，它以图形符号的形式来规划并处理信息和知识。由于人在知觉图标信息时，辨认的信号与客体本身有着形象上的直接联系，其信息接收的速度远远高于抽象符号，如路标图、气象图、地图以及标准符号等，并且图标具有形、意、色等多种刺激，因而其传递的信息量大、抗干扰力强、易于接收，因此，图标在硬件界面和软件界面中具有重要的意义。图标可用于多种不同的目的，在任何使用文字说明的地方都可以使用图标。 6.1.1 图标设计 1. 硬件界面中的图标设计 在产品界面中，图标的应用是很重要的部分，它有助于对产品的指示与识别，是将产品的功能及特性准确、合理地阐述的一种表达方式。实际上，在产品界面中图标也是无处不在的。 6.1.1 图标设计 对于设计师而言，首先应在产品界面的设计过程中力求简洁清晰，将繁杂的操作键及指示分类布置，同时将用户的操作和产品的状态巧妙地形象化，在按钮上辅助以合适的图标指示，可以形象而生动地体现各部位的功能与操作。作为一种指示，它要求产品设计的过程中充分地把握人机工程学的要和使用者的使用心理。 6.1.1 图标设计 通过图标的使用，无需用文字注解即生动形象地体现了操作的作用与功能，这种具有国际化通用的界面越来越多地被许多产品采用，并正成为当今产品界面设计的主导潮流。 6.1.1 图标设计 2. 软件界面中的图标设计 软件界面中，图标的应用也越来越丰富，大致如下： 1）程序标识。大部分GUI用图标来标识应用程序。这些图标可使用户启动应用程序，称之为程序标识。当程序最小化后，即在程序运行过程中除了显示其图标外不再占用其他屏幕空间，也可用图标代表该程序，例如Windows下的Word、Excel、Visio等程序都有相应的程序图标。 2）数据标识。数据文件图标标识由用户产生的数据及由应用程序使用的参考数据，用户可以选择，然后打开其自己的数据文件，还可以在屏幕上移动数据图标以控制相关的文件存于何处，进行复制或打印等。图标也可用来标识文件，让用户改变文件的存储位置。 6.1.1 图标设计 3）命令选择。在大部分系统中，用户通过发出一系列命令来控制程序，发出命令的方式可以有许多种，如将命令放入屏幕的某一行或某一区域内，选择正文菜单上的命令，或选择图标等。命令图标必须能表达动作、对象，直接表现具体的动作和动作所作用的具体对象，有时还要指出修饰部分。 对于那些具有抽象动作或没有视觉结果的命令，可在具体的对象上刻画一个清楚的操作动作。对于那些需要进行控制的命令，可以用抽象的符号代表一个典型的动作序列来实现。 6.1.1 图标设计 4）窗口及控制区域。在很多系统中，用户通过窗口标题栏上的小图标来控制窗口。为了使图标能装入窗口的标题栏中，这些图标一般都比较小，如果可能，使用图形用户界面的标准图标。如果制作了新的图标，应使之与标准图标具有一致的风格。 6.1.1 图标设计 5）模式信号或切换开关。模式输出指示器表现系统的当前状态，切换开关使用户可在两种状态之间相互切换。它们都要求对每一个交替状态各有一个图像，如放大和缩小、打开和关闭、发送和接收等。设计模式输出和切换开关时，如果图标只作为一个指示器，则表现程序当前状态；如果图标用来作为切换开关，则表现为目的状态更为合适；如果两者都是，则应使其看起来像一个开关和按钮并表现其目的状态。如果选中图标时不能改变图像，可以通过由斜线隔开的两种状态来表示切换开关。 6.1.1 图标设计 6）状态指示。用户一般都需要清楚的反馈信息，方法之一是用图标的形态、颜色来表现系统状态或条件的变化。 7）光标。这是表现按下鼠标产生作用的一种较小的视觉图像，设计员必须使用户明白是哪个对象正在接收鼠标的动作。比如，用十字光标标识当前精确的坐标位置，手抓形状代表可以将当前页面上、下、左、右移动等。 6.1.1 图标设计 3. 图标的设计原则 为使图标能表达确定对象的信息，必须对图标集进行设计。对图标的编码在原则上相同于对其他形式信息（如数字、形状、大小、亮度等）的编码。一方面，这种形象的图标给人很大的帮助，使人容易理解其内涵；另一方面，设计不好的图标会令人迷惑不解，甚至导致错误操作。因此，学习图标设计的原则和方法是很有必要的。 6.1.1 图标设计 设计图标一般有以下原则： 1）图标的图形编码应该和目标的外形相似。只要可能，应该尽量避免抽象，使人们可以快速、准确地识别图标。 2）不同的目标