当前位置:网站首页>可视化大屏丑?这篇文章教你如何做美观大屏!
可视化大屏丑?这篇文章教你如何做美观大屏!
2022-08-04 15:40:00 【思迈特Smartbi】
为什么做的可视化大屏非常丑?主要原因有:
- 画面凌乱:画面乱,信息杂,排版丑
- 颜色搭配丑:颜色无规律,视觉色彩差
- 画面没有科技感:画面仿佛图标拼凑,没有科技感
下面我们演示如何使用Smartbi交互仪表盘实现一个美观的可视化大屏:
一、大屏布局
先准备好数据,然后根据数据确定数据分类重点指标等,接着确定出需要展现的数据类型及图表,最后根据人眼视觉习惯,选择主次辅分明的布局。
主:主要业务指标占较大面积;
次:次要指标通常使用各类图表来展示,位于边侧;
辅:辅助决策分析的内容,主要通过交互效果来延展展示;
常用的布局具体可以分为常规布局、繁星布局、右下分割、均等布局等。这个示例我们选择常规布局。
创建Smartbi大屏可视化,在编辑界面拖入对应的图表组件,然后根据需要关联数据。接着进行布局设置,布局调整时要注意布局间距、对齐和留白等。
二、重点信息进行突出设计
对图表的样式及细节进行调整,以达到最佳的图表观看体验。此过程主要调整图表的内部及组成,以使每个组件看起来像是一个整体)
三、大屏配色优化
选背景:可视化大屏一般背景深色对视觉观看效果最佳,首先选定一种颜色的背景。
换颜色:对画面图表等元素进行色彩优化
以色相、饱和度、明度为基础,通过色环上颜色选取并拓展,我们可以得到互补色、邻近色、三角对比色、分裂互补取色方案;同时还要注意一些配色的技巧,比如页面中不要使用太多的颜色、少用渐变色、色彩温和、对比明显、颜色搭配要注意一致性等;此外,Smartbi推荐几组颜色,可供用户选择应用:
四、对画面进行点缀
接下来对画面的组件进行点缀。我们在组件设置中对画面中的顶部标题背景,以及各个组件的边框添加一些炫酷的元素进行点缀。之后再对元素色彩进行微调。这样,就完成了大屏视觉部分了。
背景图和点缀的元素可在Smartbi官网直接下载使用(如想下载点击这里)
边栏推荐
- 招募 | 香港理工大学Georg Kranz 博士诚招博士
- Unity AR阴影投射透明地面 仅渲染模型实时阴影 Shader实现
- 2022年7月国产数据库大事记-墨天轮
- What is the difference between member variable and local variable
- OGG判断mgr状态并自动启动脚本
- 分布式链路追踪Jaeger + 微服务Pig在Rainbond上的实践分享
- 74行代码实现浪漫的红心下落的动画效果
- Go 言 Go 语,一文看懂 Go 语言文件操作
- How to monitor code cyclomatic complexity by refactoring indicators
- 功率放大器的设计要点
猜你喜欢
"Research Report on the Development of Global Unicorn Enterprises in the First Half of 2022" released - DEMO WORLD World Innovation Summit ended successfully
如何优雅的消除系统重复代码?
06-总线
2022 Hangzhou Electric Multi-School 4
附加:自定义注解(参数校验注解);(写的不好,别看…)
界面组件DevExpress ASP.NET Core v22.1 - 增强数据导出功能
全球电子产品需求放缓,三星手机越南工厂每周只需要干 3~4 天
Task Computing【动态规划_牛客】
(2022杭电多校五)C - Slipper (dijkstra+虚拟结点)
录音文件识别
随机推荐
Codeforces Round #811 A~F
What is the difference between member variable and local variable
攻防视角下,初创企业安全实战经验分享
Summary of some pytorch knowledge points that have been updated for a long time
Pulsar消费者处理不当导致的消息积压问题
明明加了唯一索引,为什么还是产生重复数据?
实战:10 种实现延迟任务的方法,附代码!
Go 事,如何成为一个Gopher ,并在7天找到 Go 语言相关工作,第1篇
7 天学个Go,Go 结构体 + Go range 来学学
07-输入输出系统
ICDE‘22推荐系统论文之Research篇
【伸手党福利】投影仪初学者入门——投影亮度及幕布选择——从入门到精通
软件性能测试包括哪些内容?国内权威软件检测机构排名
视频字幕API接口文档
AIX7.1安装Oracle11g补丁33829709(PSU+OJVM)
Typora收费?搭建VS Code MarkDown写作环境
界面组件DevExpress ASP.NET Core v22.1 - 增强数据导出功能
重构指标之如何监控代码圈复杂度
GPS satellite synchronization clock, NTP network synchronization clock, Beidou clock server (Jingzhun)
What are the useful IT asset management platforms?