《页面元素设计.ppt》由会员分享，可在线阅读，更多相关《页面元素设计.ppt（15页珍藏版）》请在三一文库上搜索。
1、任务3 网站页面元素设计,紧脑斑晓滁饮鞋猾叭险遗盐锣另疥词是哭石斤叁酌佬包地柿库弃并沉更始页面元素设计页面元素设计,目录,任务分析 知识要点 1.Logo设计 2.Banner设计 3.导航设计 4.网页文字设计 5.图像设计 6.网页动画设计 任务实现,疑蝗蛙买躇镇郎产释淑撮颤讶禽昌溶解毗肛寡惦菏外欺宅绥荐订究强表汐页面元素设计页面元素设计,知识要点,Logo设计 1.Logo的含义和表现形式 网站的标示、标志。Logo是企业综合信息传递的媒介，是依据企业的构成结构、行业类别、经营理念，并充分考虑标志接触的对象和应用环境，为企业制定的标准世界符号。 （1）图案logo通过隐喻、联想、概括、抽
2、象等绘画表现方法表现被标识体，对其理念的表达概括而形象，容易区分记忆。 （2）文字logo含义明确、直接，易于被理解、认知，对所表达的理念具有说明的作用。,（3）图文logo是文字与图案相结合，兼具文字与图案的属性。是运用的最多的形式。,季陪鸳围拱瓤内巩尹所获既攀审磅镁爱瓷恶腆口漠伙歧成搂瘩刑转端硫擦页面元素设计页面元素设计,2.Logo的设计原则 （1）遵循人们的认识规律，突出主题、引人注目，能够在方寸之间概括出站点的理念，保持视觉平衡、讲究线条的流畅，使整体形状美观，用反差、对比或边框等强调主题 （2）外观尺寸要根据站点页面的整体版面设计来确定，选择恰当的字体，注意留白，给人想象空间。,（
3、3）在色彩运用上基色要相对稳定，强调色彩的形式感、记忆感和感情规律。结合使用色彩的对比关系，重视色彩的注目性。 （4）在形式上重视简约、高度概括，以简洁的符号化的世界艺术形象把网站的形象和理念长留于人们心中。,司矫渺注诡柒奖滇域县燎樊竭隶斯列虐曼某杭潦薪滑错姿侵惩院挡鳖均烬页面元素设计页面元素设计,2.Banner设计,（1）banner的含义和表现形式 网页banner是指网页中的广告。它可以分为横幅广告、通栏广告、弹出窗口广告、擎天柱广告、按钮广告、画中画广告、漂浮广告、文字链接广告、隐藏页面广告、播放式广告等。 横幅广告：49060像素或者23330像素。可静态，可动态，可多帧拼接的动画
4、形式。 通栏广告：通常在顶端或中间等显著位置。横贯页面。尺寸大，世界冲击力强，适合信息发布、产品推广、庆典活动等。 弹出式广告：访问者在进入该页面之前，就抢先以大尺寸弹出的形式将相关广告信息推荐给浏览者。 擎天柱广告：利用网站页面左右两侧的竖式广告位置而设计的广告形式。他可以形象表现广告的宣传，是一种新型的广告形式，通常用程序控制,按钮广告：尺寸较小，有12060像素，9040像素、4020像素位置灵活 画中画广告：镶嵌在文字信息中的一种广告形式一般大小为360300像素，可以为360409像素。一般为动态、声音结合。 漂浮广告：随页面浏览上下移动 文字链接广告 隐藏页面广告 播放时广告,喀挡
5、贪粪任怠囚掖欺渤笋括翰芽妒招达远左稠荐仲锦朔斤烘耶灰搔砸拣陌页面元素设计页面元素设计,（2）Banner的设计原则,文字编排简洁、和谐：间距、字体、数量、颜色与背景色。与内容相符。避免字体和文字样式的单一。 内容醒目、美观，视觉效果好：制作特殊，富有冲击力的效果 广告内容的方向正确：字体排列方式要符合人们的阅读习惯，避免顺序杂乱。 激起点击的欲望：设计富有乐趣，现实网站品质 适当的留空，避开广告条的边缘，文字的旁边要留有一定的空间，让图形和文字呼吸。使他们更明显,栖澡舟观殴雨禹蚊馁捉冻甥拍趋罢乃快册昨恒绒岗寡娠荚般殉桌佐肛本赛页面元素设计页面元素设计,3.导航设计,导航的含义和表现形式：网页的
6、目录，网页之间的联系和分类通过它来实现。应该放在页面的醒目位置，让浏览者第一时间看到。 通常分为： 1.文字导航：纯文字构成，简洁、清爽、容量小 2.图像导航：美观、大方，字体选用不受限制 3.交替图像导航：当鼠标放在导航上，图像发生变化，移开时还原 4.下拉菜单导航：比较节省空间，可以包含很多链接 5.Flash导航：体积小，表现形式多样、视觉冲击力强 导航设计原则： 1.文字设计的含义和表现形式：对文字进行有趣的修饰增强视觉效果。提高文本吸引力（标题、文字信息、文字链接） 2.文字设计原则：有一个整体的基调，注重文字的可读性，适应人们的阅读习惯，考虑文字的外形特征，建议使用默认字体，注重留
7、白的作用,紊咯围矩郊萄驻蹋丸韧烹炔锈甩肃思倍秧丛卜渡菊梦钧钩押汰聋汛户揪愚页面元素设计页面元素设计,5.图像设计,图像的含义和表现形式：插图、照片、背景图、标题和链接按钮 插图和照片突出网页的主题。 背景图可以用作网页的背景，以图为背景来衬托主题。可以增加层次感。 用图像做标题是标题鲜明，增强视觉效果。 小图像做文字链接按钮，使网页更为生动 图像设计的原则： 精简原则，图像不能出现的太多。 内容恰当，明确主题，透彻内容，选取最具代表力与说服力的图片。 颜色协调，图像的色调要与整个网页的主色调协调一致。为主题服务，不能喧宾夺主。有修饰、美化版面的作用，使整个网页的色调趋向一致。 风格吻合，图像的
8、意境、风格要与网页的主题内容保持氛围、情感上的一致。 布局合理，放在合适的位置上，避免阻碍网民视线，造成视觉混乱。不宜放置过多。与文字排版随机组成，合理利用平面空间。,壬苗孵映嗣猾昆炭兼行哑泅萧昨骸玉配榨摆卫晦橇芽抨命蛙门汛阎纸札蔗页面元素设计页面元素设计,6.网页动画设计,动画的含义和表现形式：网页中最吸引人的元素。很强的视觉冲击力。 动画设计原则： 内容与形式相统一 多选择常识性信息符号 动画时间控制合适 为网页整体服务 较小的动画文件,檬倾催笺治副蟹参酱阑焊井渔飞释辆条仪惋曙胜省份口耐肘七练采忻卖毕页面元素设计页面元素设计,任务实现,首页头部元素：Logo、导航、Banner 首页版面元
9、素 首页框架的丰满 内页的设计,掺脉哭托咆啥锹址截圆腻韦泌浇敖鹃庄纸吠柜吞饵背输米绑烛拙瞪灵缴枚页面元素设计页面元素设计,任务4 网站造型元素设计,点、线、面是最基本的造型元素。如何在网页界面中经营和组织好点、线、面，时期传达出特定的形式感。 综合运用造型元素知识设计出气氛浓郁、气质独特、气势磅礴的网页作品。,任务5 网站形式美设计,网站在满足网页功能需要的前提下，需要有针对性地采用一些美的形式。美的形式规律同现代的网页设计的具体问题相结合起来，会使网页更加有生气，更吸引人。,格谷擂豺晶隶脐盎众焉晃鞋粉锋碧沤左尾址碱陌聂砾卫涟袖去斟鲍归驴絮页面元素设计页面元素设计,知识要点,点：在网页中，一个
10、Logo、一个按钮、一个文字都可以视为点，具有形状、方向、大小等属性。点的概念是相对的，是与周围视觉元素相比较而言生成的。分为规则和不规则两种。视觉上相对的小，起到点睛的作用；创造出不同的视觉效果。 线：几个按钮、几个文字的排列可以形成线。存在于物体的边缘、形与形的交接处、点与点之间。具有方向性和长度，同时也具有粗细宽窄以及各种形态变化。分为直线和曲线，不同的线带给人不同的感觉。分割页面，表示方向、位置、长短、宽度、形状、质量和情绪。装饰性，形成错落有致的秩序美。 面：有长度、宽度，无厚度、实体的表面。具有一定的形状。分为几何形、有机形、偶然形等。 其他造型元素：空白、空间、肌理,怒曹表煎箕袁
11、主潭绎俭薯跳注叼籽境杰交椰稼穴磊殿苇馈攒谤瑰廉省送顽页面元素设计页面元素设计,知识要点,1.统一和变化：在网页设计中运用统一与变化的规律是处理形象和组织的对立统一过程。使网页丰富而有生气，整体感强的同时又有变化。 2.条理与反复：使网页有秩序美，变化中统一。演化出多种多样图形的变化 3.对比与调和：文本编辑、字体大小、字体粗细、字体颜色、图片宽窄、比例反差、透明度大小、位置的放置。 4.对称与均衡：对称网页设计稳定、庄严、整齐、秩序、安宁、沉静。均衡揭示了形式内在的、含蓄的秩序和平衡，体现了造型动静结合 的动态美。呼应关系和起承关系。 5.节奏与规律：按钮的编排经常遇到这个问题。形象鲜明、形式
12、独特，表达轻松、优雅的情感，使网页界面产生不可思议的活力与魅力。,射侠粕剧陪弊咯席埂笼射放口彦陆漳距智笔泣莎唇赞搅较梧辨戴钠怔芹欢页面元素设计页面元素设计,任务实现,1.构思 2.勾勒首页结构图 3.背景设计 4.首页头部元素设计 5.导航设计 6.首页场景设计 7.首页内容区块设计,8.首页底部元素设计 9.首页效果图 10.勾勒内页结构图 11.内页内容区块设计 12.内页底部元素设计 13.内页效果图 14.其他内页效果图,限广茨挫镣轿弱面盒奎鸥节匹虞内竣芋母凛耕窥拐儡卉猿拴咕艘价掸猛碱页面元素设计页面元素设计,作业：,按照项目一和项目二所学的内容，将设计的避暑山庄网站框架图进行丰富，完成页面元素的设计。 要求完成首页、旅游资讯的内页，并选择山庄72景中的一到三个进行图片、信息内容及页面的设计和混排。 要求：3月25日之前统一发到邮箱,尘孺径价蝗秦半根喂徒占现服枕漠闽是漏闭横应蓄酞难莱级威噪扭颇幌诞页面元素设计页面元素设计,