网页平面构成设计

2023/7/15北大出版社1网页平面构成设计

教学目标：网页设计不只是软件编程，其界面设计是人机交互范畴的一个重要内容，是一个关乎数字图形界面艺术设计的问题。学习界面设计要从平面构成学习起，掌握基本的构成规律。通过对本章的学习，学员能应用平面构成规律来设计一个好的网页界面布局。

教学要求:掌握点、线、面的平面造型规律；掌握稳定性、秩序性、律动性、统一和变化；掌握重复、渐变、对比、发散、特异。网页平面构成设计全文共17页，当前为第1页。2023/7/15北大出版社21.1平面构成设计概述

网页的界面设计的好坏直接影响视觉效果，界面设计涉及平面构成和色彩搭配。本节介绍网页界面的平面设计基础，包括构成的基本要素，形态美的法则和逻辑构成规律。

1.1.1形的基本要素

1.点的构成

点即相对较小而集中的形。点有集中视线，紧缩空间，引起注意的功能。在造型活动中，点常用来表现强调和节奏。

网页平面构成设计全文共17页，当前为第2页。2023/7/15北大出版社32.线的构成线即相对细长的形。线有位置、长度和方向，线有各种形状并各具特点。从造型意义上看，线是最富个性和活力的要素。在平面造型中，线被广泛地用于表现形体结构，不同线型自身的变化，以及线的多种组织方法，赋予作品多样化的艺术风格。

3.面的构成面表现为二次元的形。面在平面构成中具有举足轻重的地位。点与线的扩张或组织排列都会导致面的产生。现实中，一般概念为“点”的雨滴，飘落地上会聚集成“面”。地面上的草呈线型特征，远望去却有面的观感。网页平面构成设计全文共17页，当前为第3页。2023/7/15北大出版社4

1.1.2形态美的准则与逻辑构成

1.形态美的准则

1)稳定性

2)秩序性

3)律动性

4)统一与变化

形式美与人类文明的发展与物质生产技术进化程序密切相关。可以说，形式美是一定历史时期的“沉淀物”。这沉淀过程，包括感性向理性，必然向自由的发展。因此，形式美不是一成不变的法则。

网页平面构成设计全文共17页，当前为第4页。2023/7/15北大出版社52.逻辑构成的形式逻辑构成，就是经过对构成的基本要素加以理性分析，然后依一定的数学、逻辑原则排列、组合，创造新的构成形式。逻辑构成的规律性，包括重复、近似、渐变、发散、特异等。

1.1.3本章案例简介本章中通过2个案例，来讲解网页的平面构成设计的方法及技巧。“基本元素训练”讲解一个学校网站主页的设计案例，分析了运用构图基本元素表达画面的制作技巧；“电影网站首页”案例主要讲解的是运用形态美的准则和逻辑构成表达画面的制作技巧。网页平面构成设计全文共17页，当前为第5页。2023/7/15北大出版社61.2实训一:基本元素训练-学校网站主页

案例说明：本案例应用点线面组合设计学校网站主页效果图。内容包含网站名称、主图、导航等部分，要求网站名称突显，设计醒目。个性鲜明。

效果图如下:

网页平面构成设计全文共17页，当前为第6页。2023/7/15北大出版社7

提示：网站效果图的制作工具可以用photoshop、firework、Illustrator、corelDRAW等图形图像处理软件。通常使用corelDRAW来设计一些按钮和装饰图案，使用photoshop进行图像艺术处理和合成，最后切片导成网页模板。

知识拓展:

（1）水平线的网页构图（2）垂直线的网页构图（3）斜线的网页构图（4）曲线的网页构图（5）线排列的网页构图（6）几何形的网页构图（7）有机形的网页构图

网页平面构成设计全文共17页，当前为第7页。2023/7/15北大出版社8

本节知识点:

点线面是平面构成的最基本元素,具有不同的视觉特征，点线面的应用及相互间组合能在画面产生不同的艺术效果。在设计中应注意画面元素的取舍和加强。网页平面构成设计全文共17页，当前为第8页。2023/7/15北大出版社91.3实训二:图形形式的创造-电影网站首页

案例说明：本节为电影网站首页设计案例。电影网站首页包含标志、网站横幅、导航、目录和正文部分。在效果图设计中充分运用形态美准则和构成规律，力求画面谐调，突出主题，个性鲜明。

效果图如下:

网页平面构成设计全文共17页，当前为第9页。2023/7/15北大出版社10

提示：网站横幅选用能代表电影行业的图片进行合成处理。主色调选用蓝色和灰色。各部分的位置和大小要注意主次和视觉效果。图层的各种混合模式能产生不同的艺术效果。

知识拓展:

（1）非对称平衡构图（2）秩序（3）节奏（4）统一与变化（5）重复（6）渐变（7）对比（8）发散（9）特异

网页平面构成设计全文共17页，当前为第10页。2023/7/15北大出版社11

本节知识点:

在网页设计中要能灵活运用形态美的准则和逻辑构成规律来表现主题和布局。画面的稳定性、秩序性、律动性、统一与变化都属于形态美的准则，可以通过对网页中某一元素的重复、近似、渐变、发散和特异来实现。具体的设计手法不必拘泥一格。网页平面构成设计全文共17页，当前为第11页。2023/7/15北大出版社121.4本章小结

本章主要介绍网页界面的设计基础，包括构成的基本要素，形态美的法则和逻辑构成规律。基本要素主要介绍点线面，形态美的法则主要介绍画面的稳定性、秩序性、律动性、统一和变化，逻辑构成规律主要介绍重复、渐变、对比、发散、特异。举了两个典型的案例。读者只要稍加练习，仔细加以体会，就能在网页设计中恰当运用平面构成知识，提高设计水准。网页平面构成设计全文共17页，当前为第12页。2023/7/15北大出版社131.5习题1.选择：（1）下面哪个特性不是直线所具有的？（）

A.速度感B.紧张感C.女性感D.男性感（2）下列哪种直线具有平稳、安定、广阔、无限的特（）

A.斜线B.水平线C.垂直线D.三种都有（3）具有强烈的上升与下落趋势特性的直线是（）

A.斜线B.水平线C.垂直线D.三种都有（4）下面哪个不属于几何形？（）

A.圆形B.梨形C.四边形D.三角形网页平面构成设计全文共17页，当前为第13页。2023/7/15北大出版社14（5）下面哪个形状最具有稳定性（）

A.正三角形B.圆形C.四边形D.倒三角形（6）渐变是一种变化运动的规律,可分为（）

A.大小渐变B.方向渐变C.虚实渐变D.三种都有（7）粗细、长短、方向、黑白、方圆、曲直、规则与不规则等在画面上能产生什么效果（）

A.对比B.重复C.节奏D.秩序（8）通过下列哪种形式可以在画面建立秩序感（）

A.比例B.节奏C.对比D.三种都有网页平面构成设计全文共17页，当前为第14页。2023/7/15北大出版社152.填空（1）平面构成的基本要素有______、______和______。（2）点在空间位置的变化会引起画面______的变化。（3）点的有序运动产生______。（4）曲线使人感到优美、轻快、柔和，富于旋律感。曲线可分为______和______。（5）线在空间的运动产生______。（6）形态美的准则包含______、______、______和_____。（7）平衡的形式可分为______和______。（8）逻辑构成的重复可分为______的重复和______的重复。网页平面构成设计全文共17页，当前为第15页。2023/7/15北大出版社163.实践题

（1）运用点的位置变化设计个人网站主页。（2）直线给人速度感、紧张感，明确而锐利。从心理和生理角度看，直线具男性特征。运用直线构图设计男式服装网站主页。（3）曲线使人感到优美、轻快、柔和，富于旋律感。从生理和心理角度看，曲线有女性感。运用曲线构图设计护肤品网站主页。（4）圆形有饱满的视觉效果，具有圆弧因素的形，具有运动、和谐、柔美的观感。运用圆形构图设计音乐网站主页。网页平面构成设计