第4章-标志导航广告设计课件

第4章标志、导航、广告设计

教学目标：标志、导航、广告是网站的基本元素，是吸引访客访问站点的重要因素。本章对网站的标志、导航、广告三个元素的作用以及制作方法进行阐述，便于学员从基本到深入的学习。通过这样的学习，学员能够掌握标志、导航、广告这三元素的设计思路，在今后的网页界面设计中有一个好的基础。

教学要求:掌握标志设计的作用与功能以及制作方法；掌握导航的设计方法；掌握网络广告设计类型及标准。9/21/20231北大出版社第4章标志、导航、广告设计教学目标：标志4.1标志、导航、广告设计概述

标志LOGO是企业的形象代表，也是网站特色和内涵的集中体现；导航则是网站的方向标，便于访客能够明确浏览网站的主要内容；网络广告总是能在第一时间吸引访客的眼球，从而点击它。因此一个网站的标志、导航、广告的设计好坏将直接影响访客的注意力。本节就这三方面的作用及设计方法上进行介绍。

9/21/20232北大出版社4.1标志、导航、广告设计概述标志L

4.1.1标志设计

1）网站标志的基本内涵2）网站标志的作用3）网站标志设计的标准规范1.标志设计的基本要求2.标志的制作1）分析阶段2）标志的要素挖掘3）设计标志4）合成及修正阶段9/21/20233北大出版社4.1.1标志设计1）网站标志的基本内涵1.4.1.2导航设计

1）按照维度功能划分2）按照直观的形式划分1.导航的多样性2.导航与网站风格统一

1）处理好主从导航的关系2）控制导航的纵深度3）协调导航和网站的风格4）导航的文字描述要准确9/21/20234北大出版社4.1.2导航设计1）按照维度功能划分1.导

4.1.3网络广告

1）网络广告优势2）网络广告的形式1.网络广告2.广告条

1）分析准备阶段2）选择广告条的规格3）制作阶段9/21/20235北大出版社4.1.3网络广告1）网络广告优势1.网络广4.1.4本章案例简介

本章中将通过3个案例，来讲解网页的标志、导航、广告设计的方法及技巧。“也读书网站的标志LOGO”案例主要讲解的是运用网页标志的元素组合来制作标志的方法；“也读书网站的导航”案例主要讲解的是利用导航的风格选择来制作导航的方法；“公司网站的横幅及广告条”运用广告条的各要素组合来制作横幅及广告条的方法。9/21/20236北大出版社4.1.4本章案例简介8/1/20236北大出版社4.2实训九:设计网站标志-“也读书”网站的标志LOGO

案例说明：本节为“也读书”网站的标志设计案例，该标志LOGO采用形象手法。该标志的最大特点就是通过中间的人物形象代表着知识，而外围的三个人物形成手牵手的意境，与网站的主旨（有书的世界，有你。有书的故事，有世界）吻合。颜色采用绿色，给人一种清新，自然的感觉。效果图如下:9/21/20237北大出版社4.2实训九:设计网站标志-“也读书”网站的标志LOGO提示：导航效果图的制作工具可以用corelDRAW、firework等图形图像处理软件。通常使用corelDRAW来设计网站的标志效果图，而网站LOGO的排版一般采用firework软件。

知识拓展:

（1）表象性的标志（2）象征性的标志（3）寓意性的标志（4）标识性的标志（5）卡通化的标志（6）几何形构成的标志9/21/20238北大出版社提示：导航效果图的制作工具可以用corelDRAW本节知识点:

网站标志是用于传递网站的定位和经营理念，也是为了便于人们识别。一个具有视觉冲击力标志设计，会直接影响到访问者对网站的判断。9/21/20239北大出版社本节知识点:网站标志是用于传递网站的定位和经营理念，4.3实训十:设计网站导航-“也读书”网站的导航设计

案例说明：本节为“也读书”网站的导航设计案例。运用横向导航结构和FLASH动画设计“也读书”网站的导航效果图，内容包含网站的主导航、次导航等部分，要求动画流畅，结构清晰，栏目鲜明。

效果图如下:9/21/202310北大出版社4.3实训十:设计网站导航-“也读书”网站的导航设计案知识拓展:提示：导航效果图的制作工具可以用firework、photoshop等图形图像处理软件以及flash动画处理软件。通常使用firework、photoshop来设计导航平面图，使用flash给导航加上动画效果。（1）最常用的导航菜单（2）垂直的导航菜单（3）“图标+文字说明”的导航结构（4）手工绘画风格的导航（5）无规则的导航结构9/21/202311北大出版社知识拓展:提示：导航效果图的制作工具可以用firework、本节知识点:导航是网页设计中的重要元素。一个良好的网页导航系统不仅能够把导航设计的漂亮，同时更重要的是要能够引导访客浏览网站中的更多页面，让访客能够轻松找到他们想要观看的内容。

9/21/202312北大出版社本节知识点:导航是网页设计中的重要元素。一个4.4实训十一:设计网站横幅(BANNER)–设计公司网站的横幅和广告条

案例说明：本节为Mortgage&Loans公司网站的横幅和广告条设计案例，包括一个静态的网站横幅和一个FLASH的动画广告条。在设计中充分运用文字和图像的合理结合，加上动画效果的呈现，给人形象直观的感受。效果图如下:

9/21/202313北大出版社4.4实训十一:设计网站横幅(BANNER)–设计公司网知识拓展:提示：网站横幅（BANNER）的制作工具可以用firework、photoshop等图形图像处理软件以及flash动画处理软件。通常使用firework、photoshop来设计网站的静态横幅，使用flash动画软件制作广告条。

（1）文字链接广告（2）按钮广告（3）悬浮广告（4）全屏广告（5）通栏广告（6）网络流媒体广告9/21/202314北大出版社知识拓展:提示：网站横幅（BANNER）的制作工具可以用fi本节知识点:在设计广告条时要了解网络广告的优势，以及设计的标准。网络广告的目标就是通过信息展示使消费者产生对产品的认识、情感、态度和行为的变化。在设计策略上，首先广告标题要明确、凸显，广告标题是一句吸引消费者的带有概括性、观念性和主导性的语言。其次，发展网络广告的互动性，这类的广告信息能够提升访问者对广告本身的兴趣。设计时，为了突出网络广告，可以使用与登载广告的网页完全不同的设计方法和风格。可以使用与网页相对的颜色或风格，把广告条的重点放置在该网页所集中体现的内容相对的位置上，或者使用与网页文字不同的字体来制作网络广告。9/21/202315北大出版社本节知识点:在设计广告条时要了解网络广告的4.5本章小结本章主要对网站的主要几个元素(标志、导航、广告)的介绍，包括标志设计要求及制作流程，导航的多样性及导航的风格，网络广告的类型及广告条的制作。标志设计主要介绍网站标志的基本内涵、作用、标准规范和网络广告条的制作步骤，导航设计主要介绍导航的样式、导航的风格特点，广告设计主要介绍比较流行的10种网络广告类型、广告条的制作步骤。举了三个典型的案例。通过这些介绍，读者只要多加练习，然后结合实际融会贯通，设计出高水准的网站标志、导航及广告。9/21/202316北大出版社4.5本章小结本章主要对网站的主要几4.6习题1.选择：（1）下面哪个是网站特色和内涵的集中体现（）A.文字B.标志C.导航D.广告（2）下面哪个不是网站常见的标志大小规格（）A.88*31B.120*60C.120*90D.1024*768（3）一个站点里头有太多的信息，能够指引访客到达网站各个角落的网页元素是（）A.标志B.广告C.导航D.以上都不是（4）下列哪个是网站导航设计有关的因素（）A.文字B.图标C.色彩D.以上都是9/21/202317北大出版社4.6习题8/1/202317北大出版社（5）导航的哪个因素有利于访客提前对所要访问的内容有一个大概的了解（）A.可爱图标B.文字描述C.鲜艳色彩D.渐变导航（6）下列哪个项目不属于导航按照直观形式划分（）A.横排导航B.多维导航C.图片式导航D.隐藏式导航（7）下列哪种广告是出现在网页页面两侧，显得特别突出，广告幅度大（）A.浮动广告B.按钮广告C.对联广告D.弹出窗口广告（8）下列哪一个不是网络广告标题的语言特征（）A.随意性B.主导性C.观念性D.概括性9/21/202318北大出版社（5）导航的哪个因素有利于访客提前对所要访问的内容8/1/22.填空（1）标志的设计创意主要来自网站的______和______。（2）_____对标志的认知直接影响标志设计的尺度。（3）按照维度划分，导航可以分为功能可以分为______、______和______。（4）导航是______和______的优势组合。（5）网站，(100-1)%的内容是______。（6）_____是一种最简单直接的网上广告，只需将超链接加入相关文字便可。（7）制作广告条的步骤有______、______和______。（8）网络广告的形式多样,包括______、______和______。9/21/202319北大出版社2.填空8/1/202319北大出版社3.实践题（1）设计一个个人网站的标志。（2）几何形构成的标志主要是用点、线、面、方、圆、多边形或三维空间等几何图形进行编排设计。运用几何图形构造原理设计一个跟影视