做报表这件事外人听起来简单,但只有做过的人才知道,真正做起来既要考虑到功能还有美观度,好不容易做完了,看着手指头都能数过来的访客数,顿时心累,觉得工作成果根本无人问津。那到底怎样才能制作出一张好看、有用、有人愿意看的报表?
今天这篇文章把答案一五一十给你掰开揉碎了说清楚。
想要制作一张好看的报表,首先要明白工作中常见的报表有哪几种,再对症下药。
我把市面上的报表大致分为三种,分别是简单普通报表、复杂聚合报表、决策报表(可视化大屏),在下文我会介绍各种报表的制作过程。最后,分享5个我制作报表这么多年后总结的经验技巧,要想报表做的好看,一定要牢记这5点。
了解常用的3种报表类型
1、简单普通报表
具体制作教程:第一张普通报表制作教程(完整版)
主要由参数选择面板、简单表格和图表组成,是最常用也是用于制作大多数报表的设计模式,是一种类似Excel做报表的设计模式,可以制作企业中用Excel做的各类报表并将之web化。
能够从企业的各类业务数据库例如CRM、OA、ERP等中取数,制作财务、销售、人事等企业经营各方面的报表,实现随时随地在PC、移动设备中进行报表访问及数据查询、编辑修改等。

2、复杂聚合报表
具体制作教程:第一张聚合报表制作教程(完整版)
复杂聚合报表是指一个报表中包含多个模块,每一块都类似一张单独的报表或者一张图表,块与块之间相对独立,互不影响。同时,不同块之间的单元格扩展分离,互不影响,所以能专门解决不规则大报表难题。

3、决策报表(可视化大屏)
具体制作教程:第一张决策报表制作教程(完整版)
决策报表,是专为解决驾驶舱类报表/dashboard而开发的。不同于简单普通报表的类Excel界面,决策报表采用的是画布式操作界面,通过简单的拖拽就可做出“管理驾驶舱”,在同一个页面整合不同数据,展示各类业务指标,实现数据的多维度分析。

5个技巧教你如何让报表可读性、美观度更高,不再做没人看的报表
为内容选择合适的排版布局
在页面中要有合理的留白
颜色的准确搭配
注重图表的选择和细节注意点
缺乏审美,就学会套用常用的报表配色
技巧1:为内容选择合适的排版布局
众所周知,报表数据多且杂,所以选择合适的内容排版布局极其重要。推荐使用“卡片式布局“,有聚焦信息的优点,因为它看起来像现实世界的有形卡,更直观的给浏览者知道这一块卡片里的内容是代表一个整体的信息。
一些卡片式布局推荐:

不论页面信息量的多少,卡片式布局都能够展现出良好的设计感。当然这一切的前提是要明确好整个页面要展示哪些数据,梳理好信息的层级,构思好数据的展现形式,然后可以手绘一些草图,修改调整到合适的布局。
技巧2:在页面中要有合理的留白
留白的运用是增强视觉传达效果,应用在报表中主要体现在:模块不要顶边,模块与模块间要有合理间距,在模块中图表的边线不要顶边,如果是分类很多的柱图不要使用宽柱子,注意好距离,留好等于或者大于一个柱子的身位,画面就会有呼吸通畅的感觉了。

技巧3:颜色的准确搭配
根据报表的主要用途和要解决的问题来确定要选择的背景颜色
文本驱动型的报表(比如分析报告等):浅色背景会让阅读更有效率,让用户更专注于内容。
视觉驱动型的报表(比如大屏驾驶舱等):以图为主,用深色的背景会更好一些,因为深色的背景衬托着明亮的色彩,会让整个图片看起来更突出,同时会让整个界面的布局看起来更时尚。
想要表达科技感、未来感选择蓝紫色系为主色调,且推荐深色背景。
想要表达简约、活力感选择蓝绿黄等色系为主色调,推荐浅色背景。
推荐示例:


技巧4:注重图表的选择和细节注意点
图表的选择
图表并非总是展示统计信息的最佳工具。有时文本和(或)数据表格可以更好地 向受众解读数据,并且能替你节省很多时间和精力。
出现下述几种情况时,应当重新考虑是否使用图表:
数据值很分散
数据值太少
数据值太多
数据值变化很小或者没有变化
图表细节注意点
①在实际图表使用的过程中,经常会出现大量颜色使用的误区,建议高亮重要数据,其他数据默认置灰,突出重点信息。

②图表的布局很重要,最好规整,有圆的地方,注意要用一下方,有方也要有圆。所有的图表,在一起不能显得太凌乱。

③图表的背景色很重要,巧妙使用,可以得到不同的效果。背景色里面,也可以设置间隔或渐变,得到不一般的效果。


技巧5:缺乏审美,就学会套用常用的报表配色
PC端报表风格配色
蓝绿基本风格

蓝紫渐变风格

深色低调风格

深色明亮风格

蓝绿渐变风格

黑色沉稳风格

移动端报表风格配色
深色黄绿风格

深色绿紫渐变风格

绿色清新风格

青春靓丽风格

活力红风格
