第四章 4.3 Banner的色彩设计-高二《网页美工-网页色彩与布局设计》同步教学课件 （电子工业出版社·第2版）

Coloring Design of Web Elements 第四章 网页要素 的色彩设计 2 文字的色彩设计 The Color Design of The Text 1 网页LOGO的色彩设计 The Color Design of Web LOGO 2 Banner的色彩设计 The Color Design of Banner 3 导航栏菜单设计 Navigation Bar Color Design 4 目 录 CONTENTS 小标题设计 Little Heading Design 5 3 Banner的色彩设计 Banner的作用 Banner的形式 3 PART Banner的设计方法 4 Banner的色彩设计 The Color Design of Banner 4.3.1.Banner的作用 Banner，中文意思为旗帜或网幅，是一种可以由文本、图像和动画相结合而成的网页栏目。Banner的主要作用是显示网站的各种广告，包括网站自身产品的广告和与其他企业合作放置的广告，同时又可美化网站。如图4-31所示的青岛科技大学网站首页，整个Banner的设计占据网页3/4位置，完全用于展示近期活动与学校风采； 图4-31青岛科技大学网站首页 5 4.3.1.Banner的作用 图4-32所示安徽麦堡食品工业有限公司网站，除了主页，其他子页的Banner都用于美化网页。 Banner的色彩设计 The Color Design of Banner 图4-32　安徽麦堡食品工业有限公司网站 6 图4-34第18届中国—东盟博览会网站首页Banner Banner的色彩设计 The Color Design of Banner 4.3.2.Banner的形式 图3-33 Residenza网站 通常情况下，Banner的外形都是规则的矩形，特别是在众多商业网站中，通常都会遵循标准定义Banner的尺寸，方便用户设计统一的Banner，应用在所有网站上，如图4-33 所示网站。 7 Banner，是指页面当中的横幅广告，一个表现商家广告内容的图片，放置在广告商的网页界面上，是互联网广告中最基本的广告形式，其尺寸是728*90像素，或320*50像素等等，如图4-35所示。 Banner的色彩设计 The Color Design of Banner 4.3.2.Banner的形式 图4-35 banner尺寸示意图 图4-36 网页中的banner 8 网页中的Banner有多种设计方法，其中包括正三角形、倒三角形、对角线和扩散式等途径来设计BANNER。 图4-37 banner的正三角形运用 Banner的色彩设计 The Color Design of Banner 4.3.3. Banner的设计方法 1.正三角形构图形式 该手法可以使BANNER展示立体感强烈，重点突出，构图稳定自然，空间感强，此类构图方式给人安全感和可靠感。如图4-37所示的网页中，BANNER与LOGO的位置排列正好组成一个正三角形，表现网页的可信度和真实性，给用户一种稳定自然的视觉效果。 9 2.倒三角形构图形式 该手法突出强烈空间立体感的同时，构图活泼且具有动感，通过不稳定的构图方式，激发创意感，给人运动的感觉。如图4-38所示的网页中，BANNER中的字符和图片利用倒三角形构图形式，使得网页充满律动形。 图4-38 banner的倒三角形运用 Banner的色彩设计 The Color Design of Banner 4.3.3. Banner的设计方法 10 3.对角线构图形式 该手法能够改变常规的排版方式，适合组合展示，比重相对平衡，构图上活泼且稳定，且有较强的视觉冲击力，特别适合运动型展示。如图4-39所示的网页中，BANNER的设计体现对角线构图的运用，使得网页具有创新性。 图4-39 banner的对角线构图运用 Banner的色彩设计 The Color Design of Banner 4.3.3. Banner的设计方法 11 4.扩散式构图形式 该手法通过运用射线、光晕等辅助图形对图片主体进行突出，构图活泼有重点，次序感强，利用透视的方式围绕口号进行表达，给人以深刻的视觉印象。如图4-40所示的网页中，BANNER中运用灯光的扩散效果使得网页层次分明，吸引用户眼球。 图4-40 banner的扩散式构图运用 Banner的色彩设计 The Color Design of Banner 4.3.3. Banner的设计方法 12 重点要注