网页平面构成设计技术介绍.ppt

《网页平面构成设计技术介绍.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页平面构成设计教学目标：网页设计不只是软件编程，其界面设计是人机交互范畴的一个重要内容，是一个关乎数字图形界面艺术设计的问题。学习界面设计要从平面构成学习起，掌握基本的构成规律。通过对本章的学习，学员能应用平面构成规律来设计一个好的网页界面布局。教学要求:掌握点、线、面的平面造型规律；掌握稳定性、秩序性、律动性、统一和变化；掌握重复、渐变、对比、发散、特异。10/4/20211北大出版社1.1平面构成设计概述网页的界面设计的好坏直接影响视觉效果，界面设计涉及平面构成和色彩搭配。本节介绍网页界面的平面设计基础，包括构成的基本要素，形

2、态美的法则和逻辑构成规律。1.1.1形的基本要素1.点的构成点即相对较小而集中的形。点有集中视线，紧缩空间，引起注意的功能。在造型活动中，点常用来表现强调和节奏。10/4/20212北大出版社2.线的构成线即相对细长的形。线有位置、长度和方向，线有各种形状并各具特点。从造型意义上看，线是最富个性和活力的要素。在平面造型中，线被广泛地用于表现形体结构，不同线型自身的变化，以及线的多种组织方法，赋予作品多样化的艺术风格。3.面的构成面表现为二次元的形。面在平面构成中具有举足轻重的地位。点与线的扩张或组织排列都会导致面的产生。现实中，一般

3、概念为“点”的雨滴，飘落地上会聚集成“面”。地面上的草呈线型特征，远望去却有面的观感。10/4/20213北大出版社1.1.2形态美的准则与逻辑构成1.形态美的准则1)稳定性2)秩序性3)律动性4)统一与变化形式美与人类文明的发展与物质生产技术进化程序密切相关。可以说，形式美是一定历史时期的“沉淀物”。这沉淀过程，包括感性向理性，必然向自由的发展。因此，形式美不是一成不变的法则。10/4/20214北大出版社2.逻辑构成的形式逻辑构成，就是经过对构成的基本要素加以理性分析，然后依一定的数学、逻辑原则排列、组合，创造新的构成形式。逻辑

4、构成的规律性，包括重复、近似、渐变、发散、特异等。1.1.3本章案例简介本章中通过2个案例，来讲解网页的平面构成设计的方法及技巧。“基本元素训练”讲解一个学校网站主页的设计案例，分析了运用构图基本元素表达画面的制作技巧；“电影网站首页”案例主要讲解的是运用形态美的准则和逻辑构成表达画面的制作技巧。10/4/20215北大出版社1.2实训一:基本元素训练-学校网站主页案例说明：本案例应用点线面组合设计学校网站主页效果图。内容包含网站名称、主图、导航等部分，要求网站名称突显，设计醒目。个性鲜明。效果图如下:10/4/20216北大出版社

5、提示：网站效果图的制作工具可以用photoshop、firework、Illustrator、corelDRAW等图形图像处理软件。通常使用corelDRAW来设计一些按钮和装饰图案，使用photoshop进行图像艺术处理和合成，最后切片导成网页模板。知识拓展:（1）水平线的网页构图（2）垂直线的网页构图（3）斜线的网页构图（4）曲线的网页构图（5）线排列的网页构图（6）几何形的网页构图（7）有机形的网页构图10/4/20217北大出版社提示：网站横幅选用能代表电影行业的图片进行合成处理。主色调选用蓝色和灰色。各部分的位置和大小要注

6、意主次和视觉效果。图层的各种混合模式能产生不同的艺术效果。知识拓展:（1）非对称平衡构图（2）秩序（3）节奏（4）统一与变化（5）重复（6）渐变（7）对比（8）发散（9）特异10/4/202110北大出版社本节知识点:在网页设计中要能灵活运用形态美的准则和逻辑构成规律来表现主题和布局。画面的稳定性、秩序性、律动性、统一与变化都属于形态美的准则，可以通过对网页中某一元素的重复、近似、渐变、发散和特异来实现。具体的设计手法不必拘泥一格。10/4/202111北大出版社1.4本章小结本章主要介绍网页界面的设计基础，包括构成的基本要素，形态

7、美的法则和逻辑构成规律。基本要素主要介绍点线面，形态美的法则主要介绍画面的稳定性、秩序性、律动性、统一和变化，逻辑构成规律主要介绍重复、渐变、对比、发散、特异。举了两个典型的案例。读者只要稍加练习，仔细加以体会，就能在网页设计中恰当运用平面构成知识，提高设计水准。10/4/202112北大出版社1.5习题1.选择：（1）下面哪个特性不是直线所具有的？（）A.速度感B.紧张感C.女性感D.男性感（2）下列哪种直线具有平稳、安定、广阔、无限的特（）A.斜线B.水平线C.垂直线D.三种都有（3）具有强烈的上升与下落趋势特性的直线是（）A.

8、斜线B.水平线C.垂直线D.三种都有（4）下面哪个不属于几何形？（）A.圆形B.梨形C.四边形D.三角形10/4/202113北大出版社（5）下面哪个形状最具有稳定性（）A.正三角形B.圆形C.四边形D.倒三角形（6）渐变是一种变化运