《界面的色彩设计》由会员分享,可在线阅读,更多相关《界面的色彩设计(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 可选: 256x2
3、56 , 64x64,图标设计规范,图标色彩深度支持,每个WindowsXP图标应包含以下三种色彩深度,以支持不同的显示器显示设置: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+
6、AI+Iconworkshop(或Icon Builder插件) 3D软件+PS+Iconworkshop(或Icon Builder插件),图标设计的几个技巧,全面了解图标设计 突出整体,图标设计的几个技巧,为你的受众着想 图标的使用环境,图标设计的几个技巧,设计多大的图标就使用多大的,图标设计的几个技巧,保持图标简洁和图标化,图标设计的几个技巧,注意保持光、影子、反射的一致性,图标设计的几个技巧,使用统一的透视,图标设计的几个技巧,保持一套图标风格 轮廓线、对比度、色彩、明暗等,图标设计的基本流程,图标创意阶段 根据项目要求,确定图标的风格,图标创意阶段功能图标的定义 词语-图形的转换,图
7、标设计的基本流程,草图绘制阶段 确定图标透视方向,图标设计的基本流程,草图绘制阶段 元素组合,图标设计的基本流程,草图渲染阶段 软件绘制、细节润色,图标设计的基本流程,草图渲染阶段,图标设计的基本流程,草图渲染阶段,图标设计的基本流程,Disco软件图标设计Disco是一款用来拷贝光盘内容的软件,也可用来进行简便的刻录工作,并且也具有其他多项功能。碟片火 ;舞厅镜面球,图标设计的基本流程,Disco软件图标设计创建了一个简单的3d模型来作为图标的基础确定火焰的形状,图标设计的基本流程,Disco软件图标设计黑色作为火焰的基调色,因为这样可以使图标和黑/白风格软件界面相匹配,图标设计的基本流程,
8、Disco软件图标设计一个让人感觉非常有动感的黑色图标,图标设计的基本流程,世界杯频道主题设计按照所给项目的需求文档和分析资料开始进行大致layout,风格趋向的设定。,图标设计的基本流程,世界杯频道主题设计按照自己搜寻图片进行主界面icon设计,先从造型开始,然后进行模型的塑造,贴图材质的绘制,图标设计的基本流程,世界杯频道主题设计模型制作,动画渲染,图标设计的基本流程,世界杯频道主题设计主界面背景使用PS cs绘制,突出绿茵场地的感觉,并且使它更具有科技感,使用3ds渲染背景效果,整合在一起,4圆盘代表icon所摆放的位置,图标设计的基本流程,世界杯频道主题设计最后由程序工程师进行整合,图标设计的基本流程,新闻阅读软件“Times“设计的图标概念草图,图标设计的基本流程,新闻阅读软件“Times“设计的图标流程,图标设计的基本流程,新闻阅读软件“Times“设计的图标编辑咖啡杯图标,图标设计的基本流程,新闻阅读软件“Times“设计的图标编辑报纸图标,图标设计的基本流程,新闻阅读软件“Times“设计的图标成品,图标设计的基本流程,工业软件Kyvision的整体界面设计,图标设计的基本流程,图标设计的基本流程,图标设计的基本流程,要想做界面,那就要做到每个像素都精确!,图标设计的基本流程,图标设计的基本流程,图标设计的基本流程,