「模板美化解决方案」一页纸解读如何做好看的模板

疏影横斜奥特曼·张 · FineReport产品运营

在无数个寂静的深夜默默流泪

是谁让你心碎让你独自伤悲

阿瑶带你一页纸解读如何做好看的模板，一套技能带走模板美化拦路虎

ACE苦难不是梦，跟所有的烦脑说拜拜~

第一招：展示数据的价值

在这个例子中列举了很多经营数据，但并没有最终结论。

对上面的例子做个调整，就是数据思维的成果了。

2017年第三季度，某品牌在江苏地区的三个销售代理商 A、B、C分别完成销售130.4万、210.5万、98.6万，共计439.5万；
去年同期他们分别完成销售额110.2万、150.3万、96.3万，共计356.8。总体同比增长了23.2%，有明显增长，但并未达到预期的30%。
根据市场调研数据，竞争对手 XXX今年第三季度实现38%的增长，而其中在 C 代理商所负责的区域，竞争对手达到200%的爆发式增长，销售额达到约320万~350万。
公司需要对 C 代理商进行重点关注，做出适当调整。

第二招：选择合适的图表

选择图表之前一定要弄清楚三个问题：

根据三个问题的答案确定想要表达的具体主题，根据主题选择合适的图表

第三招：一套完美的布局

不论页面信息量的多少，卡片式布局都能够展现出良好的设计感。当然这一切的前提是要明确好整个页面要展示哪些数据，梳理好信息的层级，构思好数据的展现形式，然后可以手绘一些草图，修改调整到合适的布局。

第四招：美出天际的配色

图表系列色：不同展示逻辑的图表可能需要不同的配色，所以一般至少准备两种图表系列色

对比系列色：

常用于多系列的柱形图、条形图和饼图等，强调数据系列之间的差异。

连续系列色：

常用于单系列的柱形图、条形图、面积图等，在大屏整体看来只有“一个颜色”，但渐变的效果不仅表达了数据之间的连续性，还有酷炫的视觉效果。

告警色：

一些需要特别突出的指标，或指标值达到预警值时的颜色，一般比较明亮，且与主配色有较为显著的对比。如果结合图表闪烁动画、警戒线等共同设置，效果更佳。

第五招：工整合理的文字

不同使用场景的文字通过字体的大小和颜色强调区分，需要根据展示的终端确定一级字号用多大，二级字号用多大等，最大大到标题，最小小到标签图例的字号最好都是统一设计的，不要随心所欲。

推荐示例：

大招：学会技能我们未必能做好模板，但是避过坑点我们一定有所提升

第一坑：内容丰富无重点

你是否认为展现的内容越多，报表的价值越高，但是事实并非如此。

一张空白的纸上，添加的每一个元素都会消耗受众的脑力，因此我们需要仔细审视视觉元素，识别出无法增加信息量的元素并将它们删除。

所以我们一定要筛选信息密度，使信息展示量恰到好处；区分信息主次，使信息显示主次分明。

第二坑：间距混乱看不惯

涉及到各模块标题与模块边界的间距（蓝色矩形标记的位置）、模块与模块之间的间距（红色矩形标记的位置）、模块与整个大页面额间距（绿色矩形标记的位置），这几个重要地方要做到统一一致，布局的规整性就有了一个大概。

一些细节之处也需要做到统一，例如图表坐标轴与模块边界的间距，各个分类之间的间距等需要细化。

第三坑：内容拥挤无留白

在版式设计中空白运用的好坏，直接影响其版面的视觉传达效果。留白的运用是增强视觉传达效果，提高作品的诉求力，赋予作品版面审美价值的一种重要构成技术。

应用在报表中主要体现在模块不要顶边，模块与模块间要有合理间距，在模块中图表的边线不要顶边，如果是分类很多的柱图不要使用宽柱子，注意好距离，留好等于或者大于一个柱子的身位。

第四坑：元素多样理还乱

边角统一是画面和谐的关键因素，使用圆角还是直角都是看页面效果需要或者个人的倾向，但是要避免同一页面出现两者同时出现的情况。其中包括指标卡的边角，模块背景的边角，柱形图的边角等。

坑点速排一览表：

排版	body和上下左右得间距是否合适，两两是否相等整体疏密是否有偏颇各种图表、背景图是否有拉伸变形整体调性是否合理
组件	body和上下左右得间距是否合适，两两是否相等整体疏密是否有偏颇各种图表、背景图是否有拉伸变形整体调性是否合理
颜色	整体得主色调是什么一共用了多少种颜色（小于7）颜色得语义是否一致—（告警得用红色黄色等）
字号字体	标题是否足够突出所有得文字是否都用的一种字体全模板以共有几种字体大小（小于4）所有组件标题是否一致所有图表细节字大小，颜色，字号是否一致