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