1、授课班级授课日期授课题目：第二章 网页元素之按钮目的要求：了解按钮的设计原则 ；会分析判断按钮的优劣 ；会用 PS 临摹优秀按钮 重点难点：按钮的基本常识；按钮的常见表现形式；按钮的设计原则组织教学：点名考勤 引入新课 讲解新课 总结 学生练习 巡回指导 总结问题 总结复习导入新课：电梯在高楼大厦林立的城市中是必不可少的工具，而大部分电梯的控制中枢就是一排标注着各种功能的按钮，按钮在现代人们的生活中随处可见。提问： ICON 的常见格式有哪些？ 我们经常见到哪些表现形式的 ICON？ ICON 设计是否可以不考虑整体？教学方式、手段、媒介：教学手段：讲授、多媒体；媒介：教材授课内容：一、 按钮
2、简介按钮：按钮代表着“做某件事” ，即点击了按钮代表着操作了一个功能，做的这件事是有后果的，不易挽回的。例如典型的 google，QQ 邮箱。像信息搜索、回复、注册，他们的共同点是：都是在“做” 一件事，并且绝大多数都是对表单的提交。从技术上讲，这类按钮的作用是向后台提交了数据，“命令”服务器去做了一件事。二、按钮基本常识（一）状态：正常状态、鼠标经过、鼠标按下、鼠标弹起（二）格式Gif Png Jpg Swf三、按钮表现形式（一）图形方式（二）文字方式（三）动画方式 （四）综合方式四、按钮设计原则（一）醒目吸引注意 （二）准确反映功能 （三）符合整体风格 五、按钮设计技巧当前在页面里要强调的
3、链接自然会以按钮的形式表现，尤其所谓重量级按钮是促成观者完成页面功能的一个很重要的部分，所以对于其本身来讲，应该具有“ 勾引眼球 ”的效果。（一）按钮本身的用色本身的颜色应该区别于它周边的环境色，因此它要更亮而且有高对比度的颜色。（二）按钮的位置按钮的位置也需要仔细考究，基本原则是要容易找到，特别重要的按钮应该处在画面的中心位置。（三）按钮上面的文字表述在按钮上使用什么文字传递给用户非常重要。需要言简意赅，直接明了，如: 注册、下载、创建、免费试玩等，甚至有时候用“点击进入”，这一点上就是千万不要让观者去思考，越简单、越直接越好。（四）按钮的尺寸通常来讲，一个页面当中按钮的大小也决定了其本身的
4、重要级别，但也不是越大越好，尺寸应该适中，因为按钮大到一定程度，会让人觉得那不像按钮，潜意识的认为那是一块区域，导致没有点击欲望。（五）让其充分通透你的按钮不能和网页中的其他元素挤在一起。它需要充足的 margin(外边距) 才能更加突出，也需要更多的 padding(内边距 )才能让文字更容易阅读。（六）注意鼠标滑过的效果给予较为重要的按钮适当加一些鼠标滑过的效果，会有力的增强按钮的点击感，给用户带来良好的用户体验，起到画龙点睛的作用。这里要注意的是，不太适合按钮集中的地方，每个都增加高亮的鼠标滑过的效果，这样会造成视觉过于杂乱，影响用户浏览的舒适度，所以要强调的是“恰当”地添加鼠标滑过的效果。六、案例分析（一）Vista 风格按钮 （二）磨砂金属按钮 （三）青瓷按钮 （四）疑问的红 总结巩固：按钮的基本常识；按钮的常见表现形式；按钮的设计原则布置作业：课后作业 4、5参考资料：教材教学后记：编写日期： 编写人员：
