《人机界面设计 教学课件 ppt 作者 周苏 第6讲 图标设计与Fireworks》由会员分享，可在线阅读，更多相关《人机界面设计 教学课件 ppt 作者 周苏 第6讲 图标设计与Fireworks（82页珍藏版）》请在金锄头文库上搜索。
1、第六讲 图标设计 与Fireworks图像制作,周苏 教授 Z QQ: 81505050,第6讲 图标设计与Fireworks图像制作,6.1 图标设计与Fireworks图像制作初步 6.2 Fireworks图像制作技巧,第6讲 图标设计与Fireworks图像制作,6.1 图标设计与Fireworks图像制作初步,图标是人类记录、交流信息的主要手段之一，它以图形符号的形式来规划并处理信息和知识。 由于人在知觉图标信息时，辨认的信号与客体本身有着形象上的直接联系，其信息接收的速度远远高于抽象符号，如路标图、气象图、地图以及标准符号等，并且图标具有形、意、色等多种刺激，因而其传递的信息量大，
2、抗干扰力强，易于接收，因此，图标在硬件界面和软件界面中具有重要的意义。图标可用于多种不同的目的，在任何使用文字说明的地方都可以使用图标。,1. 图标设计,(1) 硬件界面中的图标设计 在产品界面中，图标的应用是很重要的部分，它有助于对产品的指示与识别，是将产品的功能及特性准确合理地阐述的一种表达方式。实际上，在产品界面中图标也是无处不在的。,1. 图标设计,对于设计师而言，首先应在产品界面的设计过程中力求简洁清晰，将繁杂的操作键及指示分类布置，同时将用户的操作和产品的状态巧妙地形象化，在按钮上辅助以合适的图标指示，可以形象而生动地体现各部位的功能与操作。作为一种指示，它要求产品设计的过程中充分
3、地把握人机工程学的要和使用者的使用心理。,1. 图标设计,通过图标的使用，无需用文字注解即生动形象地体现了操作的作用与功能，这种具有国际化通用的界面越来越多地被许多产品采用，并正成为当今产品界面设计的主导潮流。,1. 图标设计,(2) 软件界面中的图标设计 软件界面中，图标的应用也越来越丰富，大致有： 1) 程序标识。 2) 数据标识。 3) 命令选择。 4) 窗口及控制区域。 5) 模式信号或切换开关。 6) 状态指示。 7) 光标。,1. 图标设计,1) 程序标识。 大部分图形用户界面 (GUI) 用图标来标识应用程序。这些图标可使用户启动应用程序，称之为程序标识。当程序最小化后，即在程序
4、运行过程中除了显示其图标外不再占用其他屏幕空间，也可用图标代表该程序，例如Windows下的Word、Excel、Visio等程序都有相应的程序图标。,1. 图标设计,2) 数据标识。 数据文件图标标识由用户产生的数据及由应用程序使用的参考数据，用户可以选择，然后打开其自己的数据文件，还可以在屏幕上移动数据图标以控制相关的文件存于何处，进行复制或打印等。图标也可用来标识文件，让用户改变文件的存储位置。,1. 图标设计,3) 命令选择。 在大部分系统中，用户通过发出一系列命令来控制程序，发出命令的方式可以有许多种，将命令放入屏幕的某一行或某一区域内，选择正文菜单上的命令，或选择图标等。命令图标必
5、须能表达动作、对象，直接表现具体的动作和动作所作用的具体对象，有时还要指出修饰部分。,1. 图标设计,对于那些具有抽象动作或没有视觉结果的命令，可在具体的对象上刻划一个清楚的操作动作。对于那些需要进行控制的命令，可以用抽象的符号代表一个典型的动作序列来实现。,1. 图标设计,4) 窗口及控制区域。 在很多系统中，用户通过窗口标题栏上的小图标来控制窗口。为了使图标能装入窗口的标题栏中，这些图标一般都比较小，如果可能，使用图形用户界面的标准图标。如果制作了新的图标，应使之与标准的图标具有一致的风格。,1. 图标设计,5) 模式信号或切换开关。 模式输出指示器表现系统的当前状态，切换开关使用户可在两
6、种状态之间相互切换。它们都要求对每一个交替状态各有一个图像，如放大和缩小、打开和关闭、发送和接收等。设计模式输出和切换开关时，如果图标只作为一个指示器，则表现程序当前状态；如果图标用来作为切换开关，则表现为目的状态更为合适；如果两者都是，则应使其看起来像一个开关和按钮并表现其目的状态。如果选中图标时不能改变图像，可以通过由斜线隔开的两种状态来表示切换开关。,1. 图标设计,6) 状态指示。 用户一般都需要清楚的反馈信息，方法之一是用图标的形态、颜色来表现系统状态或条件的变化。 7) 光标。 是表现按下鼠标产生作用的一种较小的视觉图像，设计员必须使用户明白是哪个对象正在接收鼠标的动作。比如，用十
7、字光标标识当前的精确的坐标位置，手抓形状代表可以将当前页面上下左右移动等。,1. 图标设计,(3) 图标的设计原则 为使图标能表达确定对象的信息，必须对图标集进行设计。对图标的编码在原则上相同于对其他形式信息(如数字、形状、大小、亮度等)的编码。一方面这种形象的图标给人很大的帮助，使人容易理解其内涵；另一方面，设计不好的图标会令人迷惑不解，甚至导致错误操作。因此，学习图标设计的原则和方法是很有必要的。,1. 图标设计,设计图标一般有以下原则： 1) 图标的图形编码应该和目标的外形相似。只要可能，应该尽量避免抽象，使人们可队决速、准确地识别图标。 2) 不同的目标必须使用不同的图标表示，以避免引
8、起混淆。如果仅使用图形表示目标的含义不够清楚、明确，还可以在图标中附加上简要的文本标注，以明确图标的含义。,1. 图标设计,3) 设计图标应尽可能简单，尽量符合常规的表达习惯，保持图标含义的前后连贯。同一含义的图标在系统的不同位置应保持一致，并且尽可能与系统的风格保持一致。不同的图标之间应该相互区别。 4) 注意避免采用的图形内容与用户文化观念上起冲突，并且尽量不采用字母、单词，尤其是非通用文字的字母和单词更不宜采用。另外，还要尽量不使用人脸、人手作为图标的素材，如果必须用，也要用那些非特定的。,1. 图标设计,5) 一般为图标设置一个清晰的边界轮廓以利于辨别区分图标对象。 6) 适当设置图标
9、的尺寸，在能够表示实体对象阶情况下，图标宜小一些为好，以威少图标所占用的内存空间及显示空间。但是如果要表示复杂对象，可以使用较大尺寸的图标。在同一系统中使用的图标推荐使用一致的图像尺寸。,1. 图标设计,为了满足不同用户、不同场合的需要，在制作图标的时候，建议将表现相同内容的图标，制作成几种不同的尺寸，以供用户选择。例如Windows XP的图标的大小有4种类型：4848pixels，3232pixels，2424p6g出以及1616pixels。微软推荐用户图标的使用大小为：4848pixels、3232pixels以及1616pixels。,1. 图标设计,7) 鉴于用户的学习和记忆能力所
10、限，为了避免引起混淆，一个系统的图标类型不宜过多，一般不得超过20种。 8) 有时为了更好地说明，可以在一个图标里包含几个相关的对象。但是在同一个图标中，画面中相互关联的物体应控制在三个以下，如果过多，将显得拥挤，或尺寸比例不好处理。物体与物体之间要错开一定距离，可以使图标倾斜一定的角度。,1. 图标设计,(4) 图标的设计方法 一个图标设计美观与否，就要看它是否具有以下特点：色彩、层次丰富，过渡自然流畅，边缘清晰，立体感强。使用的设计工具主要是Freehand、CorelDRAW以及Photoshop等，并特别推荐请具有3D设计经验的人员来完成图标的设计。,1. 图标设计,必须注意的有以下事
11、项： 色彩丰富； 视线角度与透视关系应具有动感； 所有的图像中的线条边缘和角都要求圆滑，不能有生硬的感觉； 同一系统中应用的软件光源应当放置在同一位置，一般以左上角居多，其余的光线照亮其他部分；,1. 图标设计,观察者的视线应当具有一定的倾斜角度，以免显得呆板; 物体阴影要过渡自然，同时使图标具有对比性和深度; 物体轮廓清晰，边缘的线条不能有锯齿型的折线； 图标中显示的物体、尤其是计算机以及IT设备等，外形要有现代感，尽量采用时尚流行的样式。例如目前液晶显示器是很“前卫”的，用到显示器的图标中就应当采用很薄的液晶显示器的样式。,1. 图标设计,1) 支持的颜色深度。 设计时可用的颜色种类越多，
12、则可以显示的颜色越丰富。通常分为：24位真彩色、8位256色和4位16色等。 只有显示卡设置的颜色模式等于或高于某种上述设计模式时，图标的颜色才能得以完全显现。例如，如果当前显示卡设置的8bit (256色) ，则只有8bit及其以下的可以正确且示，高于8bit的图标显示的颜色将失真很大。若熟悉显示卡的设置，这些将不难理解。,1. 图标设计,需要注意的是，在专用的设计环境中，例如Photoshop等，可供使用的颜色数目很多，但设计好的图标却是用在特定系统的环境中的，该环境所支持的颜色数目与Photoshop有所不同。所以，选取的颜色一定要考虑将来运行的系统环境，否则，将影响显示效果。,1. 图
13、标设计,Windows XP支持32位的图标，即24位图像和8位的通道 (alpha channel) 。这样，图标就可以以光滑边缘来显示，并且可以与任何背景进行混合。 每一个Windows XP图标包含3个色彩深度以支持不同显示器的设置。,1. 图标设计,2) 对象分组以及透视关系。 在图标设计中，虽然可以使用各种各样的图形对象，但综合起来，大致可分两类：有模拟实物的，例如表示文档可以用一页纸张，表示电脑可以用电脑主机、表示搜索查找使用放大镜等；有的则是会意的符号或文字，例如感叹号常常用来表示警告或提示等。,1. 图标设计,有些图标的设计可以考虑使用部分重叠的方案，图形对象多，会意将变得更加
14、形象，更便于理解含义。例如，下面三个图标的含义是 (自左至右) 添加或删除程序、图片打印、新近建立的文档。用户开始也许不明白其含义，但随着使用次数的增多，也就习以为常而变成一种约定俗成了。,1. 图标设计,但同一个图标中，不能用太多的物体来表示会意，采用的物体最好在三个以下。 另外，采用物体重叠也需要注意彼此之间的透视关系。体现透视关系的另一个手段是使用阴影，当运用阴影效果后，二者的对比效果强烈，层次关系很容易被区分开。,1. 图标设计,3) 绘制阴影。 阴影使图标显得更加清晰，具有立体感。Windows XP给图标添加了后置下沉的阴影。 4) 勾勒图标轮廓与含义选择。 轮廓的使用，对于图标也
15、非常重要，一方面它使图标更加清晰；另一方面，它能更好地位图标与其他背景区分开来。,1. 图标设计,Macromedia Fireworks是一个专业化的创建、编辑和优化网页图形的设计工具和制作环境，使用Fireworks，可以进行动画处理、添加高级交互功能以及优化图像等。在Fireworks中，可以在单个应用程序中创建、编辑位图和矢量两种图形，可以随时进行编辑，工作流可以实现自动化，从而满足耗费时间的更新和更改要求。,2. Fireworks图像制作初步,Fireworks可以与多种产品集成使用，包括Macromedia的其他产品 (如Dreamweaver、Flash等) 和其他图形应用程序
16、及HTML编辑器，从而提供了一个真正集成的Web解决方案。,2. Fireworks图像制作初步,Fireworks可生成JavaScript，从而可以轻松地创建变换图像。高效的优化功能可以在不牺牲品质的前提下，缩减网页图形文件的大小。利用HTML和JavaScript代码，可以轻松地导出Fireworks图形。,2. Fireworks图像制作初步,在Fireworks中。可以创建和编辑位图和矢量图像、设计网页效果 (如变换图像和弹出菜单) 、修剪和优化图形以减小其文件大小，以及通过使重复性任务自动进行来节省时间。,2. Fireworks图像制作初步,在完成一个文档后，可以将其导出或另存为JPEG、GIF或其他格式的文件，与包含HTML表格和JavaScript代码的HTML文件一起用于网页。如果想继续使用其他应用程序 (如Photoshop或Flash) 编辑该文档，还可以导出特定于相应应用程序的文件类型。,2. Fireworks图像制作初步,(1) 矢量和位图对象 在Fireworks的“工具”面板中，绘制和编辑矢量图与位图的工具分别位
