《页面元素设计》PPT课件

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,任务3 网站页面元素设计,目录,任务分析,知识要点,1.Logo,设计,2.Banner,设计,3.,导航设计,4.,网页文字设计,5.,图像设计,6.,网页动画设计,任务实现,知识要点,Logo设计,1.Logo的含义和表现形式,网站的标示、标志。Logo是企业综合信息传递的媒介，是依据企业的构成结构、行业类别、经营理念，并充分考虑标志接触的对象和应用环境，为企业制定的标准世界符号。,（1）图案logo通过隐喻、联想、概括、抽象等绘画表现方法表现被标识体，对其理念的表达概括而形象，容易区分记忆。,（2）文字logo含义明确、直接，易于被理解、认知，对所表达的理念具有说明的作用。,（3）图文logo是文字与图案相结合，兼具文字与图案的属性。是运用的最多的形式。,2.Logo的设计原则,（1）遵循人们的认识规律，突出主题、引人注目，能够在方寸之间概括出站点的理念，保持视觉平衡、讲究线条的流畅，使整体形状美观，用反差、对比或边框等强调主题,（2）外观尺寸要根据站点页面的整体版面设计来确定，选择恰当的字体，注意留白，给人想象空间。,（3）在色彩运用上基色要相对稳定，强调色彩的形式感、记忆感和感情规律。结合使用色彩的对比关系，重视色彩的注目性。,（4）在形式上重视简约、高度概括，以简洁的符号化的世界艺术形象把网站的形象和理念长留于人们心中。,2.Banner设计,（1）banner的含义和表现形式,网页banner是指网页中的广告。它可以分为横幅广告、通栏广告、弹出窗口广告、擎天柱广告、按钮广告、画中画广告、漂浮广告、文字链接广告、隐藏页面广告、播放式广告等。,横幅广告：,49060,像素或者,23330,像素。可静态，可动态，可多帧拼接的动画形式。,通栏广告：通常在顶端或中间等显著位置。横贯页面。尺寸大，世界冲击力强，适合信息发布、产品推广、庆典活动等。,弹出式广告：访问者在进入该页面之前，就抢先以大尺寸弹出的形式将相关广告信息推荐给浏览者。,擎天柱广告：利用网站页面左右两侧的竖式广告位置而设计的广告形式。他可以形象表现广告的宣传，是一种新型的广告形式，通常用程序控制,按钮广告：尺寸较小，有,12060,像素，,9040,像素、,4020,像素位置灵活,画中画广告：镶嵌在文字信息中的一种广告形式一般大小为,360300,像素，可以为,360409,像素。一般为动态、声音结合。,漂浮广告：随页面浏览上下移动,文字链接广告,隐藏页面广告,播放时广告,（2）Banner的设计原则,文字编排简洁、和谐：间距、字体、数量、颜色与背景色。与内容相符。避免字体和文字样式的单一。,内容醒目、美观，视觉效果好：制作特殊，富有冲击力的效果,广告内容的方向正确：字体排列方式要符合人们的阅读习惯，避免顺序杂乱。,激起点击的欲望：设计富有乐趣，现实网站品质,适当的留空，避开广告条的边缘，文字的旁边要留有一定的空间，让图形和文字呼吸。使他们更明显,3.导航设计,导航的含义和表现形式：网页的目录，网页之间的联系和分类通过它来实现。应该放在页面的醒目位置，让浏览者第一时间看到。,通常分为：,1.文字导航：纯文字构成，简洁、清爽、容量小,2.图像导航：美观、大方，字体选用不受限制,3.交替图像导航：当鼠标放在导航上，图像发生变化，移开时还原,4.下拉菜单导航：比较节省空间，可以包含很多链接,5.Flash导航：体积小，表现形式多样、视觉冲击力强,导航设计原则：,1.文字设计的含义和表现形式：对文字进行有趣的修饰增强视觉效果。提高文本吸引力（标题、文字信息、文字链接）,2.文字设计原则：有一个整体的基调，注重文字的可读性，适应人们的阅读习惯，考虑文字的外形特征，建议使用默认字体，注重留白的作用,5.图像设计,图像的含义和表现形式：插图、照片、背景图、标题和链接按钮,插图和照片突出网页的主题。,背景图可以用作网页的背景，以图为背景来衬托主题。可以增加层次感。,用图像做标题是标题鲜明，增强视觉效果。,小图像做文字链接按钮，使网页更为生动,图像设计的原则：,精简原则，图像不能出现的太多。,内容恰当，明确主题，透彻内容，选取最具代表力与说服力的图片。,颜色协调，图像的色调要与整个网页的主色调协调一致。为主题服务，不能喧宾夺主。有修饰、美化版面的作用，使整个网页的色调趋向一致。,风格吻合，图像的意境、风格要与网页的主题内容保持氛围、情感上的一致。,布局合理，放在合适的位置上，避免阻碍网民视线，造成视觉混乱。不宜放置过多。与文字排版随机组成，合理利用平面空间。,6.网页动画设计,动画的含义和表现形式：网页中最吸引人的元素。很强的视觉冲击力。,动画设计原则：,内容与形式相统一,多选择常识性信息符号,动画时间控制合适,为网页整体服务,较小的动画文件,任务实现,首页头部元素：,Logo,、导航、,Banner,首页版面元素,首页框架的丰满,内页的设计,任务4 网站造型元素设计,点、线、面是最基本的造型元素。如何在网页界面中经营和组织好点、线、面，时期传达出特定的形式感。,综合运用造型元素知识设计出气氛浓郁、气质独特、气势磅礴的网页作品。,任务5 网站形式美设计,网站在满足网页功能需要的前提下，需要有针对性地采用一些美的形式。美的形式规律同现代的网页设计的具体问题相结合起来，会使网页更加有生气，更吸引人。,知识要点,点：在网页中，一个,Logo,、一个按钮、一个文字都可以视为点，具有形状、方向、大小等属性。点的概念是相对的，是与周围视觉元素相比较而言生成的。分为规则和不规则两种。视觉上相对的小，起到点睛的作用；创造出不同的视觉效果。,线：几个按钮、几个文字的排列可以形成线。存在于物体的边缘、形与形的交接处、点与点之间。具有方向性和长度，同时也具有粗细宽窄以及各种形态变化。分为直线和曲线，不同的线带给人不同的感觉。分割页面，表示方向、位置、长短、宽度、形状、质量和情绪。装饰性，形成错落有致的秩序美。,面：有长度、宽度，无厚度、实体的表面。具有一定的形状。分为几何形、有机形、偶然形等。,其他造型元素：空白、空间、肌理,知识要点,1.统一和变化：在网页设计中运用统一与变化的规律是处理形象和组织的对立统一过程。使网页丰富而有生气，整体感强的同时又有变化。,2.条理与反复：使网页有秩序美，变化中统一。演化出多种多样图形的变化,3.对比与调和：文本编辑、字体大小、字体粗细、字体颜色、图片宽窄、比例反差、透明度大小、位置的放置。,4.对称与均衡：对称网页设计稳定、庄严、整齐、秩序、安宁、沉静。均衡揭示了形式内在的、含蓄的秩序和平衡，体现了造型动静结合 的动态美。呼应关系和起承关系。,5.节奏与规律：按钮的编排经常遇到这个问题。形象鲜明、形式独特，表达轻松、优雅的情感，使网页界面产生不可思议的活力与魅力。,任务实现,1.构思,2.勾勒首页结构图,3.背景设计,4.首页头部元素设计,5.导航设计,6.首页场景设计,7.首页内容区块设计,8.首页底部元素设计,9.首页效果图,10.勾勒内页结构图,11.内页内容区块设计,12.内页底部元素设计,13.内页效果图,14.其他内页效果图,作业：,按照项目一和项目二所学的内容，将设计的避暑山庄网站框架图进行丰富，完成页面元素的设计。,要求完成首页、旅游资讯的内页，并选择山庄72景中的一到三个进行图片、信息内容及页面的设计和混排。,要求：3月25日之前统一发到邮箱,