网络广告设计原理.docx

第4章 网络广告设计原理
第1课 网络广告中的形式美法则 第2课 构图原理 第3课版面布局
课时数：8课时 （其中理论教学部分4课时 课堂作业完成3课时 作业点评1课时）
教学目的：通过教学使学生基本掌握网络广告设计的形式美法则，了解基本的构图原理并结合实际运用掌握网络广告与网站设计的版面布局。
教学重点：实战案例分析与配色原理的掌握的结合使用。
教学方式：演示法、说明法、分析法、图示法、草图
教学过程：导入课题－理论教学－课堂提问－技术分析－学生练习－布置作业
教学内容:
第一课网络广告里的形式美法则
展示广告范例：摩托罗拉网络广告　　

我们根据人类美感的共通性可以定出十个美的原则：连续、渐变、对称、对比、比例、平衡、调和、律动、统一、完整。

　　在讨论美的原则之前，必须先了解「单位形」的意义。单位形是在相同或相似的形象组合中最基本的单位元素。单位形可以单独重复排列，或组成「单位形组合」，再以「单位形组合」为基础，作有规律的反复排列。下列图例说明以一个「单位形」配置构成八种「单位形组合」。以一个「单位形」配置构成八种「单位形组合」图例 每一个「单位形组合」又可以重复以线状﹝又称二方连续﹞、面状﹝又称四方连续﹞、环状、放射状、镜照式的方式发展成复杂有趣的平面构图。下图是以环状发展构成的平面构图。

以环状发展构成的平面构图

﹝一﹞连续

　　「连续」是一种没有开始、没有终结、没有边缘的严谨性秩序排列，它祇是反复的一种特殊情形，因此有规律的反复并不一定能产生连续。「连续」是无限地扩张，它可超越任何架框限制。「连续」包括「二方连续」和「四方连续」。

　　「二方连续」是单位形向左右或上下作反复的规律式排列。它可作直线方向、曲折式、波浪式的方向延申。

　　「四方连续」是单位形向左右也向上下延申的现象，可产生四方连续的图形。由二方连续造成的线条加上左右上下反复的排列，是创作四方连续图形的方法之一。
﹝二﹞渐变
　　「渐变」就是逐渐的改变，其有一定的秩序与规律。「渐变」除形状渐变外，尚有「大小渐变」、「色彩渐变」、「位置渐变」和「方向渐变」等等，均可单独或混合运用。任何构成元素之渐变，都有其开始与终结，或由一方开始，经渐变又回复原来的循环现象。例如形状渐变，可从某一形状开始，逐渐变化成为另一形状，或由另一形状又逐步回复到某一形状。无论是开始或终结，在渐变的设计中均可成为设计上的焦点，且在开始与终结的整个重复过程中，均会造成节奏感。渐变形成的方式可由上而下、由左而右、或由中央发射、或作多元化的发展。

　　渐变的表现形式包括：
﹝1﹞自然形象之渐变、﹝2﹞形状之渐变、﹝3﹞大小之渐变、﹝4﹞位置之渐变、 ﹝5﹞方向之渐变、﹝6﹞色彩之渐变。

﹝三﹞对称

　　视觉上，以一个点或一条线为基准，上下或左右看起来相等的形体，称为「对称」。「对称」具有相称、均齐、均整的意思。左右对称的形体向来都被认为是安定且具有机能的。

　　「对称」的表现形式包括：

﹝1﹞线对称、﹝2﹞点对称、﹝3﹞感觉对称。

　　通常对称的图形具有单纯简洁的美感，以及静态的安定感，但易流于单调、呆板。一般来说，单纯的对称图形具有大方、强力的性格；细密的对称图形则能增加作品的充实感。许多商品设计即运用此特性而设计。　

﹝四﹞对比

　　将相对的要素配置一起，相互比较，以形成二种抗拒的紧张状态，称为「对比」。这种造成相对排斥性质的要素，即一般所谓的「对比要素」。

　　「对比要素」包含的范围非常广泛，举凡造形、色彩、质感、方向、面积等均属之。圆形、三角形、方形是属于造形的对比，例如红砖、金砖两者具有相同的造形，而其质感因明显的不同，具有对比的性质。对比现象的强弱与否，端赖对比要素的配置关系而定。一般而言，不同的要素结合在一起，彼此刺激，会产生对比的现象，使强者更强、弱者更弱、大者更大、小者愈小。亦即经由对比的关系可以增强个别要素所具有的特性。

　　「对比」的表现形式包括：

﹝1﹞线形的对比、﹝2﹞形状的对比、﹝3﹞份量的对比、﹝4﹞明度的对比、 ﹝5﹞彩度的对比、﹝6﹞色相的对比

﹝7﹞质地的对比、﹝8﹞动态的对比、 ﹝9﹞位置的对比、﹝10﹞其它的对比。

﹝五﹞比例

　　在造型上所谓的「比例」乃是指长度或面积等属于量度之间的一种比率，它描述的是部份与部份；或部份与全体之间的关系。

　 在人类的历史中，「比例」一直是被运用在建筑、家俱、工艺以及绘画上。尤其是希腊、罗马的建筑中「比例」被当是一种美的表征。除了建筑之外，有几个理想的比例，古代的学者就把它公式化，而作为设计的基本原理，以便求得统一与变化。其中最基本并且最重要的比例就是「黄金比例」。

　　古希腊人把「黄金比例」认为是最完美的比例而活用时造型中。它的基本方法是把一条线分割成大小两段，小线段与大线段之长度比等于大线段与全部线段之长度比。这种比例分割方法就是「黄金比例」。

﹝六﹞均衡

　　「平衡」是指两个力量相互保持的意思，也就是说把两种以上的构成要素，互相均匀地配置在一个基础的支点上，以保持力学上的平衡而达到安定的状态。

　　在造形的秩序中，「平衡」是极重要的一项。由于造形的作品，并不是真正讲究实际的重量关系，所以「平衡」一词，在平面造形的世界中，应当是属于视觉的平衡。这和力学的平衡、数学的平衡以及其它学科中所讲的「平均」是不一样的。

　　对「平衡」来说，有对称和非对称平衡之分。在「平衡」的练习中，着眼点在于如何求得视觉上的安定与心理上的平衡。例如形态、色彩、材质在画面中所具有的重量、大小、明暗、色彩、强弱、质感．．．等，都必须保持平衡状态，才会令人产生安定的感觉。
﹝七﹞调合
当两种构成要素共同存在时，若成相差距过大，即造成「对比」。若两种构成要素相近，则对比刺激变小，能产生共同秩序使两者达到调和的状态。如黑与白是一种强烈对比的颜色，而存于其间的灰色便是两者的「调和」。

　　「调和」在视觉上可使我们产生美感。因此，调和的原则一直是人们关心的课题，尤其是色彩或造形皆是须不断探讨的问题。然而为了达到「调和」，各要素间的统一仍是必要的；如色相的配合、调子的配和以及明度的配合，皆能产生「调和」。在造形上如线的粗细与形的大小均会影响，但只要在造形上能一致的话，也可产生调和感。

　　「调和」要素除了色彩与造形外，质感也是相当重要的因素。如以同材质作为建筑物或庭园设计的材料，也是获得「调和」的方法之一。
﹝八﹞节奏与韵律
　　凡是规则的或不规则的反复和排列，或属于周期性、渐变性的现象，均是「律动」。它给人具有抑扬顿挫而又有统一感的运动现象。一般说来，律动和时间的关系密切，因为在其它具有时间性的艺术领域中，均能表现律动美，如音乐、舞蹈、电影、戏剧、诗歌等。以音乐来说，利用时间间隔会使声音的强弱或高低表现出律动美，而呈现抑扬顿挫的变化。　而在我们的生活环境中，四季的变化、植物的成长、动物的运动以及各种生理反应等都存在着律动的现象。此外自然界中的海浪、沙丘、麦浪、炊烟、屋瓦等形象，亦具有连续发展的反复，并呈现出视觉的一种律动美。
﹝九﹞统一与变化
　　结合共同的要素，把相同或类似的形态、色彩、肌理诸要素作秩序性或画一性的组织、整理，使之有条不紊而相互发生关连或共通的作用，是为「统一」。

　　「统一」是美好的根本秩序。一般说来，统一可表现高尚权威的情感，也可以达成如平衡及调和的美感。然而过份的统一，将会失去生动而流于呆板。例如大小形态、色彩完全相同，且作等距离排列时，便会产生单调的感觉.所以在讲究统一的同时，还须要注意到变化的问题。「变化」也是美的形式之一，所谓「变化」是在异质的诸要素中求变化。换句话说，即是将不同的形态、大小、色相、明度、彩度、方向、肌理作有机性的组织使之生动、活泼而不流于紊乱，才是适切的变化。
﹝十﹞完整
　　任何一件艺术作品，不论运用了那一种美的原则，或经过多么复杂的创作过程，艺术家到作品完成的那瞬间追求的是作品的「完整」性。完整性依人类的感觉、需求的不同分为感官方面﹝包括各种知觉﹞、意念方面、功能方面。譬如一出好的戏剧演出，除了带给观众视觉和听觉方面的完整性外，也会为观众提供剧作家想表达的一个完整的创作意念。

教学小结：
对于教材上所提到的5点形式美法则，本课程做了相应的补充，增加了连续、比例等内容使其更加完整，并结合课件演示，使学生能够融会贯通的掌握形式美法则。

布置作业：
要求使依据今天所学的形式美法则，收集网络上的相关网络广告设计作品，并分析其涉及的形式美法则。
作业表现形式 POWER POINT
要求图片结合文字说明

第二课 构图原理
导入课题：展示网站页面范例
我们的主页，说到底，只是一个800*600的画面，那么，我们要怎么对它进行安排才合理呢？首先，也是最重要的一点，就是先停下创作，先想好一个主题? 设计，是一种有目的的创造"。若在动手之前并不了解自己将要做什么及要怎么做，而只是一味的靠操作PHOTOSHOP的滤镜而达到一种特效的话，那么，最终做出来的东西最多局部看得觉得挺不错的，但全局就显得太复杂了。页面上的构成，如果要让别人一眼望去觉得很充实但不凌乱，这里面实际上是有很大的学问的。

我们先来说说构成，"构成：是将造型按视觉效应、视觉力学和精神力学等原则组成的，具备美好形态的造型"。构成形式里，有空间构成（平面构成和立体构成）和时间构成（静和动）。我们的创作，就是要协调这里面的种种关系，顺应视觉感受，才能够打动观看者的视觉，得到我们想要的效果。在这些形形式式里，都有着如下的部件：点：我们一般认为，点是指圆形的，但这是不正确的。只要在空间里有非常少量的面积，无法形成一个视觉上感觉的图形，都是一个点。无论什么形状都可以。线：点集合在一起就形成线。面：一个平面。体：一个物体。一般是指物体占据的空间，有三维形状。

课堂提问
那么，当点、线、面与体集结在一个页面上时，它们的关系要怎么协调呢？它们之间都有什么作用呢？
归纳学生观点
点有集中视线、紧缩空间、引起注意的功能。两个点相距不远而且形状不等时，一般由小向大看。近距离的点引起面的感觉。灵活运用点，可使你的页面有一些本质上的变化。当点占据不同的空间时，它所引起的感觉是不同的。

（1）居中引起视觉集中注意。
（2）上引起下跌落感。
（3）在上左或上右引起不安定感。
（4）下方中点，产生踏实感。
（5）左下右下，增加了动感。

为什么会这样呢？因为人的视觉，都是经过对生活的感觉都得来的。在下方的东西，一般联想到大地。在上方的东西，一般联想到浮云。线、面、体亦然。
1．线
又分为直线和曲线。直线：给人以速度，明确而锐利的感觉，具男性感。曲线，则优美轻快，富于旋律。曲线的用法各异，需结合自己的需要。而直线又分为斜线、水平线及垂直线。水平线代表平稳、安定、广阔，具踏实感。垂直线则有强烈的上升及下落趋势，可增加动感。斜线，一般我没有怎么使用，因为它造成视觉的一种不安定。
2．几何形
人们每看到一个东西，都试图用横直来分析，斜、歪是人们所不愿意见到的，但适当运用这个要靠个人的感觉。面，指的是二度空间里的形。面又分为几何形和任意形，我个人比较喜欢任意形，因为它往更具人情味。几何形使人有一些机械感，但是，每一个图形里都会要用到几何形，请看它们各代表什么：

（1）圆形：运动及和谐美
（2）矩形：单纯而明确，稳定
（3）平行四边形：有向一方运动的感觉。
（4）梯形：最稳定，令人联想到山。
（5）正方形：稳定的扩张。
（6）正三角形：平稳的扩张。
（7）倒三角形：不安定，动态及扩张、幻想。
3．图与底关系
我们在日常生活中所看到的东西，都是由于形与形、图与底的相互关系。图形之间，图底之间，正由于对比产生差异而被我们所感知所接受。图与底的视差越大，图形越清晰，对视觉的冲击力越大。那么，平面上有那么多的东西，我怎么才能够确定它是否是最主要的呢？请看：易于成为"视觉中心"的条件：

（1）居于画面中心。
（2）垂直或水平的比倾斜更易成为中心。
（3）被包围。
（4）相对于其它图形较大的。
（5）色感要素强烈。
（6）熟悉的图案，如果这件东西我们很熟，则一定会以它为焦点
教学小结：
本课程结合平面构成原理，解释了网络广告设计原则，是形式美法则的一个深化，它起到承上启下的作用，为下一节的网络广告布局设计打下了基础。

布置作业：
作业要求：根据构成原理手绘各种图形构成草图。 数量5张
第三课 版面布局
（一）: 网站版面设计的步骤

网站首页设计应该关注的重点是什么？

网站首页设计是企业网站的门面，因此很多企业网站对网站首页设计非常关注。现在有一种普遍现象，在很多企业网站的首页都是一个漂亮的“欢迎页面”，展示一些图片、动画、或者其它多媒体文件，所表现出的信息大多和企业形象或者核心业务无关，据了解，一些企业喜欢这种方式的主要原因是觉得直接进入产品介绍页面，会显得内容贫乏，而且不够专业。其实这种担心是不必要的，因为用户浏览一个网站的目的是要了解有关产品或服务的信息，而不是来欣赏美术作品，那些无关的内容往往会占用访问者的时间，甚至将用户的视线转移。如果一定要采用一个漂亮网页作为首页时，不妨通过一些多媒体手段，在展示企业品牌形象方面下点工夫，尽量不要放置和企业毫无关系的内容。

网站版面设计的步骤
版面设计也可以理解为布局设计，就是我们在浏览器上说看的一个完整的页面。设计师们如何将所有要体现的内容有机的整合和分布，达到某种视觉效果，这就叫做版面布局。我们将如何做好网站的版面设计呢？首先我认为是“过程注定了结果”，重视你所做的每一步并把它尽量的做到最好，相信结果也不会偏离轨道。下面先让我们来了解一些版面设计的步骤：
1、构思（结构的搭建）
当然在构思之前我们总需要了解很多，如：客户的需求、网站的定位、受众群等很多方面的事情，也就是说需要了解策划方案。如果我们连这些问题都还不清楚的话，请先不要去想着设计，因为在不了解客户需求的情况下，盲目的去把页面设计达到某种视觉效果是很难的、也会很容易被客户推翻的，即使客户不懂，过关了，但是如果没有真正为客户带来价值，它还是失败的。
当我们真正了解客户需求后，你可以尽可能的发挥你的想象力，将你想到的"构思"画上去（用笔和纸或者软件都可以，根据自己的习惯而定），这是属于一个构思的过程，不讲究细腻工整，也不必考虑到一些细节的部分，只要用几条粗陋的线条勾画出创意的轮廓即可。尽可能的多构思一些，以便选择一个最适合的进行搭建。
2、粗略布局
这个阶段是个试用期，我们只要把重要的元素和网页结构相结合，看看框架是否合理、适合客户的需求，如果都不适合你该知道怎么做了！
3、完善布局
当我们已经有一个很好的框架时，我们需要根据客户的要求将其所需的内容有条理的融入于整个的框架中，这里就进入了网页布局的阶段了，我们需要通过我对图片的处理、空间的合理利用进行编排了，这一点我在“行业网站设计心得”里就已经提到过了，在此就不一一罗列了。下面是广告大师樊志育在《广告制作》中所提到的，希望对大家在布局的理论上面有所帮助。
1、正常平衡---亦称"匀称"。多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果。.
2、异常平衡---即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能达到强调性、不安性、高注目性的效果。
3、对比---所谓对比，不仅利用色彩、色调等技巧来做表现，在内容上也可涉及古与今、新与旧、贫与富等对比。
4、凝视---所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。
5、空白---空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品位的优越感，这种表现方法对体显网页的格调十分有效。
6、尽量用图片解说---此法对不能用语言说服、或用语言无法表达的情感，特别有效。图片解说的内容，可以传达给浏览者的更多的心理因素。
4、深入优化
这个阶段主要是针对些细节的更改和优化了，比如说一些颜色饱和度、一些字体、间距的调整呀。最后客户反馈过来的东西根据现有的界面进行适当的调整，直至客户满意。
在网上有许多人问我什么样的版面布局是最好的，其实我不觉的某个版面是最好的，我们也不能说的这么绝对，我认为在现阶段现有的资源下最适合客户需求的才是“最好”的。

网页框架与布局
　 结合课件进行介绍版面布局
网页布局大致可分为“国”字型、拐角型、“T”字型、“L”字型、综合框架型、Flash型、变化型，在这里就不做一一论述了。其实在我们在做设计的时候并没有过多的去考虑什么形式，比如我们在一张纸看到一个圆形的东西，很容易可以联想到它像太阳，而有些人则联想到月亮等等…这都是一种形式比喻，最重要的是抓住客户的需求，把握网站的定位做处合理的框架布局。

转向结合实战介绍版面设计原理和注意事项
1．分辨率
网页的整体宽度可分为三种设置形式：百分比、象素、象素+百分比。通常在网站建设中以象素形式最为常用，行业网站也不列外。我们在设计网页的时候必定会考虑到分辨率的问题，科技发展到现在我们通常用的是1024*768和800*600的分辨率，现在网络上很多都是用到778个象素的宽度，在800的分辨率下面往往使整个网页很压抑，有种不透气的感觉，其实这个宽度是指在800*600的分辨率上网页的最宽宽度，不代表最佳视觉，不妨试试760~770的象素，不管在1024还是800的分辨率下都可以达到较佳的视觉效果。
2．合理广告
在目前一些网站的广告（弹出广告、浮动广告、大广告、banner广告、通栏广告等等…）让人觉得很烦琐，更本就不愿意来看，有时连你这个网站都不上了，这样一来网站受到了严重的影响、广告也没达到广告的目的。这些问题都是我们在设计网站之前需要考虑、需要规划的内容之一。

浮动广告有两种，第一种是在网页两边空余的地方可以上下浮动的广告，第二种是满屏幕到处随机移动的广告。建议能使用第一种的情况下尽量使用第一种，不可避免第二种情况时尽量在数量上控制最多一个就好。如果数量过多会直接影响到用户的心理、防挨到用户浏览信息,适得其反。首页广告不宜过多适中即可。如在注册或者某个购买步骤的页面上最好不要出现过多的其他无关的内容让用户分心，避免客户流失等…

3．空间的合理利用
很多的网页都具有一个特点，用一个字来形容，那就是“塞”，它将各种各样的信息如文字、图片、动画等不加考虑的塞到页面上，有多少挤多少，不加以规范，导致浏览时会遇到很多的不方便，主要就是页面主次不分，喧宾夺主，要不就是没有重点，没有很好的归类，整体就像各大杂烩。让人难以找到需要的东西。有的则是一片空白失去平衡，也可以用个“散”字来形容。
　　并非要把整个页面塞满了才不觉得空，也并非让整个页面空旷才不觉得满，只要合理的安排、有机的组合，使页面达到平衡，既使在一边的部分大面积留空，同样不会让人感到空，相反这样会给人留下广阔的思考空间，给人回味又达到了视觉效果。　

教学小结：
本课程在教材处理上简化了对布局形式的描述，因为大多数学生已经了解了相关版面的布局形式。课程将教学重点放在影响版面构成的各种元素上加以分析，从而达到提高学生实战能力的目的。
布置作业：
要求使依据今天所学的网站框架与布局原理，收集网络上的相关网络广告及专题站点的设计作品，并分析其涉及的布局原理。
作业表现形式 POWER POINT
要求图片结合文字说明