浅谈网页设计.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,浅谈,By Margaret,网页设计,1,基本元素,基本规范,参考指南,案例欣赏,目 录,2,基本元素,3,基本规范,1.,网页基本宽度,有效可视区域（单位：,Px,）,屏幕,一,二,三,800,600,1024,768,1280,1024,IE6.0,779,（,+21,）,432,（,+168,）,1003,（,+21,）,600,（,+168,）,1259,（,+21,）,856,（,+168,）,IE7.0,779,（,+21,）,452,（,+148,）,1003,（,+21,）,620,（,+148,）,1259,（,+21,）,876,（,+148,）,Firefox2.0,783(+17),417(+183),1007(+17),585(+183),1263(+17),841(+183),Opera9.0,781(+19),461(+139),1005(+19),629(+139),1261(+19),885(+139),保守,设置（,1024x768,台式电脑,&,平板电脑）：,960px,一般,设置（,1280 x800,、,1366x768,笔记本）：,1000px,大屏,设置（分辨率大于,1280 x800,）：,1200px,案例：淘宝（,1000px,），京东（,1210px,），花瓣（,1407px,）,4,基本规范,2.,文字,&,文本规范,总体原则：提高文字的辨识性和页面的易读性,文字大小：,建议使用,12,号,+14,号字体的混合搭配，,13,号也可酌情考虑，因为,13,号字体的不对称性，目前非主流。,需突出的内容部分、新闻标题、栏目标题等多使用,14,号字体,广告内容、辅助信息或介绍性文字等多使用,12,号字体,避免大面积使用加粗字体,特别注意：,菜单尽量不使用,12,号加粗，这样会导致复杂的文字难以辨认。多采用,14,号加粗,5,基本规范,2.,文字,&,文本规范,总体原则：提高文字的辨识性和页面的易读性,2,文字颜色：,同一网站需要定出主文字颜色，特殊情况下可以有,2,种左右的辅助文字颜色,一般情况下字体变化不要超过三种，若有需要，可以尽量采用统一字体的不同字族。,正文的文字颜色多采用深蓝色或深灰色,。,当使用其他颜色作为正文主色调时，安全起见可采用明度数值（,B）,不大于,30%,的,颜色,建议使用：,6,基本规范,2.,文字,&,文本规范,总体原则：提高文字的辨识性和页面的易读性,4.,字体的选择,中文字体：宋体，微软雅黑，幼圆,英文字体：,Arial(,比例及字重（,weight,）和,Helvetica,极之相近,;,没有下划线贴边的问题；,Q,字没尾巴；字高整齐,),7,基本规范,2.,文字,&,文本规范,总体原则：提高文字的辨识性和页面的易读性,5,文字链接：,文字链接形式不得超过,3,种颜色（规定其中一种为主链接色）。,显性链接：,大面积链接的网站，比如门户首页、内容列表页。多采取灰黑色、蓝色做全篇的链接色，默认时不显示下划线，光标经过时才显示下划线。,隐性链接：,对于混杂在页面文字中零散出现的文字链接，为了便于识别，默认时候可以出现下划线或使用辅助链接色，光标经过的时候，样式不变。,8,基本规范,2.,文字,&,文本规范,总体原则：提高文字的辨识性和页面的易读性,6,对齐,网页设计中的,”,对齐,”,同传统的印刷排版中的对齐概念是一样的，并且同等重要。,并不是说一切都应该在一条直线上，而是尽可能的保持一贯的整齐，不仅左对齐，也要尽量右对齐,。,首页,上摘要无须空格,。,内容正文应该空两格,。,“豆腐块”,四周应该空留均匀适当的,间隔,9,基本规范,3.,模块化表现,总体原则：同一个网站采用的模块化表现应该是全部统一的。,模块化的几类参考表现：,单线,3-5,个像素的圆角,内边修饰,10,基本规范,4.,页脚信息,页脚信息按照从上到下的排列次序为,:,1、,内部导航,2、,外部导航,3、,各类许可证、授权声明,4、,英文版权信息,“Copyright”,5、,中文版权信息,6、,各类网络安全,/,工商证明,/,技术支持,LOGO,各链接间隔统一使用,”|”,建议采用,12,号字，,禁止使用加粗字体,11,基本规范,5.,搜索框设计规范,文本框,a.,搜索框文本框的长度应适中，至少应提供显示,10,个中文字符的宽度,b.,搜索组件中使用的文本框必须为单行文本框,c.,高度不得低于,18,个像素,帮助信息,限定标签提示、标示性文字、热门关键词提示,搜索按钮,a.,搜索按钮一般包含图标形式和文字形式两种,b.,使用图标形式时只能使用放大镜的图标，而不能采用其他元素。,文字形式：,搭配使用：,图形形式：,12,基本规范,6.,广告设计规范,禁止模仿任何,windows,标准控件，,windows,标准控件包括但不限于：鼠标指针、按钮以及窗口控制按钮等。,不要使用按钮作长句广告,13,参考指南,1.,网页基本版面设计类型,一、骨骼型,骨骼型是一种规范的理性的分割方法。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。一般以竖向分栏为多。在图片和文字的编排上 则严格按照骨骼比例进行编排配置，给人以严谨、和谐、理性的美。骨骼经过相互混合后的版式，既理性、条理，又活泼而具弹性。,14,参考指南,1.,网页基本版面设计类型,二、满版型,版面以图象充满整版，主要以图象为诉求，视觉传达直观而强烈。文字的配置压置在上下、左右或中部的图象上。满版型给人以大方、舒展的感觉，是商品广告常用的形式。,15,参考指南,1.,网页基本版面设计类型,三、上下分割型,把整个版面分为上下两个部分，在上半部或下半部配置图片，另一部分则配置文案。配置有图片的部分感性而有活力，而文案部分则理性而静止。上下部分配置的图片可以是一幅或多幅。,16,参考指南,1.,网页基本版面设计类型,四、左右分割型,把整个版面分割为左右两个部分，分别在左或右配置文案。当左右两部分形成强弱对比时，则造成视觉心理的不平衡。这仅仅是视觉习惯上的问题，也自然不如上下分割的视觉流程自然。不过，倘若将分割线虚化处理，或用文字进行左右重复或穿插，左右图文则变得自然和谐。,17,参考指南,1.,网页基本版面设计类型,五、中轴型,将图形做水平或垂直方向的排列，文案以上下或左右配置。水平排列的版面给人稳定、安静、和平与含蓄之感。垂直排列的版面给人强烈的动感。,18,参考指南,1.,网页基本版面设计类型,六、曲线型,图片或文字在版面结构上作曲线的编排构成，产生节奏和韵律。,19,参考指南,1.,网页基本版面设计类型,七、倾斜型,版面主体形象或多幅图版做倾斜编排，造成版面强烈的动感和不稳定因素，引人注目。,20,参考指南,1.,网页基本版面设计类型,八、对称型,对称的版式给人稳定、庄重理性的感觉。对称有绝对对称和相对对称。一般多采用相对对称。以避免过于严谨。对称一般以相对对称居多。,21,参考指南,1.,网页基本版面设计类型,九、中心型,重心有三种概念。,1,、直接以独立而轮廓分明的形象占据版面中心。,2,、向心：视觉元素向版面中心聚拢的运动。,3,、离心：犹如将石子投入水中，产生一圈圈向外扩散的弧线运动。重心型版式产生视觉焦点，使强烈而突出。,22,参考指南,1.,网页基本版面设计类型,十、三角形,在圆形、四方形、三角形等基本形态中，正三角形（金字塔形）是最具安全稳定因素的形态，而圆形和倒三角形则给人以动感和不稳定感。,23,参考指南,1.,网页基本版面设计类型,十一、并置形,将相同或不同的图片作大小相同而位置不同的重复排列。并置构成的版面有比较、说解的意味，给予原本复杂喧嚣的版面以次序、安静、调和与节奏感。,24,参考指南,1.,网页基本版面设计类型,十二、自由型,自由行结构是无规律的、随意的编排构成，有活泼、轻快之感。,25,参考指南,2.,网页配色,色彩的三要素,色相：,明度：,纯度：,26,参考指南,2.,网页配色,配色方法,选出主色和辅助色,根据网站功能、面向对象确定网站格调,根据格调确定主色和辅助色,改变主色和辅助色的明度和纯度，丰富色彩,配合不同明度纯度的黑白灰作为补充色,在小范围内选取与主色对比大的颜色作为强调色,27,参考指南,2.,网页配色,对比原则,色相对比（主色与辅助色、强调色对比）,明暗对比,面积对比,28,参考指南,2.,网页配色,对比调整,对比恰当,对比过强,减弱对比,增加隔阂,分离元素,对比过弱,对比浑浊,加大对比,增加隔阂,分离元素,29,参考指南,2.,网页配色,根据主题选择蓝色调，页面整体清爽简洁。,色,单色搭配,30,色彩丰富协调，橙色、黄色区块醒目不突兀,色,类似色搭配,参考指南,2.,网页配色,31,参考指南,2.,网页配色,色彩丰富，色相对比强烈；橙色、黄色区块醒目,补色搭配,32,参考指南,2.,网页配色,以红色为主色调的暖色能够增加食欲，在绿色的搭配下使中间的产品更加突出,分裂补色搭配,33,参考指南,2.,网页配色,原色搭配,34,参考指南,3.,网页风格,版面式,大幅图片,Web2.0,Metro&,扁平化,个性化,35,案例分析,谢！,浅谈,By,邱爽,网页设计,37,