UI界面视觉设计之色彩要素

UI界面视觉设计要素之色彩要素

目录

   一、色彩设计的基本知识。

   1、色彩的三属性

 2、色彩的冷与暖

  3、色环

 4、色调 

5、色彩对人的心理作用

 二、色彩设计的原则

 1、统一性原则

2、情感性原则

3、生动性原则

 三、几条实用的配色策略

 1、你的配色方案永远不应该比它呈现的内容的更加“响亮”。

2、尽量选择简单的灰色作为你网站/APP的基调。

3只选择一种颜色突出显示。

4、使用安全色，降低色彩的纯度。

 5、如果产品特性需要鲜艳的配色，那么我们在设计过程中，不要使用超过三种以上的大色块，尽量保持画面的基调一致、和谐。这样就不会导致画面的混乱。

  色相是指色彩的相貌，是区别色彩的必要名称，例如我们常见的红、橙、黄、绿、蓝、紫等。

    明度，明度是指色彩显示的明暗程度，即是色光的明暗度。如右图，不同的颜色，反射的光量强弱不一，因而会产生的明暗程度不同。

 纯度，纯度是指色彩纯净、饱和的程度。具体来说，就是表明一种颜色中是否含有白或黑的成份。右图中，就向我们展示了低纯度、中纯度和高纯度的色彩。

 冷色和暖色是一种色彩感觉，它们没有绝对的区分，色彩在比较中才存在了冷暖。通常我们把红黄色系看作暖色系，具有温暖、强烈、扩张的感受；蓝紫色系看作冷色系，具有寒冷、平静、收敛的感觉；而绿色系则看作是中性色系。如图就是一件冷色系的设计作品，它带给我们平静精致的感觉。 

 色环就是将光谱中的色彩，按照一定的顺序依次排列，首尾相连，首尾为红色和紫色，组成环形，构成了色环。在色环中，红、黄、蓝为三原色，因为它们不能用其他颜色调配而成，故称为三原色。间色是指光谱中的橙、绿、紫等，它们由两种原色调配而成，也叫二次色。色环中还包括类似色和互补色，类似色是指在色环中距离在45度以内的一些色彩称为类似色。而互补色是指在色环上相互正对，成180度角的两个颜色称为互补色，也称对比色。互补色有红绿、黄紫、蓝橙。

    色调是指一幅作品中画面色彩的总体倾向，是大的色彩效果。它是颜色的重要特征，决定了颜色本质。如在大自然中，经常见到这样的现象：不同颜色的物体或被笼罩在一片金色的阳光之中，或被笼罩在一片轻纱薄雾似的月色之中；或被秋天迷人的金黄色所笼罩；或被统一在冬季银白色的世界之中。这种在不同颜色的物体上，笼罩着某一种色彩，使不同颜色的物体都带有同一色彩倾向，这样的色彩现象就是色调。通常暖色调包括红、黄、橙、咖啡、紫红等，具有热烈、明朗、兴奋、奔放等特点，给人温暖的感觉。冷色调包括蓝、绿、紫等，具有安静、稳重、明快等特征，冷色调给整个空间带来清新、凉爽的感觉。如图，就向我们分别展示了冷色调和暖色调的两幅不同色调的作品。                       

当色彩以不同的光强度与不同的波长作用于人的视觉时，便会产生一系列心理的反应，它们与人的以往经验相联系，引起人的各种联想，使色彩具有了情感、意志、情绪等各方面的象征意义。如图就是一副暖色调的作品，让人感到明朗、活泼、热情的感受。

 色彩会因界面的不同而产生不同的情感，因此，为了使界面整体达到和谐统一，首先要保持色彩的和谐统一，界面才能与浏览者达到情感共鸣。如右图是一副暖色调的设计作品，舒适和谐的色调传递出的自然、健康、积极的态度。

色彩作为一种视觉元素，它是具备情感的，并潜移默化的影响着我们的行为和情绪。我们要充分利用色彩的温度感、距离感、尺度感等满足受众人群的心理感受。

在色彩设计时，应避免过于单调，没有变化，缺乏氛围。如右图的设计中，在色彩的面积、色相、纯度、明度、光色等方面进行了有秩序、有规律的变化，给人以丰富的变化感，让设计更加生动。

 如图一的色彩搭配显然比图二更合理，图二中喧宾夺主的色彩设计让我们的关注点落在了色彩上，而忽略了内容本身。 

如图设计中，色彩主要以灰色为主色调，画面简洁、稳定，给人以信赖感。其中字体的色彩最好避免使用黑色，深灰色一般更容易阅读。

如图的设计作品，简洁的色彩和画面，层次分明，给人以舒适的视觉体验。

      如图，图一明显比图二的色彩纯度低，图一给人稳重之感，而图二给人以浮躁感觉。