如何美化图册

第1章 概述

为什么别人用SaCa DataViz做的大屏很漂亮,我做的却就很丑呢?

他们做成那样、

1

我却做成这样

2

好消息是,SaCa Dataviz有很多实用的技巧可以让屌丝瞬间变成高富帅。支持面向不同用户团队的解决方案。

第2章 如果你拥有一个设计师

SaCa DataViz的配置能力很强,设计师设计效果,基本上都可以完全还原,但为了保证工作量可控,以及效果能够100%还原,需要有如下注意事项

1) 不能创造新图表

SaCa DataViz中有超过100种图表,设计师要在这些图表中组合选择,如果设计师创造一个新图表或者新效果出来,可能导致扩展图表的工作量大大增加。

2)设计自由度

a. 配色,包括图表配色以及位置内容配色

b. 字体

c. 布局

d. 边框

e. 图册背景图

f. 图表背景图

g. 标题

h. 图标

i. 动图

3) 设计师最重要的输出

a. 整体效果(包含配色、布局)

配置主题时可直接获取颜色值,在下图位置输入即可配置精准的颜色;

3

b. 可直接使用的零件

背景图、图标、边框图、动图、可作为标题的文字图形。

工程师做的图册可能是这样的

4

设计师“装修”后的图册是这样的

5

可问题是,我们往往没有设计师。

第3章 基于模板构建

由于面向大量的项目支持,SaCa DataViz积累了大量的图册模板,SaCa DataViz支持基于模板直接构建图册。新建图册即可弹出模板选择页面,默认是空的模板,

6

直接基于选中的图册模板,更换图表、文字等,图册就可以快速变得高大上起来。看下图,拖拽“图表”到任意布局区域进行替换即可完成图册的制作。

7

目前产品内置的模板样式有这些。

8

如果这里没有适合我的业务主题,或者Boss中意的风格怎么办?自己动手!

第4章 自由发挥,人人都是设计师

我们希望人人都是分析师,设计师,SaCa DataViz给你足够的发挥空间。 下面通过一个制作过程引申出SaCa DataViz的使用技巧,教你玩转SaCa DataViz。

4.1 我们拥有一个简陋的图册

9

4.2 布局的调整

根据用户和场景,划分主次信息。

这里我们的用户是卫计委,他们关注的是管辖区域的宏观指标,各个区域的人口指标是核心,地图及数值kpi需重点表现。 看一下调整后的布局。

10

使用自适应布局功能,在各个编辑区域之间拖拽图表、拖拽区域边界位置实现上图布局,突出地图与KPI的核心地位。

4.3 自由块的运用

调整布局过程中还使用了自由块布局,自由块是一种悬浮在自适应布局之上的一种布局组件,自由块能够打破自适应布局在单一平面调整的局限,支持多层级叠加以及图层排序。

4.2中使用KPI结合富文本,嵌入自由块悬浮在地图区域,看一下使用过程。

4.3.1 创建自由块

11

先拖拽一个自由块到编辑区域。

12

4.3.2 添加资源

自由块支持除标题以外任意类型资源的添加,当然也不包括自由块、边框。在4.2中我们添加了富文本资源。将富文本组件拖拽到自由块中。

13

然后编辑富文本,这里用到了 ${[KPI图表名称]}$ 表达式引入了KPI。

14

另外使用图片组件结合自由块,为每个KPI或标题前添加图标作为标识。使用精心搭配的图标,可以提升图册的精致感。

15

上图对各图表的边距属性做了微调,一般经验是图表不要靠近边缘,稀松优于密集。对于这种位置的调整也可以考虑结合自由块实现,更加自由。

4.3.3 自由块复制

这里用到了多个相同大小的自由块,怎么快速得到大小一致的自由块呢? 选中第一个自由块,CTRL+C复制,CTRL+V粘贴即可得到一摸一样的复制品。。

16

4.3.4 自由块对齐、微调

如何对齐呢?按住CTRL键,依次单击三个自由块进行圈选。

17

选中顶部工具栏的对齐方式,这里选右对齐,就可得到上图右的效果。

18

间距还有些差距,选中后可以使用键盘的方向键微调。

过程中如果有任何操作失误,可以使用CTRL+Z撤销。

4.4 边框的运用

边框是一种与自由块类似的资源,用于修饰图册内的元素。

19

系统内置了15种边框样式。

20

这里我们选择15号黑色半透明边框,类似磨砂效果衬在KPI富文本背后。

这里属性勾选交互穿透,否则会阻挡图表的交互事件,当然富文本并没有什么交互。

并且因为自由块及边框是有上下叠加关系的,需要在图层栏设置边框置于底层。

21

效果是这样的。

22

4.5 属性的调整

在图册里可以直接调整图表属性,这里的属性是图表自身属性的复制品,独立于图表。

图册中选中某一个图表,右侧展开内容设置可即时调整图表样式。

23

对于Echarts类型的图表,产品有选择的暴露部分属性,如何希望添加原生属性可使用详细属性设置功能进行编辑。

24

需要注意的是,属性的语法结构参考Echarts3,并且这里不支持回调函数。

在这一步骤,使用属性中页面背景图片选项,给图表加上半透明背景图。

25

当然你也可以打开图册设置中的显示边框线,在主题中实现类似的效果。具体的,配色方案

自定义主题中调整内容背景色,当然也可以尝试调整其他样式。

26

4.6 为图册修改主题

根据不同的业务主题选择合适的页面配色,这个工作在图册设置的配色方案中完成。

27

28

29

这里强调一下,主题配色分为3类,不同图表类型会绑定某一种配色类型。比如饼图使用分类色、热力图使用序列色。这里渐变色比较特殊,仅用于美化柱图的效果。

配色调整效果见图

30

主题配色师全局的,部分图表可能不希望跟随图册主题,在图表内容设置中勾选保持图表主题即可。富文本的配色可以跟随主题、也可以独立设置。

4.7 为图册添加背景

合适的背景图能够为图册效果带来质的变化,我们使用图册设置下的页面背景图片进行添加。

31

4.8 美化前后效果对比

优化前

32

优化后

33

大师就是这么诞生的,你是工程师,数据分析师,设计师,XXX师。

第5章 大量产品特性等待你的挖掘

下面是期待您超越的作品

34

35

36

37

38

39

38

39

如果有好的作品,希望你能分享给SaCa DataViz团队!我们会加入产品DEMO。

可将项目导出zip包,发邮件给l-rui@neusoft.com。

results matching ""

    No results matching ""