如何巧用色彩打造动人心弦的网页设计

【起点学院】推出的产品经理“365天”进阶方案，由BAT资深人士指导产品学习，人人都能参与其中

色彩对人的心理影响，在许多设计门类中都有明显体现，这种应用方式已是公开的秘密。无论是生活中的普通商品，还是品牌标识的塑造，色彩所扮演的角色日益重要，它成为向人们传达观念的关键元素之一。

据Kissmetrics透露，感知色彩时，信号会首先抵达下丘脑特定部位，随后会继续传导至脑垂体，并最终传到甲状腺。这就表明，色彩能够促使大脑与腺体分泌激素，进而激发我们的情绪波动，并改变我们的行为模式。

根据学术观察，色调能够左右人的心境，它既可能引发愉悦感受，也可能造成不快体验，并且有时产生的情绪并非使用者所期望的。Kissmetrics 进一步指出，网络用户在决定是否访问某个站点时，往往只需短短九十秒钟，而在这一过程中，有百分之六十二到九十的决定性因素在于该产品的视觉色调。

UXPin的免费电子书《为人类眼睛而设计的网页设计》里曾经提到过，任何事物在初次引起人们注意时，色彩都占据着至关重要的地位。

色彩意味着什么

任何一种颜色对每个人来说都有独特的寓意，但这个寓意往往受到文化环境、个人过往以及个人偏好的影响。

简单说明这一点，我们不妨看看下面的色卡。

色彩学在设计界并非严谨的学科，人的感受差异十分显著。社会背景，个人观念，乃至性别差异都会干扰对颜色的理解。深入探究表明，作用效果并非全由颜色决定，品牌与顾客间的互动关系同样会改变人们对颜色的看法。

因此，要是你的设计面向女性群体，那么紫色会是个很合适的选项，由于这种颜色在女性群体里很受欢迎，不过对大部分男性来说，紫色却不太讨喜。在后面展示的巴黎欧莱雅网站页面上，紫色得到了很好的运用，呈现出不错的效果。页面主体主要采用黑白色调，黑灰色的页首页尾显得很有格调，紫色作为点缀出现，整体搭配效果令人满意。实际上他们的产品并不便宜，但是给人感觉比较高端。

另外，白色给人带来宁静感，同时体现出一种现代气息，紫色则象征着尊贵、高雅和柔美，这些信息都可以在这个平台上找到。

那张图片展示的是一本女性健康类刊物的页面，其Banner部分采用了浅粉色调开元ky888棋牌官网版，导航栏的布局显得相当醒目，不过页面上其余部分的色彩运用却并不怎么多样，这种搭配方式确实挺有新意。

对于女性主题的站点来说，粉红色调显得较为陈旧，然而，在女性健康领域，这种色彩方案与整体风格并非十分协调。

我们继续浏览网站的其它区域，比如点击瘦身专题时，菜单条上对应的按钮会变成淡紫色作为提示。

色彩能够左右人的情绪与体验，这个页面的首个图像虽然随机循环展示，然而仔细观察，整个关于瘦身主题的设计几乎充斥着粉红色调，这种做法反而效果不佳。

配色方案

设计网站时，很少只用一种颜色，需要考虑整体色彩规划，单独颜色的选择，以及不同颜色如何组合。还要考虑各种颜色对用户的作用，主色和辅助色如何互相配合开元棋官方正版下载，等等。

这种情况下，设计师必须对色彩的组合运用进行更周密的思考。接下来，三个基础的调色方法，能够协助你解决这个难题。

#1: 三色搭配

这是基础配色方案，也是均衡的选色方式，采用对比鲜明的色彩组合。在色环上找到相隔120度位置的三种颜色，依次充当背景、主体和导航的用色。

#2: 组合配色（拆分互补）

这种色彩组合相当费劲，必须经过反复尝试和寻找才能找到。一旦协调得当，视觉冲击力特别强。具体来说，这种色彩组合是从色轮上挑选邻近位置的两组互补色。

#3: 近似配色

这种色彩搭配的关键在于选用接连的邻近对比色，若想以此招徕顾客的话，在挑选时必须格外留意。这种配色手法可以彰显色彩的动感，然而由于相互协调，色彩与呈现效果的反差不会那么鲜明，不过会显得更加突出。

因此，在探究色彩的心理影响时，务必将全部色彩组合当作一个整体来审视，不可只挑选某个元素搭配单一色调，指望其能融入整体布局。

看看下面的页面，想想看，它会向用户传达怎样的信息呢？

深色底色使整个页面显得典雅、一丝不苟、庄重、规范且颇具“商业气息”。在规划网站时，“一丝不苟”的格调总能带来愉悦的视觉体验。规范和商业的特质，往往能让浏览者不会以休闲的态度对待该网站，并且有助于建立一定的信赖度。

按钮颜色选择上，设计师特意挑选了高饱和度的红色来装饰行动号召按钮，这种色彩搭配十分抢眼，能有效吸引浏览者的注意力，促使他们主动进行点击操作。相比之下，那些只有白色轮廓的透明式按钮，其视觉层级明显不如红色的行动号召按钮突出。整体来看，各个按钮的色彩搭配在视觉体系内安排得很有条理，各自所处的空间位置也十分明确合理。

文本呈现为白色，背景为黑色，二者对比鲜明，整体配色协调。与之相配的线条图标同样选用白色，色彩方案高度统一。文字下方露出的部分提示用户继续向下滚动。

整体而言，这个全套规划还可以，以黑白色为主基调，又融入了红色元素，因此显得更加生动。红色的运用十分恰当，仅用少量装饰，既不会过于突兀，也不会显得平淡，这些特点使得整个色彩搭配格外引人注目。

需要规避的用色

棕色调往往带来质朴的印象，然而此类色彩多数不受男士青睐。不过特定情境下开yunapp体育官网入口下载手机版，这种色调能传递出值得信赖和让人安心的感受，这种情况下运用相当适宜。

UPS是知名物流企业，其采用棕色色调，能让顾客产生非常稳固的信任感。

这套配色方案因为用作怀俄明州大学橄榄球队的队服，被称作有史以来最糟糕的设计之一。这套以棕色为主的服装，有趣之处在于，大家普遍认为它非常结实，但与此同时，也极不美观。男性对色彩的判断力在这项设计上暴露无遗。

女性群体中，橙色并非广受欢迎的色调，因此，针对女性客户，应当注意规避这种色彩选择。

这些规则多数属于参考性质的内容，它们往往需要特定的环境与情境来配合使用，色彩必须相互协调，才能显得美观且适用。

配色和取色工具

选择通用的色彩搭配和调色板是顺理成章的做法，不必为网页的视觉呈现或界面规划另外构思色彩体系。

Adobe Color CC是Adobe公司开发的一款调色应用，原先的名称叫做Kuler。

Paletton – 这是一套为初学者准备的取色工具。

扁平化色彩选择器，包含一系列简约风格的调色方案

Mudcube Color Sphere配置了多种颜色方案，每个方案都附有对应的HEX色值。

核对色彩搭配——这个应用旨在维护前景与背景色调的协调性，它能够实施精准的对比度评估，保障色弱人群亦可清晰辨识色彩。

色彩——这个软件能够让你通过鼠标在显示界面选取颜色，调整色彩的纯度，并且会显示对应的十六进制数值。

案例分析

互联网上存在大量网站，这些网站数量众多，但其中真正出色的为数不多，多数网站并不突出。然而，接下来的这个网站，确实是优秀网站中的佼佼者，它曾获得Awwwards每日最佳网站这一荣誉。

网站底色选用了浅灰色，与电动车外观颜色属于同一色系。页面整体布局简洁，醒目的大字和精致的小车造型形成鲜明对比，凸显了电动车轻便灵动的特点。灰色作为中性色，使得页面其他色彩更加鲜明突出，对比效果强烈，为页面注入了生机。此外，以灰色为主色调，也突出了产品与品牌的稳重气质。

Go标志体型硕大，色彩明快，充满活力，通过渐变和鲜艳的色彩充分体现了设计的时代感。蓝色是男女两性都普遍喜爱的颜色，这一点使得网站的设计不带有性别倾向。灰色不仅带有内敛的特质，还体现出环保的理念，与电动车紧凑的形态相结合，整个设计都在暗示产品的环保和安全性能。

这个页面的整体氛围，充分展现了日常生活的气息，同时又不失前沿的时尚元素，与当今城市居民的生活状态极为相符。

最后的注意事项

色彩是产品构造的关键构成，也是品牌形象塑造的核心要素。因此，在构建网站界面或UI时，色彩所承载的内涵务必与品牌保持一致，需要将品牌的背景故事与核心价值融入设计整体。一般情况下，设计人员会直接从品牌的徽标或品牌设计规范中提取色彩，虽然这种方法存在一定局限，但它确实能让工作流程更为便捷。