网络广告设计原理

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

2、、对比、比例、平衡、 调和、律动、统一、完整。在讨论美的原则之前，必须先了解单位形的意义。单位形是在相同或相似的形象组合中最 基本的单位元素。单位形可以单独重复排列，或组成单位形组合 ，再以单位形组合为基础， 作有规律的反复排列。下列图例说明以一个单位形配置构成八种单位形组合 。以一个单 位形配置构成八种单位形组合图例每一个单位形组合又可以重复以线状又称二方连续、 面状又称四方连续、环状、放射状、镜照式的方式发展成复杂有趣的平面构图。下图是以环状 发展构成的平面构图。以环状发展构成的平面构图一连续连续是一种没有开始、没有终结、没有边缘的严谨性秩序排列，它祇是反复的一种特殊情 形，因此有规律的反

3、复并不一定能产生连续。 连续是无限地扩张，它可超越任何架框限制。 连 续包括二方连续和四方连续 。二方连续是单位形向左右或上下作反复的规律式排列。它可作直线方向、曲折式、波浪式 的方向延申。四方连续是单位形向左右也向上下延申的现象，可产生四方连续的图形。由二方连续造成 的线条加上左右上下反复的排列，是创作四方连续图形的方法之一。二渐变渐变就是逐渐的改变，其有一定的秩序与规律。 渐变除形状渐变外，尚有大小渐变 、 色彩渐变、位置渐变和方向渐变等等，均可单独或混合运用。任何构成元素之渐变，都 有其开始与终结，或由一方开始，经渐变又回复原来的循环现象。例如形状渐变，可从某一形状开 始，逐渐变化成为另

4、一形状，或由另一形状又逐步回复到某一形状。无论是开始或终结，在渐变的 设计中均可成为设计上的焦点，且在开始与终结的整个重复过程中，均会造成节奏感。渐变形成的 方式可由上而下、由左而右、或由中央发射、或作多元化的发展。渐变的表现形式包括： 1自然形象之渐变、 2形状之渐变、 3大小之渐变、 4 位置之渐变、 5方向之渐 变、 6色彩之渐变。三对称视觉上，以一个点或一条线为基准，上下或左右看起来相等的形体，称为对称 。对称具 有相称、均齐、均整的意思。左右对称的形体向来都被认为是安定且具有机能的。对称的表现形式包括：1丨线对称、2丨点对称、3丨感觉对称。通常对称的图形具有单纯简洁的美感，以及静态的

5、安定感，但易流于单调、呆板。一般来说， 单纯的对称图形具有大方、强力的性格；细密的对称图形则能增加作品的充实感。许多商品设计即 运用此特性而设计。四对比将相对的要素配置一起，相互比较，以形成二种抗拒的紧张状态，称为对比 。这种造成相 对排斥性质的要素，即一般所谓的对比要素 。对比要素包含的范围非常广泛，举凡造形、色彩、质感、方向、面积等均属之。圆形、三 角形、方形是属于造形的对比，例如红砖、金砖两者具有相同的造形，而其质感因明显的不同，具 有对比的性质。对比现象的强弱与否，端赖对比要素的配置关系而定。一般而言，不同的要素结合 在一起，彼此刺激，会产生对比的现象，使强者更强、弱者更弱、大者更大、

6、小者愈小。亦即经由 对比的关系可以增强个别要素所具有的特性。对比的表现形式包括： 1线形的对比、 2形状的对比、 3份量的对比、 4明度的对比、 5彩度的对比、 6色相的对比 7质地的对比、 8动态的对比、 9位置的对比、 10其它的对比。五比例在造型上所谓的比例乃是指长度或面积等属于量度之间的一种比率，它描述的是部份与部 份；或部份与全体之间的关系。在人类的历史中，比例一直是被运用在建筑、家俱、工艺以及绘画上。尤其是希腊、罗马的 建筑中比例被当是一种美的表征。除了建筑之外，有几个理想的比例，古代的学者就把它公式 化，而作为设计的基本原理，以便求得统一与变化。其中最基本并且最重要的比例就是黄金

7、比例古希腊人把黄金比例认为是最完美的比例而活用时造型中。它的基本方法是把一条线分割 成大小两段，小线段与大线段之长度比等于大线段与全部线段之长度比。这种比例分割方法就是黄金比例。六均衡平衡是指两个力量相互保持的意思，也就是说把两种以上的构成要素，互相均匀地配置在 一个基础的支点上，以保持力学上的平衡而达到安定的状态。在造形的秩序中，平衡是极重要的一项。由于造形的作品，并不是真正讲究实际的重量关 系，所以平衡一词，在平面造形的世界中，应当是属于视觉的平衡。这和力学的平衡、数学的 平衡以及其它学科中所讲的平均是不一样的。对平衡来说，有对称和非对称平衡之分。在平衡的练习中，着眼点在于如何求得视觉 上

8、的安定与心理上的平衡。例如形态、色彩、材质在画面中所具有的重量、大小、明暗、色彩、强 弱、质感等，都必须保持平衡状态，才会令人产生安定的感觉。七调合当两种构成要素共同存在时，若成相差距过大，即造成对比。若两种构成要素相近，贝U对比刺激变小，能产生共同秩序使两者达到调和的状态。如黑与白是一种强烈对比的颜色，而存于其间的 灰色便是两者的调和。调和在视觉上可使我们产生美感。因此，调和的原则一直是人们关心的课题，尤其是色彩 或造形皆是须不断探讨的问题。然而为了达到调和，各要素间的统一仍是必要的；如色相的配 合、调子的配和以及明度的配合，皆能产生调和。在造形上如线的粗细与形的大小均会影响， 但只要在造形

9、上能一致的话，也可产生调和感。调和要素除了色彩与造形外，质感也是相当重要的因素。如以同材质作为建筑物或庭园设 计的材料，也是获得调和的方法之一。八节奏与韵律凡是规则的或不规则的反复和排列，或属于周期性、渐变性的现象，均是律动 。它给人具 有抑扬顿挫而又有统一感的运动现象。一般说来，律动和时间的关系密切，因为在其它具有时间性 的艺术领域中，均能表现律动美，如音乐、舞蹈、电影、戏剧、诗歌等。以音乐来说，利用时间间 隔会使声音的强弱或高低表现出律动美，而呈现抑扬顿挫的变化。 而在我们的生活环境中，四季 的变化、植物的成长、 动物的运动以及各种生理反应等都存在着律动的现象。 此外自然界中的海浪、 沙丘

10、、麦浪、炊烟、屋瓦等形象，亦具有连续发展的反复，并呈现出视觉的一种律动美。九统一与变化结合共同的要素，把相同或类似的形态、色彩、肌理诸要素作秩序性或画一性的组织、整理， 使之有条不紊而相互发生关连或共通的作用，是为统一 。统一是美好的根本秩序。一般说来，统一可表现高尚权威的情感，也可以达成如平衡及调 和的美感。然而过份的统一，将会失去生动而流于呆板。例如大小形态、色彩完全相同，且作等距 离排列时，便会产生单调的感觉 .所以在讲究统一的同时，还须要注意到变化的问题。 变化也是 美的形式之一，所谓变化是在异质的诸要素中求变化。换句话说，即是将不同的形态、大小、 色相、明度、彩度、方向、肌理作有机性

11、的组织使之生动、活泼而不流于紊乱，才是适切的变化。十完整任何一件艺术作品，不论运用了那一种美的原则，或经过多么复杂的创作过程，艺术家到作品 完成的那瞬间追求的是作品的完整性。完整性依人类的感觉、需求的不同分为感官方面包括 各种知觉、意念方面、功能方面。譬如一出好的戏剧演出，除了带给观众视觉和听觉方面的完整 性外，也会为观众提供剧作家想表达的一个完整的创作意念。教学小结： 对于教材上所提到的 5 点形式美法则，本课程做了相应的补充，增加了连续、比例等内容使其更加 完整，并结合课件演示，使学生能够融会贯通的掌握形式美法则。布置作业： 要求使依据今天所学的形式美法则， 收集网络上的相关网络广告设计作

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

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

14、结在一个页面上时，它们的关系要怎么协调呢？它们之间都有什么 作用呢？ 归纳学生观点点有集中视线、紧缩空间、引起注意的功能。两个点相距不远而且形状不等时，一般由小向大 看。近距离的点引起面的感觉。灵活运用点，可使你的页面有一些本质上的变化。当点占据不同的 空间时，它所引起的感觉是不同的。（1）居中引起视觉集中注意。（2）上引起下跌落感。（3）在上左或上右引起不安定感。（4）下方中点，产生踏实感。（5）左下右下，增加了动感。 为什么会这样呢？因为人的视觉，都是经过对生活的感觉都得来的。在下方的东西，一般联想到大 地。在上方的东西，一般联想到浮云。线、面、体亦然。1线又分为直线和曲线。直线：给人以速

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

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

17、5）色感要素强烈。（6）熟悉的图案，如果这件东西我们很熟，则一定会以它为焦点教学小结：本课程结合平面构成原理，解释了网络广告设计原则，是形式美法则的一个深化，它起到承上启下 的作用，为下一节的网络广告布局设计打下了基础。布置作业：作业要求：根据构成原理手绘各种图形构成草图。数量 5 张第三课版面布局（一） :网站版面设计的步骤网站首页设计应该关注的重点是什么？网站首页设计是企业网站的门面， 因此很多企业网站对网站首页设计非常关注。 现在有一种普 遍现象，在很多企业网站的首页都是一个漂亮的“欢迎页面” ，展示一些图片、动画、或者其它多 媒体文件，所表现出的信息大多和企业形象或者核心业务无关，据了

18、解，一些企业喜欢这种方式的 主要原因是觉得直接进入产品介绍页面，会显得内容贫乏，而且不够专业。其实这种担心是不必要 的，因为用户浏览一个网站的目的是要了解有关产品或服务的信息，而不是来欣赏美术作品，那些 无关的内容往往会占用访问者的时间， 甚至将用户的视线转移。 如果一定要采用一个漂亮网页作为 首页时，不妨通过一些多媒体手段，在展示企业品牌形象方面下点工夫，尽量不要放置和企业毫无 关系的内容。网站版面设计的步骤版面设计也可以理解为布局设计， 就是我们在浏览器上说看的一个完整的页面。 设计师们如何 将所有要体现的内容有机的整合和分布，达到某种视觉效果，这就叫做版面布局。我们将如何做好 网站的版面

19、设计呢？首先我认为是“过程注定了结果” ，重视你所做的每一步并把它尽量的做到最好，相信结果也不会偏离轨道。下面先让我们来了解一些版面设计的步骤：1、构思（结构的搭建）当然在构思之前我们总需要了解很多，如：客户的需求、网站的定位、受众群等很多方面的事 情，也就是说需要了解策划方案。如果我们连这些问题都还不清楚的话，请先不要去想着设计，因 为在不了解客户需求的情况下， 盲目的去把页面设计达到某种视觉效果是很难的、 也会很容易被客 户推翻的，即使客户不懂，过关了，但是如果没有真正为客户带来价值，它还是失败的。当我们真正了解客户需求后，你可以尽可能的发挥你的想象力，将你想到的 " 构思&qu

20、ot; 画上去（用 笔和纸或者软件都可以，根据自己的习惯而定） ，这是属于一个构思的过程，不讲究细腻工整，也 不必考虑到一些细节的部分， 只要用几条粗陋的线条勾画出创意的轮廓即可。 尽可能的多构思一些， 以便选择一个最适合的进行搭建。2、粗略布局这个阶段是个试用期，我们只要把重要的元素和网页结构相结合，看看框架是否合理、适合客 户的需求，如果都不适合你该知道怎么做了！3 、完善布局当我们已经有一个很好的框架时， 我们需要根据客户的要求将其所需的内容有条理的融入于整 个的框架中，这里就进入了网页布局的阶段了，我们需要通过我对图片的处理、空间的合理利用进 行编排了，这一点我在“行业网站设计心得”里

21、就已经提到过了，在此就不一一罗列了。下面是广 告大师樊志育在广告制作中所提到的，希望对大家在布局的理论上面有所帮助。1、正常平衡 - 亦称 "匀称"。多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果2、异常平衡 - 即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能达到强调性、不安性、高注目性的效果。3、对比- 所谓对比，不仅利用色彩、色调等技巧来做表现，在内容上也可涉及古与今、新与 旧、贫与富等对比。4、凝视 - 所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效 果，一般多用明星凝视状。5、空白 - 空白有两种作用，一方面

22、对其他网站表示突出卓越，另一方面也表示网页品位的优 越感，这种表现方法对体显网页的格调十分有效。6、尽量用图片解说 - 此法对不能用语言说服、或用语言无法表达的情感，特别有效。图片解 说的内容，可以传达给浏览者的更多的心理因素。4 、深入优化这个阶段主要是针对些细节的更改和优化了，比如说一些颜色饱和度、一些字体、间距的调整 呀。最后客户反馈过来的东西根据现有的界面进行适当的调整，直至客户满意。在网上有许多人问我什么样的版面布局是最好的， 其实我不觉的某个版面是最好的， 我们也不能说的这么绝对，我认为在现阶段现有的资源下最适合客户需求的才是“最好”的。网页框架与布局结合课件进行介绍版面布局网页布

23、局大致可分为“国”字型、拐角型、“T”字型、“L”字型、综合框架型、Flash型、变化型，在这里就不做一一论述了。其实在我们在做设计的时候并没有过多的去考虑什么形式，比如 我们在一张纸看到一个圆形的东西，很容易可以联想到它像太阳，而有些人则联想到月亮等等这 都是一种形式比喻，最重要的是抓住客户的需求，把握网站的定位做处合理的框架布局。转向结合实战介绍版面设计原理和注意事项1分辨率网页的整体宽度可分为三种设置形式：百分比、象素、象素 + 百分比。通常在网站建设中以象素形 式最为常用，行业网站也不列外。我们在设计网页的时候必定会考虑到分辨率的问题，科技发展到 现在我们通常用的是 1024*768 和 800*600 的分辨率，现在网络上很多都是用到 778 个象素的宽 度，在 800 的分辨率下面往往使整个网页很压抑， 有种不透气的感觉， 其实这个宽度是指在 800*600 的分辨率上网页的最宽宽度， 不代表最佳视觉， 不妨试试 760770 的象素，不管在 1024 还是 800 的分辨率下都可以达到较佳的视觉效果。2合理广告在目前一些网站的广告（