1 设计网页时选择颜色的有哪些注意事项

绿色是具有黄色和蓝色两种成份的色，在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。下面介绍设计网页时选择颜色的有哪些注意事项，希望可以帮助到大家。

一、三原色

色光三原色(红绿蓝)

R(红Red)，G(绿Green)，B(蓝Blue)(加色三原色:加色混和明度会越来越亮)。 RGB三色混合在一起就变成白色，分别组合可以合成颜料三原色.色光三原色的混合，亦称为加色混合，两种色光混合后，光度高于两色各自原来的光度，合色愈多，被增强的光线愈多，就愈近于白。色光三原色是指红、绿、蓝。电视机上的基色就是红、绿、蓝，各种其它色光都是由此调出的。

颜料三原色(红黄蓝)

C(青绿Cyan) ，M(品红Magenta)，Y(黄 Yellow)(减色三原色: 减色混和明度会越来越暗)。颜料三原色的混合，亦称为减色混合，是光线的减少，两色混合后，光度低于两色各自原来的光度，合色愈多，被吸收的光线愈多，就愈近于黑。所以，调配次数越多，纯度越差，越是失去它的单纯性和鲜明性。 原理上CMY混合在一起就变成黑色。品红与绿、黄与紫、青与橙，各组颜色的混合都接近黑。但实际上只是变成不鲜明的浓色而已。因此印刷上会在三色以外再加上一个黑色(black)，用CMYK四色。CMY分别组合可以合成色光的三原色。

二、暖色与冷色

红色、橙色、黄色--为暖色，象征着：太阳、火焰。

绿色、兰色、黑色--为冷色，象征着：森林、大海、蓝天。

灰色、紫色、白色--为中间色;冷色调的亮度越高--越偏暖，暖色调的亮度越高--越偏冷。

三、常见色彩含义

红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。

黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度的变化。

蓝色的色感冷嘲热讽，性格朴实而内向，是一种有助于人头脑冷静的色。蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。

绿色是具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、满足、优美的色。

紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。

白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。

---

 2 如何把握网页设计中颜色的适用性

体现风格，突出主题一个网站的特点与风格要得到展示，除了要使页面内容与形式之间有机结合，还要使不同色彩有机结合。每一种颜色都有它所特有的个性，设计人员可以借助色彩心理学表达色彩的情感效果，以便更好地突出主题。网页区域划分应有统一的风格网站内容丰富，信息量大，设计师要对网页界面进行视觉区域划分。

网页设计中的色彩应用

网页信息的分类布局，可以使用不同的色彩划分内容主次，规划视觉流程，统一网页的整体风格，给浏览者以完整的、易读的、富有导向性的视觉印象。引起人们的关注，加深印象网页设计或优雅含蓄，或动感强烈，或时尚新颖，或简单抢眼，能吸引观众的注意，是设计人员充分利用色彩的魅力来优化页面的成果，这种页面的色彩设计极大地提高了网页的艺术性，是提高访问率和网站知名度的关键。

网页设计中色彩搭配的原则

平面设计和网页设计最重要是色彩的搭配。当人们离屏幕较远时，第一眼看到的是页面颜色，而不是具体的图片与文字排版。因此，设计者在网页设计中除了要考虑突出网页内容的理性要求，也要遵循感性的艺术规律，从而设计出性格独特的网页。

1.特色鲜明一个网页必须有自己独特的色彩风格，以使看起来个性鲜明，给观众留下深刻的印象。

2.合理搭配一种色彩的应用：将选择的颜色调整透明度或饱和度，产生新的颜色。这种色彩的运用使页面看起来更统一，主次更分明。两种色彩的应用：在选择一种色彩后，然后选择其对比色。一个色系的应用：将一个感觉的色彩放在一起使用，如浅蓝、浅黄、浅绿，或者土黄、土灰、土蓝，等等。

3.艺术性网页设计含有艺术的成分，是一种艺术活动，有其艺术规律需要遵循，而网页设计师在考虑内容的同时，也要根据艺术的形式、特点、原则进行大胆的艺术创新，在符合网站要求的同时让网页各有特点。

色彩搭配要注意的问题

将多种色彩用于一个网页往往使页面很“花”，使网页缺乏整体感和内在美。实践证明，网页设计中用色并不是越多越显得丰富、有个性，一般在三种颜色内通过调整其各种属性来产生丰富的色彩变化。素淡雅致的色彩常用于背景，不要将复杂的图案作为背景，尽可能与前文拉开对比，以更好地突出要表达的内容。在网页设计中，色彩以非常独特而重要的形式存在，需要网页设计师引起重视。网页设计的灵魂是色彩设计，只有合理、科学地使用色彩，将感性与理性结合、美学规律和技术结合，才能设计出富有吸引力的、鲜活的、更具时尚感的网页。

---

 3 网页设计的色彩应用技巧

网页的色彩效果是给人最为直观的关键印象。能够掌握色彩运用原则、运用强调烘托突出主题的色彩搭配、从美学的角度设计网页色彩，发挥色彩在网页中的视觉冲击、心理反应的作，创造出主题鲜明、魅力十足的网页设计作品。色彩应用得当的网页对浏览者来说，是一种美的体验、是一种妥帖的视觉和心理的引领。在丰富的色彩搭配应用设计中是有章可循的。

一、黑白灰的搭配技巧

色彩分有彩色和无彩色。黑白灰属于无彩色，其它的色彩都属于彩色。色相，明度和纯度，是色彩的三要素，而无彩色只有明度属性。黑白灰是万能色，当两种色彩的搭配不协调时，加入黑或灰色，会有意想不到的效果。很多网站色彩设计留出大块的白色空间，这种设计成为“留白艺术”。这种留白设计能让人感觉心情放松，有无限遐想。白色也是网页设计中最普遍的一种色彩设计。

二、色彩三要素的应用技巧

1.色相色相，指色彩的相貌，色彩最显著的特征，是色彩之间的主要区。比如红色，黄色，蓝色等各自代表不同的色相。同一色相的色彩，调整明度或纯度比较容易搭配，比如深红，大红，粉红，紫红。某种色彩并不一定代表了固定的某种含义，是在具体情景下具有恰当的含义;在特定的场合下，同种色彩也可以表现出不同的含义。

2.明度明度，指的是色彩的明暗程度，也称作亮度，色彩越亮明度就越高。比如一些儿童类、购物类网站。多是一些鲜艳明亮的色彩设计，让人感觉生气勃勃，欢快绚丽。明度越低，颜色越暗。一些游戏类网站的暗色调设计，充满了神秘感;运用一些暗色调的设计能够充分表达个人的孤僻或忧郁等性格。有明度差大的色彩比较容易调和。

3.纯度纯度，指色彩的鲜艳程度，原色纯度最高，调和其他颜色越多，色彩纯度越低。纯度低的色彩暗、淡且含灰色。

三、色彩的调和方法

1.相近色相近色是指色环中相邻的三种颜色。相近色在网站设计中极为常用。相近色的色彩搭配使人感觉舒适自然。是一个SOHO网站，它很有艺术性，整个网站的色调考究，以邻近色、暖调、中明度搭配，舒适自然。2.互补色互补色又称补色，是指色环中相对的两种色彩，色彩对比度大。在互补色的设计中，适当的调整一下补色的亮度，能够是对比的视觉效果更出色。

四、网页设计中冷暖色彩的运用技巧

1.暖色暖色一般应用于购物类网站，电子商务网站，儿童类网站等等，用以体现商品的琳琅满目，儿童类网站的活泼、温馨等效果。2.冷色冷色一般适合表达严肃，稳重等效果，绿色蓝色、蓝紫色等都属于冷色系列。冷色系色调多应用于一些高科技，游戏类网站。冷色与白色搭配能达到一种不错的效果。

五、色彩均衡技巧

网站图文的合理排版，能使人感到舒适协调，色彩的均衡搭配使网站的视觉、心理更加平衡和谐。网站色彩设计不会单一的运用某一种颜色，设计者必须要考虑色彩的均衡的问题。色彩的均衡，包括色彩的位置，每种色彩所占的面积、不同色彩的比例等等。比如灰暗的色彩面积过多，回事人产生压抑等感觉;鲜艳明亮的色彩面积如果过多，则会使人感觉刺眼不舒适。

六、确定网站的主题色

网站鲜明独特的主题色，让客户即目标明确，也兴致盎然。网站设计者必须考虑主题色的确定。网页选用的色彩尽量控制在4种左右，太多的色彩会让人感觉凌乱混沌、不能突出主题特色。确定好主题色，配色与主题色搭配必须能够有助于烘托主题。另外确定明度，纯度、色相那种要素占主导。色彩为网站内容服务，必须与网站的主题以及气氛相适应，色彩的搭配不仅仅是单纯的运用，必须考虑诸多因素，例如，了解你的网站所要传达的讯息和品牌，明确网站的职能;了解你的读者群，掌握访问者的类别、社会背景、心理需求和场合的差异等，社会背景不同，目的不同，往往会对色彩的感受也不同，因此网站的用色必须尽可能的吸引各种的注意力。

---

 4 响应式网页图片库设计的注意事项

1、轮播幻灯片：尽量隐藏导航

在桌面端上导航的存在可能没什么，但是在移动端上查看的时候，导航还是尽量隐藏起来，需要的时候再显现。而诸如左右切换的按钮和标明浏览位置的圆点，知名是在光标移动上去之后再显示，这样的设计不仅可以避免用户分心，而且能避免内容和导航元素之间的冲突，降低整体设计的混乱感。

2、避免使用大量肖像类图片

如果你设计的图片库是类似网格布局的话，你可能会尽量挑选和横向的图片，或者方形的图像。这样的设计在兼容桌面端设计的同时，还可以让用户在小屏幕上更好地查看。人像类的图片在手机上适合纵向屏幕上浏览，如果横过来的话，图片会显得特别小，浏览会相当不方便。横向是理想的，如果不行的话，使用方形的图片会是很好的兼容性方案。一个响应式的图片库的设计需要考虑多种因素，请务必牢记用户的不同浏览场景。

3、在移动端上支持手势操作

触摸屏上使用收拾操作几乎是用户的本能了。所以，在设计响应式图片库的时候，滑动操作等手势操作赋予用户更多的权力，让体验更加逼真。在移动设备上使用箭头导航太过于乏味、老旧，手势交互更加自然也更符合真实的交互体验。

4、在移动端上禁用lightbox效果

Lightbox效果大概是桌面端网页上常见的图片浏览模式，图片以弹出框的形式呈现出来，能随着屏幕尺寸和鼠标操作来缩放。在产品展示的页面当中，这种图片浏览模式的使用尤其广泛和频繁，但是在移动端上的时候，它可能会引起大量的用户体验上的问题：盖住其他的交互控件、无法退出、尺寸不合适等等。