后台系统数据可视化页面设计总结

最近一段时间参与了几个后台系统数据可视化页面的项目，在项目过程中遇到了一些问题，通过对这些问题的思考收获了一些心得。这篇文章总结出我的所获分享给大家。

一、数据可视化在后台系统中有什么用？

业务运行过程中会产生大量数据，这些数据能反馈出业务的运行情况。但往往业务产生的数据会有很多种，量级也会十分大，梳理和分析数据是一件很耗时的事情。而数据可视化可以将大量的、抽象的数据通过详细的、具象的图形展示出来，帮助相关人员理解业务运行情况、分析趋势、预测风险、做出决策等。尤其是在定期业务汇报、活动运营监控等时候更是必不可少的。

二、数据可视化页面有哪些分类？

通过对现有的案例搜集分析汇总、聚类分析，以及对设计前辈们的经验总结，我整理出以下两种常见的类型：

01. 分析型页面

这类页面通常是后台管理系统内的数据展示和分析页面，一般是大量且全面的数据展示，并给出简单的数据分析，帮助决策。分析型页面由于要展示的数据指标较多，分析维度也丰富，通常会支持一些交互操作，如条件查询、分类查看等。

02. 运营型页面

这类页面时效性更强，一般使用在实时监测预警的场景下。多为大屏、色彩丰富、动效炫酷，可以营造氛围、打造仪式感、传递企业文化和价值。运营型的可视化页面，通常是实时数据的展示，不加任何的交互操作。

三、数据可视化界面的设计流程是怎么样的？

数据可视化项目的设计流程与其他项目基本一致，差异点在于设计者需要对业务数据十分熟悉，要明确了解数据指标之间的关系。然后需要熟练掌握各种常用图表类型的特点，能选择合适的图表类型展示各个数据指标以及之间的关系。下面会简单讲讲每一个环节都是如何进行的。

01. 确认需求

在确认需求阶段，首先要明确的问题是：页面的使用场景是什么？是放在业务系统中向内部运营人员提供数据分析功能，还是活动期间做数据监控和预警，又或者是对外展示宣传？

根据页面的使用场景，确定页面是运营型还是分析型，类型对页面设计阶段的影响较大。

另一个要明确的问题是：页面的使用者是谁？根据使用者的角色，分析他想从页面获取哪些信息，进而确定页面应该展示哪些数据、如何展示。

举一个例子，一个借贷平台要在一个会议上向合作资金方展示业务进展情况，需要在会议展厅大屏幕上投放一个数据可视化页面。资金方关注的无非是业务运转情况、资金情况、用户情况等，想从中看出与这个平台合作的价值与能带来的利益，所以页面定位为运营型的页面，可以展示一些业务动态数据、资金和用户数据等，能提升和完善企业形象。

02. 数据分析

在需求确定之后，页面要展示的内容基本已经确定。接下来需要做的是根据业务场景提取关键数据指标，分析各个数据指标的特点以及它们之间的联系，选择合适的图表类型。由于页面空间是有限的，所以要对数据指标进行重要级的排序，突出显示重要级高的，适当弱化重要级较低的。这一步与业务结合十分紧密，应尽量与需求方及时沟通确认。

下面是几个常用的图表类型，并对使用场景做简单的介绍：

在选择图表类型时除了要考虑能否表达数据意义、是否容易理解外，还要考虑是否可实现，要及时和开发沟通。

03. 页面设计

前面所有的分析和研究都是为了页面设计这一步做准备。

（1）设计页面之前，首先要确定界面的尺寸和投放设备。

如果是运营型页面，通常投放在各种大屏上，这类屏幕的尺寸多种多样，需要提前确定好尺寸。

如果是分析型页面，主要在电脑屏幕上查看，能与市场主流的界面尺寸完美适配便可，目前主要考虑的是1280、1366、1440、1920等宽度的屏幕。

（2）接下来开始版式设计。由需求确定和数据分析阶段已确定好的数据重要级和图表类型，进行页面的版式设计。此时最重要的一点是：让最重要的信息最容易被看到。

（3）然后是视觉设计，分析型页面和运营型页面在视觉效果上差异较大。

分析型页面通常是放置在后台系统内，视觉风格上要与整个系统保持一致，因为此时页面使用者是业务人员，关注的本质是数据本身，应简化视觉效果，突出数据本身，在数据维度多量大的情况下，可以灵活加入少量的交互方式。

运营型页面的风格绚丽且让人沉浸，通常会结合多样的色彩、炫酷的动效或视频，打造丰富的视觉效果。

（4）视觉设计完成后，要和相关方确认最终方案进行定稿。主要是和需求方和开发确定方案的准确性、易读性和可行性，定稿后开始开发。

04. 开发实现

这个阶段多和开发小伙伴们沟通，跟进实现效果，发现问题及时调整，保证上线后的视觉效果。

四、项目中遇到的一些问题

最后记录几个项目中遇到的问题和最终的解决方案。

01. 动态背景无法显示

在一个运营型页面中，我们使用了Canvas的动态背景丰富视觉效果。但在不同设备上演示的时候，由于设备原因，会导致动态背景无法正常展示。为了解决这个问题，我们做了两种准备，一种是在正常的设备上继续使用动态背景，另一种是退而求其次，用一张相似视觉效果的静态背景图替代。

02. 字体无法正常显示

大多数用户都不曾在电脑上安装过默认字体以外的字体，所以在设计界面的时候应尽量使用默认字体，如有特殊字体则需要前端开发嵌入字体包，但也要尽量减小字体包大小，避免增加页面的加载时间。

感谢阅读~