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

我是社区第229182位番薯,欢迎点我头像关注我哦~
在上一篇【在线组件库升级】中,通过组件复用,我们轻松完成了四张决策报表的开发并分享给了各位~


1.png


但是,仍有很多朋友被“组件效果很不错,应用到模板整体效果就变得一般”这一问题困扰。
所以这次,小编带着模板美化两大技巧:精准选择复用组件+合理规划组件布局应声而来!!

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

2.png

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

>>>前期规划

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

3.png


2.复用组件☆☆☆

在完成内容梳理后,如何根据规划的风格和展示形式,精准有效的挑选组件并合理排布,亟待解决~
提示:组件复用功能应用需提前安装组件复用插件:【组件复用插件下载】

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

4.png


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

51.png

5.png


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

61.png

6.png



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

71.png

72.png


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

8.png

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

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

决策报表的布局规划需要结合两个角度:数据分析维度和视觉效果维度。列举一些常用技巧给各位参考:

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

ii.视觉效果
(1)占据面积较大、具有动态效果的组件一般居中放置;两侧及下方多为各类图表。
(2)指标卡形式一般放置在左右两侧的上方位置;
(3)“圆形”图表,如:雷达图、饼图等,多放置于两侧居中位置;
(4)系列较少的"横向展开图表",如:折线图、柱形图,多放置于两侧的下方位置;
(5)系列较多的“横向展开图表”或“横向占面积较大”的条形图,多放置于地图下方;

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

9.png

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

>>>开发实施

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

10.png


1.数据准备:

11.png

2.组件布局:

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

  • 技巧1:默认的决策报表尺寸为960*540,本次三列内容布局的尺寸可以大致保持横向3:5:3纵向1:1:1的比例关系。(根据设备分辨率的区别,实际body大小会进行一定比例的缩放)
  • 技巧2:各个组件之间应该保持一定间距(通常间距大小横向10-15纵向5-8即可),整体组件的左右和下方也要保持一定的留白,间距大小可参考组件间距。

拖拽.jpg


3.替换数据源
   按照组件介绍进行配置,效果更好还不容易走弯路哦~
  • 技巧3:利用“单元格元素”进行数据替换,会更有利于我们与原数据设置保持一致;
  • 技巧4:单元格有特殊颜色“三角标”时,往往有特定的设置需注意: 如“绿色左上三角标–单元格形态”等,详见:单元格标识说明
  • 技巧5:替换数据源会对图表的“标签”、“数据点提示”等产生影响,需在此步骤进行配置;

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

蝴蝶.gif

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

半玫瑰.gif

4.组件效果优化

(1)首次预览:通过前几个步骤的铺垫与准备,驾驶舱的开发已基本完成。预览后可以看到,只需要简单修改组件的标题内容即可。
重要提示:本次引用的部分组件,标题需“使用html解析文本内容”;并在修改标题内容后去掉标题前的“=”以实现效果哦!!  

16.png


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


成果.gif


如果各位看了这套流程,也觉得操作简单、跃跃欲试的话!

那就快快来参与社区内【组件复用】两招搞定精美驾驶舱 活动投稿吧~上传个人开发成果,即可获得10-20F币的奖励。


      在线组件库也在稳定上新,本周推出了“深色系”组件20余种。
    “浅色系“组件也在紧锣密鼓的筹备中,会在下周和大家见面~


ps:

编辑于 2021-6-23 11:28  

发表于 2021-6-24 09:55:19
打卡效果图如下
发表于 2021-6-24 17:09:41
打卡效果图如下
发表于 2021-6-26 19:14:07
效果图如下


360截图20210626191143901.jpg


发表于 2021-6-27 20:46:30
打卡效果:
发表于 2021-6-28 16:38:00
人力资源驾驶舱
发表于 2021-7-1 17:13:32
打卡效果:
发表于 2021-7-2 16:50:49
人资分析驾驶舱
发表于 2021-7-3 14:29:02

打卡如图


编辑于 2021-7-3 14:30  
发表于 2021-7-3 14:31:38
打卡效果图如下

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

15回帖数 12关注人数 7340浏览人数
最后回复于:2021-7-3 14:31

返回顶部 返回列表