界面的色彩设计.ppt

《界面的色彩设计.ppt》由会员分享，可在线阅读，更多相关《界面的色彩设计.ppt（69页珍藏版）》请在三一办公上搜索。

1、什么是图标？,一个图形图像代表一个文件，程序，网页，或命令。,什么是图标？,图标是不同的 标准图像,什么是图标？,一个图标最重要的属性是其包含透明区域的能力,什么是图标？,一个图标包含几个图像格式（大小和颜色）,图标设计规范,图标样式应该有趣、色彩丰富且充满活力，目前的系统支持图标是32位，并且边缘非常平滑。,图标设计规范,图标样式特性,(1)色彩丰富，是对WindowsXP外观的补充。(2)不同的角度和透视特性为图像增添了动态活力。(3)元素的边角十分柔和，并略微有些圆滑。(4)光源位于图标的左上角，同时有环绕光照亮图标 的其它部分。,图标设计规范,图标样式特性,(5)渐变效果使图标具有立体

2、感，进而使图标的 外观更加丰满。(6)投影使图标更具对比度和立体感。(7)添加轮廓可使图像更清晰。(8)日常对象(如计算机和设备)具有更现代化的个 人外观。,图标设计规范,图标尺寸,Windows XP 建议：48x48，32x32，24x24，16x16 最低：32x32，16x16 可选：128x128,图标设计规范,图标尺寸,Windows Vista 建议：256x256，64x64，48x48，32x32，24x24，16x16 最低：256x256，48x48，32x32，16x16 可选：256x256，64x64,图标设计规范,图标色彩深度支持,每个WindowsXP图标应包含

3、以下三种色彩深度，以支持不同的显示器显示设置：24位图像加上8位alpha通道(32位)8位图像(256色)，加上1位透明色4位图像(16色)，加上1位透明色,图标设计规范,图标色彩深度支持RGB图标格式与Alpha通道,图标设计规范,图标色彩深度支持RGB图标格式与Alpha通道,图标的可用性原则,图标的功用在于建立起计算机世界与真实世界的一种隐喻，或者映射关系，应该被用户轻松准确地理解。,图标的可用性原则,图标指向的映射关系应该尽可能的直接、简单。,图标的可用性原则,每个图标指向的映射关系应该是唯一的，不要使用过于复杂的图标。,图标的可用性原则,同一个图标系列中，最好使用相同的映射模式。,

4、图标的可用性原则,形式与功能的协调统一,图标的设计技巧,创意创意来源于生活,图标的设计技巧,创意创意来源于优秀的设计作品,图标的设计技巧,细节再加上这一点就能变成一流的创意图标,1 处：凹陷的质感2、3 处：面的渐变4 处：渐变以及若隐若现的电路5 处：凹陷的线条6 处：反光,图标的设计技巧,细节,图标的设计技巧,整体性一套完整的图标应该来自同一个地方,图标的设计技巧,整体性形状、色彩、声音,图标设计的常见问题,图标之间没有明显的差异化（太相似，难以辨识）；,图标设计的常见问题,在一个图标中设计了太多的元素,图标设计的常见问题,加入不必要的元素,图标设计的常见问题,一套图标中的图标统一性不足（

5、颜色主题，透视角度，尺寸，绘图技法等）,图标设计的常见问题,在小图标中（24X24以下）使用不必要的透视和阴影,图标设计的常见问题,过度原创使语义不明确（比如将回收站设计成碎纸机的样式）,图标设计的常见问题,国家区域和文化特征没有被考虑进设计中,图标设计的常见问题,在图标中使用纯界面化的元素（比如泛滥的mac aqua效果，用户会认为你的产品是苹果的产品）,图标设计的常见问题,在图标内部使用文字（特别是不容易辨识的）,图标设计的常见问题,图标外部边缘没有做像素化处理,图标设计软件,PS+AI+Iconworkshop（或Icon Builder插件）3D软件+PS+Iconworkshop（或

6、Icon Builder插件）,图标设计的几个技巧,全面了解图标设计突出整体,图标设计的几个技巧,为你的受众着想图标的使用环境,图标设计的几个技巧,设计多大的图标就使用多大的,图标设计的几个技巧,保持图标简洁和图标化,图标设计的几个技巧,注意保持光、影子、反射的一致性,图标设计的几个技巧,使用统一的透视,图标设计的几个技巧,保持一套图标风格轮廓线、对比度、色彩、明暗等,图标设计的基本流程,图标创意阶段根据项目要求，确定图标的风格,图标创意阶段功能图标的定义词语-图形的转换,图标设计的基本流程,草图绘制阶段确定图标透视方向,图标设计的基本流程,草图绘制阶段元素组合,图标设计的基本流程,草图渲染阶

7、段软件绘制、细节润色,图标设计的基本流程,草图渲染阶段,图标设计的基本流程,草图渲染阶段,图标设计的基本流程,Disco软件图标设计 Disco是一款用来拷贝光盘内容的软件，也可用来进行简便的刻录工作，并且也具有其他多项功能。碟片火；舞厅镜面球,图标设计的基本流程,Disco软件图标设计 创建了一个简单的3d模型来作为图标的基础 确定火焰的形状,图标设计的基本流程,Disco软件图标设计 黑色作为火焰的基调色，因为这样可以使图标和黑/白风格软件界面相匹配,图标设计的基本流程,Disco软件图标设计 一个让人感觉非常有动感的黑色图标,图标设计的基本流程,世界杯频道主题设计 按照所给项目的需求文档

8、和分析资料开始进行大致layout，风格趋向的设定。,图标设计的基本流程,世界杯频道主题设计 按照自己搜寻图片进行主界面icon设计，先从造型开始，然后进行模型的塑造，贴图材质的绘制,图标设计的基本流程,世界杯频道主题设计 模型制作，动画渲染,图标设计的基本流程,世界杯频道主题设计 主界面背景使用PS cs绘制，突出绿茵场地的感觉，并且使它更具有科技感，使用3ds渲染背景效果，整合在一起，4圆盘代表icon所摆放的位置,图标设计的基本流程,世界杯频道主题设计 最后由程序工程师进行整合,图标设计的基本流程,新闻阅读软件Times设计的图标 概念草图,图标设计的基本流程,新闻阅读软件Times设计的图标 流程,图标设计的基本流程,新闻阅读软件Times设计的图标 编辑咖啡杯图标,图标设计的基本流程,新闻阅读软件Times设计的图标 编辑报纸图标,图标设计的基本流程,新闻阅读软件Times设计的图标 成品,图标设计的基本流程,工业软件Kyvision的 整体界面设计,图标设计的基本流程,图标设计的基本流程,图标设计的基本流程,要想做界面，那就要做到每个像素都精确！,图标设计的基本流程,图标设计的基本流程,图标设计的基本流程,