项目网页平面构成的表达

《项目网页平面构成的表达》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、项目1网页平面构成的表达11.1知识准备了解网页及其页面11.2任务2运用点、线、面的相关知识制作网页Banner191.3任务3运用点、线、面的相关知识制作简单网页27相关操作知识40拓展探索41小结42项目1网页平面构成的表达平面构成是网页设计的重要理论依据和知识基础，如何运用有限的网页界面，最大限度的锁住浏览者的注意力呢？这其中除了要抓住浏览者的兴趣和实际需求外，视觉效果就显得尤为重要。怎样把图片，文字等众多内容合理又美观的呈现在同一界面内，就是我们本章要探索的问题。学习本章后，你将能够：1.了解网页及其界面；2.掌握网页界面设计与

2、平面构成的表现形式；3.掌握平面构成的设计原则；4．学会平面构成在网页界面设计中的应用方法。1.1知识准备了解网页及其页面1.案例欣赏下面为北京智奥光明广告设计公司的网站界面截图，如图1-1所示。图1-1北京智奥光明广告设计公司的网站界面2.案例分析：此网站为北京智奥光明广告设计公关策划责任公司网站界面，该网站浏览人群主要为，有设计需求的商家、设计师同行以及对网站设计有兴趣的爱好者等，为了使网站更醒目，吸引人眼球，设计师从以下几个方面设计了网页界面：（1）表现形式：用平面构成原理中分割的方式进行页面设计，配以独特的企业Logo，色彩鲜明的

3、图片和整洁大方的字体。（2）色彩运用：色彩上使用极富华丽色彩感觉的红色和金色作为色彩的主色调，其中穿插强对比的绿色，使网页具有强烈的视觉效果。（3）栏目设置：依据易用性原则，设置了网站的导航界面及各部分内容的链接。（4）动态效果设计：当鼠标点击导航条或相关内容时，轻松进入链接，简单，明了，易于操作。3.理论概要（1）网页及其界面随着科技的发展，网站高效传播信息的功能被越来越多的人所熟识，许多企业或个人为了提高品牌效应，实现某种需求，开始建立具有各自特色的网站。网页是网站中的一页，当浏览者打开一个网站，首先映入眼帘的就是风格各异的网站界面，

4、或简单清新，如图1-2所示；或庄重严肃，如图1-3所示；或色彩艳丽，如图1-4所示。让人赏心悦目的网页界面应该具有合理的排版布局，突出的文字效果，质量清晰的图片等几个要素。图1-2简单清新的某食品网页界面图1-3庄重严肃的某银行网页界面图1-4色彩艳丽的麦当劳网页界面（2）网页界面设计与平面构成的表现形式网页界面设计是指，在有限的网页界面空间内将多种元素运用均衡，统一，对比，节奏，留白等方式相结合，根据网站主题制作出具有某种功能并符合审美情趣的一种设计方式。在网页设计中，我们主要通过视觉传达来表现网站的主题，而点、线、面是构成平面空间内容

5、的基本要素，也是构成网页的基本视觉元素。平面构成就是研究点，线，面等元素的特性、构成规律、审美原理并加以合理运用的一种艺术表现形式。网页设计实际上就是经营好三者关系的设计，不管是任何视觉形象或者版式构成，归结到底，都可以归纳为点、线和面。平面构成中的元素：①点点是平面构成中的基本的要素，是构成一个图像的最小单元。它可以是一个简单符号，如图1-5所示，也可以是一个图形，如图1-6所示。图1-5以简单符号作为视觉要素的某奢侈品网页界面图1-6以简单图形作为视觉要素的某公司网页界面所谓的点其实是相对于周围环境而言的一个相对概念。在几何形中，点只

6、有位置没有任何形态和大小，在平面设计中，点必须有形态，大小，位置等视觉特征。点越小，点的感觉越强烈，多个点临近排列具有线的感觉，多个点靠拢排列具有面得感觉。也就是说当平面上只有一个点时，我们就会将视线集中在这个点上，如图1-7所示；当平面上有两个等大的且有一定距离的点时，我们就会将视线集中在两个点之间，从而形成线的感觉，如图1-8所示；当平面上有两个以上点时，我们的视线就会在三个点之间转移，从而形成面的感觉，如图1-9所示。图1-7平面上只有一个点时，我们就会将视线集中在这个点上图1-8平面上有两个等大的且有一定距离的点时，我们就会将视线

7、集中在两个点之间图1-9平面上有两个以上点时，我们的视线就会在几个点之间转移在具体的设计中，点并不是都以圆点的形状出现的，一些个体较小的元素都可视为点(方形，三角形，任何自由形状)，例如，网页中的按钮，一个文字，一张图片，一个Logo都可当做点来处理，同实际上的点有相同的作用和功能。点最重要的功能就是表明位置和进行聚集，在空间中单一的点有集中醒目的特点，所以可利用点的这一特性强调将要重点表现的对象。点具有很强的调节和修饰功能，运用得当甚至可以起到画龙点睛的作用。①线点的延伸形成线，我们常说两点构成一条直线就是这个道理。如图1-10所示。图

8、1-10点的延伸构成线在网页中线具有长度，宽度，粗细，方向等特征。因为线具有分割页面，决定页面现象的功能，所以是网页设计中最有力的表现工具，优秀的设计师常用线来传递丰富的视觉信息和心理情感。大