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

如何巧用色彩打造动人心弦的网页设计 色彩心理学被广泛地运用到各个设计领域 ，这 已不是什么秘密。从日常的杂货到LO GO 设计 ，色彩所起到的作用越来越大 ，它是给用户传递信息的最重要的因素之一。 根据Kissmet rics 的说法 ，当我们看到一个色彩的时候 ，信息会传递到大脑的下丘脑的某个区域中。 接下来 ，信号会进一步传递到脑垂体 ，然后到甲状腺腺体。这也就意味着 ，色彩会刺激大脑和腺体 分泌激素 ，引发出我们的情绪反应 ，并影响我们的行为。 科学研究表明 ，色彩会影响情绪 ，会招致正面的情绪 ，也能带来负面的影响 ，有的时候带来的情绪 与实际要的并不匹配。Kissmet rics 接着补充道 ，网站的访客通常只需要大概90秒就能针对一个网站 作出判断和选择 ，而在者其中 ，有62%~90%的因素是取决于某个产品的色彩。 在UX Pin的免费电子书Web Design f o r t he Hum n Eye 中我们曾说过 ，某个事物在给人第一印象的 时候 ，色彩扮演着无可争议的重要角色。 色彩意味着什么 每种色彩对于每个人而言都有着特定的含义 ，但是它的具体含义通常取决于他们所处的文化背景、 个人经历和喜好。 简单说明这一点 ，我们不妨看看下面的色卡。 事实上 ，色彩心理学在设计领域并不是一个精确的学科 ，个体差异非常明显。社会因素 ，个人认知 ，甚至性别也会对色彩感知产生影响。进一步的研究发现 ，产生影响的并不总是色彩本身 ，使用这 些色彩的品牌与用户之间的关系也会影响用户对于色彩的感知。 所以 ，如果你的设计是针对女性的 ，那么紫色会是一个相当不错的选择 ，因为紫色在女性受众中普 遍受欢迎 ，但是对于多数男性而言 ，紫色并不太受欢迎。在下方的图片中 ，紫色被运用在巴黎欧莱 雅的网页中 ，效果非常不错。主体使用的黑白配色 ，黑色的页头页脚看起来非常优雅 ，紫色点缀 其中 ，整体感非常不错。实际上他们的产品并不便宜 ，但是给人感觉比较高端。 另外 ，使用白色的文本 ，让人感觉平静又足够现代 ，紫色则被赋予了奢华、优雅、女性化的含义。 所有的这些都能够在这个网站里查到。 下图是女性健康杂志的页面 ，上面的B nner使用了粉红色 ，导航设计更为大胆 ，除此以外网站其他 的地方用色倒并不丰富。不得不说这样的选择非常有趣。 首先 ，对于女性类的网站而言 ，粉红色本身还是比较老套的 ，但是作为一个女性健康类的网站 ，这 样的配色和主体并不算是特别搭。 当我们继续探索网站其他的部分 ，比如当你打开减肥页面的时候 ，导航栏上相应的位置会变成粉色 以示标识。 色彩会影响用户的心情和感受 ，尽管这个页面的第一张图片是随机滚动播放的 ，但是想想看 ，整个 减肥相关的页面几乎被粉色淹没了 ，适得其反。 配色方案 通常当你准备设计一个网站的时候 ，不会只使用一种色彩吧 ？你需要考虑整个网站的整体 配色方 案 ，单个色彩的选取 ，以及不同色彩之间的搭配。接下来 ，你还需要考虑不同色彩对于用户的影响 ，搭配色与主色调之间的协调 ，等等等等。 这样一来 ，就需要设计师对于色彩的混合搭配使用有更深入的考量了。下面三个基本的配色技巧 ， 可以帮你搞定这一问题。 # 1: 三色搭配 这是最基本的方法 ，也是最平衡的配色思路 ，使用互补的鲜艳色彩。在色轮上选取相互间隔120度 角的三种色彩 ，分别来作为背景、内容和导航的色彩。 # 2: 组合配色 （拆分互补 ） 这种配色方案相对而言比较有难度 ，你需要通过一定的测试和探索才能获取。如果搭配好了 ，效果 非常惊艳。如图所示 ，这种配色方案是选取色轮上相邻的两对对比色。 # 3: 近似配色 这种配色的核心是选取连续的相邻互补色 ，如果你想借此来取悦用户的话 ，在选取的时候一定要谨 慎小心。这种配色方式能够突出色彩的活力 ，但是因为相辅相成 ，色彩和效果对比不会那么强烈 ， 但是会更加夸张。 所以 ，当你开始考虑色彩的心理学属性的时候 ，尽量将整个配色方案作为整体来进行衡量 ，而不是 单独为某个部分选取一个色彩 ，以期它能与其他部分协调工作。 看看下面的页面 ，想想看 ，它会向用户传达怎样的信息呢 ？ 1、背景色——深色的背景让整个页面看起来经典、精益求精、沉稳、正式且足够“企业化”。 当你设计一个网站的是 ，“精益求精”的感觉总能给人良好的观感。正式和企业化的属性 ，则通 常能让访客不会以玩乐的心态来看待这个网站 ，且能够带来一定的信任感。 2、按钮色—— 设计师在这个CTA按钮 （行为召唤按钮 ）上使用了强对比的红色 ，醒目且非