1网页设计 配色原则

过渡色能够神奇地将几种不协调的色彩统一起来，在网页中合理地使用过渡色能够使你的色彩搭配技术更上一层楼。下面介绍网页设计配色原则，希望对您有帮助。

1、运用相同色系色彩：

设计师在为版面制作细节的时候，常常会需要使用许多同色系的色彩，所谓相同色系，是指几种色彩在360°色相环上位置十分相近，大约在45°左右或同一色彩不同明度的几种色彩，这种搭配的优点是易于使网页色彩趋于一致，对于网页设计新手有很好的借鉴作用，这种用色方式容易塑造网页和谐统一的氛围，缺点是容易造成页面的单调，因此往往利用局部加入对比色来增加变化，如局部对比色彩的图片等。这种方法不失为一种设计的好方法。

2、运用对比色或互补色：

对比色是指色相环相距较远，大约在100°左右，视觉效果鲜亮、强烈，而互补色则是色相环上相距最远的连种色彩，即相距180°，其对比关系最强烈、最富有刺激性，往往使画面十分突出，如：这种用色方式容易塑造活泼、韵动的网页效果，特别适合体现轻松、积极的素材的网站，缺点是容易造成色彩的花，使用中注意色彩使用的度。

3、使用过渡色：

过渡色能够神奇地将几种不协调的色彩统一起来，在网页中合理地使用过渡色能够使你的色彩搭配技术更上一层楼。过渡色包括几种形式：两种色彩的中间色调、单色中混入黑、白、灰进行调和以及单色中混入相同色彩进行调和等等。企业页面中色彩搭配是体现整个页面的风格，潜移默化的给用户带来的第一印象，也是体现突出企业的文化风格，因此掌握页面设计色彩搭配也是企业网站中重要的环节之一。

---

2UI设计色彩的搭配原则

(一)整体色调协调统一：

界面设计应该先确定主色调，主色将会占据页面中很大的面积，其他的辅助色都应该以主色为基准进行搭配。这可以保证整体色调的协调统一，重点突出，使作品更加专业、美观。

(二)有重点色：

配色时，可以选取一种颜色作为整个界面的重点色，这个颜色可以被运用到焦点图、按钮、图标，或者其他相对重要的元素，使之成为整个页面的焦点。重点色不应该用于主色和背景色等面积较大的色块，应用于强调界面中重要元素的小面积零散色块。

(三)注意色彩的平衡：

配色的平衡主要是指颜色的强弱、轻重和浓淡的关系。一般来说，同类色彩的搭配方案往往能够很好地实现平衡性和协调性，而高纯度的互补色或对比色，例如红色和绿色很容易带来过度强烈的视觉刺激，使人产生不适的感觉。另一方面为明度的平衡关系，高明度的颜色显得更明亮，可以强化空间感和活跃感;低明度的颜色则会更多的强化稳重低调的感觉。

(四)调和对立色：

当包含两个或者两个以上的对立色时，页面的整体色调就会平衡，这时就需要对对立色进行调和。通常有3种方法进行调和：

(1)调整对立色的面积，使一种颜色为主色，其他颜色成为辅助色。为了降低辅助色的色感，可能需要适当调整它们的纯度和明度;

(2)添加两种对立色之间的颜色，引导颜色在色相上逐渐过渡，例如要调和红色和黄色，可加入橙色;

(3)加入大量的中性色，黑、白、灰称为中性色，它们不带任何正面或负面的感情色彩，用来调和其他彩色是一种非常有效的方法。

---

3色彩对网页设计的影响

(一)色彩与网页可用性

网站的重中之重就是其功能性。网页需要有效地传递信息，帮助用户在互联网“地图”中来回自由穿梭，能够去往想去的地方，不至于迷路，最终攫取到自身所需的内容。网页在多大程度上能实现其目标功能被称为网页的可用性，而色彩是其中重要的影响因素之一。在导航设计中，文字与背景色彩的选择决定用户是否能快速地察觉链接并正确地点击。导航中色彩组合会影响点击精度和速度，如果一个目标对象相对显眼，相应的搜索时间可以提升83%。选用不当的图底对比色彩组合，会使文字模糊不清，难以在第一时间察觉和辨别，不仅影响搜索效率，更是不美观。在颜色的选择时，应该仔细思考选择目的和期望的效果，再添加适合的颜色。在网站的布局方面，色彩起着分组和层级的作用，是用于创造界面布局的最有影响力的元素。通过色彩的选择，我们可以将界面的某些元素突出或隐藏起来。色彩不仅将元素分割开来，比如导航菜单内容文字、标题、图片、符号和广告灯等内容，也可以使界面元素互相协调，达到设计的一致性。错误的颜色选择则会导致混乱，使界面上出现“坏斑”，破坏整体效果。

(二)色彩、认知与美感

有数据表明，用户会在打开网页的最初5秒钟内形成对网页的初步印象，并且决定是否继续浏览该网页。所以，从认知形成的角度来说，色彩很大程度上决定着一个网页的生死。色彩还有一种使人增强记忆的作用。巧妙而独特的网页色彩搭配可以浏览者留下深刻的印象，从而从海量的网站中脱颖而出。“没有丑陋的颜色，只有丑陋的搭配。”色彩的组合是影响页面美感的重要因素。有研究表明，虽然每个人对于色彩的偏好是不同的，但是其中存在着一定的规律。对于特定人群，需要开发迎合其审美的色彩组合。在选用色彩时，可以遵守视觉设计普遍规律：对比与平衡。

(三)色彩与情感

心理学家认为，情感是指个体对客观事物是否符合自身需要的态度体验。人在接触网页色彩后，会通过直觉形成一种“感觉”，继续深入探索和思考后，就会引起悲、喜、优等心理反应，形成更高层次的“感情”。在不同的用户群体中，美感偏好具有高度的主观性和差异性。根据Norman的人脑识别处理的三个层次理论，人脑对美感呈现中的色彩搭配的处理处于“本能层次(VeisceralLevel)”，即在大脑处理前就会对对象进行生理反馈。但是这一点在之前的研究中体现的不多，应为美感偏好不仅受本能影响，还会受思考(reflective)的影响。

---

4常见女装网页中的色彩分析

1、“大促红”女装网页中做促销时出现次数最多的颜色,长时段的使用会产生视觉疲劳。为了让红色更好地发挥效果而不至于过度,卖家在使用时可以把红色和金黄色、橙色、白色、黑色等搭配[2]。红色和白的搭配会在促销氛围浓厚的同时，页面多了些许的干净和产品的品质感得到了一个很好的阐释。时尚的黑红经典搭配也是收到了许多大牌女装页面设计者的青睐。

2、“百搭蓝”蓝色是一个让人联想到蓝天白云的舒适的色彩，也很百搭。蓝色可以塑造大牌的品质感也可以表达少女的小清新。冷色的蓝色和暖色的色调的搭配，会整个平平无奇的页面生动许多。

3、“黑白灰”虽然我们每天视觉接触到的色彩多种多样，但是人们仍然不可以忘怀黑白灰的经典搭配色调，就是因为其简约而单调的色彩反而超越了时代的流行趋势。既是怀旧的，也是时尚的，黑白灰的色调的和谐关系是其他颜色所比拟不了的。具有永恒的不可比拟性。

4“、优雅棕”提到棕色人们首先会想到LV的经典格子棕色，给人们一种，经典，大气。时尚，和品质的感觉，是奢侈品和品质男装的经典配色。[3]金，黑，橙，白的搭配给消费者时尚品质高贵的感觉。高端时尚大牌的网站也不是沉稳不变的，亮色的搭配也会使整个画面鲜活起来。

5、“清新粉”近来甜美清新风格的风靡是粉色成为了少女的喜爱之色。在亮丽的颜色中加入白色降低其纯度，调和出粉红色，粉蓝色等。这些纯度较低的颜色给人一种清新小女生的感觉，与暖色的搭配会更加的统一和和谐。

6、“魅惑紫”经常以神秘，时尚，高端，浪漫来形容紫色。严格来说，紫色是不是很容易搭配的颜色，大面积的紫色会让人产生抑郁的色彩，但如果运用得当，将是非常抢眼的时尚感。搭配建议有黄色，白色，黑色。