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

《网页界面设计》课程教学大纲

一、课程名称：网页界面设计

课程代码：

课程负责人：

二、学时与学分：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

教学大纲制订人：余兰亭

教学大纲审核人：