社区
主页 > 社区 >

这些大屏可视化设计知识点你知道多少?

发布日期:2021-11-15 12:22   来源:未知   阅读:

  真正的大屏其实包含很多东西,简单的理解就是一些复杂、抽象的数据通过可视的简单理解的方式展示出来,更加形象的表达内在的信息与规律,让数据更高效、更容易懂。更容易懂很多数据的含义。但这要研究其中的数据的需求以及逻辑。根据本人的一些理解帮助大家更好的了解大数据可视化的设计。

  大屏的展示都是基于业务的需求,不是简单的排数据,展示数据。所有的大屏都是基于业务这一基础上展示。

  明确,大屏都是基于业务。数据的展示给相关人员全局的了解数据带来的价值从而达到增效。如果脱离了这一诉求,展示的数据就一无所用。

  知道了业务需求,我们才能帮助相关人员真正意义上的解决问题。才能更好的确定知道,知道数据要如何展示。

  我们知道大屏很大,大到设计者不知道都不知道让人怎么看,胡乱设计的大屏不能帮助相关人员解决问题。所以设计大屏的时候我们要把握好方向,定好框架,展示内容要有主次之分,使用者才有聚焦点。才知道那些是核心数据,那些是辅助数据。那些是要进入二三级界面。这都是需要设计者好好斟酌。

  知道业主的诉求,将业主的诉求提炼成指标,比如,在停车监控系统中,业主想知道停车的时长、空车的数量、外部来的车辆有多少、车辆都停在哪里、哪里有违停等,可以提炼出指标:停车场空位数、外来车辆数、内部车辆数、车辆区域热力图、车辆违停数、热点停车区域、热点违停区域等。提炼了这些指标我们就能大概知道大屏需要显示哪些内容,屏幕会分为哪几块。

  粒度讲白了就是用比较好的维度讲解指标,很多产品小伙伴整理完关键指标之后无法准确的表明自己的意图,同时不能给业主展示他们想要的数据,展示的图形让迷惑或者云里雾里,很大原因就是维度把握不准确或者指标定义不明确(如何更好运用图形可以看3.2)。

  量大屏不是真正意义上去尺子量,而是要提前知道电脑的分辨率,很多大屏由于面积过大,所以需要需要多个电脑或者信号源进行适配,设计的分辨率很容易不满足实际场景,展示效果也不好,单纯靠标准的大屏设计很可能不满足现场需求,所以设计前了解物理大屏宽比、大屏的整体分辨率很重要。

  P后面那个数字越小,代表两个灯珠之间的距离越小,清晰度越高,相对应,价格也会高,因为每平方的像素点P3比P4多很多,成像效果好。

  点间距P3(3mm)的显示屏,它的最佳可视距离是3.5~10米,点间距P4(4mm)的显示屏,它的最佳可视距离是5~13.5米。可以根据自己的实际情况,选择最适合的型号。

  拼接的每块小屏一般是16:9的高清屏,设计尺寸可以把上下高度设定为1080px,长度按照拼接屏的数量比例得出长度的设计尺寸。例如3乘5的一块大屏幕,高度3块屏设为1080,每块高就是360,360除9乘16等640,640就是一块屏幕的长度,640乘5块屏=3200最后得出设计稿尺寸就是:高1080px乘宽3200px

  现在企业常用的有无缝隙、1.7mm缝隙、3.5mm缝隙、三种拼接大屏,缝隙越小越贵。

  另外大屏设计还有一个比较重要的问题就是注意拼接屏之间的缝隙,设计时千万不能跨屏设计,不然很影响美观。

  目前企业用的最多的控制端为ipad控制,需要在ipad上制作出控制端页面,一般尺寸为2048*1536,控制端大多数为按钮操作,页面尽量简单明了。

  提到图表,大家脑海里浮现的,通常是柱状图、饼图、趋势图等等,没有把握数据的关联性经常会导致图表的误用。

  图表的作用,是帮助我们更好地看懂数据。选择什么图表,需要回答的首要问题是『我有什么数据,需要用图表做什么』,而不是 『图表长成什么样』 。因此我们从数据出发,从功能角度对图表进行分类。找出指标里的数据主要集中在什么范围、有啥关联性、两者之间有啥差异、表现出怎样的规律等。

  不同颜色、不同搭配,给与观看者不一样的感受,大屏色彩的搭配很有讲究,也有一定规律,大屏一般是主打科技炫酷的,多以深蓝色的主调,各个背景、统计图等多用深色,让界面更有科技感,一下子就被吸引。(ps:更多风格设计可以百度下情绪板的学习,本文就不多讲解)

  设计布局设置,要显示关键的指标信息,展示主次,让使用者能过直观理解数据背后的意义。市面常见的布局:

  ui设计调优分为两步,第一是确定可视化的酷炫效果,大屏的硬件配置有着很大不同,如果硬件配置不够的情况下要求酷炫的效果可能造成卡顿甚至崩溃的情况,这是需要提前沟通的。

  第二步是,是要与UI不断的试稿,沟通,不断的修改沟通,定好布局、图表、关键元素、结构。不断的重复试错,尝试修改,很多时候,设计出来的投放到大屏的效果不好,所以不断沟通确认是很重要的。很多时候开发出来的DEMO需要反复调优。

  前端的话很多前端无法用样式写出动效、,一般需要设计人员提供切图。例如边框、图表等,设计人员要给于切图。才能让开发进行设计调优。

  设计处理需要把原始数据进行处理,将杂乱无章的数据处理成有价值的数据,这需要数据处理人员的介入。数据处理的逻辑如下:

  对于拉升/压缩。一般情况下,前端只需要对设计稿还原就好,可以预先配置 meta 避免自动缩放拉伸。较多采用用rem布局。也有可能是视频扩展器问题,在实际调优的情况下了解压缩比例,然后矫正。

  色彩问题是因为投放过程中会存在色差,要将在设计稿中不断的在大屏上进行投放,了解实际与设计的差异,才能解决。

  分辨率问题,我们要知道大屏投放要经过4个分辨率,从显卡到矩阵、到大屏设计分辨率、到实际分辨率。尽量做到设计稿的与实际的物理比例一致,在电脑的播放的比例与大屏一致。

  散点图在直角坐标系上以点的形式显示了两个变量。点的位置由变量的值确定。通过观察数据点的分布,我们可以推断出变量之间的相关性。

  气泡图是多元图表,是散点图的变体。除了由X轴和Y轴表示的变量的值外,每个气泡的面积代表第三个值。

  数据可视化大屏设计中的仪表是一种实体化图表。标尺代表度量,指针代表尺寸,指针角度代表值。它可以直观地表示指标的进度或实际情况。

  雷达图用于比较多个量化变量,例如查看哪些变量具有相似的值,或者是否存在极限值。它们还有助于观察数据集中哪些变量具有较高或较低的值。雷达图适用于演示工作绩效。

  雷达图还具有堆积的柱形样式,可用于分类和系列之间的双向比较,同时还代表比例。

  树状图是一种以树状结构形式显示层次结构的直观方法,可以清楚地显示层次结构的关系。

  矩形树形图适合于呈现具有层次关系的数据,可以直观地反映相同级别之间的比较。与传统的树形结构图相比,矩形树形图更加有效地利用了空间,并具有显示比例的功能。

  矩形树图适用于显示具有权重关系的层次结构。如果不需要反映比例,则框架图可能更清晰。

  词云是文本数据的直观表示。它是由词汇组成的云状彩色图形。它用于显示大量文本数据,并可以快速帮助用户感知最突出的文本。

  词云图需要大量数据,数据的鉴别度比较大,否则效果不明显。而且它不适合进行准确的分析。

  甘特图直观地显示了任务的时间安排,实际进度以及与需求的比较。因此,管理人员可以轻松地了解任务(项目)的进度。

  点的分布使你很容易掌握数据的整体分布,但是当你需要观察单个特定数据时,它不适合使用。

  但是,如果用气泡替换该点,则该点地图不仅可以显示分布,而且可以粗略地比较每个区域中数据的大小。

  流向图显示流出区域和流入区域之间的交互数据。通常用连接空间要素的几何重心的线表示。线条的宽度或颜色表示流量值。

  热图用于指示地理区域中每个点的权重。除了将地图作为背景图层之外,你还可以使用其他图像。热图中的颜色通常是指密度。

  你提到的确是现在的发展方向,我写的文章是针对业务来源的大屏,现在越来越多公司在制定可视化编辑大屏产品,这个是Saas产品,目前市场也有很多厂商在做,数字冰雹、华为、亿信等。这个设计的重点是大屏内容的组件化,将各个展示图表提炼起来,然后自定义数据,以及数据的配置,这衍生了数据模型设计,数据填报接口、数据处理、指标管理等一系列产品功能,接着绑定设计好的可视化设计组件,以拖拉形式布置界面。如果想深入了解,不妨加个微信持续讨论。

  听到很多言论说在中国程序员是吃青春饭的,那么产品经理呢,也吃青春饭吗?

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立9年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。澳门开奖现场直播结果