1、项目 1 网页平面构成的表达 11.1 知识准备 了解网页及其页面 .11.2 任务 2 运用点、线、面的相关知识制作网页 Banner 191.3 任务 3 运用点、线、面的相关知识制作简单网页 27相关操作知识 40拓展探索 41小结 42项目 1 网页平面构成的表达平面构成是网页设计的重要理论依据和知识基础，如何运用有限的网页界面，最大限度的锁住浏览者的注意力呢？这其中除了要抓住浏览者的兴趣和实际需求外，视觉效果就显得尤为重要。怎样把图片，文字等众多内容合理又美观的呈现在同一界面内，就是我们本章要探索的问题。学习本章后，你将能够：1. 了解网页及其界面；2. 掌握网页界面设计与平面构成的
2、表现形式；3. 掌握平面构成的设计原则；4学会平面构成在网页界面设计中的应用方法。1.1 知识准备 了解网页及其页面1.案例欣赏下面为北京智奥光明广告设计公司的网站界面截图，如图 1-1 所示。图 1-1 北京智奥光明广告设计公司的网站界面2. 案例分析：此网站为北京智奥光明广告设计公关策划责任公司网站界面，该网站浏览人群主要为，有设计需求的商家、设计师同行以及对网站设计有兴趣的爱好者等，为了使网站更醒目，吸引人眼球，设计师从以下几个方面设计了网页界面：（1） 表现形式：用平面构成原理中分割的方式进行页面设计，配以独特的企业 Logo，色彩鲜明的图片和整洁大方的字体。（2）色彩运用：色彩上使用
3、极富华丽色彩感觉的红色和金色作为色彩的主色调，其中穿插强对比的绿色，使网页具有强烈的视觉效果。（3）栏目设置：依据易用性原则，设置了网站的导航界面及各部分内容的链接。 （4）动态效果设计：当鼠标点击导航条或相关内容时，轻松进入链接，简单，明了，易于操作。3. 理论概要（1）网页及其界面随着科技的发展，网站高效传播信息的功能被越来越多的人所熟识，许多企业或个人为了提高品牌效应，实现某种需求，开始建立具有各自特色的网站。网页是网站中的一页，当浏览者打开一个网站，首先映入眼帘的就是风格各异的网站界面，或简单清新，如图 1-2 所示；或庄重严肃，如图 1-3 所示；或色彩艳丽，如图 1-4所示。让人赏
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 平面上有两个等大的且有一定距离的点时，我们就会将视线集中在两个点之间图 1-9 平面上有两个以上点时，我们的视线就会在几个点之间转移在具体的设计中，点并不是都以圆点的形状出现的，一些个体较小的元素都可视为点( 方形，三角形，任何自由形状)，例如，网页中的按钮，一个
7、文字，一张图片，一个 Logo 都可当做点来处理，同实际上的点有相同的作用和功能。点最重要的功能就是表明位置和进行聚集，在空间中单一的点有集中醒目的特点，所以可利用点的这一特性强调将要重点表现的对象。点具有很强的调节和修饰功能，运用得当甚至可以起到画龙点睛的作用。 线点的延伸形成线，我们常说两点构成一条直线就是这个道理。如图 1-10 所示。图 1-10 点的延伸构成线在网页中线具有长度，宽度，粗细，方向等特征。因为线具有分割页面，决定页面现象的功能，所以是网页设计中最有力的表现工具，优秀的设计师常用线来传递丰富的视觉信息和心理情感。大体来说，线分为直线和曲线两种，不同的线会产生不同的视觉效果
8、。例如，直线给人的感觉是安宁，稳定，明晰等，如图 1-11 所示；曲线给人的感觉是不安，弹力，运动等，如图 1-12 所示。图 1-11 直线给人以安宁，稳定，明晰等感觉图 1-12 曲线给人以不安，弹力，运动等感觉线比点具有更强的表现力和张力，线的方向不同所呈现的视觉效果也大不相同，例如，水平方向的线，可给人以均衡，安定的感觉，如图 1-13 所示；垂直方向的线，可给人以稳固，威严的感觉，如图 1-14 所示；倾斜的线，给人以生动，活泼的感觉如图 1-15 所示；而线的纵横交错又能形成一种框架的空间感和区域感，如图 1-16 所示。图 1-13 水平方向的线给人以均衡，安定等感觉图 1-14
9、 垂直方向的线给人以稳固，威严等感觉图 1-15 倾斜的线给人以生动，活泼的感觉图 1-16 线的纵横交错又能形成一种框架的空间感和区域感面 面面是平面设计中较大的元素。多个点密集或扩大而形成面，如图 1-17 所示；线的推移也会形成面，如图 1-18 所示。图 1-17 多个点密集或扩大而形成面图 1-18 线的推移形成面也就是说，面是无数点和线组合而成，简单的说就是不在同一平面上的三个以上的点构成一个面，线的聚集和闭合构成一个面。在网页中，面可以是图形、大块文字、动画、影像等视觉传达元素。与点、线相比，面引发的注意力更大，视觉冲击力更强烈。面的造型较为丰富，大体分为几何形态的面（圆形,方形
10、，三角形等视觉形态） ，自由形态的面（不受约素的视觉形态） ，偶然形态的面（偶然获得的视觉形态） 。不同形状的面所产生的感觉和效果是不同的，几何形态的面具有简洁，明快的理性特征，如图 1-19 所示；自由形态的面具有动感，富于变化的特征，如图 1-20 所示；偶然形态的面更自然，随意，具有超然的吸引力，如图 1-21 所示。多个面的叠加、穿插和组合又可以产生新的效果。面又可以是虚无的空间，画面空白、图形间隙也都能成为面的形态，给人以无限遐想的空间。如图 1-21。图 1-19 几何形态（方形）的面具有简洁，明快的理性特征图 1-20 自由形态的面具有动感，富于变化的特征图 1-21 偶然形态的
11、面更自然，随意，具有超然的吸引力图 1-22 大量的留白形成面的形态 点，线，面的综合应用点、线、面是构成网页的基本元素，是最基本设计语言。点、线、面在网页中的运用往往不是孤立存在的，而是相互依存，相互作用的。总之，点，线的强调、美化、分割、提醒等作用都是为了更好的为整个页面服务，如图 1-23 所示。图 1-23 点、线、面得综合运用（3）平面构成中的形式美法则：点、线、面具有各自的情感特征，任何一个元素的变化都在影响着页面的整体设计风格和变化，在网页设计中，我们都在有意无意的进行着对几种元素的组织和创造，任何设计都是创造美的过程，只有将情感规律将艺术规律相结合，才能创造出丰富多彩的，具有美
12、感的作品。这里说的艺术规律就是普遍存在的形式美法则。 统一与变化统一和变化总是同时存在的，是平面构成中形式美的基本规律。在设计中，点，线，面的有机组合构成一个整体，统一是寻求三者的内在联系、共同点和共同特征，也就是说网页是文字、图形等多种元素组成的统一体，而不是几个互相不关联的独立部分；变化是寻求三者间的差异，区别。没有变化，设计单调乏味，缺少生命力；没有统一，设计杂乱无章，缺乏和谐和次序。两者的完美结合是版面设计的最根本要求，如图 1-24 所示。图 1-24 在统一的长方形元素中寻求了变化，强调个性的同时也形成了视觉上的跳跃。 对称与平衡对称是指两个同一型以中心线为轴，形成的上下或左右对称
13、。轴对称是最简单的对称形式，以点为中心的放射型对称和以面为出发点的镜面对称也是常用的对称方式，对称其实是一种形式上的对等，也就是说用对折的方法，可以重叠的图形称为对称。而平衡是指各种元素通过组合变化，使浏览者从心里感到一种空间、中心、力量等方面等量不等型的相对平衡感觉，也就是在不对称中求稳， 。对称的编排典雅，稳重；而平衡是更富有变化的形式美。如图 1-25 所示。图 1-25 相同的形象沿页面中轴左右对称排列，此种形式是对称和平衡最基本的表现形式。节奏与韵律节奏是指各元素符合一定规律的，有一定差别的反复出现在同一界面内而产生的运动感，它是相同因素有规律的重复。也就是说节奏是由构成页面的点、线
14、、面的分布，通过大小，长短，粗细，曲直，明暗等的反复出现而呈现的。反复是节奏的重要标志，节奏是通过反复来实现的。在网站设计中，节奏是针对点、线、面等元素，以集中或分散的排列差异变化将导致视觉及心理上的不同感受。节奏是单调的重复，韵律是富于变化的节奏。在节奏中注入美的因素和情感，就有了韵律，韵律是指元素连续交替反复产生的美感，有韵律的构成更具有生气，它能增强版面的感染力和艺术表现力。如图 1-26 所示。图 1-26 水滴型的反复出现构成了节奏，水滴型的变化又构成了韵律，丰富而趣味的反复和交替，增强了页面的感染力。 对比与调和对比又称对照，是指为了使互为相反的两要素为更好的突出各自的特点，同时置
15、放在一起时所产生的现象。对比是通过大小，强弱，粗细，明暗等对立因素来达到的，它的主要作用在于使设计产生生动活泼的效果。对比的最基本作用是显示主从关系和统一变化的效果。调和是近似的强调，是在各种不同要素之间寻找相互协调的因素，是人为有意识的合理配合使两者或两者以上的要素相互具有共性。对比与协调在网页设计中发挥着不同的作用：对比产生动感、活泼与鲜明的个性；协调则产生稳定、柔和与优雅的感觉。如图 1-27 所示。图 1-27 把多个圆放在同一页面中使之既相互联系，又形成差异不大的变化，产生协调的美感啊 比例与适度比例与适度有一种协调的美感，成为形式美法则的重要内容。说到比例就一定要说到黄金分割，黄金
16、分割是指事物各部分间符合一定的数学比例关系，即将整体一分为二，较大部分与较小部分之比等于整体与较大部分之比，其比值为1：0618 或 1618：1，即长段为全段的 0618。0618 被誉为最具审美意义的比例数字，这种最能表现美感的比例被称为黄金比例。以人体比例为例,如果肚脐到脚底的距离占整个身长的 0618，这种身型则为最完美身型，因为它体现了人类形态比例的最基本的恒定参照比值，黄金分割被广泛地运用在生活中的许多设计中，很多网页的设计也运用了黄金分割，从而达到完美和谐的效果。适度是指适合要求的程度，也就是说版面的设计要适合浏览者的某些特定标准和视觉心理。比例与适度，通常具有秩序、明朗的特性
17、，给人一种清新、自然的新感觉。美的比例是网页设计成功的基础，好页面的首部、菜单、页面和底部的合理安排和选择，首先取决于良好的比例。如图 1-28 所示。图 1-28 运用适当的比例进行页面的分割，构成页面的各要素条理清晰，给人明朗，清新的视觉印象。 虚实与留白页面中的“实体”是指文字，图形等内容，而页面中未放置任何东西的空间、较为细小的文字、对比较弱的色块都可以看做是“虚体” ，也就是“留白” 。也就是说，页面中的主题是“实” ，陪衬和背景是“虚” ，虚体是为了更好的突出主题。实体和虚体是相互依存的，留白的感觉比较轻松，最大的作用是引人注意。在页面设计中，巧妙地运用文字与图片之间的空白、字与字
18、之间的空白、单个字比划之间的空白，都可以更好地衬托主题，集中视线和造成页面的空间层次。在网页设计中，空白的外形、大小、方向，以及大大小小空白在一个网页中形成的整体感觉，直接影响着网页的质量、水平，影响着读者的视觉心理。如图 1-29 所示。图 1-28 页面中大量的留白更好的衬托了主题部分，使页面更具空间感，给浏览者留下无限的想象空间1.2 任务 2 运用点、线、面的相关知识制作网页 Banner一、任务分析本实例将是制作网页 Banner，该实例在制作前已提供了相关素材，结合学习过的点，线，面的相关知识，在遵循形式美法则的基础上，运用暖色调作为背景颜色，绘制简单的 Banner，如图 1-2
19、9 所示。图 1-29 网页 Banner 效果图二、任务实施1. 启动 Photoshop CS5，选择 “文件”“新建”菜单命令，新建一个大小为 900450 像素，分辨率为 72，颜色模式为 RGB 颜色，背景内容为白色的文件，并将其命名为“新品” ，如题 1-30 所示。图 1-30 新建 “新品”文件设置2. 填加背景颜色为渐变色，如图 1-31 所示，完成图如图 1-32 所示。图 1-31 背景渐变 R:248 G:219 B:182 # f8dbb6 R:214 G:178 B: 86 #d6b256图 1-32 完成效果3新建图层，运用“钢笔”工具如图-1-33 所示，绘制三
20、角形，并填充颜色为蓝色，如图 1-34 所示。重复以上动作，绘制其它四个三角形，并依此叠加，完成效果如图 1-35 所示。图 1-33 钢笔工具 图 1-34 绘制三角形图 1-35 完成效果4. 运用 “钢笔工具”绘制翻角，并填充渐变颜色如图 1-36 所示，为翻角填加图层样式，如图 1-37 所示，在为翻角的下部分填加灰色到透明的渐变高光如图 1-38 所示。图 1-36 渐变编辑器 R:172 G:172 B:172 # acacac R:226 G:226 B:226 # e2e2e2 R:111 G:112 B:114 # 6f7072 R:230 G:231 B:232 # e6e
21、7e8图 1-37 添加投影图 1-38 渐变编辑器 R:218 G:215 B:211 # dad7d3 透明5. 插入背景图片。打开“素材项目 1任务 1背景素材” ，把素材置放在背景图层的右侧，调整其位置，完成效果如图 1-39 所示。图 1-39 插入素材6. 运用“自由形状工具”“丝带 1”绘制徽章，如图 1-40 所示，并填充颜色为“红色” ，如图 1-41 所示。图 1-40 自由形态工具图 1-41 填充颜色7. 添加文字。（1）添加文字“NEW” ,选择“窗口”“字符” ，打开“字符”面板， 相关设置如图 1-42 所示。图 1-42 字符面板（2）添加文字“新品上市” ，选
22、择“窗口”“字符”打开“字符”面板， 相关设置如图 1-43 所示。图 1-43 字符面板（3）添加文字“限量” ，选择“窗口”“字符”打开“字符”面板， 相关设置如图 1-44 所示。图 1-44 字符面板（4）填加文字“9 元秒杀，超值神秘，限时包邮” ，选择“窗口”“字符”打开“字符”面板， 相关设置如图 1-45 所示。图 1-45 字符面板1.3 任务 3 运用点、线、面的相关知识制作简单网页一、任务分析本实例将是运用点、线、面的基本知识，和形式美法则的基本原理，制作简单网页。该实例不需要任何素材，结合学习过的相关知识，运用有提醒和强调作用的点，有美化和分割作用的线和各要素及留白构成
23、的面，绘制简单的网页，如图 1-46 所示。图 1-46 美蜂网效果二、任务实施1. 启动 Photoshop CS5，选择 “文件”“新建”菜单命令，新建一个大小为 766700 像素，分辨率为 72，颜色模式为 RGB 颜色，背景内容为白色的文件，并将其命名为“美蜂网” ，如题 1-47 所示。图 1-47“美蜂网”文件设置2. 绘制背景。（1）添加背景渐变颜色。选择“图层样式”“渐变叠加” ，具体参数设置如图 1-48,1-49 所示，完成效果如 1-50 所示。图 1-48 添加图层样式 R:243 G: 18 B:189 #f312bd R:161 G: 32 B: 94 #a1205e图 1-49 渐变编辑器图 1-50 渐变效果（2）绘制背景的放射线。新建图层，选择“钢笔工具”绘制第一条放射线，填充颜色为“c51468 ”,如图 1-51 所示；然后复制图层，选择 “CtrlT ”,以页面中心为原点旋转图层，并拉伸，如图 1-52 所示；重复以上动作，绘制出全部放射线。如图 1-53 所示。需要说明的是，为了使画面更美观可由深到浅改变放射线的颜色，在此不一一列举。图 1-51 绘制第一条放射线
