界面的色彩与图标设计科学-课件

界面的色彩与图标设计科学1ppt课件界面的色彩与图标设计科学1ppt课件什么是图标？一个图形图像——代表一个文件，程序，网页，或命令。2ppt课件什么是图标？一个图形图像2ppt课件什么是图标？图标是不同的标准图像3ppt课件什么是图标？图标是不同的3ppt课件什么是图标？一个图标最重要的属性是其包含透明区域的能力4ppt课件什么是图标？一个图标最重要的属性是其包含透明区域的能力4pp什么是图标？一个图标包含几个图像格式（大小和颜色）5ppt课件什么是图标？一个图标包含几个图像格式（大小和颜色）5ppt课图标设计规范

图标样式应该有趣、色彩丰富且充满活力，目前的系统支持图标是32位，并且边缘非常平滑。6ppt课件图标设计规范图标样式应该有趣、色彩丰富且充满活力，目图标设计规范图标样式特性

(1)色彩丰富，是对WindowsXP外观的补充。

(2)不同的角度和透视特性为图像增添了动态活力。

(3)元素的边角十分柔和，并略微有些圆滑。

(4)光源位于图标的左上角，同时有环绕光照亮图标的其它部分。

7ppt课件图标设计规范图标样式特性(1)色彩丰富图标设计规范图标样式特性(5)渐变效果使图标具有立体感，进而使图标的外观更加丰满。

(6)投影使图标更具对比度和立体感。

(7)添加轮廓可使图像更清晰。

(8)日常对象(如计算机和设备)具有更现代化的个人外观。8ppt课件图标设计规范图标样式特性(5)渐变效果使图标图标设计规范图标尺寸Windows®XP

•建议：48x48，32x32

，24x24，16x16

•最低：32x32

，16x16•可选：128x1289ppt课件图标设计规范图标尺寸Windows®XP

•建议：图标设计规范图标尺寸WindowsVista™

•建议：256x256，64x64，48x48，32x32，24x24，16x16•最低：256x256，48x48，32x32，16x16

•可选：256x256，64x64

10ppt课件图标设计规范图标尺寸WindowsVista™10ppt课图标设计规范图标色彩深度支持每个WindowsXP图标应包含以下三种色彩深度，以支持不同的显示器显示设置：

24位图像加上8位alpha通道(32位)

8位图像(256色)，加上1位透明色

4位图像(16色)，加上1位透明色

11ppt课件图标设计规范图标色彩深度支持每个WindowsXP图标应包含图标设计规范图标色彩深度支持——RGB图标格式与Alpha通道12ppt课件图标设计规范图标色彩深度支持——RGB图标格式与Alpha通图标设计规范图标色彩深度支持——RGB图标格式与Alpha通道13ppt课件图标设计规范图标色彩深度支持——RGB图标格式与Alpha通图标的可用性原则

图标的功用在于建立起计算机世界与真实世界的一种隐喻，或者映射关系，应该被用户轻松准确地理解。14ppt课件图标的可用性原则

图标的功用在于建立起计算机世界与真图标的可用性原则

图标指向的映射关系应该尽可能的直接、简单。15ppt课件图标的可用性原则

图标指向的映射关系应该尽可能的直接、简单。图标的可用性原则

每个图标指向的映射关系应该是唯一的，不要使用过于复杂的图标。16ppt课件图标的可用性原则

每个图标指向的映射关系应该是唯一的，不要使图标的可用性原则

同一个图标系列中，最好使用相同的映射模式。17ppt课件图标的可用性原则

同一个图标系列中，最好使用相同的映射模式。图标的可用性原则

形式与功能的协调统一18ppt课件图标的可用性原则

形式与功能的协调统一18ppt课件图标的设计技巧

创意创意来源于生活19ppt课件图标的设计技巧

创意19ppt课件图标的设计技巧

创意创意来源于优秀的设计作品20ppt课件图标的设计技巧

创意20ppt课件图标的设计技巧

细节再加上这一点就能变成一流的创意图标1处：凹陷的质感

2

、3处：面的渐变

4处：渐变以及若隐若现的电路

5处：凹陷的线条

6处：反光21ppt课件图标的设计技巧

细节1处：凹陷的质感

2

、3处：面的渐图标的设计技巧

细节22ppt课件图标的设计技巧

细节22ppt课件图标的设计技巧

整体性一套完整的图标应该来自同一个地方23ppt课件图标的设计技巧

整体性23ppt课件图标的设计技巧

整体性形状、色彩、声音24ppt课件图标的设计技巧

整体性24ppt课件图标设计的常见问题

图标之间没有明显的差异化（太相似，难以辨识）；25ppt课件图标设计的常见问题

图标之间没有明显的差异化（太相似，难以辨图标设计的常见问题

在一个图标中设计了太多的元素26ppt课件图标设计的常见问题

在一个图标中设计了太多的元素26ppt课图标设计的常见问题

加入不必要的元素27ppt课件图标设计的常见问题

加入不必要的元素27ppt课件图标设计的常见问题

一套图标中的图标统一性不足（颜色主题，透视角度，尺寸，绘图技法等）28ppt课件图标设计的常见问题

一套图标中的图标统一性不足（颜色主题，透图标设计的常见问题

在小图标中（24X24以下）使用不必要的透视和阴影29ppt课件图标设计的常见问题

在小图标中（24X24以下）使用不必要的图标设计的常见问题

过度原创使语义不明确（比如将回收站设计成碎纸机的样式）30ppt课件图标设计的常见问题

过度原创使语义不明确（比如将回收站设计成图标设计的常见问题

国家区域和文化特征没有被考虑进设计中31ppt课件图标设计的常见问题

国家区域和文化特征没有被考虑进设计中31图标设计的常见问题

在图标中使用纯界面化的元素（比如泛滥的macaqua效果，用户会认为你的产品是苹果的产品）32ppt课件图标设计的常见问题

在图标中使用纯界面化的元素（比如泛滥的m图标设计的常见问题

在图标内部使用文字（特别是不容易辨识的）33ppt课件图标设计的常见问题

在图标内部使用文字（特别是不容易辨识的）图标设计的常见问题

图标外部边缘没有做像素化处理34ppt课件图标设计的常见问题

图标外部边缘没有做像素化处理34ppt课图标设计软件

PS+AI+Iconworkshop（或IconBuilder插件）3D软件+PS+Iconworkshop（或IconBuilder插件）35ppt课件图标设计软件

PS+AI+Iconworkshop（或Ico图标设计的几个技巧

全面了解图标设计——突出整体36ppt课件图标设计的几个技巧

全面了解图标设计36ppt课件图标设计的几个技巧

为你的受众着想——图标的使用环境37ppt课件图标设计的几个技巧

为你的受众着想37ppt课件图标设计的几个技巧

设计多大的图标就使用多大的38ppt课件图标设计的几个技巧

设计多大的图标就使用多大的38ppt课件图标设计的几个技巧

保持图标简洁和图标化39ppt课件图标设计的几个技巧

保持图标简洁和图标化39ppt课件图标设计的几个技巧

注意保持光、影子、反射的一致性40ppt课件图标设计的几个技巧

注意保持光、影子、反射的一致性40ppt图标设计的几个技巧

使用统一的透视41ppt课件图标设计的几个技巧

使用统一的透视41ppt课件图标设计的几个技巧

保持一套图标风格——轮廓线、对比度、色彩、明暗等42ppt课件图标设计的几个技巧

保持一套图标风格42ppt课件图标设计的基本流程

图标创意阶段——根据项目要求，确定图标的风格43ppt课件图标设计的基本流程

图标创意阶段43ppt课件图标创意阶段功能图标的定义词语-图形的转换图标设计的基本流程

44ppt课件图标创意阶段图标设计的基本流程

44ppt课件草图绘制阶段——确定图标透视方向图标设计的基本流程

45ppt课件草图绘制阶段图标设计的基本流程

45ppt课件草图绘制阶段——元素组合图标设计的基本流程

46ppt课件草图绘制阶段图标设计的基本流程

46ppt课件草图渲染阶段——软件绘制、细节润色图标设计的基本流程

47ppt课件草图渲染阶段图标设计的基本流程

47ppt课件草图渲染阶段图标设计的基本流程

48ppt课件草图渲染阶段图标设计的基本流程

48ppt课件草图渲染阶段图标设计的基本流程

49ppt课件草图渲染阶段图标设计的基本流程

49ppt课件Disco软件图标设计

Disco是一款用来拷贝光盘内容的软件，也可用来进行简便的刻录工作，并且也具有其他多项功能。——碟片＋火；舞厅镜面球

图标设计的基本流程

50ppt课件Disco软件图标设计图标设计的基本流程

50ppt课件Disco软件图标设计

创建了一个简单的3d模型来作为图标的基础确定火焰的形状图标设计的基本流程

51ppt课件Disco软件图标设计图标设计的基本流程

51ppt课件Disco软件图标设计

黑色作为火焰的基调色，因为这样可以使图标和黑/白风格软件界面相匹配图标设计的基本流程

52ppt课件Disco软件图标设计图标设计的基本流程

52ppt课件Disco软件图标设计

一个让人感觉非常有动感的黑色图标图标设计的基本流程

53ppt课件Disco软件图标设计图标设计的基本流程

53ppt课件世界杯频道主题设计

按照所给项目的需求文档和分析资料开始进行大致layout，风格趋向的设定。图标设计的基本流程

54ppt课件世界杯频道主题设计图标设计的基本流程

54ppt课件世界杯频道主题设计

按照自己搜寻图片进行主界面icon设计，先从造型开始，然后进行模型的塑造，贴图材质的绘制图标设计的基本流程

55ppt课件世界杯频道主题设计图标设计的基本流程

55ppt课件世界杯频道主题设计

模型制作，动画渲染图标设计的基本流程

56ppt课件世界杯频道主题设计图标设计的基本流程

56ppt课件世界杯频道主题设计

主界面背景使用PScs绘制，突出绿茵场地的感觉，并且使它更具有科技感，使用3ds渲染背景效果，整合在一起，4圆盘代表icon所摆放的位置图标设计的基本流程

57ppt课件世界杯频道主题设计图标设计的基本流程

57ppt课件世界杯频道主题设计

最后由程序工程师进行整合图标设计的基本流程

58ppt课件世界杯频道主题设计图标设计的基本流程

58ppt课件新闻阅读软件"Times"设计的图标

概念草图图标设计的基本流程

59ppt课件新闻阅读软件"Times"设计的图标图标设计的基本流程

59新闻阅读软件"Times"设计的图标

流程图标设计的基本流程

60ppt课件新闻阅读软件"Times"设计的图标图标设计的基本流程

60新闻阅读软件"Times"设计的图标

编辑咖啡杯图标图标设计的基本流程

61ppt课件新闻阅读软件"Times"设计的图标图标设计的基本流程

61新闻阅读软件"Times"设计的图标

编辑报纸图标图标设计的基本流程

62ppt课件新闻阅读软件"Times"设计的图标图标设计的基本流程

62新闻阅读软件"Times"设计的图标

成品图标设计的基本流程

63ppt课件新闻阅读软件"Times"设计的图标图标设计的基本流程

63工业软件Kyvision的