页面元素相关设计

1、页面元素相关设计 知识要点1.Logo设计2.Banner设计3.导航设计4.网页文字设计5.图像设计6.网页动画设计知识要点知识要点Logo设计1.Logo的含义和表现形式 网站的标示、标志。Logo是企业综合信息传递的媒介，是依据企业的构成结构、行业类别、经营理念，并充分考虑标志接触的对象和应用环境，为企业制定的标准世界符号。（1）图案logo通过隐喻、联想、概括、抽象等绘画表现方法表现被标识体，对其理念的表达概括而形象，容易区分记忆。（2）文字logo含义明确、直接，易于被理解、认知，对所表达的理念具有说明的作用。（3）图文logo是文字与图案相结合，兼具文字与图案的属性。是运用的最多的

2、形式。2.Logo的设计原则（1）遵循人们的认识规律，突出主题、引人注目，能够在方寸之间概括出站点的理念，保持视觉平衡、讲究线条的流畅，使整体形状美观，用反差、对比或边框等强调主题（2）外观尺寸要根据站点页面的整体版面设计来确定，选择恰当的字体，注意留白，给人想象空间。（3）在色彩运用上基色要相对稳定，强调色彩的形式感、记忆感和感情规律。结合使用色彩的对比关系，重视色彩的注目性。（4）在形式上重视简约、高度概括，以简洁的符号化的世界艺术形象把网站的形象和理念长留于人们心中。2.Banner设计（1）banner的含义和表现形式网页banner是指网页中的广告。它可以分为横幅广告、通栏广告、弹出

3、窗口广告、擎天柱广告、按钮广告、画中画广告、漂浮广告、文字链接广告、隐藏页面广告、播放式广告等。横幅广告：49060像素或者23330像素。可静态，可动态，可多帧拼接的动画形式。通栏广告：通常在顶端或中间等显著位置。横贯页面。尺寸大，世界冲击力强，适合信息发布、产品推广、庆典活动等。弹出式广告：访问者在进入该页面之前，就抢先以大尺寸弹出的形式将相关广告信息推荐给浏览者。擎天柱广告：利用网站页面左右两侧的竖式广告位置而设计的广告形式。他可以形象表现广告的宣传，是一种新型的广告形式，通常用程序控制按钮广告：尺寸较小，有12060像素，9040像素、4020像素位置灵活画中画广告：镶嵌在文字信息中的

4、一种广告形式一般大小为360300像素，可以为360409像素。一般为动态、声音结合。漂浮广告：随页面浏览上下移动文字链接广告隐藏页面广告播放时广告（2）Banner的设计原则 文字编排简洁、和谐：间距、字体、数量、颜色与背景色。与内容相符。避免字体和文字样式的单一。 内容醒目、美观，视觉效果好：制作特殊，富有冲击力的效果 广告内容的方向正确：字体排列方式要符合人们的阅读习惯，避免顺序杂乱。 激起点击的欲望：设计富有乐趣，现实网站品质 适当的留空，避开广告条的边缘，文字的旁边要留有一定的空间，让图形和文字呼吸。使他们更明显3.导航设计导航的含义和表现形式：网页的目录，网页之间的联系和分类通导航

5、的含义和表现形式：网页的目录，网页之间的联系和分类通过它来实现。应该放在页面的醒目位置，让浏览者第一时间看到。过它来实现。应该放在页面的醒目位置，让浏览者第一时间看到。通常分为：通常分为：1.文字导航：纯文字构成，简洁、清爽、容量小文字导航：纯文字构成，简洁、清爽、容量小2.图像导航：美观、大方，字体选用不受限制图像导航：美观、大方，字体选用不受限制3.交替图像导航：当鼠标放在导航上，图像发生变化，移开时还原交替图像导航：当鼠标放在导航上，图像发生变化，移开时还原4.下拉菜单导航：比较节省空间，可以包含很多链接下拉菜单导航：比较节省空间，可以包含很多链接5.Flash导航：体积小，表现形式多样

6、、视觉冲击力强导航：体积小，表现形式多样、视觉冲击力强导航设计原则：导航设计原则：1.文字设计的含义和表现形式：对文字进行有趣的修饰增强视觉效果。文字设计的含义和表现形式：对文字进行有趣的修饰增强视觉效果。提高文本吸引力（标题、文字信息、文字链接）提高文本吸引力（标题、文字信息、文字链接）2.文字设计原则：有一个整体的基调，注重文字的可读性，适应人们文字设计原则：有一个整体的基调，注重文字的可读性，适应人们的阅读习惯，考虑文字的外形特征，建议使用默认字体，注重留的阅读习惯，考虑文字的外形特征，建议使用默认字体，注重留白的作用白的作用5.图像设计图像的含义和表现形式：插图、照片、背景图、标题和链

7、接按钮图像的含义和表现形式：插图、照片、背景图、标题和链接按钮插图和照片突出网页的主题。插图和照片突出网页的主题。背景图可以用作网页的背景，以图为背景来衬托主题。可以增加背景图可以用作网页的背景，以图为背景来衬托主题。可以增加层次感。层次感。用图像做标题是标题鲜明，增强视觉效果。用图像做标题是标题鲜明，增强视觉效果。小图像做文字链接按钮，使网页更为生动小图像做文字链接按钮，使网页更为生动图像设计的原则：图像设计的原则：精简原则，图像不能出现的太多。精简原则，图像不能出现的太多。内容恰当，明确主题，透彻内容，选取最具代表力与说服力的图内容恰当，明确主题，透彻内容，选取最具代表力与说服力的图片。片

8、。颜色协调，图像的色调要与整个网页的主色调协调一致。为主题颜色协调，图像的色调要与整个网页的主色调协调一致。为主题服务，不能喧宾夺主。有修饰、美化版面的作用，使整个网页的服务，不能喧宾夺主。有修饰、美化版面的作用，使整个网页的色调趋向一致。色调趋向一致。风格吻合，图像的意境、风格要与网页的主题内容保持氛围、情风格吻合，图像的意境、风格要与网页的主题内容保持氛围、情感上的一致。感上的一致。1.布局合理，放在合适的位置上，避免阻碍网民视线，造成视觉混布局合理，放在合适的位置上，避免阻碍网民视线，造成视觉混乱。不宜放置过多。与文字排版随机组成，合理利用平面空间。乱。不宜放置过多。与文字排版随机组成，

9、合理利用平面空间。6.网页动画设计动画的含义和表现形式：网页中最吸引人的元素。很强的视觉冲击力。动画设计原则：内容与形式相统一多选择常识性信息符号动画时间控制合适为网页整体服务1. 较小的动画文件任务实现首页头部元素：Logo、导航、Banner首页版面元素首页框架的丰满内页的设计任务4 网站造型元素设计点、线、面是最基本的造型元素。如何在网页界面中经营和组织好点、线、面，时期传达出特定的形式感。综合运用造型元素知识设计出气氛浓郁、气质独特、气势磅礴的网页作品。任务5 网站形式美设计网站在满足网页功能需要的前提下，需要有针对性地采用一些美的形式。美的形式规律同现代的网页设计的具体问题相结合起来

10、，会使网页更加有生气，更吸引人。知识要点点：在网页中，一个Logo、一个按钮、一个文字都可以视为点，具有形状、方向、大小等属性。点的概念是相对的，是与周围视觉元素相比较而言生成的。分为规则和不规则两种。视觉上相对的小，起到点睛的作用；创造出不同的视觉效果。线：几个按钮、几个文字的排列可以形成线。存在于物体的边缘、形与形的交接处、点与点之间。具有方向性和长度，同时也具有粗细宽窄以及各种形态变化。分为直线和曲线，不同的线带给人不同的感觉。分割页面，表示方向、位置、长短、宽度、形状、质量和情绪。装饰性，形成错落有致的秩序美。面：有长度、宽度，无厚度、实体的表面。具有一定的形状。分为几何形、有机形、偶

11、然形等。其他造型元素：空白、空间、肌理知识要点1.统一和变化：在网页设计中运用统一与变化的规律是处理形象和组织的对立统统一和变化：在网页设计中运用统一与变化的规律是处理形象和组织的对立统一过程。使网页丰富而有生气，整体感强的同时又有变化。一过程。使网页丰富而有生气，整体感强的同时又有变化。2.条理与反复：使网页有秩序美，变化中统一。演化出多种多样图形的变化条理与反复：使网页有秩序美，变化中统一。演化出多种多样图形的变化3.对比与调和：文本编辑、字体大小、字体粗细、字体颜色、图片宽窄、比例反对比与调和：文本编辑、字体大小、字体粗细、字体颜色、图片宽窄、比例反差、透明度大小、位置的放置。差、透明度

12、大小、位置的放置。4.对称与均衡：对称网页设计稳定、庄严、整齐、秩序、安宁、沉静。均衡揭示对称与均衡：对称网页设计稳定、庄严、整齐、秩序、安宁、沉静。均衡揭示了形式内在的、含蓄的秩序和平衡，体现了造型动静结合了形式内在的、含蓄的秩序和平衡，体现了造型动静结合 的动态美。呼应关系的动态美。呼应关系和起承关系。和起承关系。5.节奏与规律：按钮的编排经常遇到这个问题。形象鲜明、形式独特，表达轻松、节奏与规律：按钮的编排经常遇到这个问题。形象鲜明、形式独特，表达轻松、优雅的情感，使网页界面产生不可思议的活力与魅力。优雅的情感，使网页界面产生不可思议的活力与魅力。任务实现1.构思2.勾勒首页结构图3.背景设计4.首页头部元