登录/注册

首页 › Wyn 商业智能专区 › 产品教程 › 查看内容

223 主题	2652 帖子	5897 积分

Rank: 8 Rank: 8

积分: 5897

34223
金币
223
主题
2652
帖子

最新发帖

【仪表板-外观美化】仪表板设计技巧-可视化大屏的外观美化技巧

讲师达人认证

悬赏达人认证

活字格认证

Wyn认证

超级版主 / 发表于：2020-2-25 18:48 / 查看：3776 / 回复：0

本帖最后由 Eden.Sun 于 2023-1-5 18:45 编辑

在仪表板设计过程中，为了使我们设计的可视化大屏更加美观，更加酷炫，经常需要增加多个装饰性元素，对整个可视化大屏的外观进行美化。例如可视化大屏增加的背景颜色，背景动画效果，可视化元素增加边框，增加背景图片等等。
image.png387685241.png

image.png387685241.png

本贴主要介绍可视化大屏外观美化的一些技巧，帮助大家可以设计出更加酷炫美观的数据可视化大屏。

image.png943653869.png

image.png943653869.png

image.png486026610.png

重点：灵活运用多种可视化元素组件进行组合，实现个性化酷炫的外观设计。

具体设计技巧：
1.全局设置背景主题，背景图片，以及添加背景动画效果。
点击全局设置，可以设置主题风格，也可以设置个性化的背景图片，如下图所示：
image.png589624938.png

image.png589624938.png

通过背景图片，还可以添加GIF图增加背景动画效果，也可以添加一个全屏大小的扩展插件，作为底图增加动画效果。
添加GIF背景图
背景.gif

背景.gif

添加扩展插件实现动态背景，拖动扩展插件到设计器，然后进行编辑，利用html+css来实现背景的动画效果。
image.png298830565.png

image.png298830565.png

2.标题设置，灵活利用文本框，图片，容器，扩展插件等元素设置个性化酷炫的大屏标题。
可以选择图片，文本框或者容器作为底部装饰，选择该组件的背景图片进行替换，作为标题的背景装饰，文字边框等等。
image.png890993652.png

image.png890993652.png

然后可以采用文本框，编写标题文字，根据风格选择字体颜色，大小等等。
image.png620743712.png

image.png620743712.png

同样也可以选择采用扩展插件通过html和css实现动画文字标题。

3.可视化组件可以设置属性背景图片增加背景装饰，背景动画，也可以灵活组合多种组件，实现更灵活，更丰富的背景装饰。
给可视化组件设置背景图片属性增加背景装饰。
image.png277409972.png

image.png277409972.png

也可以跟标题同样思路选择多种可视化元素进行组合。
image.png61632994.png

image.png61632994.png

总的来说，可视化大屏的外观美化技巧就是要灵活利用多种可视化元素进行排列组合，相信大家都可以设计出酷炫的可视化大屏。

收藏

回复

0 个回复