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

1、界面的色彩与图标设计科学界面的色彩与图标设计科学1ppt课件什么是图标？什么是图标？ 一个图形图像代表一个文件，程序，网页，或命令。2ppt课件什么是图标？什么是图标？ 图标是不同的 标准图像3ppt课件什么是图标？什么是图标？ 一个图标最重要的属性是其包含透明区域的能力4ppt课件什么是图标？什么是图标？ 一个图标包含几个图像格式（大小和颜色）5ppt课件图标设计规范图标设计规范 图标样式应该有趣、色彩丰富且充满活力，目前的系统支持图标是32位，并且边缘非常平滑。6ppt课件图标设计规范图标设计规范 图标样式特性 (1) 色彩丰富，是对WindowsXP外观的补充。(2) 不同的角度和透视特

2、性为图像增添了动态活力。(3) 元素的边角十分柔和，并略微有些圆滑。(4) 光源位于图标的左上角，同时有环绕光照亮图标 的其它部分。7ppt课件图标设计规范图标设计规范 图标样式特性 (5) 渐变效果使图标具有立体感，进而使图标的 外观更加丰满。(6) 投影使图标更具对比度和立体感。(7) 添加轮廓可使图像更清晰。(8) 日常对象(如计算机和设备)具有更现代化的个 人外观。 8ppt课件图标设计规范图标设计规范 图标尺寸Windows XP 建议： 48x48 ， 32x32 ， 24x24 ， 16x16 最低： 32x32 ， 16x16 可选： 128x1289ppt课件图标设计规范图标

3、设计规范 图标尺寸Windows Vista 建议： 256x256 ， 64x64 ， 48x48 ， 32x32 ， 24x24 ， 16x16 最低： 256x256 ， 48x48 ， 32x32 ， 16x16 可选： 256x256 ， 64x64 10ppt课件图标设计规范图标设计规范 图标色彩深度支持每个WindowsXP图标应包含以下三种色彩深度，以支持不同的显示器显示设置： 24位图像加上8位alpha通道(32位)8位图像(256色)，加上1位透明色4位图像(16色)，加上1位透明色 11ppt课件图标设计规范图标设计规范 图标色彩深度支持RGB图标格式与Alpha通道1

4、2ppt课件图标设计规范图标设计规范 图标色彩深度支持RGB图标格式与Alpha通道13ppt课件图标的可用性原则图标的可用性原则 图标的功用在于建立起计算机世界与真实世界的一种隐喻，或者映射关系，应该被用户轻松准确地理解。14ppt课件图标的可用性原则图标的可用性原则 图标指向的映射关系应该尽可能的直接、简单。 15ppt课件图标的可用性原则图标的可用性原则 每个图标指向的映射关系应该是唯一的，不要使用过于复杂的图标。16ppt课件图标的可用性原则图标的可用性原则 同一个图标系列中，最好使用相同的映射模式。17ppt课件图标的可用性原则图标的可用性原则 形式与功能的协调统一18ppt课件图标

5、的设计技巧图标的设计技巧 创意创意来源于生活19ppt课件图标的设计技巧图标的设计技巧 创意创意来源于优秀的设计作品20ppt课件图标的设计技巧图标的设计技巧 细节再加上这一点就能变成一流的创意图标1 处：凹陷的质感2 、3 处：面的渐变4 处：渐变以及若隐若现的电路5 处：凹陷的线条6 处：反光21ppt课件图标的设计技巧图标的设计技巧 细节22ppt课件图标的设计技巧图标的设计技巧 整体性一套完整的图标应该来自同一个地方 23ppt课件图标的设计技巧图标的设计技巧 整体性形状、色彩、声音24ppt课件图标设计的常见问题图标设计的常见问题 图标之间没有明显的差异化（太相似，难以辨识）；25p

6、pt课件图标设计的常见问题图标设计的常见问题 在一个图标中设计了太多的元素26ppt课件图标设计的常见问题图标设计的常见问题 加入不必要的元素27ppt课件图标设计的常见问题图标设计的常见问题 一套图标中的图标统一性不足（颜色主题，透视角度，尺寸，绘图技法等）28ppt课件图标设计的常见问题图标设计的常见问题 在小图标中（24X24以下）使用不必要的透视和阴影29ppt课件图标设计的常见问题图标设计的常见问题 过度原创使语义不明确（比如将回收站设计成碎纸机的样式）30ppt课件图标设计的常见问题图标设计的常见问题 国家区域和文化特征没有被考虑进设计中31ppt课件图标设计的常见问题图标设计的常

7、见问题 在图标中使用纯界面化的元素（比如泛滥的mac aqua效果，用户会认为你的产品是苹果的产品）32ppt课件图标设计的常见问题图标设计的常见问题 在图标内部使用文字（特别是不容易辨识的）33ppt课件图标设计的常见问题图标设计的常见问题 图标外部边缘没有做像素化处理34ppt课件图标设计软件图标设计软件 PS+AI+Iconworkshop（或Icon Builder插件） 3D软件+PS+Iconworkshop（或Icon Builder插件）35ppt课件图标设计的几个技巧图标设计的几个技巧 全面了解图标设计突出整体36ppt课件图标设计的几个技巧图标设计的几个技巧 为你的受众着想

8、图标的使用环境37ppt课件图标设计的几个技巧图标设计的几个技巧 设计多大的图标就使用多大的38ppt课件图标设计的几个技巧图标设计的几个技巧 保持图标简洁和图标化39ppt课件图标设计的几个技巧图标设计的几个技巧 注意保持光、影子、反射的一致性40ppt课件图标设计的几个技巧图标设计的几个技巧 使用统一的透视41ppt课件图标设计的几个技巧图标设计的几个技巧 保持一套图标风格轮廓线、对比度、色彩、明暗等42ppt课件图标设计的基本流程图标设计的基本流程 图标创意阶段根据项目要求，确定图标的风格43ppt课件图标创意阶段1.功能图标的定义2.词语-图形的转换图标设计的基本流程图标设计的基本流程

9、44ppt课件草图绘制阶段确定图标透视方向图标设计的基本流程图标设计的基本流程45ppt课件草图绘制阶段元素组合图标设计的基本流程图标设计的基本流程46ppt课件草图渲染阶段软件绘制、细节润色图标设计的基本流程图标设计的基本流程47ppt课件草图渲染阶段图标设计的基本流程图标设计的基本流程48ppt课件草图渲染阶段图标设计的基本流程图标设计的基本流程49ppt课件Disco软件图标设计 Disco是一款用来拷贝光盘内容的软件，也可用来进行简便的刻录工作，并且也具有其他多项功能。碟片火 ；舞厅镜面球 图标设计的基本流程图标设计的基本流程50ppt课件Disco软件图标设计 创建了一个简单的3d模

10、型来作为图标的基础 确定火焰的形状 图标设计的基本流程图标设计的基本流程51ppt课件Disco软件图标设计 黑色作为火焰的基调色，因为这样可以使图标和黑/白风格软件界面相匹配 图标设计的基本流程图标设计的基本流程52ppt课件Disco软件图标设计 一个让人感觉非常有动感的黑色图标 图标设计的基本流程图标设计的基本流程53ppt课件世界杯频道主题设计 按照所给项目的需求文档和分析资料开始进行大致layout，风格趋向的设定。图标设计的基本流程图标设计的基本流程54ppt课件世界杯频道主题设计 按照自己搜寻图片进行主界面icon设计，先从造型开始，然后进行模型的塑造，贴图材质的绘制 图标设计的

11、基本流程图标设计的基本流程55ppt课件世界杯频道主题设计 模型制作，动画渲染图标设计的基本流程图标设计的基本流程56ppt课件世界杯频道主题设计 主界面背景使用PS cs绘制，突出绿茵场地的感觉，并且使它更具有科技感，使用3ds渲染背景效果，整合在一起，4圆盘代表icon所摆放的位置 图标设计的基本流程图标设计的基本流程57ppt课件世界杯频道主题设计 最后由程序工程师进行整合 图标设计的基本流程图标设计的基本流程58ppt课件新闻阅读软件Times设计的图标 概念草图 图标设计的基本流程图标设计的基本流程59ppt课件新闻阅读软件Times设计的图标 流程 图标设计的基本流程图标设计的基本

12、流程60ppt课件新闻阅读软件Times设计的图标 编辑咖啡杯图标 图标设计的基本流程图标设计的基本流程61ppt课件新闻阅读软件Times设计的图标 编辑报纸图标 图标设计的基本流程图标设计的基本流程62ppt课件新闻阅读软件Times设计的图标 成品 图标设计的基本流程图标设计的基本流程63ppt课件工业软件Kyvision的 整体界面设计 图标设计的基本流程图标设计的基本流程64ppt课件图标设计的基本流程图标设计的基本流程65ppt课件图标设计的基本流程图标设计的基本流程66ppt课件要想做界面，那就要做到每个像素都精确！ 图标设计的基本流程图标设计的基本流程67ppt课件图标设计的基本流程图标设计的基本流程68ppt课件图标设计的基本流程图标设计的基本流程69ppt课件