可视化大屏设计尺寸_大屏数据可视化设计规律
大家好久不见,最近一直都在忙着做大屏的项目,所以很久没有来更新文章。
今天小编为大家总结了大屏数据可视化的设计规律,有兴趣的朋友都应该了解一下,以便后期遇到问题的时候不知道怎么运用。
正文如下:
一、基础概念
数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。但是,这并不就意味着数据可视化就一定因为要实现其功能用途而令人感到枯燥乏味,或者是为了看上去绚丽多彩而显得极端复杂。为了有效地传达思想概念,美学形式与功能需要齐头并进,通过直观地传达关键的方面与特征,从而实现对于相当稀疏而又复杂的数据集的深入洞察。
大屏数据可视化同样是以数据为载体。“大的面积、酷的动效、绚的色彩”为基本,给人们留下相对震撼的印象。
由于大屏的利用面积大,展示信息突出的特点,所以大致分为信息展示、数据分析及监控预警三类。
二、设计原则
使用场景、项目光线、屏幕情况是要先考虑的一步,如此才能深入到下一步,根据场景的整体情况,灯光对屏幕的影响比较大,关系到最终呈现效果,蓝色环境背景色,来决定设计的色调、纯度和亮度。
视觉感受需求:
数据可视化在目标用户眼中大致归为:“动”字,页面数字、饼图、折线图、柱状图……数据就应该是动的,这样才可以表示“数据可视化”的基本需求。
但设计师需要考虑的是为了避免观众焦点迷失,通过对比来强调主次关系,先把核心数据展现在用户眼前,在逐步将二、三级标题展示,部分数据也可以在沟通后选择性隐藏。
三、设计流程
规范设计流程是每次设计任务的重点,如果自己没有经验,可找一个参考流程,逐一对比,重要的是找准方向,然后步步为营,可避免不必要的返工,保证设计质量和项目计划进度。
1. 研究定位
每个产品都有属于自己的“标签”,设计师要表达其特点,写真写实的手法还原用户想要的效果。所以设计师下足功课满足用户的心里需求是第一步也是最重要的一步。
2. 根据业务提取关键词
“我们想要xxx的效果,您看下怎么设计会炫一点?”
脑爆一般,设计师的脑子里应该有一个完整的结构体系,迸出相关系列的关键词,提取出关键词的关键词进行摘录和标记,防止其他信息干扰。
3. 规定模板
模板一般指根据成型风格进行颜色确定、文字排放位置确定、如果客户提供自己的交互原型,也可对原型图参考。模板初步确定后,大的视觉导向便有了,在进行下一步初步稿会顺手一些。
在选定图标的时候需要注意:易懂、易实现;
易懂指的是可视化数据最终考虑的还是用户,应该一看便明白,不需要理解和思考的过程,选择图形时需要理性对待,避免为了视觉的效果选择一些对用户不太友好的图形。
易实现指的是考虑到开发是否能够实现。一般可视化效果开发是可以用代码实现,效果接近视觉稿,但设计师用Ps/Ai/Ae这些工具时会出现视觉偏差,所以与开发的沟通是比较重要的,需要明确哪些设计可以尽情发挥和适可而止,不钻牛角尖。
4. 进行初步稿设计
初步稿的设计会相对繁琐,每个客户对都自己的产品有一定见解和想法,也许你的设计稿会经过“驳驳驳回-初步确定”的过程,其实这个时候客户的基本预计设计师应该已经掌握。
5. 页面布局划分
初步稿确定后,会根据固有的页面进行主次划分,主要根据的是业务指标,核心业务放中间,占比面积较大,其余按照优先级在核心业务周围分布展开。一般将有管理的业务、图标相近的业务放一起,减少人们认知负担并提高信息有效传递性。
6. 风格确定
布局确定后,接下来的每版设计会在与业务和开发的沟通下逐步完善和精致起来,避免一下子走到终点,然后大的修改。
7. 所有设计稿完成输出
“沟通”是一个比较重要的环节,这也是我认为大屏和其他设计不同的地方。大屏有自己的特点、属性、结构、分辨率、屏幕组成、色彩显示、运行和展示环境,往往只有在真实的测试环境才可以找到问题,在开发出测试后需要反复的测试才能达到最终的成果,这是大屏本身拥有的魅力。
8. 提交开发、切图
页面开发阶段并不是到设计接近尾声的时候才开始,实际上后台的数据准备工作在定义好业务指标后就已经在开始进行了,提交给前端开发之后,后台会将数据返回到前段,用设计样式呈现。
切图:哪些元素需要切图?
一般用代码写不出的复杂样式需要设计师提供样式:比如数据边框、页面整体背景、小元素、部分图标。按正常网页设计标准切就可以。
9. 沟通视觉还原测试
这部分是开发完后,将真实的场景投到测试环境后,有无需要调整,主要分为两个方面:视觉方面和性能数据方面。
视觉方面:字体字号、视觉元素、页面动效、图形图表、间隔、行距是否错位、变形。
性能数据方面:页面加载的时候是否有卡顿现象:图形元素的属性是否有异常;后台是否能正常切换到前端页面。
四、注意事项
1.常用字体有哪些
DIN、ACENS、DIGITAL-7
2.合适的颜色搭配有哪些
浏览网页的时候大家都会注意到颜色的划分,大概蓝、紫、红、绿会多一些。
3.1920*1080的尺寸投放到其他屏幕上会不会出现模糊和变形
大屏逻辑分辨率(设计稿尺寸)——显卡输出分辨率——视频矩阵切换器(DVI)支持分辨率——大屏实际物理分辨率。
一般后两个是没问题的,大屏跟矩阵切换器是由大屏厂商提供,一般刚好配套大屏。
4.切图一般切几倍
1倍哈~
5.开发完后,发现有变形的情况应该如何补救
可以先找到拉伸的比例,然后对照比例去调整自己的图片。
6.出了开发自带的可视化效果,还有哪些第三方浏览器可供参考
E charts、highcharts去找常用数据图
阿里云DataV、腾讯云图、百度Sugar去查看可完善的。
五、总结
数据可视化一门强大的、科学的系统,可能我的总结还不够完善,互通有无,欢迎大家来投稿。
可视化大屏设计尺寸_大屏数据可视化设计规律相关推荐
- 可视化大屏设计尺寸_大屏可视化设计尺寸高级指南
原标题:大屏可视化设计尺寸高级指南 大屏可视化的设计尺寸定义,一直是很多设计师苦恼的一件事,很多时候大屏出现的问题,都是因为对设计尺寸没有一个正确的认识导致.比如大屏内容呈现不全.拉伸.压缩.字号小的 ...
- 可视化大屏设计尺寸_可视化大屏设计_酷炫不是最高效的大屏展示的唯一标准...
目前市面上有众多做大屏的可视化BI工具,有的部分企业为了要实现其功能效果而令人感到枯燥乏味,或者是为了看上去绚丽多彩而显得极端复杂,从而实现对于相当复杂而又冗余数据的深入分析,让企业决策者难以理解数据 ...
- 可视化大屏设计尺寸_数据可视化怎么确定大屏的设计尺寸?
谢邀,我们设计的可视化大屏通常可以分为两类:一类是拼接屏,由46-55寸的液晶显示屏拼接而成,有一定的缝隙: 一类是LED屏无缝隙,是由成千上万个LED灯构成像素点,发光像素点之间的距离是LED显示屏 ...
- 康拓普:大屏、VR、网页…..数据可视化有哪些应用场景?
科技改变生活,也在改变我们看世界的视角.数据可视化技术的飞速发展,未来人们将借助VR.全息投影看到大数据背后更立体的影像,用手用眼睛去感知数据.数据不再是存储在电脑硬盘中冰冷的数字,而是活色生香的生动 ...
- 【Dash搭建可视化网站】项目10:疫情数据可视化大屏制作步骤详解
疫情数据可视化大屏制作步骤详解 1 项目效果图 2 项目架构 3 文件介绍和功能完善 3.1 assets文件夹介绍 3.2 app.py和index.py文件完善 3.3 header.py文件完善 ...
- 监管大屏系统_『Udesk数据大屏』独家上线,对客户服务监管一目了然·一览无遗。...
数据大屏是企业沟通与交流的有效途径之一,当前,大屏已经成为一种新型媒体,他可以帮助企业进行品牌宣传.实力展示.商业交流.数据监控等重要的作用.像天猫双11活动中,阿里的双11大屏让人印象深刻,该大屏不 ...
- android大屏适配_大屏开创者三星Note系列,也要被更大屏的折叠屏手机取代了
临近年关,各个手机厂商们的旗舰产品也都发布的差不多了,发布会数量也在逐渐减少,紧随而来的就是一年一度的手机曝光大赛了,关于明年旗舰产品的信息也开始逐渐浮出水面. 其中一条关于三星旗舰的曝光信息则比较特 ...
- 医疗大数据处理流程_我们需要数据来大规模改善医疗流程
医疗大数据处理流程 Note: the fictitious examples and diagrams are for illustrative purposes ONLY. They are ma ...
- 2022年10大让人惊艳的数据可视化工具,BAT和字节都在用
目录 究竟什么是数据可视化? 10大数据可视化工具 1. Tableau 2. Dundas BI 3. Jupyter 4. Zoho Reports 5. Google Charts 6. Vis ...
- 大数据资源整合分析平台_企业大数据管理软件_大数据资源整合管理系统
在现如今大数据时代下,很多公司拥有大量的数据信息,这些数据繁多并且复杂,对于不懂技术的人员来讲,无疑是巨大的难题,这些数据背后存在着巨大的价值,我们可以利用大数据的方式,来提高数据的使用率,便可以挖掘 ...
最新文章
- 程序员的自我修养--链接、装载与库笔记:运行库
- 动态数组 allocator
- Spring MVC 中 HandlerInterceptorAdapter的使用--转载
- 笔记-信息化与系统集成技术-人工智能基础知识
- Ubuntu18.04安装Scala
- Wireshark数据分析IP
- Flutter ClipOval 圆形裁剪实现的图形图片
- 可靠信道传输2.0 2.1 3.0
- 学编程不如学自动化?
- Nginx中常用的指令配置详解
- 全国车辆限行限号数据接口服务评测
- CodeSmith激活教程
- 国际贸易基础(一)找客户
- KIS专业版-即时库存查询自定义开发
- 线性代数----逆矩阵的性质和求法
- android 读取 json 字符串文件遇到的一个坑 W/art: Suspending all threads took: xx.xxx ms
- OkHttp3源码详解(四)缓存策略,万分膜拜
- 七牛云完整详细配置(从零到一)
- 关于物联网的误区,你有没有中招?
- deepin改无盘服务器,UbuntuDeepin系统上搭建nfs服务器