网页颜色搭配技巧

~

网页颜色搭配技巧

对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景，但是，浏览一下大型的商业网站，你会发现他们更多运用的是白色、蓝色、黄色等，使得网页显得典雅，大方和温馨。更重要的是，这样可以大大加快浏览者打开网页的速度。

一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。而为了追求醒目的视觉效果，可以为标题使用较深的颜色。下面是我做网页和浏览别人的网页时，对网页背景色和文字色彩搭配积累的经验，这些颜色可以做正文的底色，也可以做标题的底色，再搭配不同的字体，一定会有不错的效果，希望对大家在制作网页时有用。

BgcolorΚ〃#F1FAFA〃———做正文的背景色好，淡雅

BgcolorΚ〃#E8FFE8〃———做标题的背景色较好

BgcolorΚ〃#E8E8FF〃———做正文的背景色较好，文字颜色配黑色

BgcolorΚ〃#8080C0〃———上配黄色白色文字较好

BgcolorΚ〃#E8D098〃———上配浅蓝色或蓝色文字较好

BgcolorΚ〃#EFEFDA〃———上配浅蓝色或红色文字较好

BgcolorΚ〃#F2F1D7〃———配黑色文字素雅，如果是红色则显得醒目

BgcolorΚ〃#336699〃———配白色文字好看些

BgcolorΚ〃#6699CC〃———配白色文字好看些，可以做标题

BgcolorΚ〃#66CCCC〃———配白色文字好看些，可以做标题

BgcolorΚ〃#B45B3E〃———配白色文字好看些，可以做标题

BgcolorΚ〃#479AC7〃———配白色文字好看些，可以做标题

BgcolorΚ〃#00B271〃———配白色文字好看些，可以做标题

BgcolorΚ〃#FBFBEA〃———配黑色文字比较好看，一般作为正文

BgcolorΚ〃#D5F3F4〃———配黑色文字比较好看，一般作为正文

BgcolorΚ〃#D7FFF0〃———配黑色文字比较好看，一般作为正文

BgcolorΚ〃#F0DAD2〃———配黑色文字比较好看，一般作为正文

BgcolorΚ〃#DDF3FF〃———配黑色文字比较好看，一般作为正文

浅绿色底配黑色文字，或白色底配蓝色文字都很醒目，但前者突出背景，后者突出文字。红色底配白色文字，比较深的底色配黄色文字显得非常有效果。

此文只是起一个“抛砖引玉”的作用，大家可以发挥想象力，搭配出更有新意、更醒目的颜色，使网页更具有吸引力

==================

如今，互联网越来越走近我们的生活，网上冲浪也渐渐成为我们生活不可缺少的一部分。网络世界五彩缤纷，涌现出大量优秀精美的网页。大量网络信息的呈现，无非就是通过文本、图像、Flash动画等，其中， 文本是网页中最为重要的设计元素。对于网页设计初学者而言，了解和掌握网页设计中的文字排版设计就显得尤为重要，下面笔者想谈谈一己之见。

文字的格式化

字号、字体、行距

字号大小可以用不同的方式来计算，例如磅#quotel.quoter#或像素(Pixel)。因为以像素技术为基础单位打印时需要转换为磅，所以，建议采用磅为单位。

最适合于网页正文显示的字体大小为12磅左右，现在很多的综合性站点，由于在一个页面中需要安排的内容较多，通常采用9磅的字号。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。需要注意的是，小字号容易产生整体感和精致感，但可读性较差。

网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。但是，无论选择什么字体，都要依据网页的总体设想和浏览者的需要。例如：粗体字强壮有力，有男性特点，适合机械、建筑业等内容；细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。

从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而你指定的字体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。解决问题的办法是：在确有必要使用特殊字体的地方，可以将文字制成图像，然后插入页面中。

行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12，即用字10点，则行距12点。这主要是出于以下考虑：适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。

除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强版式的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣。例如，加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容恰如其分。另外，通过精心安排，使宽、窄行距并存，可增强版面的空间层次与弹性，表现出独到的匠心。

行距可以用行高(line-height)属性来设置，建议以磅或默认行高的百分数为单位。例如：｛line-height：20pt｝、｛line-height：150%｝。

文字的整体编排

页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。从艺术的角度可以将字体本身看成是一种艺术形式，它在个性和情感方面对人们有着很大影响。在网页设计中，字体的处理与颜色、版式、图形等其他设计元素的处理一样非常关键。从某种意义上来讲，所有的设计元素都可以理解为图形。

1．文字的图形化

字体具有两方面的作用：一是实现字意与语义的功能，二是美学效应。所谓文字的图形化，即是强调它的美学效应，把记号性的文字作为图形元素来表现，同时又强化了原有的功能。作为网页设计者，既可以按照常规的方式来设置字体，也可以对字体进行艺术化的设计。无论怎样，一切都应围绕如何更出色地实现自己的设计目标。

将文字图形化、意象化，以更富创意的形式表达出深层的设计思想，能够克服网页的单调与平淡，从而打动人心。

2．文字的叠置

文字与图像之间或文字与文字之间在经过叠置后，能够产生空间感、跳跃感、透明感、杂音感和叙事感，从而成为页面中活跃的、令人注目的元素。虽然叠置手法影响了文字的可读性，但是能造成页面独特的视觉效果。这种不追求易读，而刻意追求“杂音”的表现手法，体现了一种艺术思潮。因而，它不仅大量运用于传统的版式设计，在网页设计中也被广泛采用。

3．标题与正文

在进行标题与正文的编排时，可先考虑将正文作双栏、三栏或四栏的编排，再进行标题的置入。将正文分栏，是为了求取页面的空间与弹性，避免通栏的呆板以及标题插入方式的单一性。标题虽是整段或整篇文章的标题，但不一定千篇一律地置于段首之上。可作居中、横向、竖向或边置等编排处理，甚至可以直接插入字群中，以新颖的版式来打破旧有的规律。

4．文字编排的四种基本形式

页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。

两端均齐：文字从左端到右端的长度均齐，字群形成方方正正的面，显得端正、严谨、美观。

居中排列：在字距相等的情况下，以页面中心为轴线排列，这种编排方式使文字更加突出，产生对称的形式美感。

左对齐或右对齐：左对齐或右对齐使行首或行尾自然形成一条清晰的垂直线，很容易与图形配合。这种编排方式有松有紧，有虚有实，跳动而飘逸，产生节奏与韵律的形式美感。左对齐符合人们阅读时的习惯，显得自然；右对齐因不太符合阅读习惯而较少采用，但显得新颖。

绕图排列：将文字绕图形边缘排列。如果将底图插入文字中，会令人感到融洽、自然。

文字的强调

1．行首的强调

将正文的第一个字或字母放大并作装饰性处理，嵌入段落的开头，这在传统媒体版式设计中称之为“下坠式”。此技巧的发明溯源于欧洲中世纪的文稿抄写员。由于它有吸引视线、装饰和活跃版面的作用，所以被应用于网页的文字编排中。其下坠幅度应跨越一个完整字行的上下幅度。至于放大多少，则依据所处网页环境而定。

2．引文的强调

在进行网页文字编排时，常常会碰到提纲挈领性的文字，即引文。引文概括一个段落、一个章节或全文大意，因此在编排上应给予特殊的页面位置和空间来强调。引文的编排方式多种多样，如将引文嵌入正文的左右侧、上方、下方或中心位置等，并且可以在字体或字号上与正文相区别而产生变化。

3．个别文字的强调

如果将个别文字作为页面的诉求重点，则可以通过加粗、加框、加下划线、加指示性符号、倾斜字体等手段有意识地强化文字的视觉效果，使其在页面整体中显得出众而夺目。另外，改变某些文字的颜色，也可以使这部分文字得到强调。这些方法实际上都是运用了对比的法则。

文字的颜色

在网页设计中，设计者可以为文字、文字链接、已访问链接和当前活动链接选用各种颜色。例如，如果你使用FrontPage编辑器，默认的设置是这样的：正常字体颜色为黑色，默认的链接颜色为蓝色，鼠标点击之后又变为紫红色。使用不同颜色的文字可以使想要强调的部分更加引人注目，但应该注意的是，对于文字的颜色，只可少量运用，如果什么都想强调，其实是什么都没有强调。况且，在一个页面上运用过多的颜色，会影响浏览者阅读页面内容，除非你有特殊的设计目的。

颜色的运用除了能够起到强调整体文字中特殊部分的作用之外，对于整个文案的情感表达也会产生影响。这涉及色彩的情感象征性问题，限于篇幅，在这里不做深入探讨。

另外需要注意的是文字颜色的对比度，它包括明度上的对比、纯度上的对比以及冷暖的对比。这些不仅对文字的可读性发生作用，更重要的是，你可以通过对颜色的运用实现想要的设计效果、设计情感和设计思想。（来源：网络 编辑：邻居）

优秀的网页设计怎样做色彩搭配
答：4、保持一致性 在页面设计过程中，需要注意的是最好把颜色的数量控制在3种之内，避免页面给用户带来太过眼花缭乱的视觉效果，更好地突出页面内的文字内容。以上就是今天小编为大家介绍的在进行优秀的网页设计的时候需要注意到的颜色搭配的问题，总的来说在颜色搭配方面还是有很多需要我们考虑的问题的，...

网页设计颜色怎么搭配需要注意点什么!还有文字要怎么用!
答：因此，在设计网页时，我们必须要高度重视色彩的搭配。一、色彩的基础知识 色彩五颜六色、千变万化，我们平时所看到的白色光，经过分析在色带上可以看到，它事实上包括红、橙、黄、绿、青、蓝、紫等七色，各颜色间自然过渡。其中，红、黄、蓝是三原色，三原色通过不同比例的混合可以得到各种颜色。色彩有...

网站色彩搭配的方法
答：1.搭配合理性：一个优秀的网页既要有艺术的追求，也要符合人类一般审美。它虽然属于平面设计的范畴，但有别于其它平面设计。由于考虑到人类自身生理接受程度，规避诸如视觉疲劳、恐慌、烦躁、焦虑等颜色污染，所以色彩搭配的合理性凌驾于艺术表达之上，在给人留有深刻印象之前，网页色调氛围应尽量是轻松、...

网页设计色彩搭配知识
答：如果在用色上遇到麻烦，可以大面积的加白，灰;小面积加黑来调节其他颜色搭配不当。遇到使用纯度很高的颜色，比如纯蓝，纯黄等，这样的搭配会很鲜艳，视觉感觉比较兴奋。把这样的颜色明度抬高或降低，搭配上灰、白色，也是调节的方法。五、色彩心理与情感 选择适合内容风格的颜色。1.色彩有冷暖的感觉。如...

网页设计的色彩运用
答：黑白是最基本和最简单的搭配，白字黑底、黑底白字都非常清晰明了。灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。(1)红色。红色的纯度高，引人注目，有人称之为“火与血”的`颜色，能增高血压，加速血液循环。用红色为主色的网页不多，在大量信息的页面里使用大量面积的红色...

网页设计的色彩搭配
答：三、网页文字一个网站如果使用了背景颜色，就要考虑背景颜色与前景文字搭配的问题。一般网站侧重的是文字部分，所以背景颜色可以选择纯度或者明度较低的色彩，文字用比较突出的亮色，让人看了一目了然。不过，也有些网站为了让访客留下深刻的印象，经常在背景上寻找技巧。比如一个空白页的某个部分用了很亮...

网页设计之怎么搭配颜色,学会这一招,你就是别人家的
答：称为中性色。可以营造出强烈视觉效果。灰色：大面积灰色背景可以让白色、红色、前景信息更加醒目，可以让整个网页充满现代气息。用灰色过渡可以让极难搭配的颜色变得容易搭配。8 黑色：可以轻松从其他颜色中凸现出来，让其他颜色更加惹眼。黑白红可以构成简洁明快的布局。可以和绿、紫色描绘阴森恐怖的气氛。

网页设计中几种色彩分析及其之间的搭配
答：2 搭配在网页颜色的应用中,单纯以红色为主色调的网站相对较少,多用作辅助色、点睛色,以达到陪衬、醒目的效果。红色与少量黄色相搭配,会使其热力强盛,趋于躁动、不安,极富动感和张扬的个性。红色与黑色的搭配在商业设计中被誉为商业成功色,在网页设计中也比较常见。红黑搭配常被用于较前卫时尚、个性的娱乐休闲区...

秒变配色高手,怎么都不会错的6条网页设计配色原则
答：“H”代表色相，一旦你选择了你的高亮颜色，文本框中显示的就是你当前颜色的色相。四、如果有疑问，请使用蓝色 如果你对你的高亮色的选择有疑惑的话，不妨使用蓝色。蓝色是一种弹性比较大的颜色，可以和很多种颜色搭配。黄色和紫色也很不错，但是如果使用不当会适得其反。另一方面，如果你是用蓝色，...

网页设计的布局和用色技巧
答：(二)用色技巧 1.针对不同的企业所要表达信息的不同,可以选择突出这些信息的颜色。2.考虑浏览者。不同地区、不同年龄层次对色彩的认知的不同,可能会产生不同的反应。对网页所传达信息针对的人群的不同选择不同的用色。3.不要使用过多的颜色。除了黑色和白色以外,约选择四到五个颜色就足够了。太多...