网页设计——从界面布局到视觉表现-教学大纲

《网页界面设计》课程教学大纲
一、课程名称：网页界面设计
课程代码：
课程负责人：
二、学时与学分：56学时，3.5学分
三、课程性质：必修
四、适用专业：视觉传达/数字媒体设计/网络与新媒体
五、使用教材：
余兰亭编.《网页设计：从界面布局到视觉表现（视频版）》．人民邮电出版社，2018年2月
六、参考教材：
陈洁、杨瑞梅编.《HTML+CSS+前端开发(慕课版)》.人民邮电出版社，2017年5月；
七、开课单位：艺术设计学院
八、课程的目的和任务：
网页界面设计为视觉传达专业的专业必修课程。

通过对网站设计流程、网站交互及网页界面排版理论知识与经典案例的讲解，辅助PS、AI、Axure、DW软件的实践操作让学生能够独立设计及制作静态网页界面。

在教学过程中鼓励学生自主收集优秀网站界面，在实践中能了解网页的设计原则，以及网页功能结构、交互设计、视觉设计的重要性。

通过该课程的学习，培养学生的审美能力、创新能力、动手能力和自学能力以及分析能力和解决问题的能力。

九、课程的教学基本要求：
网页界面设计是一门集艺术设计与计算机专业相交叉的学科，涵盖的知识点广，本课程所针对的是网页设计中的网站建设、前端界面和交互设计。

因此应在学习版式设计、Photoshop、Illustrator、界面与交互设计课程后，才能更有效地进行网页设计的教学。

在辅导实战作业时，必须加强理论与实践的联系。

十、课程的主要内容：
第一章网页设计的概论
1.教学目标：
①掌握网站的基础概念。

②熟悉网站的分类。

2.教学内容：
第一节认识网站
第二节网页界面空间的影响要素
第三节网站开发的团队与协作
第四节网页的制作流程
3.教学重点：
理解网站的基本理论知识。

4.教学难点：
①理解网站的分类。

②理解屏幕分辨率与网页的关系。

第二章网页界面设计的内容
1.教学目标：
①理解网页界面设计的各大内容。

2.教学内容：
第一节网站形象
第二节导航
第三节信息内容
第四节广告
第五节表单区
3.教学重点：
理解网站形象设计。

4.教学难点：
掌握网页中广告设计表现的方法技巧。

第三章信息架构设计
1.教学目标：
①理解网站中的用户体验设计。

②掌握网站中的信息架构设计。

2.教学内容：
第一节以用户为中心的网页设计
第二节网站的信息结构
第三节网站整体结构到界面架构
3.教学重点：
①理解网站中用户体验与网站架构之间的关系。

②掌握信息结构的类型。

4.教学难点：
确定网站的导航，并运用交互设计软件绘制可交互线框图。

第四章网页界面的布局
1.教学目标：
①掌握网站界面中的布局分类。

②掌握网站界面中不同布局方式的优缺点。

2.教学内容：
第一节界面的布局原理
第二节界面布局类型
第三节原型的构建
3.教学重点：
理解网页布局的原理。

①掌握各种布局方式的特点，根据不同网站主题，活学活用。

②能设计并制作网页的低保真原型。

第五章网页界面设计中的视听元素
1.教学目标：
掌握网站界面中的各视听元素。

2.教学内容：
第一节文字
第二节图像
第三节色彩
第四节多媒体
第五节动效
3.教学重点：
掌握网页界面中各基本元素的特点。

4.教学难点：
能对网页界面中各信息内容的特点及优先级合理选择表现形式。

第六章网页视觉风格
1.教学目标：
①掌握网页视觉设计要点。

②理解不同的网页视觉风格。

2.教学内容：
第一节网页视觉设计要点
第二节简约风格
第三节影像风格
第四节手绘风格
第五节复古风格
第六节立体风格
3.教学重点：
掌握不同视觉风格的网页适用于哪些不同类型的网站。

4.教学难点：
在设计不同风格的网页时能将网页视觉设计要点纳入其中。

第七章网页静态页面制作
1.教学目标：
①掌握Photoshop切图技巧。

②理解html、css简单代码。

③掌握div+css页面布局。

④掌握javascript脚本基础。

第一节 PS网页切图
第二节 html基础
第三节 css基础
第四节 javascript脚本基础
第五节综合实训
3.教学重点：
掌握网页静态页面制作的步骤。

4.教学难点：
熟练运用前端代码将已有的设计稿转换为静态网页。

十、本课程与相关课程的关系：
先修课程：Photoshop图形设计，Illustrator图形设计，界面与交互设计。

十一、考核方式：
1.考核类型参考：考查
2.成绩评定参考：平时成绩占总成绩60%，期终作品记40%，原则上90分以上的学生人数，最多不超过班级人数的15%。

十二、学时分配：
章节教学内容
学时分配
小计理论实验上机
第一章网页设计的概论 2 2 第二章网页界面设计的内容 2 2 4 第三章信息架构设计 2 4 6 第四章网页界面的布局 4 4 8 第五章网页界面设计中的视听元素 2 2 4 第六章网页视觉风格 2 4 6 第七章网页静态页面制作10 12 22
期末大作业讲解 4 4
总计24 32 56
教学大纲制订人：余兰亭
教学大纲审核人：。