《UI视觉设计案例教程》教案 第4章 网页界面设计.docx

PAGE8

PAGE8

PAGE7

PAGE7

课题

网页界面设计

课时

6课时（270min）

教学目标

知识目标：

（1）了解网页界面的组成

（2）了解常见的网页界面布局及版块规划技巧

（3）了解网页界面设计的要点

（4）了解网页界面设计的尺寸规范

（5）了解网页界面设计中常用的字体和字号

（6）掌握网页界面的一般制作方法

素质目标：

（1）认真学习设计规范，将理论知识应用到实际操作中。

（2）开阔眼界，提高分析界面、布局规划的能力。

教学重难点

教学重点：网页界面的组成，页界面设计的要点，网页界面设计的尺寸规范，网页界面设计中常用的字体和字号，网页界面的一般制作方法

教学难点：常见的网页界面布局及版块规划技巧

教学方法

问答法、讨论法、讲授法、多媒体展示法

教学用具

电脑、投影仪、多媒体课件、教材、APP

教学过程

主要教学内容及步骤

考勤

【教师】使用APP进行签到

【学生】按照老师要求签到

问题导入

【教师】提出问题

你经常浏览哪些网页？哪个网页界面给你留下的印象最深？

【学生】聆听、思考、主动回答问题

传授新知

【教师】总结学生的回答、引入新的知识点，讲解网页界面的组成、布局，网页布局的技巧，网页界面设计的要点，以及网页界面设计的规范等知识

4.1网页界面设计的基础知识

网站是企业、单位或个人通过互联网对外宣传的重要窗口，精美的网页界面对于提升品牌或个人形象至关重要。

网页界面设计主要是根据网站要向浏览者传递的信息（包括产品、服务、理念、文化等），对网站的功能进行规划，对界面的效果进行设计和美化。

在设计网页前，UI设计师首先要了解网页界面的组成、常见的网页界面布局及版块规划技巧等基础知识，为网页界面设计打下理论基础。

4.1.1网页界面的组成

网页界面一般由页首、主体内容和页脚三部分组成。

【教师】通过多媒体展示“网页界面组成”图片（详见教材），并讲解新知

1．页首

页首位于整个网页的顶部，一般由Logo和导航栏等组成，是网页的重要功能区域，在整个网站中占重要地位。

【教师】通过多媒体展示“网站Logo”图片（详见教材），并讲解新知

Logo是网站的标志，代表了网站的形象，在网站的宣传和推广中起着非常重要的作用。Logo通常放在网站页面的左上角，也可根据需要放在其他位置。

【教师】通过多媒体展示“不同类型的导航栏”图片（详见教材），并讲解新知

网站导航栏是导航项的集中展示区域，浏览者可以通过单击导航栏中的导航项快速切换页面内容，浏览网站中对应的信息。

……（详见教材）

2．主体内容

从组成元素看，网页主体内容主要由图像和文字组成，这些元素是网站信息输出的主要载体。

【教师】通过多媒体展示“网页中的图像”图片（详见教材），并讲解新知

网页中的图像主要有网页广告、产品图像、装饰图像、按钮和图标等，它们不仅能直观地表达信息内容，还能装饰网页，增加网页的吸引力，提升浏览者的浏览体验等。

【教师】通过多媒体展示“网页中的文字”图片（详见教材），并讲解新知

文字是网页的主要内容，在网页界面设计中可以通过对文字的字体、字号、颜色、行距、对齐方式，以及文本版块的底纹和边框等进行设计，使其既能发挥传达信息的作用，又能起到装饰页面的作用。

3．页脚

【教师】通过多媒体展示“页脚”图片（详见教材），并讲解新知

页脚一般包括网站的版权信息、备案信息和联系方式等，整体高度可依内容而定。

4.1.2常见网页界面的布局

网页精彩与否不仅在于网页的色彩搭配、文字变化、图像处理，还在于网页界面的布局安排。常见网页界面的布局有工字型、国字型、POP型、对称型和分割型等。

1．工字型

【教师】通过多媒体展示“工字型网页布局”图片（详见教材），并讲解新知

工字型布局的网页页首和主体内容中的Banner一般采用通栏形式，铺满网页的首屏区域，Banner以下的主体内容以相对窄一些的宽度整齐排列直至页脚，页脚则与页首呼应，采用通栏形式安排基本信息。

采用工字型布局的网页能给浏览者整齐、干净的感觉，适用于购物类、服务类企业网页。

2．国字型

【教师】通过多媒体展示“国字型网页布局”图片（详见教材），并讲解新知

国字型布局的基本形式是将网站的Logo、导航栏及Banner等置于顶部，下方安排网页的主体内容，其中主体内容的左、右两侧分别安排导航菜单、广告或其他栏目，最后由页尾组成“国”字的底部边框，将主体内容包围。

国字型网页布局适用于门户、购物类等内容丰富的大型网站。

3．POP型

【教师】通过多媒体展示“POP型网页布局”图片（详见教材），并讲解新知

POP的概念引自广告术语“卖点广告”，其特点是以一张精美的图片作为页面的设计中心，通过合并或调整字体颜色弱化或简化导航项，突出主体内容，页面效果如同一张宣传海报。

……（其他内容