《大屏可视化数据》该怎么设计?
前言:数据可视化是什么?可视化数据有哪些主要特征?为什么要使用大屏展示可视化数据?数据可视化是综合运用计算机图形学、图像、人机交互等,将采集、清洗、转换、处理过的符合标准和规范的数据映射为可识别的图形、图像、动画甚至视频,并允许用户与数据可视化进行交互和分析。使用数据可视化可以丰富内容,引人注意,调动人的情绪、引发人的共鸣,传递文化和价值。可视化数据的最主要目三个特征:新颖而有趣、充实而高效、美感且悦。以大屏作为可视化数据的主要载体,其原因在于面积大、可展示信息多、便于关键信息的共享讨论及决策,在观感上给人留下震撼印象,便于营造氛围、打造仪式感等,目前常用的场景有:数据展示、监控预警、数据分析。
一、 如何选择信息图示的分类?
数据可视化处理流程是:【数据采集】- 【数据清理】- 【数据分析】- 【可视化数据】。
1. 数据采集需要基于业务展示需求,即“你想要展示什么?”如:实时数据指标、对比类型数据指标、统计类型数据指标等从相关的业务层面提取重要的数据,用于大屏数据的展示。
2. 数据清理则要对数据进行归类处理,明确数据之间的关系,存在“比较型”、“构成型”、“联系型”、“分布型”。
3. 数据分析根据归类处理后的数据,并结合从维度的划分:“一维数据”、“二维数据”、“三维数据”、“多维数据”、“时态数据”、“层次数据”等,将强关联性的数据进行组合重构,得到全新的数据信息关系;
4. 可视化数据,根据重构后的数据信息关系,选择对应的可适用数表信息图,如:条形图、柱状图、雷达图、折线图、正态分布图、散点图、实时3d渲染地图等;可参考下图选择对应的数表信息。
注:下图源于文章《Visual Business Intelligence》,作者Stephen Few
二、 屏幕分辨率有哪些注意事项?
为了最优化展示效果,首先需要了解物理大屏长款比,确定设计稿的尺寸;其次我们需要清楚大屏系统的内在原理:【信号源】--->【大屏拼接器】--->【播放控制设备】,一般情况下设计稿的分辨率多为1920px*1080px(即电脑的分辨率)。同时,我们还需要理解以下四个概念:“大屏逻辑分辨率(设计稿尺寸)”、“显卡输出分辨率”、“视频矩阵切换器( DVI )支持分辨率”、“大屏实际物理分辨率”。
最佳展示效果:
大屏逻辑分辨率(设计稿尺寸)长宽比 = 大屏实际物理分辨率长宽比
大屏逻辑分辨率(设计稿尺寸)长宽比 = 显卡输出分辨率长宽比
显卡输出分辨率 = 视频矩阵切换器( DVI )支持分辨率 = 大屏实际物理分辨率
目前作为监控大屏,由于监控数量的庞大,常常被划分为总屏和分屏。总屏多用于展示事件状态趋势、风险预警、风险处理进展;分屏则多用于展示详细的数据分析和风险事件的处理。如何排布数据都需要紧密结合业务需求和用户体验。
三、 数据的排版布局有哪些规律?
在确定了设计稿的尺寸后,需要对页面布局和划分,对于数据的排布划分我们的重要原则:主次分明、条理清晰、注意留白。根据业务需求抽取关键性的指标,按照重要程度可分为【主】、【次】、【辅】。
1. 主:主要指标多位于屏幕正中央,可添加适当的动效增强视觉效果;
2. 次:次要指标多位于屏幕的两次,较多表现为各类图表;
3. 辅:辅助信息多为主要指标的补充信息,常伴随交互效果或动效下呈现,可展现亦可不展现;
在大屏的排版布局上,需要遵循四大原则(CRAP):
1. 对比(Contrast):完全不同的数据类型,选择截然不同信息图示。
2. 重复(Repetition):相同类型或相似数据,选用尽可能相同的展示。
3. 对齐(Alignment):利用对齐方式保证信息图示之间的视觉联系。
4. 亲密性(Proximity):相关的数据项组织在一起,视觉上呈现出一体化。
四、 如何选择配色方案?
可视化大屏的配色是视觉呈现的重要组成要素,配色常常与行业类型、业务形态、应用场景、设计理念、营造氛围等紧密相关。配色方案的选择有以下几点建议:
1. 色彩明度与饱和度差异显著、对比鲜明, 尽量避免使用邻近色配色;
2. 仿造自然的配色;
3. 使用深色暗色作为背景可减少拼缝带来的不适感。由于背景面积大,使用暗色背景还能够减少屏幕色差对整体表现的影响;同时暗色背景更能聚焦视觉,也方便突出内容;
4. 适当使用渐变色,由于大屏普遍存在色域偏差,更建议多使用纯色;
五、 可视化数据的字体有哪些考虑?
可视化大屏的设计过程中,优先使用系统默认字体,如有特殊需要嵌入字体时,需考虑字体的可识别性、设计风格融合度、是否可免费商用(※※※)。
一般来讲一套字体文件包含了阿拉伯文、符号、拉丁文、日文、西里尔文、希腊文、拼音、注音符号等多种字符,对于大屏这个明确的场景,我们可以删掉其它使用不到的字符,仅保留中文、拼音和数字。减小字体包的大小,可以优化页面加载体验,避免在替换默认字体的过程中出现页面文字跳动等现象。
推荐字体包括:AVENIR NEXT、HELVETICA NEUE、SEGOE UI、ACENS、DIN、DIGITAL-7等。
六、 动效添加的作用?
由于可视化数据允许用户与数据可视化进行交互,在数据展示过程中,可以适当添加动效、插入视频,提升整体的视觉效果。由于大屏展示的许多数据都是实时变化的,为了减少数据变化刷新时的突然性,动效设计必不可少。在整个动效设计的过程中,除过场动画、数据的变化外,动效还肩负起增添空间感、平衡画面和整合信息的作用。
但是在增加动效的同时,需考虑服务器的承载量。避免在增加动效后喧宾夺主,因此对动效要做适当的取舍。
七、 可视化辅助工具有哪些?
在设计的过程中,我们可以大量参考相关平台的可视化数据图表样式,大多数平台的图表样式都是基于代码实现的。在设计的阶段详细参考,有利于降低开发成本,有利于提升可视化数据大屏的可拓展性,便于后期的迭代管理。
可视化辅助工具可分为:【可视化工具库】、【原生开发】、【第三方服务】
八、 如何保证展示的品质?
可视化数据的视觉设计是一个不断迭代的过程,同时大屏的设计与常规的设计有较大的区别。与大屏【沟通】是比较重要也是个特殊的环节。大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境,很多问题只有设计稿投到大屏上才能够被发现,因此在样图沟通确认、开发出 demo,都需要反复测试多次,不断的迭代与精进。
在完成视觉稿的设计之后,【如何提升整体视觉的还原度】成为我们设计与前端沟通的重要内容。大屏的本质实际是一个web页面,切图与标注,成为还原度的重要组成因素。
作者:慕斯小姐姐
原文链接:https://www.zcool.com.cn/article/ZOTM1NDA4.html
转载于:https://www.cnblogs.com/telwanggs/p/10971431.html
《大屏可视化数据》该怎么设计?相关推荐
- html页面数字滚动,Vue.js大屏可视化数据数字滚动翻转跳转效果(通俗易懂附完整代码)...
原文:Vue.js大屏可视化数据数字滚动翻转跳转效果(通俗易懂附完整代码) 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果 ...
- 大屏可视化数据面板分格渐变进度条、数字翻牌器及其刷新动效实现
数据可视化大屏是当前可视化领域的一项热门应用,通常可以分为信息展示类.数据分析类及监控预警类.这类应用的视觉设计通常效果炫酷,动效丰富,有时候一些页面布局和动画实现会对前端人员有一定的挑战性,在这里分 ...
- 数据可视化UI设计素材资源文件sketch大屏可视化数据展示
数据是企业的上帝之眼,数据可视化就发挥了很大的作用.很多从事B端产品设计的小伙伴在日常工作中遇到数据可视化的场景比较多,也得益于PSD素材较多,所以用的设计工具大多是Photoshop,但Photos ...
- 数据可视化UI设计素材资源文件psd大屏可视化数据展示Photoshop设计文件
大数据时代,基于大量数据进行有效的分析和挖掘,建立可视化大屏展示,提供震撼的效果让用户读懂数据,了解数据背后的价值.近几年该类应用场景越来越广泛,软件开发和设计中可视化展示放在越来越重要的位置,在此分 ...
- 大屏数据可视化源码_AxureBI数据大屏可视化原型设计软件
产品名称:70套BI数据大屏可视化Axure RP原型设计软件 软件版本: Axure 8,Axure 9(兼容) 作品类型: BI数据大屏可视化Axure原型 文件类型: .rp (可通过 Axur ...
- VS code实现前后端交互及大屏可视化(Flask+Mysql+Echarts+HTML+JS+CSS)
@阿乐今天敲代码没 前言 最近老师留了大屏可视化作业,老师讲的模棱两可,在网上又找不到详细的教程,想必好多萌新都跟我一样苦恼,所以在这里记录下,实验工具为VS code.先贴一下我的实验结果图吧,虽然 ...
- echarts 大屏可视化_看似复杂炫酷的数据可视化设计,用这波神器轻松搞定!
数据大屏与数据可视化 数据可视化是目前对数据展示最常用的方式.数据的可视化设计有助于将复杂的数据,用最易理解的方式展示在用户的面前. 数据可视化在中后台的设计中很常见,通常主要用于分析和决策,对实时性 ...
- 基于Vue的数据可视化设计框架,数据大屏可视化编辑器
开发文档(★★★★★) 请访问 https://lizhensheng.github.io/vue-data-view/ 完整代码下载地址:基于Vue的数据可视化设计框架,数据大屏可视化编辑器 简介 ...
- B端大屏可视化设计参考网站分享、大数据可视化设计
B端大屏可视化设计参考网站分享.大数据可视化设计 大屏可视化参考网站: 1. 易知微 https://easyv.cloud/market 浅色风格的大屏可视化可以参考此网站的设计 2. 数字像素(原 ...
最新文章
- 数学等于号是=那三个横杠是什么符
- rpm包管理功能全解
- ECharts简单入门demo
- Exchange 2007迁移2010后部分手机邮箱不能使用解决办法
- java缓存怎么用_java开发应该如何缓存?
- The C Programming Language--可变参数的函数
- 关闭笔记本显示器指定组合键才能打开_八大品牌笔记本Fn组合键大全
- Eclipse Web开发出现莫名其妙错误
- 11.string容器
- 第4章 最基础的分类算法-k近邻算法 kNN 学习笔记 下
- 兄弟连新版PHP视频教程(共346讲)
- utc时间 单位换算_utc时间(utc时间转换北京时间)
- 芝加哥顶级英语写作指南:Style Toward clarity and grace
- Kindle、epub 、azw3修改行间距
- 电脑桌面不见了怎么办?只能调出任务管理器!
- 接口性能测试方案 白皮书 V1.0
- (编程语言界的丐帮 C#).NET MD5 HASH 哈希 加密 与JAVA 互通
- 面试时,没有谈薪资,叫回去等通知,还有机会吗
- 常用的数据资源网(免费)
- python绘制蟒蛇
热门文章
- linux grub error 22,Linux系統grub常見錯誤問題解決
- android手机分享app,Android Pie如何快捷分享文件至特定App
- (42)根据时钟关系分类时钟
- (23)FPGA锁存器与缓冲器的区别
- (04)Verilog HDL模块仿真激励
- (23)FPGA面试题常用逻辑电平
- (5)FPGA面试技能提升篇(SDK开发环境)
- window中搭建jenkins_为容器化的 Go 程序搭建 CI
- ieee期刊的科技写作思路曹文平_科技论文写作与发表教程(第六版)
- ESP8266:(2)获取时间和天气