大屏配色困难症快看过来，老板想要的方案终于被我找到了！

Posted 2023-04-06 Leo.yuan

“一顿操作猛如虎，一看大屏还是土”，大屏的配色和设计常常让开发者们愁秃了头。今天我就给大家介绍一下我从设计师朋友那里请教来的大屏配色干货，教你三步玩转大屏。

首先我们需要意识到，大屏的特点决定了它的配色非常重要。以下是大屏的几大特点：

面积巨大——用户站在远处才能看全内容，所以字体也不能太小并且尽量用图表表现。

深色背景——让视觉更好的聚焦。

空间局限——大屏不像网页有滚动条，它的长宽都是固定的。

独立主题——每块酷屏都有具体想表达的某个主题，每个主题可以用不同的色彩和图形来凸显。

01、主色调如何决定
（1）巧用搜索引擎来决定主色调

一般来看，大屏的主要色调都为深色。可视化设计中大屏设备普遍用深色是为了减少屏幕拖尾，使观众观看时不会觉得眼疲劳。此外，深色背景不仅便于聚焦视觉，突出内容，也很方便做出一些流光、粒子等酷炫的效果。

此外，主色调一般与公司的特点挂钩，比如说字节，作为一个软件公司，我们搜索网站时，一般以数据和科技作为关键词，通过搜索引擎的到的结果以蓝色为主。而直接搜索对应的公司，我们也得到了相同的回答。

之后，我们通过调整蓝色的明度、饱和度，进一步结合公司品牌色和产品背景，调性等方面去做考虑颜色的运用配比。这样我们就能确定主色调。

（2）配色网站案例给你

此外，我们也可以通过配色辅助工具网站来协助搭配颜色方案。这个名为Adobe Color的网站是Adobe旗下的官方配色网站，我们可以通过探索和趋势板块来寻找自己行业的配色方案。

02、重点数据如何凸显
（1）控制颜色数量

图标的颜色需要避免杂乱，大屏上的信息量多，若用不同的颜色来表现数据和图表容易给用户造成阅读障碍，不利于信息的有效传递。原则上，统一图标最多使用7种颜色，若需使用更多颜色，建议考虑其他图表形式或分组展示。

（2）巧用透明度，亮度和饱和度

大屏设计保持颜色一致性，如果图表很多，那么在不同的图表中，同一个类目最好用同一种颜色，我们通过调整颜色的透明度，亮度，饱和度来进行区分。

（3）具体案例分析

对于重要数据，我们可以巧用对比色，增加明度或者互补色的方式来突出重要数据。以下是大屏一般的可视化案例。深色背景上，相近的颜色被用来表现同模块的图标，明亮而饱和度高的图标非常醒目，图标本身又用不同的透明度来突出比例的变化（图1），使得整个大屏上数据一目了然，主次分明。此外，合理利用对比色也可以使得大屏看起来更高级，好莱坞电影的经典调色手法蓝橙色调也一样可以被运用入大屏的设计（图2），不仅美观而且实用。

03、如何从内容寻找对应颜色
（1）颜色的文化差异

同一种颜色在不同文化，不同的地域下的含义可能千差万别。蓝色，在很多地方蓝色的护身符被认为是权威，宁静和信任，但蓝色也可以代表抑郁，孤独和悲伤。

在很多可视化作品中，政党、国家、心情等都会有常用的颜色编码。在大选时，特朗普是红党,红色是共和党的颜色,他一直带着红色领带。蓝色是民主党的颜色,所以,拜登一直带着蓝色的领导,摇摆地区的颜色是黄色

因此，大屏设计师们也一定要按照人们的固有颜色认知来对特殊含义的数据进行配色，让用户对数据传递出的信息更清楚、更明白。

下面我也从设计师那儿要来了大屏方案模版，包含数十种行业的大屏实操，可以通过自定义选择行业来观看相应的大屏案例，私我了解情况。

Power BI 案例篇之大屏展示

Power BI 很多小伙伴日冲都会用到他做报告，其中 Power BI 还可以做大屏展示。

今天小编就为大家分享一个使用 Power BI 制作的大屏展示。

在Power BI 大屏设计中对背景的设计和配色比较有要求，主要是如果配色和布局搭配不好的话，就不会有大屏的感觉。

大屏其实我们抓住一个重点就行，科技感。

接下来让我们一起看看下面几个大屏的效果吧。

大家发现了吗，上面这个大屏的背景元素都是以圆滑的轮廓为主，那我们再看看同样的换成方形的轮廓效果如何呢。

大家可以回复我您觉得圆形的轮廓效果好还是方形的比较合适。

下面还有几个不同的方式的大屏效果，


大家可以自己试试做一个大屏，就像前面所说的，只要背景和配色搭配得当，就可以啦！