UI设计－－图标设计.ppt

UI设计－－图标设计 杨飞雄 yfxiong007@126.com QQ什么是图标？ 图标 广义——具有指代意义的图形符号。具有高度浓缩并快捷传达信息、便于记忆的特性。 狭义——计算机软件方面的应用，包括：程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。 图标和标志 图标 标志（网站Logo，各种事物的标志） 图标的类型 程序图标（Application Icon） 桌面上能够随意移动的图标 工具栏图标（Toolbar Icons） 工具栏上的图标 按钮（Button） 应用软件面板上的图标 图标的属性 尺寸 不同尺寸之间基本图形类似,但不是简单的放大缩小 色深度（Bit Depth） 能否反映颜色的层次多少 Windows XP支持Alpha通道 图标色彩 选择比较柔和的色彩，搭配比较协调，一致 Xp图标调色板 标准的Mac图标 Apple风格图标 图标的设计 识别性：具备强烈的视觉识别功能 注意已经成为惯例的图标 避免过于简洁 注意用户文化背景 一致性： 同一图标不同尺寸，基本形状、色彩保持一致 winrar 一致性： 同一系统的一系列图标，其配色风格、大小一致 兼容性 不同文化背景导致理解的误差 红十字会标志 图标的设计 避免出现文字 不同国家文字不一样 为显示而设计 线条方向与粗细 图标中的基本线条与基本图形 直线：显示效果最好 斜线 弧线 光源一致性 光源一致 光源不一致 图标蒙版 确定点击范围 突出显示图标 图标设计 1、概念 设计的概念与用户想法一致 图标一致性 图形的文化背景 图标中图形的数量一般不超过三个 图标设计 快速模型 三维建模－3DMAX 渲染 润色 Ps特效，合并图层 图标生成（IconBuilder） 练习 奥运五环 练习 红十字 练习 爱心医院logo * * 直观、一目了然 注重图形的象征意义 √ √ 256 16 24 32 48 72 128 √ √ √ √ √ √ Mac √ √ √ √ Win Mac OSX Jugular豹皮风格图标 佛教“卐”字 纳粹标志 1 1 1 1bit 1 4 4 4bit,1bit 1 1 8 8bit,1bit 1 4 8 8bit,4bit,1bit 2Bit显示器 4Bit显示器 8Bit显示器 图标设置 22.6o 30o 45o －Photoshop *