网页分类布局色彩.docx

网页分类布局色彩.docx

《网页分类布局色彩.docx》由会员分享，可在线阅读，更多相关《网页分类布局色彩.docx（9页珍藏版）》请在冰豆网上搜索。

网页分类布局色彩

网站策划-（网站类型-网站导航-网站风格-网站功能－网页布局）-网页效果设计图

一．网站布局特点

1.资讯类网站

布局特点:

以发布信息为主要目的。

页面信息量大,页面高度较长，布局以3-４栏为主,页面高度接近10屏左右,重要信息放置顶部。

导航排在页面上部。

左右两列是功能区和附加信息区，中间位主要信息和重要信息显示区。

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

色彩特点：

政策法规类资讯网配色以灰色、红色、黄色。

体现庄重、严谨、大气。

娱乐资讯类配色上以动、时尚的颜色为主：

蓝色、绿色、洋红和紫色。

　　例:

人民网、雅虎网

２.电子商务类网站

布局特点：

以实现交易为目的，以订单为中心。

必须实现商品展示、订单生成以及订单执行。

页面包含产品分类提供搜索功能多采用2-3栏的布局给人开放、大气的感觉。

导航以搜索为主横排在页面上部，左右两侧一般为内容区和产品分类区。

产品展示多以图片和文字结合体现产品的说服力,搜索、注册和登录等模块应放置于页面最醒目的位置。

色彩特点:

电子商务了网站图片较多，本身色彩已经非常丰富配上上应尽量简单,配色多以动感活力为主:

蓝色、洋红、橙色、青色和黄色等。

　例：

阿里巴巴网、易趣网

３.互动游戏网站

布局特点:

此类网站一般分为游戏的官方网站和在线游戏网站,面对人群年纪较轻页面设计以大量的图片、flash动画增强视冲击布局以图像或flash为主的静态布局和静态分栏相结合的布局,静态布局页面信息与背景融为一体类似平面出版物创意设计,布局相对比较自由。

静态、分栏结合布局在体现静态视觉效果之后又具有分栏布局信息清晰的特点。

色彩特点:

游戏类网站主要针对人群年纪较轻,配色大多以活力、时尚颜色为主。

一般会以一种颜色为主调，配合红色、黄色等明度较高的颜色进行强烈对比让访问者过目不忘

例:

天堂2、devilmay　cry4

4.教育类网站

布局特点：

与资讯类网站相似以提供教育咨资讯为主。

部分针对学校本身宣传或提供在线教学。

对于教育机构网站多以静态分栏相结合为主,对于提供在线教学功能网站多以分栏布局为主。

色彩特点:

教育类网站是为学生服务在配色上主要体现轻松气息-蓝色、绿色等,并且颜色明度较高,同时要考虑不同年龄层次。

5.功能性网站:

布局特点:

XX、Gooｇle、网址之家是其主要代表，主要功能是提供互联网网址导航。

布局简单搜索框和按钮占据页面绝对重要位置。

页面设计尽量简没有广告、图片。

页面文字、下载速度功能实用、信息提示与布局清晰都是页面布局所需考虑。

在视觉设计中提高用户对网站的感情和粘合度。

色彩特点:

功能性网站色彩搭配要求不花哨，没有特别鲜明的色彩。

多以白色、单色，平和协调。

6.综合性网站

布局特点：

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

栏目风格要协调统一，导航清晰合理方便引导访问者。

色彩特点:

综合性网站多以白色为底并结合一种主色调，白色和任何颜色搭配都会给人轻快、活力的感觉。

白色所占面积应该最大。

同时可以颜色表和JavaScript在内容区域可以由用户定制。

二．网页布局分类

1．满版布局形式

文字或者图像充满整个页面,也可以单一的背景颜色或图像填充整个页面。

主要试用于网站首页、flash动画网站以及具体内容页面。

例：

味之堂网站

2．十字布局形式

以横向与纵向分割整个页面,以单横纵分割或横纵同时分割成2-４个部分，分割不一定是等分，可任意调整每个部分的面积。

面积大的部分则是视觉重点。

LOGO、导航和广告则放置于小面积区。

这种布局模式多用于产品宣传网页,以及需要大量图像的网页。

例：

沃尔沃汽车公司网站首页

3．九宫格布局形式

“九宫格”布局基本形状是一长方形等分9格,中间部分形成4个交叉点即为视觉中心,其中心属于视觉盲点。

内容放置在网页正中心并不会引起视觉的冲击。

例:

雪佛莱科帕奇汽车官网

4．米字布局形式

米子分割页面是在十字的基础上增加对角线,这样分割增加了页面的灵活感，浏览者的视线会随着斜线移动,具有运动感。

是体现动感页面主要布局形式。

例:

美津浓网站

其他:

很多网站并不是仅仅采用这样的布局形式，但是在大体结构上类似。

布局形式融合增加从而产生与众不同布局。

三．网页布局技巧

１．黄金分割布局（完美的比例给人视觉上的享受）

网页布局大框架使用黄金分割比例可按照532、622、442的比例来分配,同时尽量避免平均分配。

在此基础上可以适当调整上方或者底部的面积，从而实现不同的布局效果。

例:

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

２．左右对齐布局（饱和空间,表现商业形象）

布局形式在整体上将浏览者的注意力向四方形的中心收拢，充分利用没一寸空间。

这种满是信息、没有剩余空间的热门印象是最适合传递商业信息的形式。

但同时，以这种形式为基调的页面很难传递趣味性强的信息。

类型:

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

3．全景式布局（趣味性吸引浏览者）

图像被间隔地排列的布局形式，视线无论从哪个角度都可以进入页面，给人以开放的轻松气息。

对于全景布局图像的位置大小是构成结构主要元素。

例：

力士焕然新生网站、韩国SｅｏｒaｋWatｅrpia网站

4．卫星式布局（以太阳为中心的卫星环绕型）

卫星式布局的特点即中间一个太阳，面积不一定越大越好看，在其周围留出空白也可以强调中心性,周围图像可以传递出开放的空间。

这种布局具将坚定不移的安全感和开放感并存。

类型：

以太阳为中心,小卫星均匀散开　例：

韩国ｍuｓiccaltlｋ咖啡网站

　　以太阳为中心的不同散开形式　　例：

高达无双网页

　　　　太阳不再页面中心,卫星在周围排列例:

日本马鲁森网站

5．照片组合式布局（新世界以全景式自由的展现出来）

多张照片经过组合，显示出全景式效果创造出一种轻松气氛，开放感超过了商业气息。

对于照片组合式布局而言,少量的文字信息也具有轻松的自由感。

浏览者会在不知不觉中将视线停留在页面顶部的图像上,然后再将目光移动到页面的中心，这就是照片组合式的效果。

例：

意大利“像素星球”网站、淘宝网UＥD招聘页面

6．包围式布局（限定范围的效果）

将页面四周用色块或者图案围起来，便产生了一个被限定的空间,形成一个受“墙壁”保护的空间。

封闭的空间使人安全感，给人信任、稳定的感受。

类型:

强烈色彩包围给人坚固、稳定的感觉

　　柔和的色彩包围,给人轻松的感觉

　　　在”墙壁”的某一侧打开一个缺口,给人互动的,开放的感受

　同时在“墙壁”的两侧打开缺口,给人限定的开放感

7.散开式布局（山水画般的自由和优雅）

散开是布局是无规则的排列,表现出不受限制的优雅、自由和自然地感觉。

各地区在散开式页面布局上存在区别：

欧洲的散开式布局,给人端正整体的感觉。

页面严格遵守左右平衡关系,又不破坏左右对称性,对留白控制较强。

中式散开式布局，多采用华丽的色调,并且加上较浅的花纹作为网页的背景。

（例:

唐色设计工作室）。

日式散开式布局，页面寻求自由感、典雅感为目的。

页面背景的颜色较浅，整体色彩不会过于鲜艳。

8．单侧齐行式布局（理性与自由共存的版式设计）

单侧齐行式布局是指以左对齐为基调,将右侧散开。

在追求理智与自由感平衡的场合常使用这种布局形式。

左侧齐行的布局传达出强烈的商业气息,右侧保留一定的空间，使页面具有流动性的效果,生成空白较多的典雅页面，适合暗示格调的同时,突出自由的气息。

优雅的单侧齐行式布局，不适合信息量大的网页。

例：

韩国易拓梦网站。

9.对称式布局（以中间为基线,左右对称）

对称式布局是指在放置图片和文字时，先在页面中央绘制一条垂直线以此为轴进行左右对称布局。

对称布局被称为最终的稳定型。

在左右对称的位置上放置一张有分量的照片或者标志，可以避免页面版式失去平衡。

华丽或休闲的图片在进行对称布局后，就会产生一种可信赖的、让人放心的感觉。

（如:

三星手机W3500网站）。

要产生对称的效果,空白空间是必不可少的,空白太少，对称式布局就不能清楚漂亮的显示出来。

空白空间全被文字和图片填满的话,对称的典雅感会减弱。

四.色彩搭配

1．色彩功能

色彩设计的作用中有主色、背景色、融合色和强调色四种

主色:

配色上的主色要比配色更清楚、更强烈,使人一看就知道是主角,从而视线固定下来。

可以稳定观众的情绪。

背景色：

页面主角是主色,但决定整体印象的却是背景色。

页面的华丽、素雅主要由背景色体现。

背景色也可用花纹、文字或具体图案来构成能够表现出稳重的格调。

融合色:

在页面不同的地方涂上相同的颜色，通过颜色额反复使用（颜色扩散）,是同样的颜色产生共鸣从而让页面具有整体感。

强调色:

页面的整体使用压抑的颜色,然后在一小块面积上使用强烈的颜色,能够起到着重强调的作用，色彩面积越小,着重的效果越强。

2.色彩搭配

单色搭配：

一种颜色由暗、中和明３中色调组成。

单色搭配上并没有形成颜色层次,但形成了明暗层次。

例:

三星女性手机E578和E4２8网站

类比色搭配:

相邻的颜色称之为类比色。

类比色都拥有共同的颜色。

这种颜色搭配产生了一种令人悦目、低对比度的和谐美感。

例:

金戈铁马品牌推广有限公司网页

补色搭配:

色相环上直线相对的两种颜色称之为补色。

补色形成强烈的对比效果，传达出活力和兴奋等意义。

补色要达到最佳的效果,最好是其中一种面积比较小,另一种比较大。

例:

韩国麦当劳网站

　分离补色搭配

同时用补色及类比色的方法来确定颜色关系称为分离补色。

这种颜色搭配既具有类比色的低对比度的美感,又具有补色的力量感。

形成一种既和谐又有重点的颜色关系。

例：

韩国百事可乐网站

原色搭配:

除了儿童产品中,三原色同时使用是比较少见的。

但无论是在中国还是在美国文化中，红黄搭配是非常受欢迎。

红黄，红蓝搭配也很广泛,但只有当两者的区域是分离时,才会显得吸引人，如果紧密邻在一起，则会产生冲突感。

二次色搭配:

二次色之间都拥有一种共同的颜色——其中两种共同拥有蓝色，两种共同拥有黄色，两种共同拥有红色。

它们能够轻易形成协调的搭配。

如果三种二次色同时使用则显得很舒适、吸引,并具有丰富的色调。

例：

韩国ｃinｕs娱乐网站

全色相搭配:

从色相环上取出所有的色相，开放、热闹、像节日一样的配色就产生了全色相搭配。

全色相搭配给人带来可以随时参与进去的气氛。

即使是相同的色相,排列的顺序不同，效果也会不一样。

色彩沿色相环顺序排列给人强调秩序、集中性好、成熟的印象。

相反,把各种色相打乱规律任意排列，就形成了节日般的、开放性的配色效果。

例：

俄语音乐娱乐网站

五.色彩索引

1．红色：

红色是最具有视觉冲击力的色彩;暗示速度和动态;可以刺激心跳速度、加快呼吸和刺激食欲;

红色的具象联想:

火焰、鲜血、西红柿、太阳、红旗、口红、中国国旗

红色的正面联想：

激情、爱情、能量、热心、激动、热量、力量、热情、活力

红色的负面联想：

侵略性、愤怒、战争、革命、残忍、不道德、危险、幼稚

红色系配色方案:

红色中加入少量的黄，会使其热力强盛,趋于躁动和不安

红色中加入少量的蓝,会使其热性减弱,趋于文雅和柔和

红色中加入少量的黑，会使其性格变的沉稳,趋于厚重和朴实

红色中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩和娇嫩

2.橙色：

橙色能促进食欲;橙色的房间代表友善，给人快乐，带给人愉快能促进人的谈话和思考;橙色能够用来强化视觉。

橙色的具体联想:

秋天、桔子、胡萝卜、肉汁、砖头、灯光

橙色的正面联想：

温暖、喜欢、创造力、鼓舞、独特性、能量、活跃、模拟、社交、健康、奇想、活力、华美、明朗、甘美

橙色的负面联想：

粗鲁、喧嚣、嫉妒、焦躁、可怜、卑俗

橙色系配色方案:

橙色中混入少量的蓝,能够形成强烈的对比，有一种紧张的气氛。

橙色中混入少量的红,给人明亮和温暖的感受

３.黄色

黄色是人眼最容易注意到的色彩；比纯白色的亮度还要高；可以促进新陈代谢；明亮的黄色最容易让人产生疲劳的颜色；暗淡的黄色可以加强人们的注意力。

黄色的具体联想:

阳光、沙滩、向日葵、香蕉、蛋黄、面包、小鸡、菜花

黄色的正面联想:

聪明、才智、乐观、光辉、喜悦、平凡、明快、希望、光明、明媚、理想主义

黄色的负面联想:

嫉妒、怯懦、欺骗、警告、泼辣

黄色系配色方案:

黄色中加入少量的蓝,会使其转化为一种鲜嫩的绿色。

其高傲的性格也随之消失趋于一种平和、潮润的感觉。

黄色中加入少量的红,则具有明显的橙色感觉,其性格也会从冷漠和高调转化为一种有分寸的热情和温暖

黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。

其色性也变得成熟和随和。

黄色中加入少量的白。

其色感变得柔和,其性格中的冷漠、高傲被淡化，趋于含蓄,易于接近。

4.绿色

绿色是所有色彩中最能让人的眼睛放松的色彩;绿色对人的精神有镇静和恢复的功能。

同时绿色还有“秩序”的意义。

绿色的具体联想:

植物、大自然、环境、西瓜、树叶、山、草

绿色的正面联想：

和平、安全、生产、新鲜、丰产、金钱、种植、康复、自然、和谐、诚实、青春

绿色的负面联想：

贪婪、嫉妒、毒药、侵蚀、缺乏经验

绿色系配色方案:

绿色中黄色成分较多时，其就趋向于活泼和友善,具有幼稚性

绿色中加入少量的黑,其就趋向于庄重、成熟

绿色中加入少量的白。

其就趋向于洁净、清爽和鲜嫩

5.蓝色

　蓝色能让人身体分泌安定素，放松身体；在蓝色的环境中工作效率比较高；蓝色的服饰通常会体现一种忠诚和信赖的意味。

蓝色的具体联想：

海洋、天空、湖水

蓝色的正面联想:

学识、凉爽、和平、沉思、忠诚、正义、智慧、平静、悠久、理智、深远、无限、理想、永恒、雄性

蓝色的负面理想：

消沉、寒冷、分裂、冷漠、薄情

蓝色系配色方案:

在蓝色中分别加入少量的红、黄、黑、橙和白等色,均不会对蓝色的性格构成较明显的影响力。

当蓝色中黄色的成分较多时，感受就趋于甜美、亮丽和芳香

蓝色中混入少量的白，可使蓝色的感觉趋向于焦躁和无力

6.紫色

紫色是一种娇柔、浪漫的品性;通常与中性化产生联系；紫色能过激发人们的想象力，有一种“人造”的意义。

紫色的具体联想:

萱衣草、紫水晶、葡萄、皇家、精神、茄子、紫菜、礼服

紫色的正面联想：

优雅、高贵、重、神秘、女性化、奢侈、智慧、想象、诡辩、等级、灵感、财富、高尚、古朴

紫色的负面联想：

夸大、过多、疯狂、残忍、消极

紫色系配色方案：

　　　紫色中红色的成分较多时，其具有压抑感和威胁感。

　　紫色中加入少量的黑,其感觉就趋于沉闷、伤感和恐怖

　　紫色中加入白,可以使紫色沉闷的性格消失,变得优雅娇气，并充满女性

的魅力

7．黑色

　黑色服饰能让人感觉看上去瘦一些;黑色能让和它相陪的颜色看上去更明亮；

黑色可以激发自信心;

黑色的具体联想:

夜晚、礼服、洋伞、墨汁、煤炭、毛发、死亡

黑色的正面联想：

权力、威信、诡异、高雅、仪式、严肃、高贵、孤独、神秘、时髦、刚健、坚实、生命

黑色的负面联想:

恐惧、消极、邪恶、服丧、屈服、懊悔、无知、悲哀、阴沉、冷淡

８．白色

白色是表达最完美平衡的颜色；由于白色太明亮，会引起某些人群的头疼感；

白光会引起暂时性的失明；白色经常会同上帝、天使联系在一起。

白色的具体联想:

雪、白纸、白云、白兔、砂糖、光芒、纯净、面粉

白色的正面联想：

清洁、神圣、洁白、纯洁、纯真、神秘、完美、美德、柔软、庄重、简洁、真实、婚礼

白色的负面联想：

虚弱、孤立

9．灰色

　灰色通常不能引起观众比较强烈的感情变化；灰色是白色和黑色平衡的结果；

灰色的补色也是其本身。

灰色的具体联想：

乌云、草木灰、树皮、中性

灰色的正面联想：

平衡、安全、可信、谦虚、成熟、才智、平凡、古典主义

灰色的负面联想：

厌倦、失意、悲伤、阴天、老龄、缺少城诺、不确定、喜怒无常、优柔寡断