数据可视化大屏设计实战分享

年底完成了一些数据可视化网页版UI改造及大屏可视化设计的方案，最近空出一些时间来整理遇到的问题及设计思路，本文分享一下想法和感悟。

重点概览：

1. 了解数据可视化
2. 图表设计指南；
3. 具体设计思路；
4. 大屏优化设计
5. 总结

一、了解数据可视化

可视化是为了帮助用户更好的分析数据，信息的质量很大程度上依赖于其表达方式。

数据本身是冰冷的数字，通过选择合适的图形或者图表来进行展示表达，使得传递给使用者的感受更加直观、更容易获得其中的价值。

数据可视化将技术与艺术完美结合，借助图形化的手段，清晰有效地传达与沟通信息。一方面，数据赋予可视化以价值;另一方面，可视化增加数据的灵性，两者相辅相成，帮助企业从信息中提取有价值的信息。

二、图表设计指南

在数据可视化设计中，首先面临的问题是如何将各种繁多的数据指标进行展示，需要根据数据的特点，以及数据之间的关系，决定选择什么样的图表类型，然后梳理数据包含的维度，最终突出关键信息。

如下图，通过对数据展示需求进行归类整理，并调研行业内的主流解决方案，将数据展示需求分为以下几种类型：

四、大屏优化设计

本次可视化大屏主要是为了实时展示相关数据监控情况，不同于网页版可视化设计的展示，大屏展示需要做到重点突出，要求较强的数据展示能力，而不是面面俱到。

网页版偏向展示一段时间内的数据，甚至是通过日期筛选查询到某一时间段的数据。大屏更多起到的是监测职能，反馈的是实时信息，显示的是当下的数据。以下是大屏设计和网页版设计的一些不同：

1. 布局和配色：设计尺寸

硬件尺寸：

6384*1216px，分辨率：72dpi设计布局了解需求的基础上，辨别数据的优先级，做到重点突出，细分资源类型及指标，布局出大致的设计模版，如下图。

字体：

配色：

相比较网页版设计展示，大屏更倾向于选用深色调背景，不仅为了让视觉更好聚焦，而且长时间观看之后眼睛也不会出现视觉刺刺痛感。

基于此，所有图表的配色皆以深色系为背景，保证数据明度与色调的和谐统一。

数据元素：

图标：

2. 展示和交互

在大屏展示中，有多种资源类型及数据展示。通过构图突出重点，在主要信息和次要信息的布局和所占面积上进行调整，明确层级关系和流向，使观者获取信息时也能获得视觉平衡感。

以地图的方式展示出资源分布信息，左右两侧排布详细类别的资源信息展示，在构图上突出主次。并在全国地图中省份位置添加钻取的动态效果，进一步增强视觉导流线和信息层级的引导作用。

不同于网页版可视化内容展示可以做到面面俱到，大屏界面空间有限，必须突出重点，将重要的指标放在最显眼的位置，尽量集中放置，吸引视觉焦点。

交互方面，网页版可视化内容展示的交互复杂相对多样化。而可视化大屏，交互样式单一，更多是侧重于数据多维度钻取。

3. 优化细节

在完成大屏设计初稿后，为了进一步优化维度和展现的方式，对大屏中的细节进行优化。例如对背景、装饰线框、图表线条等细节进行审查。

比如视觉上显得线条太多，页面整体不够清晰，重要信息凸显不出来。对应装饰元素能避免则避免。

对于层次感不明显的问题，进行了丰富信息以及加大背景色对比度的调整；对于图表中柱状图的数量过密和过疏，进行长宽高、面积进行调整；对于表格排列进行优化序号突出重点的调整……

最后一步，按照产品经理收集到需求方的要求，考虑到是否达到预期，是否有色差等。最后也要让需求方审核是否能够理解，数据是否是想要的样子。

优化后的最终版：

五、总结

数据可视化设计的着力点就是要把握好图表的主次关系，突出主要图表的重点数据。

本次设计实战，在网页版UI设计基础上，提炼重点数据信息进行大屏设计，最终目的是能够让观者洞悉各个资源的使用情况。

在本次设计实战需要在短时间内实现复杂繁多的指标数据可视化，网页版要做到面面俱到，大屏版要做到重点突出，整体设计难免有不完美的地方，后续会继续改进完善。

本文作者@一时无两

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！