推广 热搜: 可以  page  搜索引擎  企业  个数  百度  使用  音视频  选择  行业 

让你的数据更生动!可视化图表基本配色方法

   日期:2025-01-03     移动:http://ww.kub2b.com/mobile/quote/12325.html

色彩在可视化分析中担任着一个十分重要的角色。在搭建仪表板或数据大屏时,恰当的色彩搭配,能够使整个数据图表的呈现更加清晰、整洁、准确。但在实际操作过程中,对于一个新手小白来说,能够熟练地为自己的仪表板设计配色并不是一件简单的事情,有时甚至耗时耗力。

本期内容将教新手小白们「如何为仪表板或数据大屏等设计美观又合适的配色」,帮助大家快速掌握色彩搭配的诀窍,轻松搞定仪表板和数据大屏的配色问题。

配色原则

一、色彩基本原理

1、色彩三要素(HSB)

①色相H(Hues)

色相指颜色相貌,是颜色间彼此区分的明显特征。物理学或心理学上能区别的基本颜色为“红、橙、黄、绿、青、蓝、紫”,黑白灰没有色相属性。

色相带给人的感受大体分为三种:冷色系(蓝色、蓝绿色等)、暖色系(红色、橙色、黄色等)、中间色系(紫色系和绿色系),中间色基本上不能单独营造冷暖印象。

在数据可视化应用中,色相没有明显的顺序性,一般不用于表达数据量的高低,而是用于表达数据列的类别。

② 饱和度S(Saturation)

饱和度指色彩的鲜艳程度,也称作纯度。

色彩的纯度越高,颜色越鲜艳,更容易形成强劲有力、充满朝气的印象;纯度越低,颜色越苍白,更容易形成成熟、稳重的印象。

③ 明度B(Brightness)

明度指色彩的明亮程度,也称作亮度。

明度分为两种:相同色相的不同明度和不同色相的不同明度(人类视网膜感知的明度)。

在数据可视化应用中,饱和度和明度, 在视觉上很容易区分出优先级的高低,主要用于表达顺序或数据量。

2、色彩对比

色彩对比,是指采用两种或两种以上的色彩搭配使用时产生的对比。

    一种色相的不同明度或饱和度的对比。如蓝与浅蓝(蓝+白)色对比。对比效果统一、雅致、含蓄、稳重,也易产生单调、呆板。

      弱对比。对比效果柔和、和谐、雅致、文静,也易产生单调、模糊、乏味、无力,需要通过调节明度来增强效果。

        弱对比。对比效果较丰富、活泼,但不失统一、雅致、和谐。

          强对比。对比效果强烈、醒目、活泼、有力,但也不易产生统一而杂乱、刺激、造成视觉疲劳。一般采用多种调和手段改善对比效果。

            强对比。对比效果强烈、醒目、活泼、有力,但容易产生视觉疲劳。一般采用多种调和手段改善对比效果。

            二、色板类型

            1、分类色板

            分类色板,主要用于描述数据的类别,每个类别没有固定顺序,例如不同国家、不同企业、不同个体分类展示。

            2、顺序色板

            顺序色板,主要用于表达同一事物中的数值大小、梯度的变化。一般情况下,颜色越深数值越大,颜色越浅数值越小。

            3、分散色板

            分散色板,主要用于表达数据从负数到0再到正数的连续变化。常采用从一种颜色经过一个浅色再均匀过渡到另一种对立颜色的表现方式,而中间浅色则作为中心值或者参考值。

            如下图:绿色表示正数,红色表示负数,中间浅色则是0;或绿色表示正面,红色表示负面,中间浅色表示中立。

            4、语义色板

            表达负面的、不可行、危险、失败、严重、股票涨(根据地区不同)

            表达正面的、可行、安全、成功、股票跌(根据地区不同)

            表达警示、暂停、注意、提醒

            表达中立、普遍

            配色方法

            一、有主题色

            1、 创建灵感色板

            Step1. 进入设计网站:https://dribbble.com/

            Step2. 输入主题色,得到主题色相关报表的列表

            Step3. 选择喜欢的图片,模仿配色,可以使用Keynote或PPT中的拾色器取色

            2、从品牌色探索配色方案

            ① 单一品牌色的发散

                    Step1. 寻找品牌主色

                Step2. 校准主色

                    在仪表板或数据大屏中,需要遵守一些基本原则:

                      所以在上述情况下,需要在品牌色相的基础上进行校准调整(结合场景如大屏的暗色背景),使这些色彩应用于图表时,能够传达品牌感。

                      Step3. 发散辅助色

                      基于主色,我们需要寻找一系列的辅助色以满足可视化的需要。一般来说,需要约80%的近似色和20%的对比色(用于版面的点缀)。

                在近似色的60°色环上,我们可以选取出更多的颜色,创建出分类色板;同时,通过调节明度和饱和度,我们可以创建出顺序色板。

                ② 多品牌色的发散

                        从单一品牌色的发散可以总结出,在可视化图表中,我们需要一个分类色板、其对应的顺序色板、1-2种的对比色。那么将多品牌色合适地置入色板中,并通过类似的方法进行填补,则完成了多品牌色的发散。

                        Step1. 寻找品牌色

                        选取多品牌色中的主色作为图表主色,点缀色作为对比色或对比色的调和参考。

                        Step2. 确定分类色板

                         在近似色的60°色环上,我们可以选取出更多的颜色,创建出分类色板;同时,通过调节明度和饱和度,我们可以创建出顺序色板。

                应用示例:

                二、无主题色

                1、创建灵感色板

                      Step1. 进入设计网站:https://www.zcool.com.cn/

                      Step2. 输入关键词,例如数据可视化、数据大屏、Data Visualization、Dashboard等

                        Step3. 选择适合的图片,模仿配色,可以使用Keynote或PPT中的拾色器取色

                2、从照片/图片发散配色方案

                        Step1. 选择一张合适的照片

                        可通过以下工具,导入照片,提取专属色卡:Muzli Colors or Coolors Generator

                        Step2. 发散颜色

                        当图表中需要更多的颜色时,可以对照片再次提取主色,也可以根据主色继续发散。具体操作如下:

                      在进行上述操作后,可创建出一个分类看板。此时,可基于分类看板的“所有颜色在视觉上平衡等价且清晰可辩”的原则,再次进行色彩微调,具体操作如下:

                        配色常见问题

                                观远官方配色字典

                                1、海滨

                                2、春日

                                3、湖光山色

                                4、正式场合

                                5、维他命

                                6、彩色乐章

                                7、未来蓝

                                8、玻璃幕墙

                                9、冬日午后

                                10 、薄荷

                                11、 魔术球

                                12、 游乐场

                                13 、野餐聚会

                                14 、公路旅行

                                配色常用工具

                                  本文地址:http://ww.kub2b.com/quote/12325.html     企库往 http://ww.kub2b.com/ ,  查看更多

                                  特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


                                  0相关评论
                                  相关最新动态
                                  推荐最新动态
                                  点击排行
                                  网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号