今天就给大家带来一套全新的仪表盘美化教程，其中我们将与大家分享一个【蓝紫色卡片样式】仪表盘样式，充分利用了Finebi 60.版本 15 中的新组件分组功能巧妙地适配了 PC 和移动效果，为美化仪表板提供了强大的支持。
PC效果：
移动效果：
下面，我们将从以下方面开始：组件布局、样式元素的使用和图表的应用三个方面详细说明了如何优化和美化仪表板。
文章和图片都是由 Finesoft 的明星产品 Finebi 制作的！
关注Finefine，我们将持续为您讲解企业数字化转型的数据分析方法和工具及解决方案“>>
原始布局分析
在原始演示的基础上，整体演示可以分为以下几个方面：
整体运营数据。
销售与区域指标。
分析操作的细节。
怎么了？
虽然整体业务数据放在了正确的位置，但其风格不够突出，导致地图和条形图从页面中窃取了视图。
2和3的信息穿插，违反了人眼观看信息的规律，即：上下; 左，右。
第二个重要信息放置得太高，导致一个屏幕上显示不完整，整体浏览步骤被打乱。
优化布局问题
根据上面分析的问题，我们将进行有针对性的优化：
突出显示第一个重要数据的样式：重点放在背景中的大色块上，以便在整个仪表板上一目了然地看到整体业务数据。
用三维图标吸引眼球。
以上色块和图表只是吸引眼球的一种手段，统一的版面调整应根据自身数据来决定有必要使数据以图形方式完整，吸引有真实的数据去看。
根据数据总分的结构，组织好读取数据的过程和视线，从而引导用户从上到下读取数据。
3.其他布局样式适用
将每个区域嵌套在两个图层内，以避免破坏整体布局和过于复杂的样式。
在每个区域中，确保存在整体颜色或图形视觉重量和视觉重量是有区别的、红色、黄色、绿色。
对原始风格进行整体分析
原始演示中的整个空白屏幕是单调的，没有很好地利用图形来呈现数据。 特别是，应避免红框内的空白空间。
由于数据关系，组织文化、链管理等组件存在许多空白区域。
由于选择的图表类型不合适，品牌管理、产品管理等类别的图形不够饱满，导致出现空白。
每个元素都是单独独立放电的，缺乏分组的概念，但实际上，一些相邻的图之间存在相关性。
直方图和地图中过多的蓝色区域会窃取重要信息的视觉焦点，导致重要信息无法突出显示。
优化整体风格问题
改变使屏幕变薄并使仪表板更丰富的因素。
通过调整组织文化、链管理等组件显示数据的最小值和最大值，或调整组件的位置和大小，可以使图形尽可能地填充组件区域。
将不合适的图表替换为内容丰富且满足业务需求的图表，并考虑对小区域数据使用合适的类型，例如雷达图，而雷达图可能显得薄弱且不足以处理大面积数据。
将一些关联的图表分组排列或堆叠，以提高整体数据查看的流畅度和一致性。
使用颜色清晰的背景色来突出显示重要信息，并使用浅色来突出显示详细信息分析图表的其余部分。 需要注意的一点：整个仪表板只能有一个亮点其他区域的视觉重量不应超过它。
使用不同的颜色来显示对比柱形图的两侧，以获得明显的对比度。
文体元素
注意：所有元素中必须包含以下样式元素，以体现整体通透、精致、干净、丰富的风格。 在视觉重量方面，只有一件作品可以使用厚重的色彩并采取渐进的层次。
1） 仪表板
预设样式：默认亮白色。
背景颜色：f7f6f9;
组件间隙 0;
自适应：固定尺寸（通用桌面（1366*768）;
仪表盘整体强调色：（使用零星的小色块，突出整体仪表盘中强调色，避免大规模使用）。
2） 组件
圆角 6px;
标题背景：白色;
边框：无; 标题文本：默认自动;
3） 组件组区域划分
利用组件的分组功能将每个区域块绑定在一起，以帮助更快地调整大小和定位;
20px 间距在组件组中统一使用。
4） 文本
仪表盘整体文字以12px为主;
标题：庞门正道标题字体，34px，粗体;
组件标题：Dashboard 预设默认样式;
指示卡文字大小：
5） 图表
为了制作精美的图表，以下细节是必不可少的：
避免使用笨重的条形图，而应使用较细的条形宽度;
为了避免窃取重要信息的视线，我们选择使用浅色调的图表。 但是，这可能会导致缺乏认可。 为了提高识别度，我们可以考虑通过向列添加边框来添加颜色细节。
对于面积较大的圆形图表，建议使用透明度，以保持整体的透明度。 如果没有透明度，它可能会显得笨拙并破坏整体效果（例如，优化的点贴图）。
对于较小的圆形图表，您可以在不破坏整体感觉的情况下使颜色变暗（例如，散点图）。
图表配色方案：6） 选项卡组件
选项卡组件的嵌套使用规范：
此模板使用多个辅助选项卡;
如果您有更高级别的选项卡，则可以使用第一级选项卡样式;
避免使用更多分层选项卡;
只能有一个一级选项卡：
7） 其他视觉元素
图例放置在图形区域的空白处，以合理利用空间由于雷达图的整体呈方形，当放置在矩形组件内部时，两侧都有空白。 因此，我们建议将图例放在图表的右侧。
其他矩形图表可以充分填充整个组件，因此为避免图例占用额外空间，我们建议将图例放在图表的上方或下方。
让一切变得简单如果您有轴标题和图例，则它是重复信息。 统一取消轴标题。
如果移除轴没有识别效果，则出于美学原因应移除轴。
除了此仪表板上已有的图表类型外，下面还有一些相同样式的更常见的图标类型。
1.饼图
甜甜圈饼图保留了透明感; 实心饼图可以增加图表的面积，因此您可以根据需要进行选择。
用双色三色渐变填充圆环饼图。
饼图的 6 个类别已达到限制，当类型较多时，应更改图表类型。
*样式应集成到整体仪表板中，可以使用以下样式参数。
行高
标题：40 正文：30
样式主题
风格： Style 1.
主题色： f2f3f7
数据条颜色：
#d8dbfd
#c8e6f8
整体应用效果：
希望本文能帮助您和您的企业制作出更美观的仪表板！