网页设计的配色法则 第1篇
产品界面的配色对于产品来说至关重要，好的配色不仅能够准确地反映产品的调性，还能正确地引导用户阅读并理解产品。
我们可以结合网易七鱼的官网改版案例，来了解如何通过配色来提升官网的设计品质。
下图是七鱼的旧版官网页面，在配色上，产品方认为原来的配色过于单调和沉闷，希望可以让整体更活泼一些。且网站的整体跳出率过高，希望我们能够找到原因并通过改版解决这个问题。
首先第一步，需要找出旧版官网存在的问题。这时候，我们就需要再次运用前面讲的目标分析法。通过不同维度的目标分析，寻找页面中存在的问题。
网页设计的配色法则 第2篇
由于对比色相互对比构成的配色，可以分为互补色或相反色搭配构成的色 相对比效果，由白色、黑色等明度差异构成的明度对比效果，以及由纯度差异构成的纯度对比效果。
色彩间对比视觉冲击强烈，容易吸引用户注意，使用时经常大范围搭配。
VISA的案例
VISA是一个信用卡品牌， 深蓝色传达和平安全的品牌形象，黄色能让用户产生兴奋幸福感。另外蓝色降低明度后再和黄色搭配，对比鲜明之余还能缓和视觉疲劳。
观点： 不管是整体对比还是局部对比，对比色给人强烈的视觉冲击，结合色彩心理学对品牌传达效果更佳。
三色对比色相上更为丰富，通过加强色调重点突出某一种颜色，且在色彩面积更为讲究。
NAVER的案例
大面积绿色作为站点主导航，形象鲜明突出。使用品牌色对应的两种中差色作二级导航，并降低其中一方蓝色系明度，再用同色 调的西瓜红作为当前位置状态，二级导航内部对比非常强烈却不影响主导航效果。
观点： 三色对比中西瓜红作为强调色限定在小面积展现非常关键，面积大小直接影响画面平衡感。
多色对比给人丰富饱满的感觉 ，色彩搭配协调会使页面会非常精致，模块感强烈。
Metro的案例
Metro风格采用大量色彩，分隔不同的信息模块。保持大模块区域面积相等，模块内部可以细分出不同内容层级，单色模块只承载一种信息内容，配 上对应功能图标识别性高。
观点：色彩色相对比、色彩面积对比，只要保持一定的比例关系，页面也能整整有序。
相对与色相对比，纯度差对比，对比色彩的选择非常多，设计应用范围广泛，可用于一些突出品牌 、营销类的场景。
PINTEREST的案例
页面中心登录模块，通过降低纯度处理制造无色相背景，再利用红色按钮的对比，形成纯度差关系。与色相对比相较，纯色对比冲突感刺激感相对小一些，非常容易突出主体内容的真实性。
观点： 运用对比重要的是对比例的把握，面积、构 图、节奏、颜色、位置等一切可以发生变化的元素，形成视觉的强烈冲突。
明度对比接近生活实际反映，通过环境远近、日照角度等明暗关系，设计趋于真实。
ARKTIS的案例
明度对比够构成画面的空 间纵深层次，呈现远近的对比关系，高明度突出近景主体内容，低明度表现远景的距离。而明度差使人注意力集中在高亮区域，呈现出药瓶的真实写照。
观点： 明度对比使页面显得更单纯、统一，而高低明度差可产生距离关系。
总结：
色彩是最能引起心境共鸣和情绪认知的元素，三原色能调配出非常丰富的色彩，色彩搭配更是千变万化。设计配色时，我们可以摒弃一些传统的默认样式，了解设计背后的需求目的，思考色彩对页面场景表现、情感传达等作用，从而有依据、有条理、 有方法地构建色彩搭配方案。
声明:文章内容来自网络侵权请主动联系,进行删除.
网页设计的配色法则 第3篇
这是由一种色相构 成的统一性配色。即由某一种色相支配、统一画面的配色，如果不是同一种色相，色环上相邻的类似色也可以形成相近的配色效果。当然，也有一些色相差距较大的做法，比如撞色的对比，或者有无色彩的对比，但这里先讲述带主导色的配色案例。
同色系配色是指主色和辅色都在统一色相上，这种配色方法往往会给人页面很一致化的感受。
twitter的案例
整体蓝色设计带来统一印象，颜色的深浅分别承载不同类型的内 容信息，比如信息内容模块，白色底代表用户内容，浅蓝色底代表回复内容，更深一点的蓝色底代表可回复操作，颜色主导着信息层次，也保持了twitter的品牌形象。
观点：颜色差分割页面层次和模块，并代表不同功能任务属性。
近邻色配色方法比较常见，搭配比同色系稍微丰富，色相柔和过渡看起来也很和谐。
ALIDP的案例
纯度高的色彩，基本用于组控件和文本标题颜色，各控件采用邻近色使页面不那么单调，再把色彩饱和度降低用于不同背景色和模块划分。
观点：基于品牌色的邻近色运用，灵活运用到各类控件中。
类似色配色也是常用的配色方法，对比不强给人色感平静、调和的感觉。
BENMAPT的案例
红黄双色主导页面，色彩基本用于不同组控件表现，红色用于导 航控件、按钮和图标，同时也作辅助元素的主色。利用偏橙的黄色代替品牌色，用于内容标签和背景搭配。
观点：基于品牌色的类似色运用，有主次地用到页面各类控件和主体内容中。
中差色配色
中差色对比相对突出，色彩对比明快，容易呈现饱和度高的色彩。
facebook的案例
颜色深浅营造空间感，也辅助了内容模块层次之分，统一的深蓝色系运用，传播品牌形象。中间色绿色按钮起到丰富页面色彩的作用，同时也突出 绿色按钮任务层级为最高。深蓝色吊顶导航打通整站路径，并有引导用户向下阅读之意。
观点：利用色彩对比突出按钮任务优先级，增加页面气氛。
主导的对比配色需要精准地控制色彩搭配和面积，其中主导 色会带动页面气氛，产生激烈的心理感受。
YouTube的案例
红色的热闹体现内容的丰富多彩，品牌红色赋予组控件色彩和可操作任务，贯穿整个站点的可操作提示，又能体现品牌形象。红色多代表导航指引和类目分类，蓝色代表登录按钮、默认 用户头像和标题，展示用户所产生的内容信息。
观点：红蓝色反应不同交互和信息的可操作性，针对系统操作和用户操作的区分。
用一些中性的色彩作为基调搭配，常应用在信息量大的网站，突出内容，不会 受不必要的色彩干扰。这种过配色比较通用，非常经典。
Bechan的案例
网页设计的配色法则 第4篇
在推广页面的设计中，通常需要用营造强烈的视觉冲击，以达到快速吸引用户并传递信息的目标。这就需要大面积的对比色，来达到强烈的对比效果。而在较大面积使用对比色时，整体色彩的主次和整体平衡至关重要。
我们可以来看一个案例：
可以看到，整个页面主由橙色和深蓝紫色两个主要对比色构成。大面积的对比色产生了强烈的视觉冲击，让整个页面充满了吸引力。
整个画面用最强烈的对比色重点突出了两个主要的人物角色，从而吸引用户注意并进行阅读，最终将用户引导至购买入口。至此，整个页面的任务也算是完成了。
在推广页面中，我们需要注意的是，重点信息并非只能是文字内容，也可以是最吸引用户的画面核心元素。
3. 尝试更多的创新配色
除了掌握以上的几种基本色系的配色方法外，大家可以在此基础上尝试更多的配色风格。比如在同色系、对比色系的基础上，有目的地加入色彩元素丰富色调，在保持整体色彩层级的同时，加入更丰富的变化，从而达到配色目标。
更清新的“同色系”配色
更丰富的“同色系”配色
更多彩的“对比色”配色
复古的平面风配色
而对于很多初学者来说，我建议大家能够首先明确配色的目标，在配色时保持色彩层级的精简明确。在此基础上，循序渐进，逐步去尝试更多地配色风格。只有这样，才能养成良好的配色习惯。
四、提升品质感
我们按照之前的方法，正确的确定了配色的目标，选择了合适的配色方向，并逐步完成了整体的设计排版。
很多同学到这一步之后，就觉得作品已经完成，便停止继续深入了，而这也是初级设计师经常容易出现的问题。这个时候的作品，从整体上看并没有太多问题。但是当用户被页面吸引，开始仔细欣赏作品时，往往会发现作品没什么看点。
出现这种问题的原因，就是作品缺乏足够的细节和品质，导致作品不够耐看。就像一本书有着精美的封面，但是打开以后却平淡无奇，最终对整本书都非常失望。
想要让作品更优秀，除了基本的版式和配色之外，往往还需要更深入地去雕刻作品，让作品带有一种更高级的“气质”，而这种“气质”就是我们所说的品质感。
1. 什么是品质感？
品质感是对于设计作品来说，是一个综合性的评价。我们可以将这个词拆分为“品”和“质”两层含义，“品”代表物体本身的品相和细节，而“质”则代表质感。
怎样的设计才算是有品质感的？如何提升设计的品质感？我们可以首先来研究一些优秀的设计案例，寻找其中的共同点。苹果的产品和页面设计，是比较公认的具有较高品质感的，我们可以来看一下苹果的部分官网页面。
苹果的所有产品和页面，从产品图到页面的设计都非常有质感。为什么这种质感会如此吸引我们，令我们觉得非常舒适？如何才能让设计产生质感？
要了解如何产生质感，首先要了解一下物体产生质感的原理。
当光线照射在富有质感的物体表面时，会产生不同程度的漫反射，最终反射进入我们的眼球后，就会显现出一层富有质感的渐变色。所以想让物体获得质感，渐变是一个关键要素。
我们可以利用这一原理来提升质感。下面的案例，是FisnDesign组件库官网的一个局部页面。其中就运用了大量的渐变色质感原理，将渐变色融入到icon和页面元素中，从而提升了整个页面的质感。
2. 获得品质感的关键要素
渐变只是是获得品质感的关键因素之一，苹果官网将渐变这种原理加入到页面和元素中，配合精美的产品图片，让页面保持了非常高的品质感。
那么是否还有其他要素的存在，能够提升质感呢？
仔细观察苹果的所有元素设计，在渐变的同时，还加入了微量的投影和丰富的细节，使所有的元素在简洁中充满了细腻的质感。
我们可以总结一下，让设计获得品质感的几个要点：轻微的光影+细腻的渐变+细节/纹理。
发现这些原理以后，我们可以尝试将这些原理运用到设计中，从而提升设计的品质感。下面的几个案例，就是我在研究时所做的一些案例，在不同的页面细节中都可以看到以上原理的运用效果。
五、总结
看完前面的内容，大家会发现，其实配色并没有想象中那么复杂。
只要掌握正确的配色策略，并逐渐适应这种方法，就可以应付各种不同的设计类型。最后，我们将前面讲的配色法则做一个简要的总结：明确目标-确定主色-精简层级-选择色系 丰富配色-提升品质感。
希望大家读完这篇文章以后，能够真正理解和掌握策略性配色法则，在不同的项目中灵活运用，并最终形成自己的优秀配色习惯。