浅谈网页设计教学内容

浅谈(qiǎntán)ByMargaret网页(wǎnɡyè)设计第一页，共37页。基本元素(yuánsù)基本规范参考指南案例欣赏目录第二页，共37页。基本(jīběn)元素第三页，共37页。基本(jīběn)规范1.网页(wǎnɡyè)基本宽度有效可视区域（单位：Px）屏幕一二三800600102476812801024IE6.0779（+21）432（+168）1003（+21）600（+168）1259（+21）856（+168）IE7.0779（+21）452（+148）1003（+21）620（+148）1259（+21）876（+148）Firefox2.0783(+17)417(+183)1007(+17)585(+183)1263(+17)841(+183)Opera9.0781(+19)461(+139)1005(+19)629(+139)1261(+19)885(+139)保守设置(shèzhì)（1024x768台式电脑&平板电脑）：960px一般设置(shèzhì)（1280x800、1366x768笔记本）：1000px大屏设置(shèzhì)（分辨率大于1280x800）：1200px案例：淘宝（1000px），京东（1210px），花瓣（1407px）第四页，共37页。基本(jīběn)规范2.文字(wénzì)&文本规范总体原则：提高(tígāo)文字的辨识性和页面的易读性文字大小：建议使用12号+14号字体的混合搭配，13号也可酌情考虑，因为13号字体的不对称性，目前非主流。需突出的内容部分、新闻标题、栏目标题等多使用14号字体广告内容、辅助信息或介绍性文字等多使用12号字体

避免大面积使用加粗字体特别注意：菜单尽量不使用12号加粗，这样会导致复杂的文字难以辨认。多采用14号加粗第五页，共37页。基本(jīběn)规范2.文字(wénzì)&文本规范总体原则：提高文字的辨识(biànshí)性和页面的易读性2．文字颜色：同一网站需要定出主文字颜色，特殊情况下可以有2种左右的辅助文字颜色

一般情况下字体变化不要超过三种，若有需要，可以尽量采用统一字体的不同字族。正文的文字颜色多采用深蓝色或深灰色。当使用其他颜色作为正文主色调时，安全起见可采用明度数值（B）不大于30%的颜色建议使用：第六页，共37页。基本(jīběn)规范2.文字(wénzì)&文本规范总体(zǒngtǐ)原则：提高文字的辨识性和页面的易读性4.字体的选择中文字体：宋体，微软雅黑，幼圆英文字体：

Arial(比例及字重（weight）和Helvetica极之相近;没有下划线贴边的问题；Q字没尾巴；字高整齐)第七页，共37页。基本(jīběn)规范2.文字&文本(wénběn)规范总体原则：提高(tígāo)文字的辨识性和页面的易读性5．文字链接：文字链接形式不得超过3种颜色（规定其中一种为主链接色）。显性链接：大面积链接的网站，比如门户首页、内容列表页。多采取灰黑色、蓝色做全篇的链接色，默认时不显示下划线，光标经过时才显示下划线。隐性链接：对于混杂在页面文字中零散出现的文字链接，为了便于识别，默认时候可以出现下划线或使用辅助链接色，光标经过的时候，样式不变。第八页，共37页。基本(jīběn)规范2.文字&文本(wénběn)规范总体原则：提高(tígāo)文字的辨识性和页面的易读性6．对齐网页设计中的”对齐”同传统的印刷排版中的对齐概念是一样的，并且同等重要。并不是说一切都应该在一条直线上，而是尽可能的保持一贯的整齐，不仅左对齐，也要尽量右对齐。首页上摘要无须空格。内容正文应该空两格。“豆腐块”四周应该空留均匀适当的间隔第九页，共37页。基本(jīběn)规范3.模块化表现(biǎoxiàn)总体原则：同一个网站采用的模块化表现应该是全部(quánbù)统一的。模块化的几类参考表现：单线

3-5个像素的圆角内边修饰第十页，共37页。基本(jīběn)规范4.页脚信息(xìnxī)页脚信息按照从上到下的排列次序为:1、内部导航2、外部导航3、各类许可证、授权声明4、英文版权信息“Copyright©”5、中文版权信息6、各类网络安全/工商证明/技术支持LOGO各链接间隔统一使用”|”建议采用(cǎiyòng)12号字，禁止使用加粗字体第十一页，共37页。基本(jīběn)规范5.搜索(sōusuǒ)框设计规范文本框a.搜索框文本框的长度应适中，至少应提供显示10个中文字符的宽度b.搜索组件中使用的文本框必须为单行文本框c.高度不得低于18个像素帮助信息限定标签提示、标示性文字、热门(rèmén)关键词提示搜索按钮a.搜索按钮一般包含图标形式和文字形式两种b.使用图标形式时只能使用放大镜的图标，而不能采用其他元素。文字形式：搭配使用：图形形式：

第十二页，共37页。基本(jīběn)规范6.广告设计规范(guīfàn)禁止模仿任何windows标准控件，windows标准控件包括但不限于：鼠标指针、按钮以及(yǐjí)窗口控制按钮等。不要使用按钮作长句广告第十三页，共37页。参考(cānkǎo)指南1.网页基本(jīběn)版面设计类型一、骨骼型骨骼型是一种规范的理性的分割方法。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向(hénɡxiànɡ)通栏、双栏、三栏和四栏等。一般以竖向分栏为多。在图片和文字的编排上则严格按照骨骼比例进行编排配置，给人以严谨、和谐、理性的美。骨骼经过相互混合后的版式，既理性、条理，又活泼而具弹性。第十四页，共37页。参考(cānkǎo)指南1.网页(wǎnɡyè)基本版面设计类型二、满版型版面以图象充满整版，主要以图象为诉求，视觉传达直观而强烈。文字的配置压置在上下、左右或中部的图象上。满版型给人以大方、舒展的感觉(gǎnjué)，是商品广告常用的形式。第十五页，共37页。参考(cānkǎo)指南1.网页基本(jīběn)版面设计类型三、上下分割型把整个版面分为上下两个部分，在上半部或下半部配置图片，另一部分则配置文案。配置有图片的部分感性而有活力，而文案部分则理性而静止。上下部分配置的图片可以(kěyǐ)是一幅或多幅。第十六页，共37页。参考(cānkǎo)指南1.网页(wǎnɡyè)基本版面设计类型四、左右分割型把整个版面分割为左右两个部分，分别在左或右配置文案。当左右两部分形成强弱对比时，则造成视觉心理的不平衡。这仅仅是视觉习惯上的问题，也自然不如上下分割的视觉流程自然。不过，倘若将分割线虚化处理，或用文字进行左右重复或穿插(chuānchā)，左右图文则变得自然和谐。第十七页，共37页。参考(cānkǎo)指南1.网页基本(jīběn)版面设计类型五、中轴型将图形做水平或垂直方向的排列，文案以上下或左右配置。水平排列的版面给人稳定(wěndìng)、安静、和平与含蓄之感。垂直排列的版面给人强烈的动感。第十八页，共37页。参考(cānkǎo)指南1.网页(wǎnɡyè)基本版面设计类型六、曲线型图片或文字在版面结构上作曲线的编排构成，产生(chǎnshēng)节奏和韵律。第十九页，共37页。参考(cānkǎo)指南1.网页(wǎnɡyè)基本版面设计类型七、倾斜型版面主体形象或多幅图版做倾斜编排，造成版面强烈的动感和不稳定(wěndìng)因素，引人注目。第二十页，共37页。参考(cānkǎo)指南1.网页(wǎnɡyè)基本版面设计类型八、对称(duìchèn)型对称(duìchèn)的版式给人稳定、庄重理性的感觉。对称(duìchèn)有绝对对称(duìchèn)和相对对称(duìchèn)。一般多采用相对对称(duìchèn)。以避免过于严谨。对称(duìchèn)一般以相对对称(duìchèn)居多。第二十一页，共37页。参考(cānkǎo)指南1.网页基本(jīběn)版面设计类型九、中心型重心有三种概念。1、直接以独立(dúlì)而轮廓分明的形象占据版面中心。2、向心：视觉元素向版面中心聚拢的运动。3、离心：犹如将石子投入水中，产生一圈圈向外扩散的弧线运动。重心型版式产生视觉焦点，使强烈而突出。第二十二页，共37页。参考(cānkǎo)指南1.网页(wǎnɡyè)基本版面设计类型十、三角形在圆形、四方形、三角形等基本(jīběn)形态中，正三角形（金字塔形）是最具安全稳定因素的形态，而圆形和倒三角形则给人以动感和不稳定感。第二十三页，共37页。参考(cānkǎo)指南1.网页基本(jīběn)版面设计类型十一、并置形将相同(xiānɡtónɡ)或不同的图片作大小相同(xiānɡtónɡ)而位置不同的重复排列。并置构成的版面有比较、说解的意味，给予原本复杂喧嚣的版面以次序、安静、调和与节奏感。第二十四页，共37页。参考(cānkǎo)指南1.网页基本(jīběn)版面设计类型十二、自由型自由行结构(jiégòu)是无规律的、随意的编排构成，有活泼、轻快之感。第二十五页，共37页。参考(cānkǎo)指南2.网页(wǎnɡyè)配色色彩(sècǎi)的三要素色相：明度：纯度：第二十六页，共37页。参考(cānkǎo)指南2.网页(wǎnɡyè)配色配色(pèisè)方法选出主色和辅助色根据网站功能、面向对象确定网站格调根据格调确定主色和辅助色改变主色和辅助色的明度和纯度，丰富色彩配合不同明度纯度的黑白灰作为补充色在小范围内选取与主色对比大的颜色作为强调色第二十七页，共37页。参考(cānkǎo)指南2.网页(wǎnɡyè)配色对比(duìbǐ)原则色相对比（主色与辅助色、强调色对比）明暗对比面积对比第二十八页，共37页。参考(cānkǎo)指南2.网页(wǎnɡyè)配色对比(duìbǐ)调整对比恰当对比过强减弱对比增加隔阂分离元素对比过弱对比浑浊加大对比增加隔阂分离元素第二十九页，共37页。参考(cānkǎo)指南2.网页(wǎnɡyè)配色

根据主题(zhǔtí)选择蓝色调，页面整体清爽简洁。色

单色搭配第三十页，共37页。

色彩丰富协调，橙色、黄色区块醒目(xǐngmù)不突兀色

类似(lèisì)色搭配参考(cānkǎo)指南2.网页配色第三十一页，共37页。参考(cānkǎo)指南2.网页(wǎnɡyè)配色

色彩丰富(fēngfù)，色相对比强烈；橙色、黄色区块醒目

补色搭配第三十二页，共37页。参考(cānkǎo)指南2.网页(wǎnɡyè)配色

以红色为主色调的暖色能够增加食欲，在绿色(lǜsè