1、授课班级授课日期授课题目：第一章 网页元素 ICON目的要求：了解 ICON 图标的设计原则 ；会分析判断 ICON 图标的优劣；会用PS 临摹优秀 ICON 图标 重点难点：ICON 的基本常识；ICON 的常见表现形式；ICON 的设计原则组织教学：点名考勤 引入新课 讲解新课 总结 学生练习 巡回指导 总结问题 总结复习导入新课：在现实生活中，到处都可以见到 ICON 的身影。从Windows 系统到应用软件，从 Mp3 到手机、掌上电脑；甚至在电视节目及平面领域都能见到 ICON 的身影。既然 ICON 这么流行，那么 ICON 到底有什么作用呢？提问：你经常在哪里看到过图标的身影？教
2、学方式、手段、媒介：教学手段：讲授、多媒体；媒介：教材授课内容：一、 ICON 简介图标是具有明确指代含义的计算机图形。其中桌面图标是软件标识，界面中的图标是功能标识。图 标 具 有 指 代 意 义 的 图 形 符 号 ， 具 有 高 度 浓 缩 并 快 捷 传 达 信 息 、 便 于 记忆 的 特 性 。 应 用 范 围 很 广 ， 软 硬 件 网 页 社 交 场 所 公 共 场 合 无 所 不 在 ， 例 如 ：男 女 厕 所 标 志 和 各 种 交 通 标 志 等 。二 、 ICON 常 识（一）尺寸图标过大占用界面空间过多，过小又会降低精细度，具体该使用多大尺寸的图标，常常根据界面的需
3、求而定。图标的尺寸常有以下几种：16px16px 24px24px 32px32px 48px48px64px64px 128px128px 256px256px (二) 色彩数量Windows 95, Windows 98, Windows ME, Windows 2000 建 议 ： 48x48 （ 256 色 ， 16 色 ） ， 32x32 （ 256 色 ， 16 色 ）， 16x16 （ 256 色 ， 16 色 ） . 最 低 ： 32x32 （ 256 色 ， 16 色 ） ， 16x16 （ 256 色 ， 16 色 ）. Windows XP 建 议 ： 48x48 （ R
4、GB /A， 256 色 ， 16 色 ） ， 32x32 （ RGB /A， 256 色 ， 16 色 ） ， 24x24 （ RGB /A， 256 色 ， 16 色 ） ， 16x16 （ RGB /A， 256 色 ， 16 色 ） 最 低 ： 32x32 （ 的 RGB /A， 256 色 ， 16 色 ） ， 16x16 （ 的 RGB /A， 256 色 ， 16 色 ） . 可 选 ： 128x128 （ 的 RGB /A） Windows Vista 建 议 ： 256x256 （ RGB /A） ， 64x64 （ RGB /A） ， 48x48 （ RGB /A， 256
5、 色 ， 16 色 ） ， 32x32 （ RGB /A， 256 色 ， 16 色 ） ， 24x24 （ RGB /A， 256 色 ， 16 色 ） ， 16x16 （ RGB /A， 256 色 ， 16 色 ） 最 低 ： 256x256 （ RGB /A） ， 48x48 （ RGB /A， 256 色 ） ， 32x32 （ RGB /A， 256 色 ） ， 16x16 （ RGB /A， 256 色 ） 可 选 ： 256x256 （ 256 色 ， 16 色 ） ， 64x64 （ 256 色 ， 16色 ）（ 三 ） 格 式图标的常用格式有以下几种：PNG，GIF，ICO
6、，BMPPNG：无损压缩格式，支持透明，兼顾图像质量和文件大小。GIF：网页图片常用格式，支持透明，优点是压缩的文件小，支持 GIF 动画，缺点是不支持半透明，颜色数最多只能显示 256 种颜色。JPG：有损压缩，优点是文件小，图像颜色丰富，缺点是不支持透明和半透明。ICO：WINDOWS 系统的图标文件格式，支持多 通道透明，支持 32 位真彩色三、ICON 常见表现形式（一）图形方式（二）文字方式（三）综合方式 四、ICON 优缺点（一）优点1. 代替文字，比文字要直观，提高软件可用性；2. 代替文字，比文字更漂亮，提升视觉效果；（二）缺点不如文字表达的准确。图标设计的核心思想，就是要尽可
7、能的发挥图标的优点：比文字直观，比文字漂亮，减少图标的缺点：不如文字表达的准确。五、ICON 设计原则（一）可识别性原则图标的图形，要能准确表达相应的操作。看到一个图标，就要明白他所代表的含义，这是图标设计的灵魂。（二）第二：差异性原则 如果一个界面上有六个图标，我一眼看上去，要能第一时间感觉到他们之间的差异性。差异性较小差异性较大（三）第三：合适的精细度，元素个数初始阶段，图标可用性会随着精细度的变化而上升，但是达到一定精细度以后，图标的可用性往往会随着图标的精细度而下降。变化曲线如下图图是一个表示“设置”的齿轮图标，我们看到，最左边的最简单的和最右边的照片级的，可用性都是非常低的，都不适合
8、做图标（四）风格统一性原则如果一套图标的视觉设计非常协调统一，我们就说这套图标具有自己的风格，这样的图标看上去也会更美丽，更专业，同时也会增强用户的满意度。（五）与环境的协调性图标是没有单独存在的，图标最终是要放置在界面上才会起作用的。因此，图标的设计，要考虑图标所处的环境，这样的图标，是否适合这样的界面？（六）视觉效果和原创性追求视觉效果，一定是要在保证差异性，可识别性，统一性，协调性原则的基础上，要先满足基本的功能需求，才可以考虑更高层次的要求-情感需求。六、案例分析（一）银色渐变 IE 浏览器 ICON （二）可回收 ICON 图标 （三）水晶风格 Dreamweaver 图标（四）微笑的蓝调 （五）收藏幸运星 （六）银色邮件精灵 总结巩固：ICON 的基本常识；ICON 的常见表现形式；ICON 的设计原则布置作业：课后作业 4、5参考资料：教材教学后记：编写日期： 编写人员：
