反馈已提交

网络繁忙

颜色搭配一致性原则

  • 文档创建者:susie
  • 编辑次数:8次
  • 最近更新:susie 于 2021-06-10
  • 1. 颜色的重要性

    当我们打开一个页面时,第一眼看到的往往并不是板块布局,也不是详细内容,而是页面的色彩。色彩引导着我们视觉进行运动,较强的冲击力很容易给客户留下深刻的印象,设计者对色彩的运用和搭配,将决定可视化的展现效果。

    颜色无需使用文字即可传达大量信息。然而,使用颜色有着微妙的平衡:

    • 应保持简洁

    • 使用颜色突出显示和强调信息

    • 颜色过多会造成不和谐

    • 但使用单一颜色或同一种颜色的不同色调可能导致数据杂糅

    2. 颜色搭配一致性原则

    颜色是最有效的美学特征之一,因为它可以吸引注意力。我们最先注意到的特征就是颜色, 它能够以直接的方式突出显示特定见解、标识异常值

    一般来说,我们在使用颜色的时候可以遵循以下的配色一致性原则:

    2.1 数值指标一致性

    当根据某一个指标的数值大小进行颜色映射时,建议使用生长色系的渐变颜色。

    没有生长规律的色系生长色系的渐变色


    例如上图所示,统计的是新型冠状肺炎病例每个省份的现存病例人数,左边的图颜色并没有色系和生长规律,用户难以理解具体指标数值的映含义,而此时如果使用右边的生长色系的表达方式,它会传达给用户一种颜色可测量感。

    那么用户根据这样的渐变生长色系,就可以很轻松地理解中国每个省份地区的现存病例分布情况。

    2.2 语义颜色一致性

    符合语义的颜色可以帮助人们更快地处理信息,尽量根据指标含义选择符合人类最直观感受的颜色。

    1)通过不同颜色表示系统的稳定状况,参考我们的红绿灯(绿灯行、黄灯等一等、红灯停),既生动又易于理解:

    • 绿色表示当前进展正常

    • 橙色表示预警需要关注延期原因

    • 红色表示某个项目已经异常,影响线上业务,需要立刻处理

    • 紫色表示暂不需要关注


    2)比如在分析股市时,我们可以使用统一的红绿配色,分别代表了股票的上涨和下跌。

    3)因为人的视线第一眼就会被一些颜色(比如红色)吸引,那这些东西应该是最需要让用户注意的地方,比如使用红色进行预警:


    2.3 指标颜色一致性

    在同一仪表板中,对于相同的指标尽量使用同一色系的颜色方案,避免使用过多的颜色对用户造成干扰。

    例如我们在做营业额利润分析时,通常分析指标会有成本、利润、利润率,那么即使我们在对同一个指标做不同维度的数据可视化分析时,对于相同指标建议分别使用相同的色系进行配色,如下:

    • 成本:蓝色

    • 利润:绿色

    • 利润率:黄色

    我们在遵循这样的指标颜色一致性配色原则之后,用户就能够快速地根据颜色区分来理解当前的数据可视化图表所要表达的指标含义。

    2.4 色系颜色一致性

    如果我们是自定义配色,需要避免一些撞色。

    例如把黄+白、蓝+黑、红+蓝、黄+紫等等色系进行搭配,这样不但从感官上不美观,而且还容易对用户的眼睛造成刺激。详细可参阅:色彩与配色基础


    附件列表


    主题: 可视化设计流程
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

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

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

    不再提示

    10s后关闭