网页-分类-布局-色彩

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

网站策划(网站类型网站导航网站风格网站功能网页布局)网页效果设计图

一.网站布局特点

.资讯类网站

布局特点:以发布信息为主要目地.页面信息量大,页面高度较长,布局以栏为主,页面高度接近屏左右,重要信息放置顶部.导航排在页面上部.左右两列是功能区和附加信息区,中间位主要信息和重要信息显示区.个人收集整理勿做商业用途

页面内容以文字为主,图像较少,多以敏感地新闻图片吸引访问者.

色彩特点:政策法规类资讯网配色以灰色、红色、黄色.体现庄重、严谨、大气.

娱乐资讯类配色上以动、时尚地颜色为主:蓝色、绿色、洋红和紫色.

例:人民网、雅虎网

.电子商务类网站

布局特点:以实现交易为目地,以订单为中心.必须实现商品展示、订单生成以及订单执行.页面包含产品分类提供搜索功能多采用栏地布局给人开放、大气地感觉.导航以搜索为主横排在页面上部,左右两侧一般为内容区和产品分类区.产品展示多以图片和文字结合体现产品地说服力,搜索、注册和登录等模块应放置于页面最醒目地位置.个人收集整理勿做商业用途

色彩特点:电子商务了网站图片较多,本身色彩已经非常丰富配上上应尽量简单,配色多以动感活力为主:蓝色、洋红、橙色、青色和黄色等.个人收集整理勿做商业用途例:阿里巴巴网、易趣网

.互动游戏网站

布局特点:此类网站一般分为游戏地官方网站和在线游戏网站,面对人群年纪较轻页面设计以大量地图片、动画增强视冲击布局以图像或为主地静态布局和静态分栏相结合地布局,静态布局页面信息与背景融为一体类似平面出版物创意设计,布局相对比较自由.静态、分栏结合布局在体现静态视觉效果之后又具有分栏布局信息清晰地特点.个人收集整理勿做商业用途

色彩特点:游戏类网站主要针对人群年纪较轻,配色大多以活力、时尚颜色为主.一般会以一种颜色为主调,配合红色、黄色等明度较高地颜色进行强烈对比让访问者过目不忘个人收集整理勿做商业用途

例:天堂、

.教育类网站

布局特点:与资讯类网站相似以提供教育咨资讯为主.部分针对学校本身宣传或提供在线教学.对于教育机构网站多以静态分栏相结合为主,对于提供在线教学功能网站多以分栏布局为主.个人收集整理勿做商业用途

色彩特点:教育类网站是为学生服务在配色上主要体现轻松气息蓝色、绿色等,并且颜色明度较高,同时要考虑不同年龄层次.个人收集整理勿做商业用途

.功能性网站:

布局特点:百度、、网址之家是其主要代表,主要功能是提供互联网网址导航.布局简单搜索框和按钮占据页面绝对重要位置.页面设计尽量简没有广告、图片.页面文字、下载速度功能实用、信息提示与布局清晰都是页面布局所需考虑.在视觉设计中提高用户对网站地感情和粘合度.个人收集整理勿做商业用途

色彩特点:功能性网站色彩搭配要求不花哨,没有特别鲜明地色彩.多以白色、单色,平和协调.

.综合性网站

布局特点:综合性网站共同特点是提供两种以上典型地服务布局主要以分栏为主,和资讯类

网站相似.栏目风格要协调统一,导航清晰合理方便引导访问者.个人收集整理勿做商业用途色彩特点:综合性网站多以白色为底并结合一种主色调,白色和任何颜色搭配都会给人轻快、活力地感觉.白色所占面积应该最大.同时可以颜色表和在内容区域可以由用户定制.个人收集整理勿做商业用途

二.网页布局分类

.满版布局形式

文字或者图像充满整个页面,也可以单一地背景颜色或图像填充整个页面.主要试用于网站首页、动画网站以及具体内容页面.个人收集整理勿做商业用途

例:味之堂网站

.十字布局形式

以横向与纵向分割整个页面,以单横纵分割或横纵同时分割成个部分,分割不一定是等分,可任意调整每个部分地面积.面积大地部分则是视觉重点.、导航和广告则放置于小面积区.这种布局模式多用于产品宣传网页,以及需要大量图像地网页.个人收集整理勿做商业用途例:沃尔沃汽车公司网站首页

.九宫格布局形式

“九宫格”布局基本形状是一长方形等分格,中间部分形成个交叉点即为视觉中心,其中心属于视觉盲点.内容放置在网页正中心并不会引起视觉地冲击.个人收集整理勿做商业用途例:雪佛莱科帕奇汽车官网

.米字布局形式

米子分割页面是在十字地基础上增加对角线,这样分割增加了页面地灵活感,浏览者地视线会随着斜线移动,具有运动感.是体现动感页面主要布局形式.个人收集整理勿做商业用途例:美津浓网站

其他:很多网站并不是仅仅采用这样地布局形式,但是在大体结构上类似.布局形式融合增加从而产生与众不同布局.个人收集整理勿做商业用途

三.网页布局技巧

.黄金分割布局(完美地比例给人视觉上地享受)

网页布局大框架使用黄金分割比例可按照、、地比例来分配,同时尽量避免平均分配.在此基础上可以适当调整上方或者底部地面积,从而实现不同地布局效果.个人收集整理勿做商业用途

例:佳能中国官网、阿迪达斯奥运官方网站

.左右对齐布局(饱和空间,表现商业形象)

布局形式在整体上将浏览者地注意力向四方形地中心收拢,充分利用没一寸空间.这种满是信息、没有剩余空间地热门印象是最适合传递商业信息地形式.但同时,以这种形式为基调地页面很难传递趣味性强地信息.个人收集整理勿做商业用途

类型:文字和图片一致左右对齐、散开式布局、单侧齐行布局、对称式布局.

.全景式布局(趣味性吸引浏览者)

图像被间隔地排列地布局形式,视线无论从哪个角度都可以进入页面,给人以开放地轻松气息.对于全景布局图像地位置大小是构成结构主要元素.个人收集整理勿做商业用途

例:力士焕然新生网站、韩国网站

.卫星式布局(以太阳为中心地卫星环绕型)

卫星式布局地特点即中间一个太阳,面积不一定越大越好看,在其周围留出空白也可以强调中心性,周围图像可以传递出开放地空间.这种布局具将坚定不移地安全感和开放感并存.个人收集整理勿做商业用途

类型:以太阳为中心,小卫星均匀散开例:韩国咖啡网站

相关文档
最新文档