新知一下
海量新知
6 6 1 8 8 6 8

「驾驶舱美化窍门」学会这2招,不用设计师,一样做出精美驾驶舱!

帆软软件有限公司 | 领先的数据分析与商业智能提供商 2021/06/22 20:00

新知达人, 「驾驶舱美化窍门」学会这2招,不用设计师,一样做出精美驾驶舱!

但是,仍有很多朋友被“组件效果很不错,应用到模板整体效果就变得一般”这一问题困扰。

所以这次,小编带着 模板美化 两大技巧:精准选择复用组件+合理规划组件布局 应声而来!!

针对应用组件复用来开发决策报表,主要涵盖了两个主要流程:

新知达人, 「驾驶舱美化窍门」学会这2招,不用设计师,一样做出精美驾驶舱!

ps:本期示例模板及应用组件可在文末免费下载

1

前期规划

1.场景规划

本次示例预设场景为:人资分析驾驶舱;风格为:浅色-简约清新风;所要展示指标及展示形式如下:

新知达人, 「驾驶舱美化窍门」学会这2招,不用设计师,一样做出精美驾驶舱!

2.复用组件

在完成内容梳理后,如何根据规划的风格和展示形式,精准有效的挑选组件并合理排布,亟待解决~

提示:组件复用功能应用需提前安装组件复用插件: 点击下载组件复用插件

大招一:精准选择复用组件

选择直观效果有明显区别的组件 如:蝴蝶图替代“指标卡+条形图”,将纵向轴标签置于中心,体现对称美感;条形图以图片填充替代则效果更丰富美观。

新知达人, 「驾驶舱美化窍门」学会这2招,不用设计师,一样做出精美驾驶舱!

图表类型不变,注意细节样式优化。 如:渐变堆积柱形图在普通柱形图的基础上做了系列色渐变的优化;双轴面积图替代折线图,将两个系列的面积图在纵向上做出明显划分。

新知达人, 「驾驶舱美化窍门」学会这2招,不用设计师,一样做出精美驾驶舱!

合理替换图表类型,选择特殊图表替代普通图表。 如:以堆积柱形雷达图替代柱形图,将横向展示改为环形展示,避免多列柱形图造成视觉效果单调;以半玫瑰图替代饼图,在保证分析占比功能同时将重点数据突出显示。

新知达人, 「驾驶舱美化窍门」学会这2招,不用设计师,一样做出精美驾驶舱!

动静结合,才是有活力的决策报表。 如:用流向地图替代普通点地图,加入动态效果,避免使用者对于静态数据产生视觉疲劳;提示轮播,免去鼠标移动的动作,自动显示数据提示。

新知达人, 「驾驶舱美化窍门」学会这2招,不用设计师,一样做出精美驾驶舱!

注意视觉平衡,避免整体过于单调或繁琐。 如:上述图表的选择都是在效果上做加法,那么为保证整体平衡,可以选择简约的虚线标题,降低直观效果的复杂程度。

新知达人, 「驾驶舱美化窍门」学会这2招,不用设计师,一样做出精美驾驶舱!

至此,我们完成了组件的选择,各位在实际选择组件的过程中,可以参考上述建议美化自己的决策报表。

大招二:合理规划组件布局

决策报表的布局规划需要结合两个角度:数据分析维度和视觉效果维度。

列举一些常用技巧给各位参考:

i.数据分析—根据实际业务场景规划

核心业务指标作为整张决策报表的重心内容,可以放置于中心位置; 次要指标以核心指标为中心分布四周,同时考虑常规分析习惯,根据指标类型、关联关系及重要程度依次排布。

ii.视觉效果

  • 占据面积较大、具有动态效果的组件一般居中放置;两侧及下方多为各类图表

  • 指标卡形式一般放置在左右两侧的上方位置

  • “圆形”图表,如: 雷达图、饼图等; 多放置于两侧居中位置

  • 系列较少的"横向展开图表",如: 折线图、柱形图,多放置于两侧的下方位置

  • 系列较多的“横向展开图表”或“横向占面积较大”的条形图,多放置于地图下方

参考上述内容,我们很容易将选择的组件进行如下的排布:

新知达人, 「驾驶舱美化窍门」学会这2招,不用设计师,一样做出精美驾驶舱!

除本次示例布局之外,还可参考 可视化指南-驾驶舱布局 寻找更多布局思路。

2

开发实施

在前期规划内容完成之后,我们便可以着手正式开发,主要步骤如下:

新知达人, 「驾驶舱美化窍门」学会这2招,不用设计师,一样做出精美驾驶舱!

1.数据准备

新知达人, 「驾驶舱美化窍门」学会这2招,不用设计师,一样做出精美驾驶舱!

2.组件布局

根据实际场景,将body的布局方式调整为“绝对布局-适应区域”,背景色设置为:#F1F4F8;

新知达人, 「驾驶舱美化窍门」学会这2招,不用设计师,一样做出精美驾驶舱!

将挑选好的组件,根据规划布局依次拖拽至决策报表body的大致位置,进行布局、尺寸调整。

技巧1: 默认的决策报表尺寸为960*540,本次三列内容布局的尺寸可以大致保持横向3:5:3,纵向1:1:1的比例关系。(根据设备分辨率的区别,实际body大小会进行一定比例的缩放)

技巧2: 各个组件之间应该保持一定间距(通常间距大小横向10-15,纵向5-8即可),整体组件的左右和下方也要保持一定的留白,间距大小可参考组件间距。

新知达人, 「驾驶舱美化窍门」学会这2招,不用设计师,一样做出精美驾驶舱!

3.替换数据源

重要提示: 在进行数据源替换前,注意先仔细阅读帮助设置中的组件介绍。插件应用、图表特殊设定等相关信息,都会完整体现在组件介绍中, 按照组件介绍进行配置,效果更好还不容易走弯路哦~

技巧3: 利用“单元格元素”进行数据替换,会更有利于我们与原数据设置保持一致

技巧4: 单元格有特殊颜色“三角标”时,往往有特定的设置需注意:如“绿色左上三角标–单元格形态”等,详见: 单元格标识说明

技巧5: 替换数据源会对图表的“标签”、“数据点提示”等产生影响,需在此步骤进行配置;

示例1:蝴蝶图-数据源替换及单元格进度条最大值修改:

新知达人, 「驾驶舱美化窍门」学会这2招,不用设计师,一样做出精美驾驶舱!

示例2:半玫瑰图-图例条件属性修改:

新知达人, 「驾驶舱美化窍门」学会这2招,不用设计师,一样做出精美驾驶舱!

4.组件效果优化

(1)首次预览:通过前几个步骤的铺垫与准备,驾驶舱的开发已基本完成。预览后可以看到,只需要简单修改组件的标题内容即可。

重要提示: 本次引用的部分组件,标题需“ 使用html解析文本内容 ”;并在修改标题内容后 去掉标题前的“=” 以实现效果哦!!

新知达人, 「驾驶舱美化窍门」学会这2招,不用设计师,一样做出精美驾驶舱!

(2)完成标题内容优化,一张精美的驾驶舱通过组件复用就轻松完成啦!

新知达人, 「驾驶舱美化窍门」学会这2招,不用设计师,一样做出精美驾驶舱!

更多“驾驶舱”相关内容

更多“驾驶舱”相关内容

新知精选

更多新知精选