|
麦田守望者：小麦！收到任务需要制作一个仪表盘，有什么快速制作精美的仪表盘的绝技吗？
小麦：嗨，这还不简单，根据下面6步来制作，轻松搞定一个精美的仪表盘！
小麦：第一步先确定展示内容，根据业务分析，确定展示的指标（主次辅）、分析维度、图标类型等。就像下图这样，提前规划好要展示的内容。
麦田守望者：明白了，那我们下一步就要根据这个选择合适的布局了吧。
小麦：不是哦，第二步应该是进行画布的选择。因为如果是需要在移动端展示的情况下，需要选择手机的画布，如果不是手机端展示，选择PC画布就可以啦。
麦田守望者：
小麦：那么接下来就是第三步-插入调整布局，交互仪表盘中提供设计库资源，内置风格一致的布局与套件（经过设计的图表组件、交互组件、边框素材等），可搭配使用快速搭建仪表盘，且整体效果较为美观。
麦田守望者：那真的太方便了！不过小麦，在平时我们做仪表盘的时候，还经常遇到一些难受的事情，比如：
- 插入图片组件作为仪表盘背景，总是不小心点击到背景图片组件，导致这个组件浮上来，遮住了其他组件，必须点击画布外才可以取消。
- 移动柱图，一不小心移动了柱图下的边框或者柱图上的表土组件，又得撤销。
小麦：理解，我们也考虑到了在仪表盘中的逻辑是选择的组件在视觉上会浮动到最顶层，导致同一位置的其他组件被该组件遮挡，为避免此类误操作，可将对应组件进行“锁定”，锁定后的组件不可选中，即可减少误触。
同时，作为背景的边框、图片、以及作为标题的标签、图片组件等，也可以设置“锁定”，并且锁定后的组件不可通过鼠标移动位置，且不影响标签、文本组件的内容编辑，那就不会出现上面说的问题啦。
麦田守望者：get！那接下来是不是就该选组件了？
小麦：别着急哈，接下来还要做一些微调。模板终究只是模板，不可能百分百适配要展示是组件数量，那么在这个场景下，可以对布局进行微调。使得布局符合仪表盘所需展示的组件的数量、位置和业务逻辑。一是推荐在“列”上下功夫。
举例：原本的布局可以放两个组件，通过添加套件中的标题+边框组件或者调整原本的边框高度使得放下3个组件。
添加调整前：
添加调整后：
小麦：二是若当选中“组合”进行宽度高度调整，“组合”中的所有组件的宽度高度都会跟着变化，这样有可能会导致“标题文字”、“标题背景图片”等都随之变形。如下图：
有两种处理方案：
- 鼠标左键双击，选中“组合”中的“边框”组件进行宽度高度调整，可保证不影响“组合”中的其他组件——优点：操作步骤少；缺点：较难以区分选中的是组合还是组件，如下图：
- “取消组合”，调整后再次组合——优点：可明确选中的组件；缺点：操作步骤多。
小麦：三是进行组件的对齐、分布和匹配大小，相关逻辑如下：
小麦：可以看到这里有这些对齐方式，以左对齐为例。左对齐是以选中的最左侧的组件为基准，因此需要先调整其余组件确保其位置在基准组件的右侧，再进行左对齐操作。
对齐后：
小麦：水平居中对齐适合标题与边框的对齐。
小麦：垂直居中对齐适合图标、指标卡与边框的对齐。
小麦：中心对齐适合指标卡与边框的对齐。
小麦：接下来是组件的分布，分为水平平均分布和垂直平均分布。
水平平均分布设置后：
小麦：可以看到是在选中的组件范围内进行最大水平宽度的水平居中，以此类推，垂直平均分布就是在选择组件范围内的最大垂直宽度内进行垂直平均分布。最后是匹配大小，分为等高、等宽、等宽高、自定义。
等宽设置后：
小麦：可以看到对选中范围内的组件进行等宽操作，那么会以其中最大的组件宽度进行全部组件的等宽操作。以此类推：
- 等高就是以选中组件范围中最大的组件高度进行全部组件的等高操作；
- 等宽高就是分别以选中组件范围内最大的组件宽度和组件高度进行全部组件的等宽、等高操作；
- 最后的自定义就是可以对选中的所有组件进行相同的高度、宽度设置。
麦田守望者：那接下来就是该填充内容了吧。
小麦：没错！第四步-内容的填充。现在我们已经调整好了布局并且前面也规划好了要展示的内容，那么接下来我们就直接在设计库中选择相应的组件就行了，接下来我们看下不同指标数量下的常见组合布局，主要就是并排、并列、矩阵、波浪以及主从结构。
小麦：在选择组件的时候也有一些技巧，比如说，颜色样式求同存异：在设计库中，一个套件的组件都是经过设计可以搭配协调的。与此同时单个组件类型，一般也至少有2种样式者2种颜色的效果。
在选择设计库组件时，推荐根据仪表盘中已添加的组件错开选择不同样式、不同颜色的组件，方不显得单调呆板。
小麦：还可以适当挑选动效组件。设计库中的部分组件具有一定的动态效果，可针对重要的数据，挑选1-2个动效组件，可提高整个仪表盘的观感。如果设计库中的组件不满足，可在分析展现->分析报表->system-> 组件模板Demo->“XX套件”-> UI规范 中报表中查看具体的UI规范自行实现组件哦。
麦田守望者：对爱DIY的我来说太赞啦！
小麦：我们回归正题，毕竟选的是模板组件，那么这里面的数据需要进行替换。将所有组件添加完之后，建议先使用工具栏上的“替换数据来源”替换数据模型后，再针对每个组件单独勾选正确的字段。
麦田守望者：好的，那确实是能够快速制作一个精美的仪表盘啦。
小麦：是的，到这里就展示的就差不多完成了，但是我们还是根据实际业务场景添加一些交互的效果。第五步-交互设计。除去简单的筛选器筛选，我们还可以做组件的联动、下钻和跳转等。具体的实现步骤可以参考对应的帮助文档：交互设计，这里就不过多阐述啦。
麦田守望者：这也太棒了吧！那现在是做完了吧？
小麦：到这里进行最后一步-进行细节的微调 就搞好啦！
调整类型 |
具体细节 |
边框/组件对齐 |
|
布局块之间需要有足够的边框/装饰 |
|
有没有留白
|
- 仪表盘四周是否有足够的留白
- 边框与边框之间是否有足够的留白
- 图表组件与边框之间是否有足够的留白
- 文字与边框之间是否有足够的留白
|
风格色调统一 |
- 检查所选的组件样式、色调是否协调不突兀
- 边框组件直角/圆角统一
|
字体 |
- 仪表盘全部字体是否一致
- 字体大小是否合适
- 不同级别的文字字号是否有区别，如一次标题文字、二级标题文字、指标文字、图表文字
|
浏览态工具栏是否隐藏
|
- 筛选器、文本、标签、tab、页签等组件浏览器工具栏是默认隐藏的，需要考虑仪表盘中其他组件类型是否需要显示浏览态工具栏并进行调整，尤其是指标看板组件。浏览态工具栏可查看组件的筛选条件、进行重置操作等。
- 若仪表盘是大屏类型那么建议可隐藏浏览态工具栏，若仪表盘是分析看板，一般会涉及操作，如切换参数、联动重置等，则不建议隐藏浏览态工具栏。
|
如下面的例子：
麦田守望者：还是小麦心细，太赞了！不过，我还有最后一个问题，就是比如说我自己有一些其它的素材，但是这个好像不能直接导入外部的素材，只能每次想使用时，再进行上传，有没有什么方式可以让我对这些进行复用呢？
小麦：好问题，这个我们虽然不能直接导入外部素材，但是可以对我们已经创建保存的仪表盘资源进行复用的。
在设计库下面还有一个资源的选项，里面打开可以已经创建好的仪表盘，以及对于仪表盘里面的组件，可以组件拖拽整个仪表盘也可以只拖拽里面的单个组件。再替换数据来源，那这样就实现的资源的复用了。
麦田守望者：真是太赞了！
小麦：按照这6个步骤来开发，就可以快速完成好看又高级的仪表盘啦！
【有奖互动】亲爱的数据达人们，我们诚挚邀请您做精美仪表盘的技巧，精彩回复将获得惊喜麦豆奖励！让我们一起来探讨这个数据分析中的经典话题吧！
| 
开森~
