网页—分类—布局—色彩.docxVIP

网站策划-（网站类型-网站导航-网站风格-网站功能-网页布局）-网页效果设计图 一.网站布局特点 1.资讯类网站 布局特点：以发布信息为主要目的。页面信息量大，页面高度较长，布局以3-4栏为主，页面高度接近10屏左右，重要信息放置顶部。导航排在页面上部。左右两列是功能区和附加信息区，中间位主要信息和重要信息显示区。 页面内容以文字为主，图像较少，多以敏感的新闻图片吸引访问者。 色彩特点：政策法规类资讯网配色以灰色、红色、黄色。体现庄重、严谨、大气。 娱乐资讯类配色上以动、时尚的颜色为主：蓝色、绿色、洋红和紫色。 例：人民网、雅虎网 2.电子商务类网站 布局特点：以实现交易为目的，以订单为中心。必须实现商品展示、订单生成以及订单执行。页面包含产品分类提供搜索功能多采用2-3栏的布局给人开放、大气的感觉。导航以搜索为主横排在页面上部，左右两侧一般为内容区和产品分类区。产品展示多以图片和文字结合体现产品的说服力，搜索、注册和登录等模块应放置于页面最醒目的位置。 色彩特点：电子商务了网站图片较多，本身色彩已经非常丰富配上上应尽量简单，配色多以动感活力为主：蓝色、洋红、橙色、青色和黄色等。 例：阿里巴巴网、易趣网 3.互动游戏网站 布局特点：此类网站一般分为游戏的官方网站和在线游戏网站，面对人群年纪较轻页面设计以大量的图片、flash动画增强视冲击布局以图像或flash为主的静态布局和静态分栏相结合的布局，静态布局页面信息与背景融为一体类似平面出版物创意设计，布局相对比较自由。静态、分栏结合布局在体现静态视觉效果之后又具有分栏布局信息清晰的特点。 色彩特点：游戏类网站主要针对人群年纪较轻，配色大多以活力、时尚颜色为主。一般会以一种颜色为主调，配合红色、黄色等明度较高的颜色进行强烈对比让访问者过目不忘 例：天堂2、devil may cry4 4.教育类网站 布局特点：与资讯类网站相似以提供教育咨资讯为主。部分针对学校本身宣传或提供在线教学。对于教育机构网站多以静态分栏相结合为主，对于提供在线教学功能网站多以分栏布局为主。 色彩特点：教育类网站是为学生服务在配色上主要体现轻松气息-蓝色、绿色等，并且颜色明度较高，同时要考虑不同年龄层次。 5.功能性网站： 布局特点：百度、Google、网址之家是其主要代表，主要功能是提供互联网网址导航。布局简单搜索框和按钮占据页面绝对重要位置。页面设计尽量简没有广告、图片。页面文字、下载速度功能实用、信息提示与布局清晰都是页面布局所需考虑。在视觉设计中提高用户对网站的感情和粘合度。 色彩特点：功能性网站色彩搭配要求不花哨，没有特别鲜明的色彩。多以白色、单色，平和协调。 6.综合性网站 布局特点：综合性网站共同特点是提供两种以上典型的服务布局主要以分栏为主，和资讯类网站相似。栏目风格要协调统一，导航清晰合理方便引导访问者。 色彩特点：综合性网站多以白色为底并结合一种主色调，白色和任何颜色搭配都会给人轻快、活力的感觉。白色所占面积应该最大。同时可以颜色表和JavaScript在内容区域可以由用户定制。 二．网页布局分类 1．满版布局形式 文字或者图像充满整个页面，也可以单一的背景颜色或图像填充整个页面。主要试用于网站首页、flash动画网站以及具体内容页面。 例：味之堂网站 2．十字布局形式 以横向与纵向分割整个页面，以单横纵分割或横纵同时分割成2-4个部分，分割不一定是等分，可任意调整每个部分的面积。面积大的部分则是视觉重点。LOGO、导航和广告则放置于小面积区。这种布局模式多用于产品宣传网页，以及需要大量图像的网页。 例：沃尔沃汽车公司网站首页 3．九宫格布局形式 “九宫格”布局基本形状是一长方形等分9格，中间部分形成4个交叉点即为视觉中心，其中心属于视觉盲点。内容放置在网页正中心并不会引起视觉的冲击。 例：雪佛莱科帕奇汽车官网 4．米字布局形式 米子分割页面是在十字的基础上增加对角线，这样分割增加了页面的灵活感，浏览者的视线会随着斜线移动，具有运动感。是体现动感页面主要布局形式。 例：美津浓网站 其他：很多网站并不是仅仅采用这样的布局形式，但是在大体结构上类似。布局形式融合增加从而产生与众不同布局。 三．网页布局技巧 1．黄金分割布局(完美的比例给人视觉上的享受) 网页布局大框架使用黄金分割比例可按照532、622、442的比例来分配，同时尽量避免平均分配。在此基础上可以适当调整上方或者底部的面积，从而实现不同的布局效果。 例：佳能中国官网、阿迪达斯奥运官方网站 2．左右对齐布局（饱和空间，表现商业形象） 布局形式在整体上将浏览者的注意力向四方形的中心收拢，充分利用没一寸空间。这种满是信息、没有剩余空间的热门印象是最适合传递商业信息的形式。但同时，以这种形式为基调的页面很难传递趣味