找回密码
 立即注册

QQ登录

只需一步,快速开始

James.Lv 讲师达人认证 悬赏达人认证 活字格认证 Wyn认证

超级版主

223

主题

2652

帖子

5897

积分

超级版主

Rank: 8Rank: 8

积分
5897

活字格认证活字格高级认证Wyn高级认证Wyn认证微信认证勋章讲师达人元老葡萄悬赏达人

James.Lv 讲师达人认证 悬赏达人认证 活字格认证 Wyn认证
超级版主   /  发表于:2020-2-25 18:48  /   查看:3775  /  回复:0
本帖最后由 Eden.Sun 于 2023-1-5 18:45 编辑

在仪表板设计过程中,为了使我们设计的可视化大屏更加美观,更加酷炫,经常需要增加多个装饰性元素,对整个可视化大屏的外观进行美化。例如可视化大屏增加的背景颜色,背景动画效果,可视化元素增加边框,增加背景图片等等。
image.png387685241.png
本贴主要介绍可视化大屏外观美化的一些技巧,帮助大家可以设计出更加酷炫美观的数据可视化大屏。

image.png943653869.png image.png486026610.png

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

具体设计技巧:
1.全局设置背景主题,背景图片,以及添加背景动画效果
点击全局设置,可以设置主题风格,也可以设置个性化的背景图片,如下图所示:
image.png589624938.png
通过背景图片,还可以添加GIF图增加背景动画效果,也可以添加一个全屏大小的扩展插件,作为底图增加动画效果。
添加GIF背景图
背景.gif
添加扩展插件实现动态背景,拖动扩展插件到设计器,然后进行编辑,利用html+css来实现背景的动画效果。

image.png298830565.png 2.gif

2.标题设置,灵活利用文本框,图片,容器,扩展插件等元素设置个性化酷炫的大屏标题。

可以选择图片,文本框或者容器作为底部装饰,选择该组件的背景图片进行替换,作为标题的背景装饰,文字边框等等。
image.png890993652.png
然后可以采用文本框,编写标题文字,根据风格选择字体颜色,大小等等。
image.png620743712.png
同样也可以选择采用扩展插件通过html和css实现动画文字标题。
1.gif

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

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

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




0 个回复

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