反馈已提交

网络繁忙

色彩与配色基础

  • 文档创建者:susie
  • 历史版本:11
  • 最近更新:RosieY 于 2023-02-22
  • 当我们打开一个页面时,色彩会引导着我们的注意力运动,设计者对色彩的运用和搭配,将决定可视化的展现效果。在学习数据可视化颜色内容前,首先应该掌握一些色彩和配色基础知识。


    1. 色彩的特征

    在设计中,色彩可以分为两大类,即有彩色和无彩色,无彩色大多指我们常说的黑、白、灰。有彩色则是除无彩色之外的颜色。下面主要介绍有彩色的三大特征,即色相、饱和度、明度:

    1)色相

    色彩的首要特征,也就是色彩可呈现出来的质地面貌,比如我们常说的:红色、蓝色、绿色……

    2)饱和度

    色彩的鲜艳程度,也就是色彩的纯度,饱和度取决于该色中含色成分和消色成分(灰色)的比例,比如天蓝色、淡蓝色、灰蓝色,这种就是同一色相不同饱和度的体现:

    (饱和度由高→低的变化)

    3)明度

    是眼睛对光源和物体表面的明暗程度的感觉,简单理解就是色彩的明亮程度,比如白天和黑夜:

    (明度由亮→暗的变化)

    一般的拾色器分别如下对应:

    色相、饱和度、明度三大特征相辅相成、共同作用,就形成了丰富的色彩,任何一种彩色都必然有以上三种特征。

    2. 色彩的关系

    在彩色范围内,不同色相之间存在着一些可遵循的视觉关系,根据这些视觉关系,我们也能得到一些常见的色彩搭配方式。

    1)同类色

    色相环间隔在 30° 以内的色相是同类色。同类色搭配的优点是:舒服、统一、视觉比较柔和、容易把控,不容易出错;缺点是:冲击性很弱,运用不得当会单调、缺少视觉层次感。

    所以此类配色方式不易用于对抗、冲击力强的设计作品。

    关系
    案例

    2)邻近色

    色相环相隔 90° 的颜色称之为邻近色,邻近色搭配的优点:阳光、活泼、稳定、有一定视觉冲击力、视觉层次感丰富。

    关系
    案例

    3)对比色

    色相环间隔 120° 的颜色称之为对比色,对比色搭配的优点:视觉冲击力强烈、富有跳跃性、突出、点缀能力强,比如:常用作画面中的点缀色,或与主体固有色成对比关系的背景色,用于突出主体;缺点:大面积使用比较难把控。

    关系
    案例

    4)互补色

    色相环间隔 180° 的颜色称之为互补色,互补色的颜色性质相差较大,将这两种颜色相互搭配,区别度会更加鲜明,也将视觉冲击力强度提升至峰值!这类配色优缺点和对比色很相似,只不过视觉冲击力更强也更难把控。

    关系
    案例

    3. 色彩的色调

    通过改变明度与饱和度来调配色彩浓淡、强弱程度,叫做色调。简单理解就是决定色调的主要因素是明度和饱和度,而决定作品最终色调的因素是画面中视觉比例较大色彩的属性,色调一般可以划分成以下几类。

    1)浅白色调

    泛指偏低饱和度、高明度的色相搭配。浅白色调,色相固有的视觉属性表现力有所降低,带来的视觉感受很缓和,即便是以互补色的形式搭配,视觉冲击力也明显减弱。

    这类色调的设计作品带给用户的视觉感受比较清纯、阳光、年轻、干净、舒服,此类色调的作品中搭配时要注意突出主题。

    色调案例

    2)亮色调

    泛指偏高明度、高饱和度的色相搭配,相比而言色相固有视觉属性表现力较强,视觉冲击力也很强,这类色调的设计作品带给用户的视觉感受是:活泼、明亮、欲望。

    色调案例

    3)暗色调

    泛指低明度的配色搭配,相对前两者而言,暗色调给人的视觉感受更稳重、有品质感,对于很多专题性、故事性、品牌调性强的作品能起到很好的加强、提升作用,当然暗色调有时候运用不好也会形成恐怖、阴森的视觉感受。


    色调案例

    不管是哪种色调方式,都不是仅限于某一色调范围内的颜色相互搭配,而是在确定主色调后结合其他属性的颜色相互结合使用。在此基础之上同样可以结合色彩关系(同类色、邻近色……)进行配色。

    4. 色彩的感知

    不同的色彩能带给用户不同的感知,换句话说色彩具有一定的心理暗示作用,比如带给人温度感知、红、橙暖色系让人觉得温暖;而蓝、绿冷色系会让人觉得凉爽,清冷。

    色彩给人带来的感知是多方面的。

    1)温度感知

    色彩会让人联想到事物,进而感受它的温度。如红、橙暖色系会联想到火炉、阳光,进而觉得温暖;而蓝、绿冷色系则会联想到大海、森林,进而觉得凉爽。

    色彩温度也不是绝对的,联想会因经验而不同,所以在进行设计时,温度感也要根据目标用户进行相应调整。

    2)体积感知

    暖色或明度高的颜色使物体看起来更大,被称为膨胀色;冷色或明度低的颜色使物体看起来更小,被称为收缩色,人们常说的穿黑色显瘦就是这个道理。

    设计时可使用膨胀色使物体看起来更丰满,或使用收缩色使物体看起来更紧凑。

    3)距离感知

    暖色或纯度高的颜色会给人“凸起”或“前进”的感觉,称为前进色;冷色或明度低的颜色显得“凹陷”或“后退”,称为后退色。对重要信息使用前进色以吸引用户注意,对经常显示在屏幕的选项(如菜单项)使用后退色,既保证其在视野范围内,又不会太分散用户的注意力。

    4)时间感知

    红、橙色等环境中时间感觉比实际更长(过得慢),而蓝色等环境则麻痹了人的时间感,感觉比实际时间更短(过得快)。如快餐使用橙色或红色,促进顾客快速就餐进而早点离开。偏冷色系的咖啡馆可能让人多待一会。

    5)重量感知

    明度和纯度高的颜色给人感觉更轻,称为轻色;明度和纯度低的颜色给人感觉更重,称为重色。

    设计中,对移动的物体(比如羽毛球)可以使用轻色使其看起来更加轻盈;反过来,对产品的下半部分使用重色可以使产品看起来更稳定。

    6)硬度感知

    暖色、明度高纯度低的颜色有柔软的感觉,称为柔软色;冷色、明度低纯度高的颜色有坚硬的感觉,称为坚硬色。在休闲区场所使用柔软色,可以营造一种温馨的气氛;路障可以使用坚硬色,增强制造“禁止通行”的效果。

    7)情绪影响

    色彩能影响使用者的情绪,暖色系相较于冷色系,对人的视觉刺激更大,冷色系则可以缓解压力和视觉疲劳。比如橙色代表能量、青春和热情,使人感到乐观且有活力;蓝色代表安宁、和谐和智慧,给人一种宁静和放松的感觉。

    5. 色彩的语义

    由于文化、经验、常识等因素,不同的色彩对用户会有一些特殊的含义,如绿色表示正常,红色表示停止。

    所以我们在进行设计时,就要注意色彩的语义,不要出现反日常认识的设计,这样会增加用户的理解成本。

    色彩的语义也不是绝对的,文化、经验不同,用户对颜色的理解可能存在差异,在视觉设计时,可以针对目标用户进行设计。

    附件列表


    主题: 数据可视化方法
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持